{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tag",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://ui.getlyse.com/r/lyse-tokens.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/tag/tag.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport \"./tag.css\"\n\nconst tagVariants = cva(\n  \"inline-flex items-center overflow-hidden whitespace-nowrap font-accent [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        brand: \"tag-brand\",\n        neutral: \"tag-neutral\",\n        success: \"tag-success\",\n        danger: \"tag-danger\",\n        warning: \"tag-warning\",\n      },\n      size: {\n        sm: \"gap-[var(--layout-gap-sm)] px-[var(--layout-padding-sm)] py-[var(--layout-padding-2xs)] rounded-[var(--layout-radius-sm)] text-content-caption [&_svg]:size-3 [&_.tag-dot]:size-1.5\",\n        md: \"gap-[var(--layout-gap-sm)] px-[var(--layout-padding-md)] py-[var(--layout-padding-xs)] rounded-[var(--layout-radius-md)] text-content-caption [&_svg]:size-3 [&_.tag-dot]:size-2\",\n        lg: \"gap-[var(--layout-gap-sm)] px-[var(--layout-padding-md)] py-[var(--layout-padding-xs)] rounded-[var(--layout-radius-lg)] text-content-note [&_svg]:size-3.5 [&_.tag-dot]:size-2\",\n      },\n      type: {\n        fill: \"tag-fill\",\n        dash: \"tag-dash\",\n        emphasis: \"tag-emphasis\",\n        ghost: \"tag-ghost\",\n      },\n    },\n    defaultVariants: {\n      variant: \"neutral\",\n      size: \"sm\",\n      type: \"fill\",\n    },\n  }\n)\n\nfunction TagDot({ className }: { className?: string }) {\n  return <span className={cn(\"tag-dot shrink-0\", className)} />\n}\n\nfunction TagClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"button\">) {\n  return (\n    <button\n      data-slot=\"tag-close\"\n      type=\"button\"\n      className={cn(\n        \"tag-close shrink-0 cursor-pointer inline-flex items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      )}\n    </button>\n  )\n}\n\nfunction Tag({\n  className,\n  variant,\n  size,\n  type,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof tagVariants>) {\n  return (\n    <span\n      data-slot=\"tag\"\n      className={cn(tagVariants({ variant, size, type, className }))}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport { Tag, TagDot, TagClose, tagVariants }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/tag/tag.css",
      "content": "/* ================================================================\n * TAG — Variant & Type Styles\n * Structure (flex, gap, padding, radius) lives in tag.tsx via cva.\n * Theming (colors, borders, dot) lives here via tokens.\n * ================================================================ */\n\n/* --------------------------------\n * Variant tokens\n * Each variant sets scoped custom properties.\n * -------------------------------- */\n\n.tag-brand {\n  --tag-bg-faint: var(--background-brand-faint-default);\n  --tag-bg-lighter: var(--background-brand-lighter-default);\n  --tag-text: var(--text-brand-moderate);\n  --tag-border-variant: var(--border-brand-lighter);\n  --tag-dot-color: var(--background-brand-strong-default);\n}\n\n.tag-neutral {\n  --tag-bg-faint: var(--background-neutral-faint-default);\n  --tag-bg-lighter: var(--background-neutral-lighter-default);\n  --tag-text: var(--text-base-strong);\n  --tag-border-variant: var(--border-default);\n  --tag-dot-color: var(--background-neutral-strong-default);\n}\n\n.tag-success {\n  --tag-bg-faint: var(--background-success-faint-default);\n  --tag-bg-lighter: var(--background-success-lighter-default);\n  --tag-text: var(--text-success-moderate);\n  --tag-border-variant: var(--border-success-lighter);\n  --tag-dot-color: var(--background-success-strong-default);\n}\n\n.tag-danger {\n  --tag-bg-faint: var(--background-danger-faint-default);\n  --tag-bg-lighter: var(--background-danger-lighter-default);\n  --tag-text: var(--text-danger-moderate);\n  --tag-border-variant: var(--border-danger-lighter);\n  --tag-dot-color: var(--background-danger-strong-default);\n}\n\n.tag-warning {\n  --tag-bg-faint: var(--background-warning-faint-default);\n  --tag-bg-lighter: var(--background-warning-lighter-default);\n  --tag-text: var(--text-warning-moderate);\n  --tag-border-variant: var(--border-warning-lighter);\n  --tag-dot-color: var(--background-warning-strong-default);\n}\n\n/* --------------------------------\n * All variants share text color\n * -------------------------------- */\n.tag-brand,\n.tag-neutral,\n.tag-success,\n.tag-danger,\n.tag-warning {\n  color: var(--tag-text);\n}\n\n/* --------------------------------\n * Type — fill (colored bg + colored border, solid)\n * -------------------------------- */\n.tag-fill {\n  background: var(--tag-bg-faint);\n  border: var(--layout-border-thin) solid var(--tag-border-variant);\n}\n\n/* --------------------------------\n * Type — dash (colored bg + colored border, dashed)\n * -------------------------------- */\n.tag-dash {\n  background: var(--tag-bg-faint);\n  border: var(--layout-border-thin) dashed var(--tag-border-variant);\n}\n\n/* --------------------------------\n * Type — emphasis (lighter bg + default border)\n * -------------------------------- */\n.tag-emphasis {\n  background: var(--background-neutral-lighter-default);\n  border: var(--layout-border-thin) solid var(--border-default);\n}\n\n/* --------------------------------\n * Type — ghost (no bg, default border)\n * -------------------------------- */\n.tag-ghost {\n  border: var(--layout-border-thin) solid var(--border-default);\n  color: var(--text-base-strong);\n}\n\n.tag-ghost > svg {\n  color: var(--tag-text);\n}\n\n/* --------------------------------\n * Dot\n * -------------------------------- */\n.tag-dot {\n  border-radius: var(--layout-radius-full);\n  background: var(--tag-dot-color);\n}\n\n/* --------------------------------\n * Close button\n * -------------------------------- */\n.tag-close {\n  color: inherit;\n  opacity: 0.7;\n}\n\n.tag-close:hover {\n  opacity: 1;\n}\n",
      "type": "registry:ui"
    }
  ]
}