{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label-help",
  "title": "Help label",
  "description": "Styled label: the Help set. 5 decorative label variations (TooltipLabel, HintLabel, InfoHelpLabel, OptionalLabel, DescriptionLabel) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2",
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/label-help.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CircleHelp, Info } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Help label family: 5 labels, each carrying a different help behavior (a tooltip\n   that opens with the keyboard, an inline hint, an info help text, an optional\n   marker, a description paragraph). The label is a REAL <label> bound with htmlFor\n   to the rendered demo input (the id comes from React.useId()). The help texts are\n   bound to the input with aria-describedby, so a screen reader hears them too.\n   The tooltip opens not only on hover but also on FOCUS, and closes with Escape;\n   the trigger is a real button and carries a focus ring. useState always lives in\n   the root component, never inside a subtree that opens and closes. Color comes\n   ONLY from tokens, via alpha color-mix. The motion is disabled through\n   useReducedMotion(). */\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 helpText: Record<StyledSize, string> = {\n  sm: \"text-[10px]\",\n  md: \"text-xs\",\n  lg: \"text-xs\",\n  xl: \"text-sm\",\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 text-foreground 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-52 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/* Tooltip: it opens on hover AND focus, and Escape closes it. The trigger is a real\n   button, and the tooltip has role=\"tooltip\" and is bound to the trigger with\n   aria-describedby. */\nexport function TooltipLabel({\n  className,\n  size = \"md\",\n  children,\n  hint = \"We only use this to send account emails.\",\n  ...props\n}: Props & { hint?: string }) {\n  const id = React.useId()\n  const tipId = `${id}-tip`\n  const reduce = useReducedMotion()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <span data-slot=\"styled-label\" className={field}>\n      <span className=\"inline-flex items-center gap-1.5\">\n        <label htmlFor={id} className={cn(base, text[size], className)} {...props}>\n          {children ?? \"Email\"}\n        </label>\n        <span className=\"relative inline-flex\">\n          <button\n            type=\"button\"\n            aria-label=\"More information\"\n            aria-describedby={open ? tipId : undefined}\n            className=\"inline-flex size-5 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-xs [&>i]:leading-none\"\n            onMouseEnter={() => setOpen(true)}\n            onMouseLeave={() => setOpen(false)}\n            onFocus={() => setOpen(true)}\n            onBlur={() => setOpen(false)}\n            onKeyDown={(e) => {\n              if (e.key === \"Escape\") setOpen(false)\n            }}\n          >\n            <CircleHelp />\n          </button>\n          <AnimatePresence>\n            {open ? (\n              <motion.span\n                id={tipId}\n                role=\"tooltip\"\n                className=\"pointer-events-none absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-56 -translate-x-1/2 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs leading-snug text-popover-foreground shadow-md\"\n                initial={reduce ? { opacity: 0 } : { opacity: 0, y: 4 }}\n                animate={reduce ? { opacity: 1 } : { opacity: 1, y: 0 }}\n                exit={reduce ? { opacity: 0 } : { opacity: 0, y: 4 }}\n                transition={{ duration: 0.16, ease: \"easeOut\" }}\n              >\n                {hint}\n              </motion.span>\n            ) : null}\n          </AnimatePresence>\n        </span>\n      </span>\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/* Hint: etiketin yaninda kucuk, sessiz bir ipucu metni. */\nexport function HintLabel({\n  className,\n  size = \"md\",\n  children,\n  hint = \"max 40 characters\",\n  ...props\n}: Props & { hint?: string }) {\n  const id = React.useId()\n  const hintId = `${id}-hint`\n  return (\n    <span data-slot=\"styled-label\" className={field}>\n      <span className=\"inline-flex w-full items-baseline gap-2\">\n        <label htmlFor={id} className={cn(base, text[size], className)} {...props}>\n          {children ?? \"Display name\"}\n        </label>\n        <span id={hintId} className={cn(helpText[size], \"font-normal text-muted-foreground\")}>\n          {hint}\n        </span>\n      </span>\n      <input\n        id={id}\n        type=\"text\"\n        aria-describedby={hintId}\n        placeholder=\"Ada Lovelace\"\n        className={cn(inputBase, inputHeight[size])}\n      />\n    </span>\n  )\n}\n\n/* InfoHelp: an info-toned help row with an icon below the input. */\nexport function InfoHelpLabel({\n  className,\n  size = \"md\",\n  children,\n  help = \"Use the address your team already knows.\",\n  ...props\n}: Props & { help?: string }) {\n  const id = React.useId()\n  const helpId = `${id}-help`\n  return (\n    <span data-slot=\"styled-label\" data-tone=\"info\" className={field}>\n      <label htmlFor={id} className={cn(base, text[size], className)} {...props}>\n        {children ?? \"Work email\"}\n      </label>\n      <input\n        id={id}\n        type=\"text\"\n        aria-describedby={helpId}\n        placeholder=\"you@example.com\"\n        className={cn(inputBase, inputHeight[size])}\n      />\n      <span\n        id={helpId}\n        className={cn(\n          helpText[size],\n          \"inline-flex items-center gap-1.5 text-info [&>svg]:size-3.5 [&>svg]:shrink-0 [&>i]:text-xs [&>i]:leading-none\"\n        )}\n      >\n        <Info aria-hidden=\"true\" />\n        {help}\n      </span>\n    </span>\n  )\n}\n\n/* Optional: etiketin ardinda sessiz bir Optional isareti. */\nexport function OptionalLabel({ className, size = \"md\", children, ...props }: Props) {\n  const id = React.useId()\n  return (\n    <span data-slot=\"styled-label\" className={field}>\n      <label htmlFor={id} className={cn(base, text[size], className)} {...props}>\n        {children ?? \"Company\"}\n        <span\n          className={cn(\n            helpText[size],\n            \"rounded px-1.5 py-0.5 font-normal text-muted-foreground [background-color:color-mix(in_oklab,var(--color-foreground)_8%,transparent)]\"\n          )}\n        >\n          Optional\n        </span>\n      </label>\n      <input\n        id={id}\n        type=\"text\"\n        placeholder=\"Acme Inc.\"\n        className={cn(inputBase, inputHeight[size])}\n      />\n    </span>\n  )\n}\n\n/* Description: etiketin altinda tam cumlelik aciklama, input'a bagli. */\nexport function DescriptionLabel({\n  className,\n  size = \"md\",\n  children,\n  description = \"This is the name other people will see on your profile.\",\n  ...props\n}: Props & { description?: string }) {\n  const id = React.useId()\n  const descId = `${id}-desc`\n  return (\n    <span data-slot=\"styled-label\" className=\"flex w-fit max-w-64 flex-col gap-1.5\">\n      <label htmlFor={id} className={cn(base, text[size], className)} {...props}>\n        {children ?? \"Display name\"}\n      </label>\n      <span id={descId} className={cn(helpText[size], \"leading-snug text-muted-foreground\")}>\n        {description}\n      </span>\n      <input\n        id={id}\n        type=\"text\"\n        aria-describedby={descId}\n        placeholder=\"Ada Lovelace\"\n        className={cn(inputBase, inputHeight[size], \"mt-0.5\")}\n      />\n    </span>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/label-help.tsx"
    }
  ],
  "categories": [
    "styled",
    "label"
  ],
  "type": "registry:component"
}