{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-field",
  "title": "Number Field",
  "description": "A glass stepper with a scrub area.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/core.json",
    "https://liquikit.dev/r/field.json",
    "https://liquikit.dev/r/glass.json"
  ],
  "files": [
    {
      "path": "src/number-field.tsx",
      "content": "\"use client\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { type CSSProperties, type ReactNode, useId } from \"react\";\nimport { useFocusGlass } from \"./field\";\nimport { GlassPane, type GlassRefraction } from \"./glass\";\nimport { cx, type GlassOptions } from \"./types\";\nimport \"./liquikit.css\";\n\nexport type NumberFieldProps = Omit<\n\tBaseNumberField.Root.Props,\n\t\"className\" | \"style\" | \"render\"\n> &\n\tGlassOptions & {\n\t\tlabel?: ReactNode;\n\t\trefraction?: GlassRefraction;\n\t\tclassName?: string;\n\t\tstyle?: CSSProperties;\n\t};\n\nexport function NumberField({\n\tlabel,\n\ttheme,\n\tlens,\n\tliquid,\n\trefraction,\n\tclassName,\n\tstyle,\n\tid,\n\t...rootProps\n}: NumberFieldProps) {\n\tconst generated = useId();\n\tconst inputId = id ?? generated;\n\tconst focus = useFocusGlass();\n\treturn (\n\t\t<BaseNumberField.Root\n\t\t\t{...rootProps}\n\t\t\tid={inputId}\n\t\t\tclassName={cx(\"glass-ui-number\", className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{label ? (\n\t\t\t\t<BaseNumberField.ScrubArea className=\"glass-ui-number__scrub\">\n\t\t\t\t\t<label htmlFor={inputId} className=\"glass-ui-field__label\">\n\t\t\t\t\t\t{label}\n\t\t\t\t\t</label>\n\t\t\t\t\t<BaseNumberField.ScrubAreaCursor className=\"glass-ui-number__cursor\">\n\t\t\t\t\t\t<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"M8 7l-5 5 5 5M16 7l5 5-5 5M3 12h18\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</BaseNumberField.ScrubAreaCursor>\n\t\t\t\t</BaseNumberField.ScrubArea>\n\t\t\t) : null}\n\t\t\t<BaseNumberField.Group\n\t\t\t\tclassName=\"glass-ui-number__group\"\n\t\t\t\trender={(props) => (\n\t\t\t\t\t<GlassPane\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t\tradius=\"capsule\"\n\t\t\t\t\t\tpress={focus.press}\n\t\t\t\t\t\ttheme={theme}\n\t\t\t\t\t\tlens={lens}\n\t\t\t\t\t\tliquid={liquid}\n\t\t\t\t\t\trefraction={refraction}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<span className=\"glass-ui-number__row\">\n\t\t\t\t\t<BaseNumberField.Decrement\n\t\t\t\t\t\tclassName=\"glass-ui-number__step\"\n\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"M3.5 8h9\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</BaseNumberField.Decrement>\n\t\t\t\t\t<BaseNumberField.Input\n\t\t\t\t\t\tclassName=\"glass-ui-number__input\"\n\t\t\t\t\t\tonFocus={focus.onFocus}\n\t\t\t\t\t\tonBlur={focus.onBlur}\n\t\t\t\t\t/>\n\t\t\t\t\t<BaseNumberField.Increment\n\t\t\t\t\t\tclassName=\"glass-ui-number__step\"\n\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<path d=\"M3.5 8h9M8 3.5v9\" />\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</BaseNumberField.Increment>\n\t\t\t\t</span>\n\t\t\t</BaseNumberField.Group>\n\t\t</BaseNumberField.Root>\n\t);\n}\n",
      "type": "registry:ui",
      "target": "@components/liquikit/number-field.tsx"
    }
  ],
  "type": "registry:ui"
}