Number Input

1import { NumberInput, NumberInputGroup, NumberInputDecrement, NumberInputIncrement } from "@/components/ui/number-input";
2
3<NumberInput />

1"use client";
2
3import {
4  NumberInput as ArkNumberInput,
5  useNumberInputContext,
6} from "@ark-ui/react/number-input";
7import { MinusIcon, PlusIcon } from "lucide-react";
8import type React from "react";
9import { cn } from "@/lib/utils";
10import { Button } from "@/registry/react/components/button";
11import { FieldLabel } from "@/registry/react/components/field";
12import { Input, type InputProps } from "@/registry/react/components/input";
13
14export const useNumberInput = useNumberInputContext;
15
16interface NumberInputProps
17  extends React.ComponentProps<typeof ArkNumberInput.Root>,
18    Pick<InputProps, "size"> {}
19
20export const NumberInput = (props: NumberInputProps) => {
21  const { size = "md", className, ...rest } = props;
22
23  return (
24    <ArkNumberInput.Root
25      className={cn(
26        "group/number-field flex w-full flex-col items-start gap-2",
27        "has-data-[slot=number-field-increment]:has-data-[slot=number-field-decrement]:**:data-[slot=number-field-input]:text-center",
28        className