{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label-tone",
  "title": "Tone label",
  "description": "Styled label: the Tone set. 5 decorative label variations (InfoLabel, SuccessLabel, WarningLabel, DangerLabel, MutedLabel) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/label-tone.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Tone label family: 5 semantically toned form labels (info, success, warning,\n   danger, muted). This is a SEPARATE styled component; the base label does not\n   change. Every root carries data-tone. The label is a REAL <label> bound with\n   htmlFor to the rendered demo input (the id is produced by React.useId()) - an\n   unbound label is an a11y bug. The tone dot uses currentColor, so it inherits the\n   tone color. Color comes ONLY from tokens. Static - no animation, motion 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\n/* Demo input yuksekligi base Button olcegine hizali. */\nconst inputHeight: Record<StyledSize, string> = {\n  sm: \"h-8\",\n  md: \"h-9\",\n  lg: \"h-10\",\n  xl: \"h-12\",\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\nconst field = \"flex w-fit flex-col gap-1.5\"\n\nconst inputBase =\n  \"w-48 rounded-md border border-field-border bg-transparent px-3 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n\ntype Props = Omit<React.ComponentProps<\"label\">, \"htmlFor\"> & { size?: StyledSize }\n\n/* Shared shell: the tone colour goes on the label and the tone dot rides the same colour through currentColor. The root carries data-slot plus data-tone; the label is bound to the demo input with htmlFor. */\nfunction ToneField({\n  tone,\n  toneClass,\n  className,\n  size = \"md\",\n  children,\n  ...props\n}: Props & { tone: string; toneClass: string }) {\n  const id = React.useId()\n  return (\n    <span data-slot=\"styled-label\" data-tone={tone} className={field}>\n      <label\n        htmlFor={id}\n        className={cn(base, text[size], toneClass, className)}\n        {...props}\n      >\n        <span\n          aria-hidden=\"true\"\n          className=\"size-1.5 shrink-0 rounded-full [background-color:currentColor]\"\n        />\n        {children ?? \"Email\"}\n      </label>\n      <input\n        id={id}\n        type=\"text\"\n        placeholder=\"you@example.com\"\n        className={cn(inputBase, inputHeight[size])}\n      />\n    </span>\n  )\n}\n\n/* Info: bilgilendirici ton. */\nexport function InfoLabel(props: Props) {\n  return <ToneField tone=\"info\" toneClass=\"text-info\" {...props} />\n}\n\n/* Success: olumlu/dogrulanmis ton. */\nexport function SuccessLabel(props: Props) {\n  return <ToneField tone=\"success\" toneClass=\"text-success\" {...props} />\n}\n\n/* Warning: dikkat isteyen ton. */\nexport function WarningLabel(props: Props) {\n  return <ToneField tone=\"warning\" toneClass=\"text-warning\" {...props} />\n}\n\n/* Danger: hata/yikici ton. */\nexport function DangerLabel(props: Props) {\n  return <ToneField tone=\"danger\" toneClass=\"text-danger\" {...props} />\n}\n\n/* Muted: ikincil, geri cekilmis ton. */\nexport function MutedLabel(props: Props) {\n  return <ToneField tone=\"muted\" toneClass=\"text-muted-foreground\" {...props} />\n}\n",
      "type": "registry:component",
      "target": "components/ui/label-tone.tsx"
    }
  ],
  "categories": [
    "styled",
    "label"
  ],
  "type": "registry:component"
}