{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "toggle-group",
  "dependencies": [
    "@radix-ui/react-toggle-group",
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils",
    "@dwellir/choice-group",
    "@dwellir/toggle"
  ],
  "files": [
    {
      "path": "components/ui/toggle-group.tsx",
      "content": "'use client';\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { type ComponentProps, createContext, type FocusEvent, useContext } from 'react';\nimport { choiceGroupVariants, choiceItemVariants } from '@/components/ui/choice-group';\nimport { sizeFor, toggleVariants } from '@/components/ui/toggle';\nimport { cn } from '@/lib/utils';\n\n/*\n * segmented, pills, tiles and bare are ChoiceGroup's looks, so a choice and a\n * toggle read the same. default and outline are upstream's, from Toggle: they\n * take a size and a spacing, and with spacing 0 (the default) they join into one bar.\n * visual is Toggle's too: the items' children draw them, such as a chart's bars.\n */\ntype HouseVariant = NonNullable<VariantProps<typeof choiceGroupVariants>['variant']>;\ntype ToggleVariant = NonNullable<VariantProps<typeof toggleVariants>['variant']>;\ntype Variant = HouseVariant | ToggleVariant;\ntype Size = VariantProps<typeof toggleVariants>['size'];\n\n/*\n * The items sit on one line, so the gap is gap-x: the row gap stays the\n * parent's, and under a finger each item's tap reaches into the room above and below.\n */\nconst spacingVariants = cva('flex w-fit items-center', {\n  variants: { spacing: { 0: 'gap-x-0', 1: 'gap-x-1', 2: 'gap-x-2', 3: 'gap-x-3', 4: 'gap-x-4' } },\n  defaultVariants: { spacing: 0 },\n});\n\ntype Spacing = NonNullable<VariantProps<typeof spacingVariants>['spacing']>;\n\ninterface GroupContext {\n  variant?: Variant;\n  size?: Size;\n  spacing: Spacing;\n}\n\nconst ToggleGroupContext = createContext<GroupContext>({ spacing: 0 });\n\nfunction isToggleLook(variant: Variant | undefined): variant is ToggleVariant {\n  return variant === 'default' || variant === 'outline' || variant === 'visual';\n}\n\n/**\n * Focus that lands on the group goes on to its pressed item, or the first.\n * Radix does this too, but skips it after a second click on the focused\n * item: the group then holds focus with no ring and ignores the arrow keys.\n */\nfunction focusItem(event: FocusEvent<HTMLDivElement>) {\n  if (event.target !== event.currentTarget) return;\n  const items = [\n    ...event.currentTarget.querySelectorAll<HTMLElement>(\n      '[data-slot=\"toggle-group-item\"]:not(:disabled)',\n    ),\n  ];\n  (items.find((item) => item.dataset.state === 'on') ?? items[0])?.focus();\n}\n\n/** On/off toggles, any number on. For one choice from a few, use ChoiceGroup. */\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  children,\n  onFocus,\n  ...props\n}: ComponentProps<typeof ToggleGroupPrimitive.Root> & {\n  variant?: Variant;\n  size?: Size;\n  /**\n   * Gap between default or outline items, in spacing steps: 0 to 4. Upstream\n   * takes any number through an inline style; a part here has no inline\n   * style, so each step is a class. The house looks set their own gap.\n   */\n  spacing?: Spacing;\n}) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant ?? 'segmented'}\n      data-size={variant === 'visual' ? undefined : (size ?? 'default')}\n      data-spacing={spacing}\n      className={cn(\n        isToggleLook(variant) ? spacingVariants({ spacing }) : choiceGroupVariants({ variant }),\n        className,\n      )}\n      onFocus={(event) => {\n        onFocus?.(event);\n        focusItem(event);\n      }}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  );\n}\n\n/* The group's variant and size win; the item's own apply when the group sets none. */\nfunction ToggleGroupItem({\n  className,\n  variant,\n  size,\n  ...props\n}: ComponentProps<typeof ToggleGroupPrimitive.Item> & { variant?: Variant; size?: Size }) {\n  const group = useContext(ToggleGroupContext);\n  const look = group.variant ?? variant;\n  const itemSize = group.size ?? size;\n  /* A visual item has no size or spacing, so it leaves both out of the HTML. */\n  const visual = look === 'visual';\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={look ?? 'segmented'}\n      data-size={visual ? undefined : (itemSize ?? 'default')}\n      data-spacing={visual ? undefined : group.spacing}\n      className={cn(\n        isToggleLook(look)\n          ? [\n              toggleVariants({ variant: look, size: sizeFor(look, itemSize) }),\n              !visual && 'toggle-joined focus-visible:z-10',\n            ]\n          : choiceItemVariants({ variant: look }),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}