4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T35f0,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { controlRadiusStyle, type ControlAppearanceProps, } from "@/lib/cojeev/control-appearance"; import { numberInputText, parseNumberInput, stepNumber, } from "@/lib/cojeev/number-motion"; import { AnimatedNumber, type AnimatedNumberProps } from "@/components/ui/animated-number"; import { Icon } from "@/components/ui/icon"; import { Button } from "@/components/ui/button"; export type NumberInputProps = Omit< React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "min" | "max" | "step" | "size" > & ControlAppearanceProps & { value?: number | null; defaultValue?: number | null; onValueChange?: (value: number | null) => void; min?: number; max?: number; step?: number; locale?: string; format?: Intl.NumberFormatOptions; treatment?: AnimatedNumberProps["treatment"]; duration?: number; /** Accessible labels for the two native step buttons. */ decrementLabel?: string; incrementLabel?: string; /** Arrangement, independent from field surface, radius and number animation. */ presentation?: "stepper" | "quantity" | "scrub"; scrubLabel?: string; }; /** A formatted stepper that leaves the native input, caret and selection visible while editing. */ export function NumberInput({ radius, appearance, value, defaultValue = null, onValueChange, min, max, step = 1, locale = "en-US", format, treatment = "roll", duration, decrementLabel = "Decrease value", incrementLabel = "Increase value", presentation = "stepper", scrubLabel = "Drag to adjust value", className, style, ref, disabled, readOnly, onChange, onFocus, onBlur, onKeyDown, onCompositionEnd, placeholder = "—", ...props }: NumberInputProps) { const controlled = value !== undefined; const [internal, setInternal] = React.useState(defaultValue); const current = controlled ? value : internal; const finite = current !== null && Number.isFinite(current) ? current : null; const [draft, setDraft] = React.useState(() => finite === null ? "" : numberInputText(finite, locale), ); const [focused, setFocused] = React.useState(false); const [invalid, setInvalid] = React.useState(false); const input = React.useRef(null); const previous = React.useRef({ value: finite, locale }); const displayText = finite === null ? placeholder : new Intl.NumberFormat(locale, format).format(finite); const gesture = React.useRef<{ x: number; value: number | null; steps: number; moved: boolean; } | null>(null); const suppressClick = React.useRef(false); const [scrubbing, setScrubbing] = React.useState(false); const commit = (next: number | null) => { if (!controlled) setInternal(next); if (!Object.is(next, finite)) onValueChange?.(next); }; const clamp = (next: number) => Math.max( Number.isFinite(min) ? min! : -Infinity, Math.min(Number.isFinite(max) ? max! : Infinity, next), ); const raw = React.useCallback( (next: number | null) => next === null ? "" : numberInputText(next, locale), [locale], ); React.useEffect(() => { if ( !Object.is(previous.current.value, finite) || previous.current.locale !== locale ) { if ( !focused || !Object.is(parseNumberInput(draft, locale), finite) || previous.current.locale !== locale ) { setDraft(raw(finite)); setInvalid(false); } previous.current = { value: finite, locale }; } }, [finite, locale, focused, draft, raw]); React.useEffect(() => { const parsed = parseNumberInput(draft, locale); input.current?.setCustomValidity( parsed === undefined ? "Enter a number." : "", ); }, [draft, locale]); const stepValue = (direction: 1 | -1) => { if (disabled || readOnly) return; const parsed = parseNumberInput(draft, locale); const next = stepNumber( focused && typeof parsed === "number" ? parsed : finite, direction, step, min, max, ); commit(next); setDraft(raw(controlled ? finite : next)); setInvalid(false); }; React.useEffect(() => { const form = input.current?.form; if (!form || controlled) return; let pending: ReturnType | undefined; const reset = (event: Event) => { clearTimeout(pending); // Native target listeners can run before a React parent cancels reset. // Wait until dispatch/default actions finish before restoring our draft. pending = setTimeout(() => { if (event.defaultPrevented) return; const next = defaultValue !== null && Number.isFinite(defaultValue) ? defaultValue : null; setInternal(next); setDraft(next === null ? "" : numberInputText(next, locale)); setInvalid(false); }, 0); }; form.addEventListener("reset", reset); return () => { form.removeEventListener("reset", reset); clearTimeout(pending); }; }, [controlled, defaultValue, locale]); const ownedRef = React.useCallback( (node: HTMLInputElement | null) => { input.current = node; if (typeof ref === "function") return ref(node); if (ref) ref.current = node; }, [ref], ); return ( { onChange?.(event); if (event.defaultPrevented) return; const text = event.currentTarget.value; setDraft(text); const parsed = parseNumberInput(text, locale); setInvalid(false); if ( parsed !== undefined && !(event.nativeEvent as InputEvent).isComposing ) commit(parsed); }} onCompositionEnd={(event) => { onCompositionEnd?.(event); if (event.defaultPrevented) return; const parsed = parseNumberInput(event.currentTarget.value, locale); if (parsed !== undefined) commit(parsed); }} onFocus={(event) => { setFocused(true); onFocus?.(event); }} onBlur={(event) => { setFocused(false); const parsed = parseNumberInput(event.currentTarget.value, locale); const next = typeof parsed === "number" ? clamp(parsed) : parsed === null ? null : finite; if (parsed !== undefined) commit(next); setDraft(raw(controlled ? finite : next)); setInvalid(false); onBlur?.(event); }} onKeyDown={(event) => { onKeyDown?.(event); if ( event.defaultPrevented || disabled || readOnly || event.nativeEvent.isComposing || event.altKey || event.ctrlKey || event.metaKey ) return; if (event.key === "ArrowUp" || event.key === "ArrowDown") { event.preventDefault(); stepValue(event.key === "ArrowUp" ? 1 : -1); } else if (event.key === "Enter") { const parsed = parseNumberInput(draft, locale); if (parsed === undefined) setInvalid(true); else { const next = parsed === null ? null : clamp(parsed); commit(next); setDraft(raw(controlled ? finite : next)); } } else if (event.key === "Escape") { setDraft(raw(finite)); setInvalid(false); } }} /> {presentation === "scrub" && ( )} ); } 52:T1838,@layer cojeev-states { .v-number-input { display: inline-flex; align-items: center; gap: 4px; inline-size: 100%; min-inline-size: 0; block-size: 56px; padding: 4px; background: var(--input); color: var(--v-text); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--v-edge); font-size: var(--fs-body); font-variant-numeric: tabular-nums; } .v-number-input:focus-within { outline: 2px solid var(--v-accent, var(--v-text)); outline-offset: 3px; } .v-number-input .v-number-input__step { display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px; min-inline-size: 44px; min-block-size: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; } .v-number-input__step > .v-icon { pointer-events: none; } .v-number-input__step:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; } .v-number-input__step:disabled { opacity: 0.35; cursor: default; } .v-number-input__field { position: relative; flex: 1; min-inline-size: 0; block-size: 100%; display: grid; align-items: center; } .v-number-input__control { inline-size: 100%; min-inline-size: 0; block-size: 100%; border: 0; outline: 0; background: transparent; color: transparent; caret-color: var(--v-text); font: inherit; text-align: center; padding: 0 6px; box-sizing: border-box; } .v-number-input__control::placeholder { color: transparent; } .v-number-input__display { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; white-space: nowrap; } .v-number-input[data-focused="true"] .v-number-input__control { color: inherit; } .v-number-input[data-focused="true"] .v-number-input__control::placeholder { color: var(--v-text-2); } .v-number-input[data-focused="true"] .v-number-input__display { visibility: hidden; } .v-number-input[data-disabled="true"] { opacity: 0.5; } .v-number-input[data-invalid="true"] { box-shadow: inset 0 0 0 2px var(--v-negative, #aa3434); } @media (forced-colors: active) { .v-number-input { border: 1px solid ButtonText; } .v-number-input__control { color: CanvasText; } .v-number-input__display { display: none; } } .v-number-input__field { container-type: inline-size; } .v-number-input__display .v-animated-number { font-size: min(1em, calc(100cqi / var(--number-length) * 1.55)); } /* Quantity is a little numbered ticket; Scrub is an editable measuring strip. */ .v-number-input[data-presentation="quantity"] { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: 44px 44px; grid-template-areas: "field increase" "field decrease"; height: auto; padding: 8px; gap: 4px 12px; border-radius: min(var(--v-control-radius, 24px), 24px); } .v-number-input[data-presentation="quantity"] .v-number-input__field { grid-area: field; min-height: 88px; font: 500 clamp(24px, 5vw, 40px) / 1.2 var(--font-display); border-inline-end: 1px dashed var(--v-edge); padding-inline: 8px 12px; } .v-number-input[data-presentation="quantity"] .v-number-input__increase { grid-area: increase; } .v-number-input[data-presentation="quantity"] .v-number-input__decrease { grid-area: decrease; } .v-number-input[data-presentation="scrub"] { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; grid-template-rows: 52px 56px; gap: 4px; height: auto; padding: 8px; border-radius: min(var(--v-control-radius, 20px), 20px); } .v-number-input[data-presentation="scrub"] .v-number-input__field { grid-area: 1 / 1; font-size: 24px; } .v-number-input[data-presentation="scrub"] .v-number-input__control { text-align: start; padding-inline: 12px; } .v-number-input[data-presentation="scrub"] .v-number-input__display { justify-content: start; padding-inline: 12px; } .v-number-input[data-presentation="scrub"] .v-number-input__decrease { grid-area: 1 / 2; } .v-number-input[data-presentation="scrub"] .v-number-input__increase { grid-area: 1 / 3; } .v-number-input .v-number-input__scrub { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; height: 56px; min-height: 44px; padding: 0 12px; border-radius: 12px; touch-action: none; cursor: ew-resize; user-select: none; } .v-number-input__ruler { display: flex; align-items: start; justify-content: space-between; height: 14px; width: 100%; pointer-events: none; } .v-number-input__ruler i { width: 1px; height: 5px; background: currentColor; opacity: 0.3; } .v-number-input__ruler i:nth-child(4n + 1) { height: 10px; opacity: 0.6; } .v-number-input__grip { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 12px; pointer-events: none; } .v-number-input[data-scrubbing="true"] .v-number-input__grip { color: var(--v-brand); } .v-adjustment-example { display: grid; box-sizing: border-box; padding-inline: 10px; gap: 20px; width: 100%; max-width: 440px; margin-inline: auto; min-width: 0; } .v-adjustment-example__heading { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; } .v-adjustment-example__stamp { display: grid; place-items: center; width: 44px; height: 44px; background: var(--v-yellow); color: var(--v-on-accent); border-radius: 35% 50% 36% 48%; font: 500 20px/1 var(--font-display); } .v-adjustment-example__heading p { margin: 0; font-size: 12px; color: var(--v-text-2); } .v-adjustment-example__heading label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; } .v-adjustment-example__help { margin: 0; color: var(--v-text-2); font-size: 13px; line-height: 1.6; } .v-adjustment-example__footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .v-adjustment-example__footer .v-btn { min-height: 44px; } .v-adjustment-example__status { margin: 0; padding-top: 12px; border-top: 1px dashed var(--v-border); color: var(--v-text-2); font-size: 12px; line-height: 1.5; } } 53:T1d96,@layer cojeev-states { /* One inherited corner contract, with a readable cap for multiline/native fields. */ :is(.v-input,.v-igroup,.v-select,.v-native,.v-number-input,.v-btn) { border-radius: var(--v-control-radius, var(--r-pill)); } :is(.v-textarea,.v-composer,.v-native,.v-multi-select__trigger) { border-radius: min(var(--v-control-radius, 20px), 20px); } .v-btn[data-control-shape="card"] { border-radius: 12px; } .v-btn[data-control-shape="pill"] { border-radius: var(--r-pill); } /* A Field can own the treatment for its immediate shell; explicit child paint wins. */ :root .v-native[data-appearance] { padding-inline-end:40px; } :root .v-native[data-appearance][size]:not([size="1"]) { padding-inline:8px; } [data-slot="field"][data-appearance="contour"] { --v-field-face: var(--v-canvas); } :root [data-appearance="contour"]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger), :root [data-slot="field"][data-appearance="contour"] :is(.v-input,.v-igroup,.v-textarea):not([data-appearance]) { background-color: var(--v-canvas); color: var(--v-text); box-shadow: inset 0 0 0 1px var(--v-edge); } :root [data-appearance="editorial"]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger), :root [data-slot="field"][data-appearance="editorial"] :is(.v-input,.v-igroup,.v-textarea):not([data-appearance]) { border-radius: 0; background-color: transparent; color: var(--v-text); box-shadow: inset 0 -1px 0 var(--v-edge); padding-inline: 2px; } :root [data-slot="field"][data-appearance="inset"] { padding: 14px 16px; border-radius: min(var(--v-control-radius, 20px), 20px); background: var(--v-beige); color: var(--v-text); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--v-text) 9%, transparent); gap: 6px; } :root [data-appearance="inset"]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger) { background-color: var(--v-beige); color: var(--v-text); box-shadow: inset 0 1px 2px color-mix(in oklab, var(--v-text) 12%, transparent); } :root [data-slot="field"][data-appearance="inset"] :is(.v-input,.v-igroup,.v-textarea):not([data-appearance]) { background: transparent; box-shadow: none; padding-inline: 0; } :root [data-slot="field"][data-appearance="inset"] [data-slot="field-label"] { color: var(--v-text-2); } :root [data-slot="field"][data-appearance="inset"]:focus-within { outline: 2px solid var(--v-brand); outline-offset: 2px; } :root [data-appearance]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger):focus-within, :root [data-slot="field"][data-appearance] :is(.v-input,.v-igroup,.v-textarea):focus-within { outline: 2px solid var(--v-brand); outline-offset: 3px; } :root [data-slot="field"][data-appearance="inset"] :is(.v-input,.v-igroup,.v-textarea):focus-within { outline: none; } :root [data-appearance]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger):is(:disabled,[data-disabled="true"],:has(input:disabled)), :root [data-slot="field"][data-appearance] :is(.v-input,.v-igroup,.v-textarea):is(:disabled,:has(input:disabled)) { background: var(--v-disabled-face); color: var(--v-disabled-ink); box-shadow: inset 0 0 0 1px var(--v-disabled-edge); cursor: not-allowed; } :root [data-slot="field"][data-appearance][data-state="error"], :root [data-appearance]:is(.v-input,.v-igroup,.v-textarea,.v-native,.v-select,.v-number-input,.v-multi-select__trigger):is([aria-invalid="true"],[data-invalid="true"],:has([aria-invalid="true"])) { outline: 2px solid var(--v-danger-fill); outline-offset: 3px; } :root [data-slot="field"][data-appearance][data-state="error"] [role="alert"] { color: var(--v-danger-ink); } .v-form-example { display: grid; gap: 20px; width: 100%; min-width: 0; max-width: 480px; margin-inline: auto; } .v-form-example__intro { display: grid; gap: 5px; } .v-form-example__intro strong { font-family: var(--font-display, inherit); font-size: 22px; font-weight: 500; } .v-form-example__intro p { margin: 0; color: var(--v-text-2); font-size: 13px; line-height: 1.5; } .v-form-example__status { min-height: 1.5em; margin: 0; font-size: 12px; color: var(--v-text-2); overflow-wrap: anywhere; } .v-form-example__footer { display: flex; gap: 10px; align-items: center; justify-content: space-between; } /* Composer owns one surface, while the actual textarea keeps native editing. */ :root .v-composer[data-appearance] { border-radius:min(var(--v-control-radius,20px),20px); background:var(--v-canvas); color:var(--v-text); box-shadow:inset 0 0 0 1px var(--v-edge); } :root .v-composer[data-appearance="inset"] { background:var(--v-beige); box-shadow:inset 0 1px 2px color-mix(in oklab,var(--v-text) 12%,transparent); } :root .v-composer[data-appearance="editorial"] { border-radius:0; background:transparent; box-shadow:inset 0 -1px 0 var(--v-edge); } :root .v-composer[data-appearance] .v-textarea:is(:focus,:hover,:not(:focus)) { background:transparent; box-shadow:none; outline:0; border-radius:0; resize:vertical; } :root .v-composer[data-appearance] .v-textarea-scroll > textarea { padding-inline-end:30px; } :root [data-slot="field"][data-appearance] [data-slot="input-group"] .v-textarea { background:transparent; box-shadow:none; outline:0; border:0; border-radius:0; } :root .v-composer[data-appearance]:focus-within { outline:2px solid var(--v-brand); outline-offset:3px; } :root [data-slot="field"][data-appearance="inset"] .v-composer[data-appearance] { background:transparent; box-shadow:none; outline:0; } .v-form-example[data-form-example="field"] { max-width:600px; } .v-form-example [data-slot="field-label"] { font-size:14px; line-height:1.5; } .v-form-example [data-slot="field-description"] { font-size:13px; margin:0; } .v-form-example__footer > .v-btn, .v-form-example [data-slot="textarea-composer-bar"] > .v-btn { min-height:44px; } .v-form-example [data-slot="textarea-composer-bar"] { justify-content:space-between; flex-wrap:wrap; gap:12px; padding:10px 12px; border-top:1px solid var(--v-border); } .v-form-example__allowance { height:4px; border-radius:4px; overflow:hidden; background:var(--v-beige); margin-top:-8px; } .v-form-example__allowance > span { display:block; height:100%; max-width:100%; border-radius:inherit; background:var(--v-blue-deep); } .v-form-example__label-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; justify-content:space-between; } .v-form-example__label-row > span { font-size:12px; color:var(--v-text-2); } .v-form-example__hint { margin:0; color:var(--v-text-2); font-size:13px; line-height:1.5; } /* Editorial draws only the focus edge: no moving caret, label or hit area. */ :root [data-appearance="editorial"]:is(.v-input,.v-igroup,.v-textarea,.v-composer), :root [data-slot="field"][data-appearance="editorial"] :is(.v-input,.v-igroup,.v-textarea):not([data-appearance]) { background-image:linear-gradient(var(--v-brand),var(--v-brand)); background-repeat:no-repeat; background-position:left bottom; background-size:0% 2px; transition:background-size var(--t-micro) var(--enter); } :root [data-appearance="editorial"]:is(.v-input,.v-igroup,.v-textarea,.v-composer):focus-within, :root [data-slot="field"][data-appearance="editorial"] :is(.v-input,.v-igroup,.v-textarea):focus-within { background-size:100% 2px; outline:0; } @media(prefers-reduced-motion:reduce) { :root [data-slot="field"] :is(.v-input,.v-igroup,.v-textarea,.v-composer) { transition:none; } } } 4c:["$","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":[null,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/animated-number.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/button.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/number-input.css\" {\n\n}\n\n@import \"@/styles/cojeev/control-appearance.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/number-input.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/number-input.css","content":"$52","type":"registry:file","target":"styles/cojeev/number-input.css"},{"path":"registry/cojeev/styles/control-appearance.css","content":"$53","type":"registry:file","target":"styles/cojeev/control-appearance.css"}],"className":"h-[70svh] min-h-80"}]]}]