2d:I[393222,["/_next/static/immutable/chunks/1ghzvo2v3e9it.js","/_next/static/immutable/chunks/1ubf407bbesvn.js","/_next/static/immutable/chunks/2ru5l8aalwffo.js","/_next/static/immutable/chunks/2_pnkmjnqn60o.js","/_next/static/immutable/chunks/02zdfc_ck3rnv.js","/_next/static/immutable/chunks/3pcm9i84ehett.js","/_next/static/immutable/chunks/2kz55mtt4gg9-.js","/_next/static/immutable/chunks/2754p4i-zrjf8.js","/_next/static/immutable/chunks/0wc_90o59fis_.js","/_next/static/immutable/chunks/0v6d2j1fs6vdq.js","/_next/static/immutable/chunks/0d0omsdo6rngz.js","/_next/static/immutable/chunks/2go1j71-0poyv.js","/_next/static/immutable/chunks/14k-28a04j7wc.js","/_next/static/immutable/chunks/052z53e2-1wpg.js","/_next/static/immutable/chunks/3ovl2hhpccn0u.js","/_next/static/immutable/chunks/0r21vgnmwirm_.js","/_next/static/immutable/chunks/2lmq6h0csgx00.js"],"CopyButton"] 2e:Tafb,"use client" import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field" import { cn } from "cn" import { AddIcon, MinusIcon } from "@/lib/icons" function NumberField({ className, ...props }: NumberFieldPrimitive.Root.Props) { return ( ) } /** Input with − and + steppers. Drag the label (see NumberFieldScrubArea) or use arrow keys to change the value. */ function NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props) { return ( ) } function NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props) { return ( ) } const stepper = "grid h-full w-8 shrink-0 place-items-center text-muted-foreground transition-colors outline-none select-none hover:bg-accent hover:text-foreground data-disabled:pointer-events-none data-disabled:opacity-40 [&_svg]:size-3.5" function NumberFieldDecrement({ className, ...props }: NumberFieldPrimitive.Decrement.Props) { return ( ) } function NumberFieldIncrement({ className, ...props }: NumberFieldPrimitive.Increment.Props) { return ( ) } /** Wrap a label in this so dragging it horizontally changes the value. */ function NumberFieldScrubArea({ className, ...props }: NumberFieldPrimitive.ScrubArea.Props) { return ( ) } export { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, NumberFieldScrubArea, }2f:T6a17,

"use client"

import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field"
import { cn } from "cn"

import { AddIcon, MinusIcon } from "@/lib/icons"

function NumberField({ className, ...props }: NumberFieldPrimitive.Root.Props) {
  return (
    <NumberFieldPrimitive.Root
      data-slot="number-field"
      className={cn("flex flex-col gap-2", className)}
      {...props}
    />
  )
}

/** Input with − and + steppers. Drag the label (see NumberFieldScrubArea) or use arrow keys to change the value. */
function NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props) {
  return (
    <NumberFieldPrimitive.Group
      data-slot="number-field-group"
      className={cn(
        "flex h-8 w-full items-center overflow-hidden rounded-lg border border-input bg-transparent transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 data-disabled:opacity-50 dark:bg-input/30",
        className
      )}
      {...props}
    />
  )
}

function NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props) {
  return (
    <NumberFieldPrimitive.Input
      data-slot="number-field-input"
      className={cn(
        "h-full min-w-0 flex-1 bg-transparent px-2 text-center text-sm tabular-nums outline-none",
        className
      )}
      {...props}
    />
  )
}

const stepper =
  "grid h-full w-8 shrink-0 place-items-center text-muted-foreground transition-colors outline-none select-none hover:bg-accent hover:text-foreground data-disabled:pointer-events-none data-disabled:opacity-40 [&_svg]:size-3.5"

function NumberFieldDecrement({ className, ...props }: NumberFieldPrimitive.Decrement.Props) {
  return (
    <NumberFieldPrimitive.Decrement
      data-slot="number-field-decrement"
      aria-label="Decrease"
      className={cn(stepper, "border-r", className)}
      {...props}
    >
      <MinusIcon />
    </NumberFieldPrimitive.Decrement>
  )
}

function NumberFieldIncrement({ className, ...props }: NumberFieldPrimitive.Increment.Props) {
  return (
    <NumberFieldPrimitive.Increment
      data-slot="number-field-increment"
      aria-label="Increase"
      className={cn(stepper, "border-l", className)}
      {...props}
    >
      <AddIcon />
    </NumberFieldPrimitive.Increment>
  )
}

/** Wrap a label in this so dragging it horizontally changes the value. */
function NumberFieldScrubArea({ className, ...props }: NumberFieldPrimitive.ScrubArea.Props) {
  return (
    <NumberFieldPrimitive.ScrubArea
      data-slot="number-field-scrub-area"
      className={cn("cursor-ew-resize text-sm font-medium select-none", className)}
      {...props}
    />
  )
}

export {
  NumberField,
  NumberFieldGroup,
  NumberFieldInput,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldScrubArea,
}

2b:["$","div","components/ui/number-field.tsx",{"className":"group relative overflow-hidden rounded-xl border bg-card","children":[["$","div",null,{"className":"flex h-10 items-center border-b px-4 font-mono text-xs text-muted-foreground","children":"components/ui/number-field.tsx"}],["$","$L2d",null,{"value":"$2e","className":"absolute top-2 right-2 z-10"}],["$","div",null,{"className":"docs-code max-h-112 overflow-auto text-[13px]","dangerouslySetInnerHTML":{"__html":"$2f"}}]]}]

Number Field

Installation