53:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2ntfcxrkfxczh.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 54:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2ntfcxrkfxczh.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 55:T1fb5,"use client"; import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"; import { cn } from "cn"; import * as React from "react"; import { tv } from "tailwind-variants"; // Styles for invalid animation shake const invalidShakeStyles = ` @keyframes iandefined-invalid-shake-replay { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 28.57% { transform: translateX(6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 57.14% { transform: translateX(-6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 78.57% { transform: translateX(4px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 100% { transform: translateX(0); } } [data-invalid-shake="owner"] { animation-duration: 280ms; animation-timing-function: linear; } [data-invalid-shake="owner"].is-shaking[aria-invalid="true"], [data-invalid-shake="owner"].is-shaking[data-invalid], [data-invalid-shake="owner"].is-shaking:has([aria-invalid="true"]), [data-invalid-shake="owner"].is-shaking:has([data-invalid]) { animation-name: iandefined-invalid-shake-replay; will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-invalid-shake="owner"] { animation: none !important; transform: none !important; } } `; type NumberFieldSize = Exclude, number>; type NumberFieldContextValue = { size: NumberFieldSize; }; const NumberFieldContext = React.createContext({ size: "default", }); const numberFieldGroupVariants = tv({ base: "relative flex h-9 w-full rounded-lg border border-input bg-background text-sm shadow-xs outline-0 outline-offset-0 outline-transparent outline-solid transition-[border-color,outline-width,outline-offset,outline-color] duration-100 ease-out focus-within:border-ring focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring/50 data-invalid:border-destructive data-invalid:outline-2 data-invalid:outline-offset-2 data-invalid:outline-destructive/50 focus-within:data-invalid:outline-destructive/50 data-disabled:pointer-events-none data-disabled:opacity-64 dark:bg-input/32", variants: { size: { sm: "h-8", default: "", lg: "h-10", }, }, defaultVariants: { size: "default", }, }); const numberFieldInputVariants = tv({ base: "h-full flex-1 w-full min-w-0 truncate bg-transparent text-center outline-none placeholder:text-muted-foreground/80 tabular-nums", variants: { size: { sm: "px-2 py-1 text-xs sm:text-sm", default: "px-3 py-1.5 text-sm", lg: "px-3 py-2 text-base sm:text-sm", }, }, defaultVariants: { size: "default", }, }); const numberFieldButtonVariants = tv({ base: "flex h-full shrink-0 cursor-pointer items-center justify-center outline-none transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring/50 forced-colors:focus-visible:outline-[Highlight] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-64", variants: { size: { sm: "px-2.5", default: "px-3", lg: "px-3.5", }, }, defaultVariants: { size: "default", }, }); export type NumberFieldProps = { size?: "sm" | "default" | "lg" | number; } & Omit, "size">; const NumberField = ({ className, size = "default", ...props }: NumberFieldProps) => { const resolvedSize: NumberFieldSize = typeof size === "number" ? "default" : size; return ( <> ); }; export type NumberFieldGroupProps = { size?: "sm" | "default" | "lg" | number; } & Omit, "size">; const NumberFieldGroup = ({ className, size: sizeProp, ...props }: NumberFieldGroupProps) => { const context = React.useContext(NumberFieldContext); const size: NumberFieldSize = sizeProp !== undefined ? typeof sizeProp === "number" ? "default" : sizeProp : context.size; return ( ); }; export type NumberFieldInputProps = { size?: "sm" | "default" | "lg" | number; } & Omit, "size">; const NumberFieldInput = ({ className, size: sizeProp, ...props }: NumberFieldInputProps) => { const context = React.useContext(NumberFieldContext); const size: NumberFieldSize = sizeProp !== undefined ? typeof sizeProp === "number" ? "default" : sizeProp : context.size; return ( ); }; export type NumberFieldButtonProps = { size?: "sm" | "default" | "lg" | number; } & Omit, "size">; const NumberFieldDecrement = ({ className, children, size: sizeProp, ...props }: NumberFieldButtonProps) => { const context = React.useContext(NumberFieldContext); const size: NumberFieldSize = sizeProp !== undefined ? typeof sizeProp === "number" ? "default" : sizeProp : context.size; return ( {children ?? ( )} ); }; const NumberFieldIncrement = ({ className, children, size: sizeProp, ...props }: NumberFieldButtonProps) => { const context = React.useContext(NumberFieldContext); const size: NumberFieldSize = sizeProp !== undefined ? typeof sizeProp === "number" ? "default" : sizeProp : context.size; return ( {children ?? ( )} ); }; const NumberFieldScrubArea = ({ className, ...props }: React.ComponentProps) => ( ); export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, numberFieldButtonVariants, numberFieldGroupVariants, numberFieldInputVariants, }; export type { NumberFieldSize }; 52:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}],["$","li","tailwind-variants",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-variants","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-variants"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cn"}]]}]}]]}],["$","$L53",null,{"namespace":"@iandefined","registryDependencies":[]}]]}],null]}],["$","$L54",null,{"files":[{"path":"src/registry/base/number-field.tsx","content":"$55","type":"registry:ui","target":"components/ui/number-field.tsx"}],"className":"h-[70svh] min-h-80"}]]}]