{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "title": "Button Group",
  "description": "Joins buttons, inputs and text into one control, across or down.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json",
    "https://constella.aayush.cv/r/separator.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/button-group.tsx",
      "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\n\nimport { Separator } from \"@/components/primitives/separator\";\nimport type { SeparatorProps } from \"@/components/primitives/separator\";\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { joinStyles, typeStyles } from \"@/lib/constella/styles\";\nimport {\n  colors,\n  fontWeights,\n  joins,\n  space,\n  strokes,\n} from \"@/lib/constella/tokens.stylex\";\n\nconst buttonGroupOrientations = [\"horizontal\", \"vertical\"] as const;\n\ntype ButtonGroupOrientation = (typeof buttonGroupOrientations)[number];\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\ntype ButtonGroupProps = Styled<ComponentProps<\"div\">> & {\n  orientation?: ButtonGroupOrientation;\n};\n\ntype ButtonGroupTextProps = Styled<useRender.ComponentProps<\"div\">>;\n\n// Groups inside a group sit apart, so nothing joins at this level.\nconst nested = \":has(> [data-slot='button-group'])\";\n\nconst styles = stylex.create({\n  group: {\n    alignItems: \"stretch\",\n    display: \"flex\",\n    gap: { default: 0, [nested]: space.xs },\n    width: \"fit-content\",\n  },\n  horizontal: {\n    [joins.block]: \"1\",\n    [joins.either]: { default: \"0\", [nested]: \"1\" },\n    [joins.inline]: { default: \"0\", [nested]: \"1\" },\n  },\n  vertical: {\n    [joins.block]: { default: \"0\", [nested]: \"1\" },\n    [joins.either]: { default: \"0\", [nested]: \"1\" },\n    [joins.inline]: \"1\",\n    flexDirection: \"column\",\n  },\n  text: {\n    alignItems: \"center\",\n    backgroundClip: \"padding-box\",\n    backgroundColor: colors.fill,\n    borderBlockEndWidth: strokes.border,\n    borderBlockStartWidth: strokes.border,\n    borderBlockColor: colors.border,\n    borderInlineColor: colors.border,\n    borderInlineEndWidth: strokes.border,\n    borderInlineStartWidth: strokes.border,\n    borderBlockStyle: \"solid\",\n    borderInlineStyle: \"solid\",\n    color: colors.textPrimary,\n    display: \"flex\",\n    fontWeight: fontWeights.medium,\n    gap: space.xs,\n    paddingInline: space.popup,\n    whiteSpace: \"nowrap\",\n  },\n  separatorHorizontal: {\n    backgroundColor: colors.border,\n    width: \"auto\",\n  },\n  separatorVertical: { backgroundColor: colors.border },\n});\n\nconst orientationStyles = {\n  horizontal: styles.horizontal,\n  vertical: styles.vertical,\n} satisfies Record<ButtonGroupOrientation, stylex.StyleXStyles>;\n\nfunction ButtonGroup({\n  orientation = \"horizontal\",\n  sx,\n  ...props\n}: ButtonGroupProps) {\n  return (\n    <div\n      data-orientation={orientation}\n      data-slot=\"button-group\"\n      // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role -- a fieldset brings its own border and padding into a flex row\n      role=\"group\"\n      {...props}\n      {...stylex.props(styles.group, orientationStyles[orientation], sx)}\n    />\n  );\n}\n\nfunction ButtonGroupText({ render, sx, ...props }: ButtonGroupTextProps) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      props,\n      stylex.props(\n        [typeStyles.textSm, styles.text],\n        joinStyles.sm,\n        joinStyles.edges,\n        sx\n      )\n    ),\n    render,\n    // Base UI writes state as data attributes: `data-slot=\"button-group-text\"`.\n    state: { slot: \"button-group-text\" },\n  });\n}\n\nfunction ButtonGroupSeparator({\n  orientation = \"vertical\",\n  sx,\n  ...props\n}: SeparatorProps) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      {...props}\n      sx={[\n        orientation === \"vertical\"\n          ? styles.separatorVertical\n          : styles.separatorHorizontal,\n        sx,\n      ]}\n    />\n  );\n}\n\nexport {\n  ButtonGroup,\n  buttonGroupOrientations,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n};\nexport type { ButtonGroupOrientation, ButtonGroupProps, ButtonGroupTextProps };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/button-group/index.md",
  "type": "registry:ui"
}