{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "type": "registry:ui",
  "title": "Toggle Group",
  "description": "Grouped toggle buttons for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/toggle-group/toggle-group.tsx",
      "type": "registry:ui",
      "target": "components/ui/toggle-group/toggle-group.tsx",
      "content": "import React, { createContext, useContext, useState } from 'react';\nimport { getToggleGroupItemState, getToggleStyleKeys, toggleGroupStyleKeys, toggleValueInList } from '../lib/core';\nimport type { ToggleGroupBaseProps, ToggleGroupItemBaseProps } from '../lib/core';\nimport styles from './toggle-group.module.scss';\n\ntype ToggleGroupValue = string | string[];\n\ninterface ToggleGroupContextValue {\n\ttype: 'single' | 'multiple';\n\tvalue: ToggleGroupValue;\n\tonItemClick: (itemValue: string) => void;\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nfunction useToggleGroupContext(): ToggleGroupContextValue {\n\tconst context = useContext(ToggleGroupContext);\n\tif (!context) {\n\t\tthrow new Error('ToggleGroupItem must be used within <ToggleGroup>.');\n\t}\n\treturn context;\n}\n\nexport interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement>, ToggleGroupBaseProps {\n\tvalue?: string | string[];\n\tdefaultValue?: string | string[];\n\tonValueChange?: (value: string | string[]) => void;\n}\n\nconst ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(({ className = '', type = 'single', value, defaultValue, onValueChange, children, ...props }, ref) => {\n\tconst [internalValue, setInternalValue] = useState<ToggleGroupValue>(defaultValue ?? (type === 'single' ? '' : []));\n\tconst currentValue = value !== undefined ? value : internalValue;\n\n\tfunction handleItemClick(itemValue: string) {\n\t\tlet next: ToggleGroupValue;\n\n\t\tif (type === 'single') {\n\t\t\tnext = currentValue === itemValue ? '' : itemValue;\n\t\t} else {\n\t\t\tconst list = Array.isArray(currentValue) ? currentValue : [];\n\t\t\tnext = toggleValueInList(itemValue, list);\n\t\t}\n\n\t\tif (value === undefined) {\n\t\t\tsetInternalValue(next);\n\t\t}\n\n\t\tonValueChange?.(next);\n\t}\n\n\tconst context: ToggleGroupContextValue = { type, value: currentValue, onItemClick: handleItemClick };\n\n\treturn (\n\t\t<ToggleGroupContext.Provider value={context}>\n\t\t\t<div ref={ref} role=\"group\" data-slot=\"toggle-group\" data-type={type} className={`${styles[toggleGroupStyleKeys.root]} ${className}`} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</ToggleGroupContext.Provider>\n\t);\n});\nToggleGroup.displayName = 'ToggleGroup';\n\nexport interface ToggleGroupItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'>, ToggleGroupItemBaseProps {}\n\nconst ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(\n\t({ className = '', value, variant = 'default', size = 'default', disabled, children, ...props }, ref) => {\n\t\tconst context = useToggleGroupContext();\n\t\tconst selected = context.type === 'single' ? context.value === value : Array.isArray(context.value) ? context.value.includes(value) : false;\n\t\tconst state = getToggleGroupItemState(selected);\n\t\tconst styleKeys = getToggleStyleKeys(variant, size);\n\t\tconst classes = [styles[toggleGroupStyleKeys.item], styles[styleKeys.variant], styles[styleKeys.size], className].filter(Boolean).join(' ');\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={ref}\n\t\t\t\ttype=\"button\"\n\t\t\t\tvalue={value}\n\t\t\t\taria-pressed={selected}\n\t\t\t\tdata-state={state}\n\t\t\t\tdata-active={selected}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={classes}\n\t\t\t\t{...props}\n\t\t\t\tonClick={() => context.onItemClick(value)}>\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nToggleGroupItem.displayName = 'ToggleGroupItem';\n\nexport { ToggleGroup, ToggleGroupItem };\nexport default ToggleGroup;\n"
    },
    {
      "path": "packages/styles/scss/components/toggle-group.module.scss",
      "type": "registry:file",
      "target": "components/ui/toggle-group/toggle-group.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.root {\n\tdisplay: inline-flex;\n\twidth: fit-content;\n\talign-items: center;\n\tborder-radius: var(--tile-toggle-group-radius, #{$radius});\n\n\t&[data-orientation='horizontal'] {\n\t\t> *:not(:first-child) {\n\t\t\tborder-left: none;\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&[data-orientation='vertical'] {\n\t\tflex-direction: column;\n\t\talign-items: stretch;\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.item {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: var(--tile-toggle-group-gap, #{$spacing-2});\n\twhite-space: nowrap;\n\tborder-radius: var(--tile-toggle-group-radius, #{$radius});\n\tborder: 1px solid transparent;\n\tfont-size: var(--tile-toggle-group-font-size, #{$text-sm});\n\tline-height: var(--tile-toggle-group-line-height, inherit);\n\tfont-weight: $font-medium;\n\ttransition:\n\t\tcolor $transition-fast,\n\t\tbackground-color $transition-fast,\n\t\tborder-color $transition-fast,\n\t\tbox-shadow $transition-fast;\n\toutline: none;\n\tcursor: pointer;\n\n\t&:focus-visible {\n\t\tborder-color: var(--tile-toggle-group-focus-border, #{$ring});\n\t\tbox-shadow: var(--tile-toggle-group-focus-shadow, 0 0 0 3px color-mix(in srgb, #{$ring} 50%, transparent));\n\t\tz-index: 1;\n\t}\n\n\t&:disabled {\n\t\tpointer-events: none;\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\tsvg {\n\t\tpointer-events: none;\n\t\tflex-shrink: 0;\n\t\twidth: 1rem;\n\t\theight: 1rem;\n\t}\n\n\t// 状态\n\t&[data-state='on'] {\n\t\tbackground-color: var(--tile-toggle-group-selected-background, #{$accent});\n\t\tcolor: var(--tile-toggle-group-selected-color, #{$accent-foreground});\n\t}\n\n\t&[data-state='off'] {\n\t\tbackground-color: transparent;\n\t\tcolor: $foreground;\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--tile-toggle-group-hover-background, #{$muted});\n\t\t\tcolor: var(--tile-toggle-group-hover-color, #{$muted-foreground});\n\t\t}\n\t}\n\n\t// 样式变体\n\t&.variantOutline {\n\t\tborder-color: var(--tile-toggle-group-border, #{$border});\n\t\tbox-shadow: var(--tile-toggle-group-shadow, #{$shadow-sm});\n\t}\n\n\t&.variantGhost {\n\t\tbackground-color: transparent;\n\n\t\t&[data-state='on'] {\n\t\t\tbackground-color: var(--tile-toggle-group-ghost-selected-background, #{$muted});\n\t\t\tcolor: var(--tile-toggle-group-ghost-selected-color, #{$muted-foreground});\n\t\t}\n\t}\n\n\t// 尺寸变体\n\t&.sizeDefault {\n\t\theight: var(--tile-toggle-group-height, 2.25rem);\n\t\tmin-width: var(--tile-toggle-group-height, 2.25rem);\n\t\tpadding: 0 var(--tile-toggle-group-padding-inline, #{$spacing-2});\n\t}\n\n\t&.sizeSm {\n\t\theight: var(--tile-toggle-group-sm-height, 2rem);\n\t\tmin-width: var(--tile-toggle-group-sm-height, 2rem);\n\t\tpadding: 0 var(--tile-toggle-group-sm-padding-inline, #{$spacing-1_5});\n\t\tfont-size: var(--tile-toggle-group-sm-font-size, #{$text-sm});\n\t\tborder-radius: var(--tile-toggle-group-sm-radius, #{$radius});\n\t}\n\n\t&.sizeLg {\n\t\theight: var(--tile-toggle-group-lg-height, 2.5rem);\n\t\tmin-width: var(--tile-toggle-group-lg-height, 2.5rem);\n\t\tpadding: 0 var(--tile-toggle-group-lg-padding-inline, #{$spacing-2_5});\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/toggle-group/index.ts",
      "type": "registry:ui",
      "target": "components/ui/toggle-group/index.ts",
      "content": "export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps } from './toggle-group';\n"
    }
  ]
}