NumberStepper

import NumberStepper from "@/components/ui/NumberStepper";

export default function Page() {
  return (
    <NumberStepper className="w-50" />
  )
}

import NumberStepper from "@/components/ui/NumberStepper";

export default function Page() {
  return (
    <div className="flex items-center gap-4">
      <NumberStepper size="sm" />
      <NumberStepper size="md" />
      <NumberStepper size="lg" />
    </div>
  )
}

import NumberStepper from "@/components/ui/NumberStepper";
import { IconTemperature } from '@tabler/icons-react';

export default function Page() {
  return (
    <div className="flex gap-4">
      <NumberStepper className="w-50" prefix="$" />
      <NumberStepper className="w-50" prefix={<IconTemperature className="ml-1.5" size={16} />} />
    </div>
  )
}

import NumberStepper from "@/components/ui/NumberStepper";

export default function Page() {
  return (
    <NumberStepper disabled className="w-50" />
  )
}

import NumberStepper from "@/components/ui/NumberStepper";

export default function Page() {
  return (
    <NumberStepper className="w-50" defaultValue={1} min={1} max={10} />
  )
}

import NumberStepper from "@/components/ui/NumberStepper";

export default function Page() {
  return (
    <NumberStepper className="w-50" step={2} />
  )
}