{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-vertical",
  "title": "Group-vertical button",
  "description": "Styled button: the Group-vertical set. 5 decorative button variations (StackButtonGroup, RailButtonGroup, CardButtonGroup, CompactButtonGroup, ListButtonGroup) 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-vertical.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Archive, Copy, Trash2 } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Vertical button-group family: five vertical action stacks. The buttons are\n   stacked, the first/last element is rounded and the middle edges are shared.\n   The difference is in density, container and alignment: a plain stack, an icon\n   rail, a carded surface, a compressed list, full-width menu rows.\n   Color comes ONLY from semantic tokens, via alpha color-mix. Deterministic, no\n   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\nconst iconSizes: Record<StyledSize, string> = {\n  sm: \"size-8\",\n  md: \"size-9\",\n  lg: \"size-10\",\n  xl: \"size-12\",\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: \"Copy\", icon: <Copy /> },\n  { label: \"Archive\", icon: <Archive /> },\n  { label: \"Delete\", icon: <Trash2 /> },\n]\n\nconst item =\n  \"relative inline-flex shrink-0 select-none items-center gap-2 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\nconst outline =\n  \"border border-field-border bg-background text-foreground hover:bg-secondary hover:text-secondary-foreground\"\n\n/* Stack: kenarlarini paylasan duz dikey yigin. */\nexport function StackButtonGroup({ className, size = \"md\", actions = defaultActions }: GroupProps) {\n  return (\n    <div\n      data-slot=\"styled-button-group\"\n      role=\"group\"\n      aria-label=\"Stacked actions\"\n      className={cn(\"inline-flex flex-col 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          className={cn(\n            item,\n            outline,\n            sizes[size],\n            \"justify-start\",\n            i > 0 && \"-mt-px\",\n            i === 0 && \"rounded-t-lg\",\n            i === actions.length - 1 && \"rounded-b-lg\"\n          )}\n        >\n          {action.icon}\n          {action.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\n/* Rail: a narrow icon rail; the labels remain as aria-label. */\nexport function RailButtonGroup({ className, size = \"md\", actions = defaultActions }: GroupProps) {\n  return (\n    <div\n      data-slot=\"styled-button-group\"\n      role=\"group\"\n      aria-label=\"Rail actions\"\n      className={cn(\n        \"inline-flex flex-col items-center gap-1 rounded-xl border border-field-border bg-background p-1\",\n        className\n      )}\n    >\n      {actions.map((action, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          onClick={action.onClick}\n          aria-label={typeof action.label === \"string\" ? action.label : undefined}\n          data-slot=\"styled-button-group-item\"\n          className={cn(\n            item,\n            \"justify-center rounded-lg text-muted-foreground hover:bg-secondary hover:text-secondary-foreground\",\n            iconSizes[size]\n          )}\n        >\n          {action.icon ?? action.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\n/* Card: yukseltilmis kart yuzeyi, satirlar arasinda ince ayirici. */\nexport function CardButtonGroup({ className, size = \"md\", actions = defaultActions }: GroupProps) {\n  return (\n    <div\n      data-slot=\"styled-button-group\"\n      role=\"group\"\n      aria-label=\"Card actions\"\n      className={cn(\n        \"inline-flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm\",\n        className\n      )}\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          className={cn(\n            item,\n            sizes[size],\n            \"justify-start text-card-foreground hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)]\",\n            i > 0 && \"border-t border-border\"\n          )}\n        >\n          {action.icon}\n          {action.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\n/* Compact: sikistirilmis yigin, dar yatay padding ve kucuk radius. */\nexport function CompactButtonGroup({ className, size = \"md\", actions = defaultActions }: GroupProps) {\n  return (\n    <div\n      data-slot=\"styled-button-group\"\n      role=\"group\"\n      aria-label=\"Compact actions\"\n      className={cn(\n        \"inline-flex flex-col gap-px rounded-md border border-field-border bg-border p-px\",\n        className\n      )}\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          className={cn(\n            item,\n            sizes[size],\n            \"justify-start rounded-sm bg-background px-2 text-foreground hover:bg-secondary hover:text-secondary-foreground\"\n          )}\n        >\n          {action.icon}\n          {action.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\n/* List: tam genislikli menu satirlari, ikon solda hizali. */\nexport function ListButtonGroup({ className, size = \"md\", actions = defaultActions }: GroupProps) {\n  return (\n    <div\n      data-slot=\"styled-button-group\"\n      role=\"group\"\n      aria-label=\"List actions\"\n      className={cn(\n        \"flex w-56 max-w-full flex-col rounded-lg border border-border bg-popover p-1 text-popover-foreground\",\n        className\n      )}\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          className={cn(\n            item,\n            sizes[size],\n            \"w-full justify-start rounded-md px-2 font-normal hover:bg-secondary hover:text-secondary-foreground\"\n          )}\n        >\n          {action.icon}\n          {action.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/button-group-vertical.tsx"
    }
  ],
  "categories": [
    "styled",
    "button"
  ],
  "type": "registry:component"
}