{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chip",
  "type": "registry:component",
  "title": "Mono chip",
  "description": "Marks a short technical identifier. Monospace text with a 1px mixed border.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.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/chip.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n\nconst styles = stylex.create({\n  chip: {\n    fontFamily: \"ui-monospace, SFMono-Regular, Menlo, monospace\",\n    fontSize: {\n      default: \"0.6875rem\",\n      [mq.phone]: \"0.8125rem\",\n    },\n    fontWeight: 500,\n    color: vlak.gray,\n    borderWidth: vlak.hairline,\n    borderStyle: \"solid\",\n    borderColor: \"color-mix(in srgb, currentColor 35%, transparent)\",\n    paddingBlock: {\n      default: \"0.1875rem\",\n      [mq.phone]: \"0.75rem\",\n    },\n    paddingInline: {\n      default: \"0.4375rem\",\n      [mq.phone]: \"0.875rem\",\n    },\n    lineHeight: 1,\n    borderRadius: {\n      default: vlak.radiusSm,\n      [mq.phone]: vlak.radiusSm,\n    },\n    display: {\n      default: null,\n      [mq.phone]: \"inline-flex\",\n    },\n    alignItems: {\n      default: null,\n      [mq.phone]: \"center\",\n    },\n    minHeight: {\n      default: null,\n      [mq.phone]: vlak.hit,\n    },\n  },\n});\n\n/** Mono identifier with a 1px mixed border. */\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(function Chip(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-chip\", className], styles.chip);\n  return <span ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n",
      "type": "registry:component",
      "target": "components/vlak/chip.tsx"
    },
    {
      "path": "vlak/styles/chip.css",
      "content": "/* ── chip: generated from packages/react/src/components/chip.tsx ── */\n.rs-chip{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:0.6875rem;font-weight:500;color:var(--text-secondary);border-width:1px;border-style:solid;border-color:color-mix(in srgb, currentColor 35%, transparent);padding-block:0.1875rem;padding-inline:0.4375rem;line-height:1;border-radius:var(--radius-sm)}\n@media (max-width: 640px){.rs-chip{font-size:0.8125rem;padding-block:0.75rem;padding-inline:0.875rem;border-radius:var(--radius-sm);display:inline-flex;align-items:center;min-height:var(--hit)}}\n",
      "type": "registry:file",
      "target": "styles/vlak/chip.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "content",
      "classes": [
        "rs-chip"
      ],
      "snippet": "<span class=\"rs-chip\">/noord-brand</span>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "Chip",
        "Mono chip",
        "Code chip",
        "Token"
      ],
      "example": "import { Chip } from \"@noorddev/vlak-react\";\n\n<Chip>/noord-brand</Chip>",
      "usage": {
        "use": [
          "Identifiers in monospace: paths, handles, keys, short code.",
          "Inline in copy or in a list of tags."
        ],
        "avoid": [
          "Status words; use Badge.",
          "Removable filter tokens; the chip has no close control."
        ]
      },
      "a11y": [
        "A plain <span> set in the mono stack."
      ]
    }
  }
}