{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group",
  "type": "registry:component",
  "title": "Input group",
  "description": "Joins a text field with a prefix or suffix inside one 1px border.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/input.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/input-group.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\nimport { Input, type InputProps } from \"./input\";\n\nexport interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Place the addon after the field. */\n  end?: boolean;\n}\n\nconst styles = stylex.create({\n  group: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    boxSizing: \"border-box\",\n    width: \"100%\",\n    height: vlak.controlH,\n    borderWidth: vlak.hairline,\n    borderStyle: \"solid\",\n    borderColor: {\n      default: vlak.controlBorder,\n      \":focus-within\": vlak.accent,\n    },\n    borderRadius: {\n      default: vlak.radiusSm,\n      [mq.phone]: vlak.radiusSm,\n    },\n    backgroundColor: \"var(--bg)\",\n    overflow: \"hidden\",\n    // The group carries the ring: its overflow clips the field's own.\n    outlineWidth: {\n      default: 0,\n      \":focus-within\": 2,\n    },\n    outlineStyle: {\n      default: \"none\",\n      \":focus-within\": \"solid\",\n    },\n    outlineColor: vlak.ink,\n    outlineOffset: 2,\n  },\n  addon: {\n    display: \"flex\",\n    alignItems: \"center\",\n    paddingInline: {\n      default: \"0.625rem\",\n      [mq.phone]: \"0.875rem\",\n    },\n    paddingBlock: 0,\n    fontSize: {\n      default: \"0.8125rem\",\n      [mq.phone]: vlak.controlFs,\n    },\n    fontWeight: 500,\n    letterSpacing: \"-0.01em\",\n    color: vlak.gray,\n    backgroundColor: vlak.tableAlt,\n    whiteSpace: \"nowrap\",\n    minHeight: {\n      default: null,\n      [mq.phone]: vlak.hit,\n    },\n    borderInlineStartWidth: vlak.hairline,\n    borderInlineStartStyle: \"solid\",\n    borderInlineStartColor: vlak.divider,\n  },\n  firstAddon: {\n    borderInlineStartWidth: 0,\n  },\n});\n\n/** Addon and field share one control boundary. */\nexport const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  { end, className, style, children, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-input-group\", end && \"rs-input-group-end\", className], styles.group);\n  return (\n    <div ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === Input) {\n          const next = child.props as InputProps;\n          return React.cloneElement(child as React.ReactElement<InputProps>, {\n            plain: next.plain ?? true,\n            grouped: next.grouped ?? true,\n          });\n        }\n        return child;\n      })}\n    </div>\n  );\n});\n\nexport const InputAddon = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(function InputAddon(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-input-addon\", className], styles.addon);\n  return <span ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n",
      "type": "registry:component",
      "target": "components/vlak/input-group.tsx"
    },
    {
      "path": "vlak/styles/input-group.css",
      "content": "/* ── input-group: generated from packages/react/src/components/input-group.tsx ── */\n.rs-input-group{display:flex;align-items:stretch;box-sizing:border-box;width:100%;height:var(--control-h);border-width:1px;border-style:solid;border-color:var(--control-border);border-radius:var(--radius-sm);background-color:var(--bg);overflow:hidden;outline-width:0;outline-style:none;outline-color:var(--text);outline-offset:2px}\n.rs-input-group:focus-within{border-color:var(--accent);outline-width:2px;outline-style:solid}\n@media (max-width: 640px){.rs-input-group{border-radius:var(--radius-sm)}}\n.rs-input-addon{display:flex;align-items:center;padding-inline:0.625rem;padding-block:0;font-size:0.8125rem;font-weight:500;letter-spacing:-0.01em;color:var(--text-secondary);background-color:var(--table-alt);white-space:nowrap;border-inline-start-width:1px;border-inline-start-style:solid;border-inline-start-color:var(--divider)}\n@media (max-width: 640px){.rs-input-addon{padding-inline:0.875rem;font-size:var(--control-fs);min-height:var(--hit)}}\n.rs-input-group-end .rs-input-addon{border-inline-start-width:1px;border-inline-end-width:0}\n",
      "type": "registry:file",
      "target": "styles/vlak/input-group.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "forms",
      "classes": [
        "rs-input-group",
        "rs-input-addon",
        "rs-input-group-end"
      ],
      "snippet": "<div class=\"rs-input-group\"><span class=\"rs-input-addon\">https://</span><input class=\"rs-input\" placeholder=\"vlak.dev\" /></div>",
      "cssOnly": false,
      "registryDependencies": [
        "input",
        "vlak-lib"
      ],
      "aliases": [
        "Input group",
        "Input addon",
        "Prefix input",
        "Suffix input"
      ],
      "example": "import { Input, InputAddon, InputGroup } from \"@noorddev/vlak-react\";\n\n<InputGroup>\n  <InputAddon>https://</InputAddon>\n  <Input placeholder=\"vlak.dev\" aria-label=\"Site\" />\n</InputGroup>\n\n<InputGroup end>\n  <Input placeholder=\"0.00\" aria-label=\"Amount\" />\n  <InputAddon>EUR</InputAddon>\n</InputGroup>",
      "usage": {
        "use": [
          "A fixed prefix or suffix that belongs to the value: a protocol, a unit, a currency.",
          "end to place the addon after the field."
        ],
        "avoid": [
          "Buttons inside the field; use InlineForm.",
          "Icons as decoration; the addon is text."
        ]
      },
      "a11y": [
        "The Input child is cloned with plain and grouped; it keeps its own id and name.",
        "The addon is presentational text. Give the input an aria-label or a FieldLabel; the addon does not name it."
      ]
    }
  }
}