{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "Toggles that sit apart or join into one row.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json",
    "https://constella.aayush.cv/r/toggle.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/toggle-group.tsx",
      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { createContext, use, useMemo } from \"react\";\n\nimport { toggleStyles } from \"@/components/primitives/toggle\";\nimport type { ToggleSize, ToggleVariant } from \"@/components/primitives/toggle\";\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { joins, space } from \"@/lib/constella/tokens.stylex\";\n\nconst toggleGroupSpacings = [0, 1, 2] as const;\n\ntype ToggleGroupSpacing = (typeof toggleGroupSpacings)[number];\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\ntype ToggleGroupProps<Value extends string = string> = Styled<\n  ToggleGroupPrimitive.Props<Value>\n> & {\n  size?: ToggleSize;\n  spacing?: ToggleGroupSpacing;\n  variant?: ToggleVariant;\n};\n\nconst vertical = \":is([data-orientation='vertical'])\";\n\nconst styles = stylex.create({\n  group: {\n    alignItems: { default: \"center\", [vertical]: \"stretch\" },\n    display: \"flex\",\n    flexDirection: { default: \"row\", [vertical]: \"column\" },\n    width: \"fit-content\",\n  },\n  // Items sit apart, whole.\n  apart1: { gap: space.xxs },\n  apart2: { gap: space.xs },\n  // Items join into one segmented control, as in a ButtonGroup.\n  joined: {\n    [joins.block]: { default: \"1\", [vertical]: \"0\" },\n    [joins.either]: \"0\",\n    [joins.inline]: { default: \"0\", [vertical]: \"1\" },\n    gap: 0,\n  },\n  item: {\n    flexShrink: 0,\n  },\n});\n\nconst spacingStyles = {\n  0: styles.joined,\n  1: styles.apart1,\n  2: styles.apart2,\n} satisfies Record<ToggleGroupSpacing, stylex.StyleXStyles>;\n\nconst ToggleGroupContext = createContext<{\n  size: ToggleSize;\n  variant: ToggleVariant;\n}>({ size: \"default\", variant: \"default\" });\n\nfunction ToggleGroup<Value extends string>({\n  size = \"default\",\n  spacing = 2,\n  sx,\n  variant = \"default\",\n  ...props\n}: ToggleGroupProps<Value>) {\n  const context = useMemo(() => ({ size, variant }), [size, variant]);\n  return (\n    <ToggleGroupContext value={context}>\n      <ToggleGroupPrimitive\n        data-size={size}\n        data-slot=\"toggle-group\"\n        data-spacing={spacing}\n        data-variant={variant}\n        {...props}\n        {...stylex.props(styles.group, spacingStyles[spacing], sx)}\n      />\n    </ToggleGroupContext>\n  );\n}\n\nfunction ToggleGroupItem({ sx, ...props }: Styled<TogglePrimitive.Props>) {\n  const { size, variant } = use(ToggleGroupContext);\n  return (\n    <TogglePrimitive\n      data-size={size}\n      data-slot=\"toggle-group-item\"\n      data-variant={variant}\n      {...props}\n      {...stylex.props(toggleStyles({ size, variant }), styles.item, sx)}\n    />\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem, toggleGroupSpacings };\nexport type { ToggleGroupProps, ToggleGroupSpacing };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/toggle-group/index.md",
  "type": "registry:ui"
}