QuantityStepper

import * as React from "react";
const quantityStepperFixture = {
  id: "quantity-stepper",
  value: 2,
  min: 1,
  max: 9,
  label: "Quantity",
} satisfies {
  id: string;
  value: number;
  min: number;
  max: number;
  label: string;
};
 
import { QuantityStepper } from "@grassroot/ui-react";
 
export default function QuantityStepperDemo() {
  const [qty, setQty] = React.useState(quantityStepperFixture.value);
  return (
    <div>
      <QuantityStepper
        value={qty}
        onChange={setQty}
        min={quantityStepperFixture.min}
        max={quantityStepperFixture.max}
        label={quantityStepperFixture.label}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const quantityStepperFixture = {
  id: "quantity-stepper",
  value: 2,
  min: 1,
  max: 9,
  label: "Quantity",
} satisfies {
  id: string;
  value: number;
  min: number;
  max: number;
  label: string;
};
 
import { QuantityStepper } from "@grassroot/ui-vue";
 
const qty = ref(quantityStepperFixture.value);
</script>
 
<template>
  <div>
    <QuantityStepper
      v-model="qty"
      :min="quantityStepperFixture.min"
      :max="quantityStepperFixture.max"
      :label="quantityStepperFixture.label"
    />
  </div>
</template>

import { Component, signal } from "@angular/core";
const quantityStepperFixture = {
  id: "quantity-stepper",
  value: 2,
  min: 1,
  max: 9,
  label: "Quantity",
} satisfies {
  id: string;
  value: number;
  min: number;
  max: number;
  label: string;
};
 
import { GrassrootQuantityStepper } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-quantity-stepper-demo",
  standalone: true,
  imports: [GrassrootQuantityStepper],
  template: `
    <div>
      <grassroot-quantity-stepper
        [value]="qty()"
        (valueChange)="qty.set($event)"
        [min]="fixture.min"
        [max]="fixture.max"
        [label]="fixture.label"
      />
    </div>
  `,
})
export class QuantityStepperDemoComponent {
  protected readonly fixture = quantityStepperFixture;
  readonly qty = signal(quantityStepperFixture.value);
}
 
export default QuantityStepperDemoComponent;

<script lang="ts">
  import { QuantityStepper } from "@grassroot/ui-svelte";
  const quantityStepperFixture = {
    id: "quantity-stepper",
    value: 2,
    min: 1,
    max: 9,
    label: "Quantity",
  } satisfies {
    id: string;
    value: number;
    min: number;
    max: number;
    label: string;
  };
 
  let qty = $state(quantityStepperFixture.value);
</script>
 
<div>
  <QuantityStepper
    value={qty}
    onChange={(next) => (qty = next)}
    min={quantityStepperFixture.min}
    max={quantityStepperFixture.max}
    label={quantityStepperFixture.label}
  />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
const quantityStepperFixture = {
  id: "quantity-stepper",
  value: 2,
  min: 1,
  max: 9,
  label: "Quantity",
} satisfies {
  id: string;
  value: number;
  min: number;
  max: number;
  label: string;
};
 
import { QuantityStepper } from "@grassroot/ui-solid";
 
export default function QuantityStepperDemo() {
  const [qty, setQty] = createSignal(quantityStepperFixture.value);
 
  return (
    <div>
      <QuantityStepper
        value={qty()}
        onChange={setQty}
        min={quantityStepperFixture.min}
        max={quantityStepperFixture.max}
        label={quantityStepperFixture.label}
      />
    </div>
  );
}