{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group-tone",
  "title": "Group-tone input",
  "description": "Styled input: the Group-tone set. 5 decorative input variations (InfoGroup, SuccessGroup, WarningGroup, DangerGroup, MutedGroup) 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/input-group-tone.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertTriangle, CheckCircle2, CircleSlash, Info, OctagonAlert } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Tone input group family: 5 semantically toned fields. The anatomy is the same (a state icon plus a real <input> plus a helper-text chip), and the difference is ONLY the semantic colour: info, success, warning, danger, muted. Every root carries data-tone. The danger variant uses the ai2 standard aria-invalid appearance (NOT destructive). Colour comes ONLY from tokens; alpha via color-mix. No motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst height: Record<StyledSize, string> = {\n  sm: \"h-8 text-sm\",\n  md: \"h-9 text-sm\",\n  lg: \"h-10 text-base\",\n  xl: \"h-12 text-base\",\n}\n\nconst rootBase =\n  \"group inline-flex w-64 max-w-full items-center overflow-hidden rounded-lg border bg-transparent transition-colors duration-(--motion-base) focus-within:ring-[3px] [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\nconst fieldBase =\n  \"h-full w-full min-w-0 bg-transparent px-2 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\"\n\ntype Props = Omit<React.ComponentProps<\"input\">, \"size\"> & { size?: StyledSize }\n\n/* Shared shell: toneClassName carries the border, ring and ground tone, the icon carries the state. */\nfunction ToneShell({\n  className,\n  size = \"md\",\n  tone,\n  toneClassName,\n  iconClassName,\n  icon,\n  label,\n  hint,\n  invalid,\n  ...props\n}: Props & {\n  tone: string\n  toneClassName: string\n  iconClassName: string\n  icon: React.ReactNode\n  label: string\n  hint: string\n  invalid?: boolean\n}) {\n  const id = React.useId()\n  return (\n    <div\n      data-slot=\"styled-input-group\"\n      data-tone={tone}\n      className={cn(rootBase, height[size], toneClassName, className)}\n    >\n      <label htmlFor={id} className=\"sr-only\">\n        {label}\n      </label>\n      <span className={cn(\"ml-3 shrink-0\", iconClassName)}>{icon}</span>\n      <input\n        id={id}\n        aria-invalid={invalid ? true : undefined}\n        {...props}\n        className={fieldBase}\n      />\n      <span className=\"mr-3 shrink-0 select-none text-xs text-muted-foreground\">{hint}</span>\n    </div>\n  )\n}\n\n/* Info: an informational tone, an info edge over a neutral field. */\nexport function InfoGroup(props: Props) {\n  return (\n    <ToneShell\n      {...props}\n      tone=\"info\"\n      label=\"Info field\"\n      hint=\"Info\"\n      icon={<Info />}\n      iconClassName=\"text-info\"\n      toneClassName=\"border-info bg-[color-mix(in_oklab,var(--color-info)_6%,transparent)] focus-within:border-info focus-within:ring-info/20 dark:focus-within:ring-info/40\"\n    />\n  )\n}\n\n/* Success: dogrulanmis alan gorunumu. */\nexport function SuccessGroup(props: Props) {\n  return (\n    <ToneShell\n      {...props}\n      tone=\"success\"\n      label=\"Success field\"\n      hint=\"Valid\"\n      icon={<CheckCircle2 />}\n      iconClassName=\"text-success\"\n      toneClassName=\"border-success bg-[color-mix(in_oklab,var(--color-success)_6%,transparent)] focus-within:border-success focus-within:ring-success/20 dark:focus-within:ring-success/40\"\n    />\n  )\n}\n\n/* Warning: dikkat isteyen ama bloklamayan alan. */\nexport function WarningGroup(props: Props) {\n  return (\n    <ToneShell\n      {...props}\n      tone=\"warning\"\n      label=\"Warning field\"\n      hint=\"Check\"\n      icon={<AlertTriangle />}\n      iconClassName=\"text-warning\"\n      toneClassName=\"border-warning bg-[color-mix(in_oklab,var(--color-warning)_6%,transparent)] focus-within:border-warning focus-within:ring-warning/20 dark:focus-within:ring-warning/40\"\n    />\n  )\n}\n\n/* Danger: the ai2 invalid standard (danger tokens, not destructive). */\nexport function DangerGroup(props: Props) {\n  return (\n    <ToneShell\n      {...props}\n      tone=\"danger\"\n      label=\"Danger field\"\n      hint=\"Error\"\n      invalid\n      icon={<OctagonAlert />}\n      iconClassName=\"text-danger\"\n      toneClassName=\"border-danger bg-[color-mix(in_oklab,var(--color-danger)_6%,transparent)] focus-within:border-danger focus-within:ring-danger/20 dark:focus-within:ring-danger/40 has-[[aria-invalid=true]]:border-danger has-[[aria-invalid=true]]:ring-danger/20 dark:has-[[aria-invalid=true]]:ring-danger/40\"\n    />\n  )\n}\n\n/* Muted: sessiz/pasif ton, dikkat cekmeyen alan. */\nexport function MutedGroup(props: Props) {\n  return (\n    <ToneShell\n      {...props}\n      tone=\"neutral\"\n      label=\"Muted field\"\n      hint=\"Optional\"\n      icon={<CircleSlash />}\n      iconClassName=\"text-muted-foreground\"\n      toneClassName=\"border-field-border bg-surface-2 focus-within:border-primary focus-within:ring-ring/50\"\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/input-group-tone.tsx"
    }
  ],
  "categories": [
    "styled",
    "input"
  ],
  "type": "registry:component"
}