{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "type": "registry:ui",
  "title": "Button Group",
  "description": "Grouped button container for Tile UI.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/button-group/button-group.tsx",
      "type": "registry:ui",
      "target": "components/ui/button-group/button-group.tsx",
      "content": "import React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { buttonGroupStyleKeys, getButtonGroupStyleKeys } from '../lib/core';\nimport type { ButtonGroupBaseProps, ButtonGroupTextBaseProps, ButtonGroupSeparatorBaseProps } from '../lib/core';\nimport styles from './button-group.module.scss';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement>, ButtonGroupBaseProps {}\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(({ className = '', orientation = 'horizontal', children, ...props }, ref) => {\n\tconst styleKeys = getButtonGroupStyleKeys(orientation);\n\tconst classes = [styles[styleKeys.base], styles[styleKeys.orientation], className].filter(Boolean).join(' ');\n\n\treturn (\n\t\t<div ref={ref} role=\"group\" data-slot=\"button-group\" data-orientation={orientation} className={classes} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nButtonGroup.displayName = 'ButtonGroup';\n\nexport interface ButtonGroupTextProps extends React.HTMLAttributes<HTMLDivElement>, ButtonGroupTextBaseProps {}\n\nconst ButtonGroupText = React.forwardRef<HTMLDivElement, ButtonGroupTextProps>(({ className = '', asChild = false, children, ...props }, ref) => {\n\tconst Comp = asChild ? Slot : 'div';\n\n\treturn (\n\t\t<Comp ref={ref} className={`${styles[buttonGroupStyleKeys.text]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</Comp>\n\t);\n});\nButtonGroupText.displayName = 'ButtonGroupText';\n\nexport interface ButtonGroupSeparatorProps extends React.HTMLAttributes<HTMLDivElement>, ButtonGroupSeparatorBaseProps {}\n\nconst ButtonGroupSeparator = React.forwardRef<HTMLDivElement, ButtonGroupSeparatorProps>(({ className = '', orientation = 'vertical', ...props }, ref) => {\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\trole=\"none\"\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-slot=\"button-group-separator\"\n\t\t\tdata-orientation={orientation}\n\t\t\tclassName={`${styles[buttonGroupStyleKeys.separator]} ${className}`}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nButtonGroupSeparator.displayName = 'ButtonGroupSeparator';\n\nexport { ButtonGroup, ButtonGroupText, ButtonGroupSeparator };\nexport default ButtonGroup;\n"
    },
    {
      "path": "packages/styles/scss/components/button-group.module.scss",
      "type": "registry:file",
      "target": "components/ui/button-group/button-group.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.buttonGroup {\n\tposition: var(--tile-button-group-position, static);\n\tisolation: var(--tile-button-group-isolation, auto);\n\tdisplay: flex;\n\twidth: fit-content;\n\talign-items: stretch;\n\n\t> * {\n\t\t&:focus-visible {\n\t\t\tposition: relative;\n\t\t\tz-index: var(--tile-button-group-focus-z-index, 1);\n\t\t}\n\t}\n\n\t// 嵌套按钮组\n\t[data-slot='button-group'] {\n\t\tgap: $spacing-2;\n\t}\n\n\t// 排列方向\n\t&.orientationHorizontal {\n\t\tflex-direction: row;\n\n\t\t// 直接子元素之间的连接样式\n\t\t> *:not(:first-child) {\n\t\t\tborder-left: var(--tile-button-group-seam-border, none);\n\t\t\tmargin-inline-start: var(--tile-button-group-seam-overlap, 0);\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-bottom-left-radius: 0;\n\t\t}\n\n\t\t> *:not(:last-child) {\n\t\t\tborder-top-right-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\t}\n\n\t&.orientationVertical {\n\t\tflex-direction: column;\n\n\t\t> *:not(:first-child) {\n\t\t\tborder-top: none;\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t}\n\n\t\t> *:not(:last-child) {\n\t\t\tborder-bottom-right-radius: 0;\n\t\t\tborder-bottom-left-radius: 0;\n\t\t}\n\t}\n}\n\n.text {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: $spacing-2;\n\tborder-radius: var(--tile-button-group-radius, $radius);\n\tborder: 1px solid var(--tile-button-group-border, $border);\n\tbackground-color: var(--tile-button-group-background, $muted);\n\tpadding: var(--tile-button-group-padding, 0 $spacing-4);\n\tfont-size: var(--tile-button-group-font-size, $text-sm);\n\tfont-weight: var(--tile-button-group-font-weight, $font-medium);\n\tbox-shadow: var(--tile-button-group-shadow, $shadow-sm);\n\n\tsvg {\n\t\tpointer-events: none;\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t}\n}\n\n.separator {\n\tposition: relative;\n\talign-self: stretch;\n\tmargin: 0;\n\tbackground-color: var(--tile-button-group-separator, $input);\n\n\t&[data-orientation='vertical'] {\n\t\theight: auto;\n\t\twidth: 1px;\n\t}\n\n\t&[data-orientation='horizontal'] {\n\t\theight: 1px;\n\t\twidth: auto;\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/button-group/index.ts",
      "type": "registry:ui",
      "target": "components/ui/button-group/index.ts",
      "content": "export { ButtonGroup, ButtonGroupText, ButtonGroupSeparator, type ButtonGroupProps, type ButtonGroupTextProps, type ButtonGroupSeparatorProps } from './button-group';\n"
    }
  ]
}