{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label-size",
  "title": "Size label",
  "description": "Styled label: the Size set. 5 decorative label variations (MicroLabel, SmallLabel, BoldLabel, WideLabel, TightLabel) 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-size.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Size label family: 5 typographic scales (micro, small, bold, wide, tight).\n   The difference is purely typographic: size, weight, letter spacing and line\n   height. Each variant has its own size scale; the size prop moves within it.\n   The label is a REAL <label> bound with htmlFor to the rendered demo input (the id\n   comes from React.useId()) - an unbound label is an a11y bug. Color comes ONLY\n   from tokens. Static - no animation, motion is not needed. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\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 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 typography class comes from outside, the structure stays the same. */\nfunction SizeField({\n  typeClass,\n  className,\n  size = \"md\",\n  children,\n  ...props\n}: Props & { typeClass: string }) {\n  const id = React.useId()\n  return (\n    <span data-slot=\"styled-label\" className={field}>\n      <label htmlFor={id} className={cn(base, typeClass, className)} {...props}>\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/* Micro: en kucuk okunabilir olcek, buyuk harf ve acik harf araligi ile\n   okunurlugunu korur. */\nconst microScale: Record<StyledSize, string> = {\n  sm: \"text-[9px]\",\n  md: \"text-[10px]\",\n  lg: \"text-[11px]\",\n  xl: \"text-xs\",\n}\n\nexport function MicroLabel({ size = \"md\", ...props }: Props) {\n  return (\n    <SizeField\n      size={size}\n      typeClass={cn(\n        microScale[size],\n        \"font-semibold uppercase leading-none tracking-[0.1em] text-muted-foreground\"\n      )}\n      {...props}\n    />\n  )\n}\n\n/* Small: sessiz, kucuk punto, normal agirlik. */\nconst smallScale: Record<StyledSize, string> = {\n  sm: \"text-[11px]\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n  xl: \"text-sm\",\n}\n\nexport function SmallLabel({ size = \"md\", ...props }: Props) {\n  return (\n    <SizeField\n      size={size}\n      typeClass={cn(smallScale[size], \"font-normal leading-none text-muted-foreground\")}\n      {...props}\n    />\n  )\n}\n\n/* Bold: agir, dikkat ceken baslik agirligi. */\nconst boldScale: Record<StyledSize, string> = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n  xl: \"text-lg\",\n}\n\nexport function BoldLabel({ size = \"md\", ...props }: Props) {\n  return (\n    <SizeField\n      size={size}\n      typeClass={cn(boldScale[size], \"font-bold leading-none tracking-tight text-foreground\")}\n      {...props}\n    />\n  )\n}\n\n/* Wide: genis harf araligi, bolume ayirici gibi okunur. */\nconst wideScale: Record<StyledSize, string> = {\n  sm: \"text-[10px]\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n  xl: \"text-base\",\n}\n\nexport function WideLabel({ size = \"md\", ...props }: Props) {\n  return (\n    <SizeField\n      size={size}\n      typeClass={cn(wideScale[size], \"font-medium uppercase leading-none tracking-[0.28em] text-foreground\")}\n      {...props}\n    />\n  )\n}\n\n/* Tight: tight letter spacing and a narrow line height, for dense forms. */\nconst tightScale: Record<StyledSize, string> = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n  xl: \"text-lg\",\n}\n\nexport function TightLabel({ size = \"md\", ...props }: Props) {\n  return (\n    <SizeField\n      size={size}\n      typeClass={cn(tightScale[size], \"font-semibold leading-tight tracking-[-0.02em] text-foreground\")}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/label-size.tsx"
    }
  ],
  "categories": [
    "styled",
    "label"
  ],
  "type": "registry:component"
}