{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "author": "AniBT <https://anibt.net>",
  "description": "AniBT toggle group: the segmented track with sticker thumbs, or a row of 28px filter chips that turn pink and show a tick when pressed.",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "radix-ui"
  ],
  "registryDependencies": [
    "@anibt/theme"
  ],
  "files": [
    {
      "path": "registry/anibt/ui/toggle-group.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { CheckIcon } from \"lucide-react\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * ToggleGroup — buttons that stay pressed (AniBT 「贴纸手账」, Radix\n * ToggleGroup): a view switch, a formatting bar, a row of filters.\n *\n * - `variant=\"default\"`: A's segmented track — the sunk `--muted` well on\n *   radius 10 with 4px of padding; items are 24px, 12/600 `--anibt-ink2`;\n *   a pressed item is a white sticker thumb in ink with its glyph in pink.\n * - `variant=\"outline\"`: A's filter chips — 28px paper keys under a 1px\n *   `--input` ring that hop 1px under the pointer; a pressed chip is the\n *   pink wash with a pink ring and pink ink. In a `type=\"multiple\"` group\n *   each pressed chip also shows a tick, so a multi-select never rides on\n *   colour alone.\n *\n * `type=\"single\"` can be pressed off again; when one choice must always\n * hold (a form value), use `SegmentedControl`. `size` is `sm` / `default` /\n * `lg`; `spacing` is the gap in Tailwind steps (2px track, 8px chips by\n * default). Sizes and variant names follow shadcn's toggle.\n */\n\nconst toggleGroupItemVariants = cva(\n  \"group/toggle-item inline-flex min-w-0 shrink-0 cursor-pointer items-center justify-center gap-1 text-[12px] leading-none font-semibold whitespace-nowrap outline-hidden focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring focus-visible:outline-solid disabled:pointer-events-none disabled:text-muted-foreground aria-invalid:outline-2 aria-invalid:outline-anibt-danger-fill aria-invalid:outline-solid [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"rounded-[6px] bg-transparent text-anibt-ink2 transition-[color,background-color,box-shadow] duration-200 ease-anibt-out hover:text-foreground [&_svg]:text-muted-foreground data-[state=on]:bg-card data-[state=on]:text-foreground data-[state=on]:shadow-(--anibt-shadow-sticker) data-[state=on]:[&_svg]:text-anibt-mark\",\n        outline:\n          \"rounded-[10px] bg-card text-anibt-ink2 shadow-[inset_0_0_0_1px_var(--input)] transition-[transform,color,background-color,box-shadow] duration-200 ease-anibt-spring hover:-translate-y-px hover:text-accent-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:shadow-[inset_0_0_0_1px_var(--anibt-wash-line)] disabled:bg-muted disabled:shadow-[inset_0_0_0_1px_var(--border)]\",\n      },\n      size: {\n        sm: \"\",\n        default: \"\",\n        lg: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"default\", size: \"sm\", class: \"h-6 min-w-6 px-1.5\" },\n      { variant: \"default\", size: \"default\", class: \"h-6 min-w-6 px-2\" },\n      { variant: \"default\", size: \"lg\", class: \"h-8 min-w-8 px-2.5 text-[13px]\" },\n      { variant: \"outline\", size: \"sm\", class: \"h-6 min-w-6 px-2.5\" },\n      { variant: \"outline\", size: \"default\", class: \"h-7 min-w-7 px-3\" },\n      { variant: \"outline\", size: \"lg\", class: \"h-8 min-w-8 px-3.5 text-[13px]\" },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\ntype ToggleGroupContextValue = VariantProps<typeof toggleGroupItemVariants> & {\n  type: \"single\" | \"multiple\"\n}\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue>({\n  variant: \"default\",\n  size: \"default\",\n  type: \"single\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  spacing,\n  orientation = \"horizontal\",\n  style,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleGroupItemVariants> & {\n    /** The gap between items, in Tailwind spacing steps. */\n    spacing?: number\n  }) {\n  const gap = spacing ?? (variant === \"outline\" ? 2 : 0.5)\n  const context = React.useMemo(() => ({ variant, size, type: props.type }), [variant, size, props.type])\n\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={gap}\n      data-orientation={orientation}\n      orientation={orientation}\n      style={{ \"--gap\": gap, ...style } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit max-w-full items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n        variant === \"outline\"\n          ? \"flex-wrap\"\n          : \"rounded-[10px] bg-muted p-1 shadow-[inset_0_0_0_1px_var(--border)]\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={context}>{children}</ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleGroupItemVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const itemVariant = context.variant ?? variant\n  const itemSize = context.size ?? size\n  const ticks = itemVariant === \"outline\" && context.type === \"multiple\"\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant}\n      data-size={itemSize}\n      className={cn(toggleGroupItemVariants({ variant: itemVariant, size: itemSize }), className)}\n      {...props}\n    >\n      {ticks ? (\n        <CheckIcon\n          aria-hidden=\"true\"\n          strokeWidth={3}\n          className=\"-ml-0.5 hidden size-3.5 animate-anibt-pop group-data-[state=on]/toggle-item:block\"\n        />\n      ) : null}\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants }\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}