Stepper

"use client"

import * as React from "react"

import { Stepper } from "@/components/ui/stepper"

export default function StepperDemo() {
  const [copies, setCopies] = React.useState(1)

  return (
    <div className="flex items-center gap-3">
      <Stepper
        aria-label="Copies"
        value={copies}
        onValueChange={setCopies}
        min={1}
        max={10}
      />
      <span className="text-sm text-muted-foreground">
        {copies} {copies === 1 ? "copy" : "copies"}
      </span>
    </div>
  )
}

"use client"

import * as React from "react"

import { Stepper } from "@/components/ui/stepper"

export default function StepperMinMax() {
  const [quantity, setQuantity] = React.useState(2)

  return (
    <div className="w-full max-w-sm">
      <div className="flex items-center justify-between gap-3">
        <span className="text-sm text-muted-foreground">Min 0</span>
        <Stepper
          aria-label="Quantity"
          value={quantity}
          onValueChange={setQuantity}
          min={0}
          max={5}
        />
        <span className="text-sm text-muted-foreground">Max 5</span>
      </div>
    </div>
  )
}