{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "number-input",
  "type": "registry:ui",
  "title": "Number input (MIAN)",
  "description": "A stepper: a numeric input between decrement and increment buttons. Respects min, max and step; hold to repeat.",
  "categories": [
    "forms",
    "number",
    "stepper",
    "quantity",
    "counter"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/number-input.css",
      "type": "registry:file",
      "target": "mian/components/number-input.css",
      "content": ".mn-number { display: inline-flex; align-items: stretch; height: var(--mn-size-md); max-width: 100%;\n  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field);\n  background: var(--mn-surface); box-shadow: var(--mn-shadow-sm); overflow: hidden; }\n.mn-number:focus-within { border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }\n.mn-number > input {\n  width: 4.5rem; min-width: 0; border: 0; padding: 0 .5rem; background: transparent; color: var(--mn-fg);\n  font: 500 var(--mn-text-sm)/1 var(--mn-font); text-align: center; font-variant-numeric: tabular-nums;\n  -moz-appearance: textfield; appearance: textfield;\n}\n.mn-number > input::-webkit-inner-spin-button, .mn-number > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }\n.mn-number > input:focus { outline: none; }\n.mn-number > button {\n  display: grid; place-items: center; width: var(--mn-size-md); flex: none;\n  border: 0; background: var(--mn-surface-2); color: var(--mn-fg); cursor: pointer; font-size: 1.1rem;\n}\n.mn-number > button:hover { background: color-mix(in oklab, var(--mn-surface-2), var(--mn-fg) 7%); }\n.mn-number > button:disabled { opacity: .4; cursor: not-allowed; }\n.mn-number > button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mn-ring); }\n.mn-number > button svg { width: 1rem; height: 1rem; }"
    },
    {
      "path": "mian/examples/number-input.html",
      "type": "registry:file",
      "target": "mian/examples/number-input.html",
      "content": "<!-- Quantity -->\n<div class=\"mn-number\">\n  <button type=\"button\" data-mn-step=\"-1\" aria-label=\"Decrease\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"/></svg></button>\n  <input type=\"number\" value=\"1\" min=\"1\" max=\"10\" aria-label=\"Quantity\">\n  <button type=\"button\" data-mn-step=\"1\" aria-label=\"Increase\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></button>\n</div>\n\n<!-- Decimal step -->\n<div class=\"mn-number\">\n  <button type=\"button\" data-mn-step=\"-1\" aria-label=\"Decrease\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14\"/></svg></button>\n  <input type=\"number\" value=\"1.5\" min=\"0\" max=\"5\" step=\"0.25\" aria-label=\"Weight in kilograms\">\n  <button type=\"button\" data-mn-step=\"1\" aria-label=\"Increase\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 5v14M5 12h14\"/></svg></button>\n</div>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/number-input",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-number",
        "[data-mn-step=\"-1\" | \"1\"]"
      ],
      "accessibility": [
        "The input stays a native number input; ArrowUp and ArrowDown step it. The buttons are skipped by Tab to avoid three stops for one value."
      ],
      "intents": [
        "quantity stepper",
        "plus minus quantity",
        "number of guests",
        "cart quantity"
      ]
    }
  }
}