Number Stepper

1"use client";
2
3import { useState } from "react";
4
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/card";
12import {
13  NumberStepper,
14  type NumberStepperMotionPreset,
15} from "@/registry/ui/number-stepper";
16
17type ExampleId = "snappy" | "smooth" | "slow" | "bouncy";
18
19const examples: Array<{
20  id: ExampleId;
21  title: string;
22  description: string;
23  preset: NumberStepperMotionPreset;
24}> = [
25  {
26    id: "snappy",
27    title: "Snappy tilt",
28    description: "Fast number transitions with directional rotation.",
29    preset: "snappy",
30  },
31  {
32    id: "smooth",
33    title: "Smooth lift",
34    description: "A balanced transition with a subtle raised surface.",
35    preset: "smooth",
36  },
37  {
38    id: "slow",
39    title: "Slow stretch",
40    description: "Longer transitions with horizontal deformation.",
41    preset: "slow",
42  },
43  {
44    id: "bouncy",
45    title: "Bouncy glow",
46    description: "A stronger spring with a drag-state glow.",
47    preset: "bouncy",
48  },
49];
50
51export function NumberStepperExamples() {
52  const [values, setValues] = useState<Record<ExampleId, number>>({
53    snappy: 2,
54    smooth: 4,
55    slow: 6,
56    bouncy: 8,
57  });
58
59  return (
60    <div className="grid gap-6 md:grid-cols-2">
61      {examples.map((example) => (
62        <Card key={example.id}>
63          <CardHeader>
64            <CardTitle className="text-base">{example.title}</CardTitle>
65
66            <CardDescription>{example.description}</CardDescription>
67          </CardHeader>
68
69          <CardContent>
70            <NumberStepper
71              value={values[example.id]}
72              onValueChange={(nextValue) => {
73                setValues((current) => ({
74                  ...current,
75                  [example.id]: nextValue,
76                }));
77              }}
78              min={0}
79              max={10}
80              motionPreset={example.preset}
81              label="Quantity"
82              description="Use the buttons, keyboard, or drag the value."
83            />
84          </CardContent>
85        </Card>
86      ))}
87    </div>
88  );
89}