{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-tone",
  "title": "Group-tone button",
  "description": "Styled button: the Group-tone set. 5 decorative button variations (InfoButtonGroup, SuccessButtonGroup, WarningButtonGroup, DangerButtonGroup, MutedButtonGroup) 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/button-group-tone.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { AlertTriangle, Ban, CheckCircle2, Circle, Info } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Tone button-group family: five semantically toned action groups. The structure is the same in every variant (an attached row sharing edges plus a leading icon that states the tone); the difference is ONLY the colour tone: info, success, warning, danger, muted. Colour comes ONLY from semantic tokens, alpha via color-mix. Deterministic, no motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\n/* Base Button olcegiyle hizali: sm=h-8, md=h-9, lg=h-10, xl=h-12. */\nconst sizes: Record<StyledSize, string> = {\n  sm: \"h-8 px-3 text-sm\",\n  md: \"h-9 px-4 text-sm\",\n  lg: \"h-10 px-5 text-sm\",\n  xl: \"h-12 px-6 text-base\",\n}\n\ntype Action = {\n  label?: React.ReactNode\n  icon?: React.ReactNode\n  onClick?: () => void\n}\n\ntype GroupProps = {\n  className?: string\n  size?: StyledSize\n  actions?: Action[]\n}\n\nconst defaultActions: Action[] = [\n  { label: \"View\" },\n  { label: \"Edit\" },\n  { label: \"Share\" },\n]\n\nconst item =\n  \"relative inline-flex shrink-0 select-none items-center justify-center gap-2 border font-medium whitespace-nowrap outline-none transition-colors focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\n/* Shared shell: an attached row with a tone icon on the first element. */\nfunction ToneShell({\n  props,\n  tone,\n  label,\n  icon,\n  itemClassName,\n}: {\n  props: GroupProps\n  tone: string\n  label: string\n  icon: React.ReactNode\n  itemClassName: string\n}) {\n  const { className, size = \"md\", actions = defaultActions } = props\n\n  return (\n    <div\n      data-slot=\"styled-button-group\"\n      data-tone={tone}\n      role=\"group\"\n      aria-label={label}\n      className={cn(\"inline-flex isolate\", className)}\n    >\n      {actions.map((action, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          onClick={action.onClick}\n          data-slot=\"styled-button-group-item\"\n          data-tone={tone}\n          className={cn(\n            item,\n            itemClassName,\n            sizes[size],\n            i > 0 && \"-ml-px\",\n            i === 0 && \"rounded-l-lg\",\n            i === actions.length - 1 && \"rounded-r-lg\"\n          )}\n        >\n          {i === 0 ? (action.icon ?? icon) : action.icon}\n          {action.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\n/* Info: bilgilendirici mavi ton, yumusak dolgu. */\nexport function InfoButtonGroup(props: GroupProps) {\n  return (\n    <ToneShell\n      props={props}\n      tone=\"info\"\n      label=\"Info actions\"\n      icon={<Info />}\n      itemClassName=\"border-[color-mix(in_oklab,var(--color-info)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-info)_10%,transparent)] text-info hover:bg-[color-mix(in_oklab,var(--color-info)_20%,transparent)]\"\n    />\n  )\n}\n\n/* Success: onaylayici yesil ton. */\nexport function SuccessButtonGroup(props: GroupProps) {\n  return (\n    <ToneShell\n      props={props}\n      tone=\"success\"\n      label=\"Success actions\"\n      icon={<CheckCircle2 />}\n      itemClassName=\"border-[color-mix(in_oklab,var(--color-success)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-success)_10%,transparent)] text-success hover:bg-[color-mix(in_oklab,var(--color-success)_20%,transparent)]\"\n    />\n  )\n}\n\n/* Warning: dikkat cekici amber ton. */\nexport function WarningButtonGroup(props: GroupProps) {\n  return (\n    <ToneShell\n      props={props}\n      tone=\"warning\"\n      label=\"Warning actions\"\n      icon={<AlertTriangle />}\n      itemClassName=\"border-[color-mix(in_oklab,var(--color-warning)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-warning)_10%,transparent)] text-warning hover:bg-[color-mix(in_oklab,var(--color-warning)_20%,transparent)]\"\n    />\n  )\n}\n\n/* Danger: a red tone for destructive actions. */\nexport function DangerButtonGroup(props: GroupProps) {\n  return (\n    <ToneShell\n      props={props}\n      tone=\"danger\"\n      label=\"Danger actions\"\n      icon={<Ban />}\n      itemClassName=\"border-[color-mix(in_oklab,var(--color-danger)_35%,transparent)] bg-[color-mix(in_oklab,var(--color-danger)_10%,transparent)] text-danger hover:bg-[color-mix(in_oklab,var(--color-danger)_20%,transparent)]\"\n    />\n  )\n}\n\n/* Muted: a quiet neutral tone, for secondary action rows. */\nexport function MutedButtonGroup(props: GroupProps) {\n  return (\n    <ToneShell\n      props={props}\n      tone=\"neutral\"\n      label=\"Muted actions\"\n      icon={<Circle />}\n      itemClassName=\"border-border bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)] text-muted-foreground hover:bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] hover:text-foreground\"\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/button-group-tone.tsx"
    }
  ],
  "categories": [
    "styled",
    "button"
  ],
  "type": "registry:component"
}