{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label",
  "type": "registry:ui",
  "title": "Label",
  "description": "Fluent 2-styled form label with shadcn APIs. Native <label> (no JS primitive needed), 14px/600 Fluent type ramp, peer/group disabled ergonomics, and an optional required-field asterisk indicator.",
  "author": "graundtech <https://github.com/graundtech/fluent2-react-kit>",
  "registryDependencies": [
    "https://fluent2-react-kit.graund.io/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/label.tsx",
      "type": "registry:ui",
      "target": "components/ui/label.tsx",
      "content": "import type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Label — Fluent 2-styled, shadcn-API form label.\n *\n * A plain native `<label>`. Unlike the current shadcn/ui implementation (which\n * wraps a Radix/Base UI `Label` primitive), no JS primitive is needed here: the\n * native element already provides the `htmlFor`/`id` association and\n * click-to-focus behavior a \"Label\" primitive exists to simulate. Server-safe:\n * no `\"use client\"`, no hooks — the React import is type-only.\n *\n * Base classes match current shadcn/ui (`flex items-center text-sm leading-none\n * select-none`, plus the `peer-disabled`/`group-data-[disabled=true]`\n * ergonomics). Weight is `font-normal` (Regular 400): Fluent 2's Label defaults\n * to Regular, with Semibold (600) offered as an explicit `type=\"Semibold\"`\n * opt-in — confirmed against the Figma Label component set, whose default\n * variant is literally `Type=Regular (Default)`. (An earlier version of this\n * file claimed \"Fluent 2's Label type ramp is 14px/600 (semibold)\" and hard-set\n * `font-semibold`; that premise was wrong — it made every label render heavier\n * than the Fluent default.) Consumers wanting the Semibold emphasis pass\n * `className=\"font-semibold\"`, which wins through `cn`'s tailwind-merge.\n *\n * Fluent 2 extension: a `required` prop renders a `text-destructive` asterisk\n * after the label's children, separated by `gap-1` (4px = Fluent\n * `spacingHorizontalXS`). The asterisk inherits the label's Regular weight\n * (matching Fluent, which keeps the asterisk Regular even on Semibold labels)\n * and stays `text-destructive` per the kit's single-red policy\n * (tokens-research.md §12.9). It is purely visual — wrapped in\n * `aria-hidden=\"true\"` so it never pollutes the computed accessible name.\n * Screen readers announce \"required\" from the associated form control instead,\n * so pair `required` here with the real `required`/`aria-required=\"true\"`\n * attribute on the input/select/textarea this label is for.\n */\nfunction Label({\n  className,\n  required = false,\n  children,\n  ...props\n}: ComponentProps<\"label\"> & { required?: boolean }) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-1 text-sm leading-none font-normal select-none\",\n        \"group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50\",\n        \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {required ? (\n        <span aria-hidden=\"true\" className=\"text-destructive\">\n          *\n        </span>\n      ) : null}\n    </label>\n  );\n}\n\nexport { Label };\n"
    }
  ]
}