"use client" import type * as React from "react" import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field" import { motion, useReducedMotion } from "motion/react" import { pressTween } from "@/lib/motion" import { cn } from "@/lib/utils" /** Drop DOM animation handlers that clash with Motion's identically named props. */ function withoutDomAnimationHandlers>( props: T ) { const { onAnimationStart: _onAnimationStart, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...rest } = props return rest } /** Soft-rect group chrome shared by stepper shell. */ const groupChrome = "flex h-[var(--atro-control-height,2.25rem)] w-full min-w-0 items-stretch overflow-hidden rounded-[var(--atro-control-radius,var(--radius))] border border-border-subtle bg-background transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20 has-aria-invalid:border-destructive has-aria-invalid:ring-2 has-aria-invalid:ring-destructive/20 has-data-invalid:border-destructive has-data-invalid:ring-2 has-data-invalid:ring-destructive/20 motion-reduce:transition-none" const stepperBtn = "inline-flex aspect-square h-full shrink-0 items-center justify-center border-0 bg-transparent text-muted-foreground outline-none transition-[background-color,color,opacity] duration-150 ease-[cubic-bezier(0.16,1,0.3,1)] hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none" /** * Number field — Mira soft-rect + stepper press. * Scrub feedback stays careful: cursor presence + data-scrubbing opacity only. */ function NumberField({ className, ...props }: NumberFieldPrimitive.Root.Props) { return ( ) } function NumberFieldScrubArea({ className, ...props }: NumberFieldPrimitive.ScrubArea.Props) { return ( ) } /** * Scrub cursor — opacity settle only (Family Values: careful delight). * No scale fireworks while dragging numbers. */ function NumberFieldScrubAreaCursor({ className, ...props }: NumberFieldPrimitive.ScrubAreaCursor.Props) { const reduce = useReducedMotion() return ( ( )} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={pressTween} /> ) } /> ) } function NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props) { return ( ) } function NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props) { return ( ) } function NumberFieldDecrement({ className, children, ...props }: NumberFieldPrimitive.Decrement.Props) { const reduce = useReducedMotion() return ( } {...props} > {children ?? } ) } function NumberFieldIncrement({ className, children, ...props }: NumberFieldPrimitive.Increment.Props) { const reduce = useReducedMotion() return ( } {...props} > {children ?? } ) } function MinusIcon(props: React.ComponentProps<"svg">) { return ( ) } function PlusIcon(props: React.ComponentProps<"svg">) { return ( ) } export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, NumberFieldScrubAreaCursor, }