{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label-styled",
  "title": "Label essentials",
  "description": "Styled label: the essentials set. 5 decorative label variations (RequiredLabel, UppercaseLabel, PillLabel, IconLabel, GradientLabel) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/label-styled.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Tag } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Label family: 5 decorative labels. Color comes ONLY from tokens (via alpha\n   color-mix), and size controls the text scale. Static - no animation, framer is not\n   needed. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst text: Record<StyledSize, string> = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-sm\",\n  xl: \"text-base\",\n}\n\nconst base =\n  \"inline-flex w-fit items-center gap-1.5 font-medium leading-none select-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\ntype Props = React.ComponentProps<\"label\"> & { size?: StyledSize }\n\n/* Required: etiket metni + token danger yildizi. */\nexport function RequiredLabel({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <label\n      data-slot=\"styled-label\"\n      className={cn(base, text[size], \"text-foreground\", className)}\n      {...props}\n    >\n      {children}\n      <span aria-hidden=\"true\" className=\"text-danger\">\n        *\n      </span>\n    </label>\n  )\n}\n\n/* Uppercase: buyuk harf, harf araligi acik, muted token. */\nexport function UppercaseLabel({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <label\n      data-slot=\"styled-label\"\n      className={cn(base, text[size], \"font-semibold uppercase tracking-[0.14em] text-muted-foreground\", className)}\n      {...props}\n    >\n      {children}\n    </label>\n  )\n}\n\n/* Pill: kucuk token hap/chip stili etiket. */\nexport function PillLabel({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <label\n      data-slot=\"styled-label\"\n      className={cn(\n        base,\n        text[size],\n        \"rounded-full px-2.5 py-1 text-brand-soft-foreground [background-color:color-mix(in_oklab,var(--color-brand)_16%,transparent)]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </label>\n  )\n}\n\n/* Icon: bastaki token ikon + etiket. icon prop, varsayilan lucide Tag. */\nexport function IconLabel({\n  className,\n  size = \"md\",\n  children,\n  icon,\n  ...props\n}: Props & { icon?: React.ReactNode }) {\n  return (\n    <label\n      data-slot=\"styled-label\"\n      className={cn(base, text[size], \"text-foreground [&_svg]:text-info\", className)}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"inline-flex\">\n        {icon ?? <Tag />}\n      </span>\n      {children}\n    </label>\n  )\n}\n\n/* Gradient: token gradyan ile boyanan metin (bg-clip-text). */\nexport function GradientLabel({ className, size = \"md\", children, ...props }: Props) {\n  return (\n    <label\n      data-slot=\"styled-label\"\n      className={cn(\n        base,\n        text[size],\n        \"bg-clip-text font-semibold text-transparent [background-image:linear-gradient(120deg,var(--info),var(--brand))]\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </label>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/label-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "label"
  ],
  "type": "registry:component"
}