Number Field

1"use client";
2 
3import "./number-field.css";
4import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { NumberFieldContext, useNumberFieldContext } from "./number-field.context";
9import { numberFieldVariants, type NumberFieldVariants } from "./number-field.variants";
10 
11export type NumberFieldProps = NumberFieldVariants &
12  React.ComponentProps<typeof BaseNumberField.Root>;
13 
14export const NumberFieldRoot = ({ children, className, size, ...props }: NumberFieldProps) => {
15  const slots = numberFieldVariants({ size });
16 
17  return (
18    <NumberFieldContext.Provider value={{ slots }}>
19      <BaseNumberField.Root className={cn(slots.root(), className)} {...props}>
20        {children}
21      </BaseNumberField.Root>
22    </NumberFieldContext.Provider>
23  );
24};
25 
26export type NumberFieldGroupProps = React.ComponentProps<typeof BaseNumberField.Group>;
27 
28export const NumberFieldGroup = ({ className, ...props }: NumberFieldGroupProps) => {
29  const { slots } = useNumberFieldContext();
30  return <BaseNumberField.Group className={cn(slots.group(), className)} {...props} />;
31};
32 
33export type NumberFieldInputProps = React.ComponentProps<typeof BaseNumberField.Input>;
34 
35export const NumberFieldInput = ({
36  className,
37  children: _children,
38  dangerouslySetInnerHTML: _dangerouslySetInnerHTML,
39  ...props
40}: NumberFieldInputProps & { children?: React.ReactNode; dangerouslySetInnerHTML?: any }) => {
41  const { slots } = useNumberFieldContext();
42  return <BaseNumberField.Input className={cn(slots.input(), className)} {...props} />;
43};
44 
45export type NumberFieldDecrementProps = React.ComponentProps<typeof BaseNumberField.Decrement>;
46 
47export const NumberFieldDecrement = ({
48  children,
49  className,
50  ...props
51}: NumberFieldDecrementProps) => {
52  const { slots } = useNumberFieldContext();
53  return (
54    <BaseNumberField.Decrement className={cn(slots.decrement(), className)} {...props}>
55      {children ?? (
56        <svg className="h-3.5 w-3.5 stroke-current" fill="none" strokeWidth="2" viewBox="0 0 24 24">
57          <path d="M5 12h14" />
58        </svg>
59      )}
60    </BaseNumberField.Decrement>
61  );
62};
63 
64export type NumberFieldIncrementProps = React.ComponentProps<typeof BaseNumberField.Increment>;
65 
66export const NumberFieldIncrement = ({
67  children,
68  className,
69  ...props
70}: NumberFieldIncrementProps) => {
71  const { slots } = useNumberFieldContext();
72  return (
73// … truncated