2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T3fe8,"use client"; import { IconMinus, IconPlus } from "@tabler/icons-react"; import { cva } from "class-variance-authority"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { InputGroup, InputGroupInput } from "@/components/ui/input-group"; import { cn } from "@/lib/utils"; /* ------------------------------------------------------------------------------------------------ * NumberStepper: Kobra Input between two Kobra Buttons, extending the quantity-stepper pattern. * Typed entry is parsed on blur, the buttons repeat (and speed up) while held, and the input answers * arrows, page up/down, home and end. Formatting goes through Intl.NumberFormat. * ---------------------------------------------------------------------------------------------- */ type Size = "sm" | "default" | "lg"; type NumberStepperContextValue = { value: number | null; text: string; min: number; max: number; size: Size; disabled: boolean; readOnly: boolean; inputId: string; labelId: string; descriptionId: string; hasLabel: boolean; hasDescription: boolean; setHasLabel: (v: boolean) => void; setHasDescription: (v: boolean) => void; name?: string; format: (n: number) => string; setDraft: (text: string) => void; commitDraft: () => void; stepBy: (direction: 1 | -1, multiplier?: number) => void; jumpTo: (n: number) => void; startRepeat: (direction: 1 | -1) => void; stopRepeat: () => void; canDecrement: boolean; canIncrement: boolean; ariaLabel?: string; }; const Context = React.createContext(null); function useStepper(part: string) { const ctx = React.useContext(Context); if (!ctx) throw new Error(`${part} must be rendered inside `); return ctx; } const group = cva( "w-auto min-w-0 items-center gap-0 overflow-visible [--stepper-w:auto] has-data-[readonly]:bg-transparent", { variants: { size: { sm: "h-8 [--btn:1.5rem]", default: "h-10 [--btn:1.75rem]", lg: "h-12 [--btn:2.25rem]", }, }, defaultVariants: { size: "default" }, }, ); const inputSize: Record = { sm: "w-12 text-[13px]", default: "w-16 text-sm", lg: "w-20 text-base", }; export type NumberStepperProps = { /** Controlled value. `null` is an empty field. */ value?: number | null; defaultValue?: number | null; onValueChange?: (value: number | null) => void; min?: number; max?: number; /** Amount one press changes the value by. */ step?: number; /** Amount for Page Up, Page Down and Shift+arrow. Defaults to ten steps. */ largeStep?: number; /** Intl.NumberFormat options: currency, unit, percent, fraction digits. Percent values are fractions (0.45 is 45%). */ formatOptions?: Intl.NumberFormatOptions; /** BCP 47 locale for formatting and parsing. */ locale?: string; size?: Size; /** Increment on the inline start, decrement on the end. */ reversed?: boolean; disabled?: boolean; readOnly?: boolean; label?: React.ReactNode; description?: React.ReactNode; /** Accessible name when there is no visible label. */ "aria-label"?: string; /** Submitted with a form. */ name?: string; incrementIcon?: React.ReactNode; decrementIcon?: React.ReactNode; className?: string; /** Custom composition from the parts below. Without children the default label, group and description render. */ children?: React.ReactNode; }; export function NumberStepper({ value, defaultValue = null, onValueChange, min = -Infinity, max = Infinity, step = 1, largeStep, formatOptions, locale = "en-US", size = "default", reversed = false, disabled = false, readOnly = false, label, description, "aria-label": ariaLabel, name, incrementIcon, decrementIcon, className, children, }: NumberStepperProps) { const [inner, setInner] = React.useState(defaultValue); const current = value === undefined ? inner : value; const [draft, setDraftState] = React.useState(null); const [hasLabel, setHasLabel] = React.useState(false); const [hasDescription, setHasDescription] = React.useState(false); const id = React.useId(); const fmt = React.useMemo(() => new Intl.NumberFormat(locale, formatOptions), [locale, formatOptions]); const parser = React.useMemo(() => makeParser(fmt), [fmt]); const decimals = React.useMemo(() => { const stepDecimals = (String(step).split(".")[1] ?? "").length; const shown = fmt.resolvedOptions().maximumFractionDigits ?? 0; return Math.max(stepDecimals, shown + (fmt.resolvedOptions().style === "percent" ? 2 : 0)); }, [fmt, step]); const latest = React.useRef(current); React.useEffect(() => { latest.current = current; }); const config = React.useRef({ min, max, step, largeStep, decimals, onValueChange }); React.useEffect(() => { config.current = { min, max, step, largeStep, decimals, onValueChange }; }); const clamp = React.useCallback((n: number) => { const { min: lo, max: hi, decimals: d } = config.current; const rounded = Math.round(Math.min(hi, Math.max(lo, n)) * 10 ** d) / 10 ** d; return Math.min(hi, Math.max(lo, rounded)); }, []); const commit = React.useCallback( (next: number | null) => { if (next === latest.current) return; latest.current = next; setInner(next); config.current.onValueChange?.(next); }, [], ); const stepBy = React.useCallback( (direction: 1 | -1, multiplier = 1) => { const cur = latest.current; const { step: amount } = config.current; // From an empty field the first press lands on 0 (or the nearest bound), not on one step. commit(clamp(cur === null ? 0 : cur + amount * multiplier * direction)); setDraftState(null); }, [clamp, commit], ); const jumpTo = React.useCallback( (n: number) => { commit(clamp(n)); setDraftState(null); }, [clamp, commit], ); const commitDraft = React.useCallback(() => { setDraftState((text) => { if (text === null) return null; const parsed = parser(text); if (parsed === undefined) return null; // unreadable: fall back to the last good value commit(parsed === null ? null : clamp(parsed)); return null; }); }, [clamp, commit, parser]); const timer = React.useRef(0); const stopRepeat = React.useCallback(() => window.clearTimeout(timer.current), []); React.useEffect(() => stopRepeat, [stopRepeat]); const startRepeat = React.useCallback( (direction: 1 | -1) => { stopRepeat(); stepBy(direction); let count = 0; const tick = () => { const v = latest.current; const { min: lo, max: hi } = config.current; if (v !== null && ((direction === 1 && v >= hi) || (direction === -1 && v <= lo))) return; stepBy(direction); count += 1; // Starts at one press every 150ms and settles at one every 30ms. timer.current = window.setTimeout(tick, Math.max(30, 150 - count * 10)); }; timer.current = window.setTimeout(tick, 420); }, [stepBy, stopRepeat], ); const text = draft ?? (current === null ? "" : fmt.format(current)); const canDecrement = !disabled && !readOnly && (current === null || current > min); const canIncrement = !disabled && !readOnly && (current === null || current < max); const ctx: NumberStepperContextValue = { value: current, text, min, max, size, disabled, readOnly, inputId: `${id}-input`, labelId: `${id}-label`, descriptionId: `${id}-description`, hasLabel: hasLabel || label != null, hasDescription: hasDescription || description != null, setHasLabel, setHasDescription, name, format: (n) => fmt.format(n), setDraft: setDraftState, commitDraft, stepBy, jumpTo, startRepeat, stopRepeat, canDecrement, canIncrement, ariaLabel, }; return (

{children ?? ( <> {label != null ? {label} : null} {reversed ? ( <> {incrementIcon} {decrementIcon} ) : ( <> {decrementIcon} {incrementIcon} )} {description != null ? {description} : null} )} {name ? : null}

); } export function NumberStepperLabel({ className, ...props }: React.ComponentProps<"label">) { const { inputId, labelId, setHasLabel, disabled } = useStepper("NumberStepperLabel"); React.useEffect(() => { setHasLabel(true); return () => setHasLabel(false); }, [setHasLabel]); return ( ); } export function NumberStepperDescription({ className, ...props }: React.ComponentProps<"p">) { const { descriptionId, setHasDescription } = useStepper("NumberStepperDescription"); React.useEffect(() => { setHasDescription(true); return () => setHasDescription(false); }, [setHasDescription]); return

; } export function NumberStepperGroup({ className, children, ...props }: React.ComponentProps<"div">) { const { size, readOnly } = useStepper("NumberStepperGroup"); return ( {children} ); } export function NumberStepperInput({ className, ...props }: Omit, "value" | "onChange">) { const c = useStepper("NumberStepperInput"); const onKeyDown = (e: React.KeyboardEvent) => { if (c.disabled || c.readOnly) return; c.commitDraft(); const big = e.shiftKey ? 10 : 1; switch (e.key) { case "ArrowUp": c.stepBy(1, big); break; case "ArrowDown": c.stepBy(-1, big); break; case "PageUp": c.stepBy(1, 10); break; case "PageDown": c.stepBy(-1, 10); break; case "Home": if (!Number.isFinite(c.min)) return; c.jumpTo(c.min); break; case "End": if (!Number.isFinite(c.max)) return; c.jumpTo(c.max); break; case "Enter": return; default: return; } e.preventDefault(); }; return ( c.setDraft(e.target.value)} onBlur={c.commitDraft} onKeyDown={onKeyDown} className={cn("h-full px-1 text-center tabular-nums", inputSize[c.size], className)} {...props} /> ); } type PartProps = Omit, "onClick"> & { /** Render your own element instead of the Kobra Button. It receives the handlers and ARIA props. */ render?: React.ReactElement>; }; function useStepperButton(direction: 1 | -1) { const c = useStepper(direction === 1 ? "NumberStepperIncrement" : "NumberStepperDecrement"); const enabled = direction === 1 ? c.canIncrement : c.canDecrement; const active = React.useRef(false); const props = { type: "button" as const, tabIndex: -1, "aria-label": direction === 1 ? "Increase" : "Decrease", "aria-controls": c.inputId, disabled: !enabled, onPointerDown: (e: React.PointerEvent) => { if (e.button !== 0 || !enabled) return; // Keep focus where it is: the input keeps its caret and a screen reader stays put. e.preventDefault(); active.current = true; c.commitDraft(); c.startRepeat(direction); }, onPointerUp: () => { active.current = false; c.stopRepeat(); }, onPointerLeave: () => { active.current = false; c.stopRepeat(); }, onPointerCancel: () => { active.current = false; c.stopRepeat(); }, onClick: (e: React.MouseEvent) => { // Pointer presses are handled on pointer down. A click with no pointer (detail 0) is the keyboard or a screen reader. if (e.detail === 0 && enabled) c.stepBy(direction); }, }; return { c, props }; } const stepperButton = "relative rounded-md after:absolute after:-inset-1.5 after:content-['']"; export function NumberStepperDecrement({ className, children, render, ...rest }: PartProps) { const { props } = useStepperButton(-1); if (render) { return React.cloneElement(render, { ...props, ...rest, "data-slot": "number-stepper-decrement" }, children ?? render.props.children as React.ReactNode); } return ( ); } export function NumberStepperIncrement({ className, children, render, ...rest }: PartProps) { const { props } = useStepperButton(1); if (render) { return React.cloneElement(render, { ...props, ...rest, "data-slot": "number-stepper-increment" }, children ?? render.props.children as React.ReactNode); } return ( ); } /** Builds a parser for text the formatter could have produced, in the formatter's locale. Returns undefined when unreadable, null when empty. */ function makeParser(fmt: Intl.NumberFormat) { const parts = fmt.formatToParts(-12345.6); const decimal = parts.find((p) => p.type === "decimal")?.value ?? "."; const groupSep = parts.find((p) => p.type === "group")?.value ?? ","; const percent = fmt.resolvedOptions().style === "percent"; return (text: string): number | null | undefined => { const trimmed = text.trim(); if (trimmed === "") return null; const negative = /^[-−–(]/.test(trimmed) || /^[^\d]*[-−]\d/.test(trimmed); let t = trimmed.split(groupSep).join(""); t = t.replace(/[  \s]/g, ""); if (decimal !== ".") t = t.split(".").join("").split(decimal).join("."); t = t.replace(/[^\d.]/g, ""); if (t === "" || t === ".") return undefined; const n = Number.parseFloat(t); if (Number.isNaN(n)) return undefined; const signed = negative ? -n : n; return percent ? signed / 100 : signed; }; } export default NumberStepper; 32:T198e,"use client"; import { IconArrowDown, IconArrowUp, IconChevronLeft, IconChevronRight } from "@tabler/icons-react"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { DemoGroup, DemoPage } from "../../feedback/_demo-group"; import { sampleGuests } from "../_fixtures-b"; import { NumberStepper, NumberStepperDecrement, NumberStepperDescription, NumberStepperGroup, NumberStepperIncrement, NumberStepperInput, NumberStepperLabel, } from "./number-stepper"; function GuestPicker() { const [counts, setCounts] = useState>(Object.fromEntries(sampleGuests.map((g) => [g.id, g.initial]))); const adults = counts.adults ?? 1; const total = Object.values(counts).reduce((s, n) => s + (n ?? 0), 0); return (

{sampleGuests.map((g) => (

{g.label} {g.description}

setCounts((c) => ({ ...c, [g.id]: v }))} />

))}

{total} {total === 1 ? "guest" : "guests"} (sample)

); } function Controlled() { const [v, setV] = useState(3); return (

Value: {v === null ? "empty" : v}

); } export function NumberStepperDemo() { return ( } incrementIcon={} /> } incrementIcon={} /> Pack size }>-5 }>+5 Steps of five ); } export default NumberStepperDemo; 33:T832,import type { BlockMeta } from "../../../lib/block-meta"; export const numberStepperMeta: BlockMeta = { slug: "number-stepper", title: "Number stepper", description: "Kobra Input between two Buttons, extending the quantity stepper: min, max, step, Intl formatting, typed entry parsed on blur, press-and-hold auto-repeat with acceleration, keyboard arrows and page keys.", group: "forms", kobraDeps: ["input-group", "button"], files: ["blocks/forms/number-stepper/number-stepper.tsx"], props: [ { name: "value / defaultValue", type: "number | null", description: "Controlled and uncontrolled value. null is an empty field." }, { name: "onValueChange", type: "(value: number | null) => void", description: "Called with the clamped next value." }, { name: "min / max", type: "number", default: "-Infinity / Infinity", description: "Bounds. Buttons disable at them." }, { name: "step / largeStep", type: "number", default: "1 / step x 10", description: "Press size, and Page Up/Down or Shift+arrow size." }, { name: "formatOptions", type: "Intl.NumberFormatOptions", description: "Currency, unit, percent, fraction digits. Typed text is parsed back." }, { name: "locale", type: "string", default: "'en-US'", description: "Formatting and parsing locale." }, { name: "size", type: "'sm' | 'default' | 'lg'", default: "'default'", description: "Height and button size." }, { name: "reversed", type: "boolean", default: "false", description: "Increment first, decrement last." }, { name: "label / description", type: "ReactNode", description: "Visible label and helper text, wired with ARIA." }, { name: "incrementIcon / decrementIcon", type: "ReactNode", description: "Replace the plus and minus." }, { name: "disabled / readOnly", type: "boolean", description: "Inert states." }, { name: "children", type: "ReactNode", description: "Compose NumberStepperLabel, Group, Decrement, Input, Increment, Description yourself; the buttons take `render`." }, ], tags: ["number", "stepper", "input", "quantity", "form"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#forms","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Forms"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Number stepper"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Number stepper"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Kobra Input between two Buttons, extending the quantity stepper: min, max, step, Intl formatting, typed entry parsed on blur, press-and-hold auto-repeat with acceleration, keyboard arrows and page keys."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"number-stepper","group":"forms","minHeight":520,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/forms/number-stepper/number-stepper.tsx","code":"$31"},{"path":"blocks/forms/number-stepper/demo.tsx","code":"$32"},{"path":"blocks/forms/number-stepper/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]