DBHub

"use client"; import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"; import { MinusIcon, PlusIcon } from "lucide-react"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Label } from "@/components/ui/label"; const NumberFieldContext = React.createContext<{ fieldId: string; } | null>(null); function NumberField({ id, className, size = "default", ...props }: NumberFieldPrimitive.Root.Props & { size?: "sm" | "default" | "lg"; }) { const generatedId = React.useId(); const fieldId = id ?? generatedId; return ( <NumberFieldContext.Provider value={{ fieldId }}> <NumberFieldPrimitive.Root className={cn("flex w-full flex-col items-start gap-2", className)} data-size={size} data-slot="number-field" id={fieldId} {...props} /> </NumberFieldContext.Provider> ); } function NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props) { return ( <NumberFieldPrimitive.Group className={cn( "relative flex w-full justify-between rounded-lg border border-input bg-background bg-clip-padding text-base shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-aria-invalid:border-destructive/36 focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/48 data-disabled:pointer-events-none data-disabled:opacity-64 sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:has-aria-invalid:ring-destructive/24 dark:not-data-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [[data-disabled],:focus-within,[aria-invalid]]:shadow-none", className, )} data-slot="number-field-group" {...props} /> ); } function NumberFieldDecrement({ className, ...props }: NumberFieldPrimitive.Decrement.Props) { return ( <NumberFieldPrimitive.Decrement className={cn( "relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className, )} data-slot="number-field-decrement" {...props} > <MinusIcon /> </NumberFieldPrimitive.Decrement> ); } function NumberFieldIncrement({ className, ...props }: NumberFieldPrimitive.Increment.Props) { return ( <NumberFieldPrimitive.Increment className={cn( "relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className, )} data-slot="number-field-increment" {...props} > <PlusIcon /> </NumberFieldPrimitive.Increment> ); } function NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props) { return ( <NumberFieldPrimitive.Input className={cn( "h-8.5 in-data-[size=lg]:h-9.5 in-data-[size=sm]:h-7.5 w-full min-w-0 grow bg-transparent in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] text-center tabular-nums in-data-[size=lg]:leading-9.5 in-data-[size=sm]:leading-7.5 leading-8.5 outline-none sm:h-7.5 sm:in-data-[size=lg]:h-8.5 sm:in-data-[size=sm]:h-6.5 sm:in-data-[size=lg]:leading-8.5 sm:in-data-[size=sm]:leading-8.5 sm:leading-7.5", className, )} data-slot="number-field-input" {...props} /> ); } function NumberFieldScrubArea({ className, label, ...props }: NumberFieldPrimitive.ScrubArea.Props & { label: string; }) { const context = React.useContext(NumberFieldContext); if (!context) { throw new Error( "NumberFieldScrubArea must be used within a NumberField component for accessibility.", ); } return ( <NumberFieldPrimitive.ScrubArea className={cn("flex cursor-ew-resize", className)} data-slot="number-field-scrub-area" {...props} > <Label className="cursor-ew-resize" htmlFor={context.fieldId}> {label} </Label> <NumberFieldPrimitive.ScrubAreaCursor className="drop-shadow-[0_1px_1px_#0008] filter"> <CursorGrowIcon /> </NumberFieldPrimitive.ScrubAreaCursor> </NumberFieldPrimitive.ScrubArea> ); } function CursorGrowIcon(props: React.ComponentProps<"svg">) { return ( <svg fill="black" height="14" stroke="white" viewBox="0 0 24 14" width="26" xmlns="http://www.w3.org/2000/svg" {...props} > <path d="M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z" /> </svg> ); } export { NumberField, NumberFieldScrubArea, NumberFieldDecrement, NumberFieldIncrement, NumberFieldGroup, NumberFieldInput, };