{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "type": "registry:ui",
  "title": "Toggle",
  "description": "Toggle button with pressed state for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/toggle/toggle.tsx",
      "type": "registry:ui",
      "target": "components/ui/toggle/toggle.tsx",
      "content": "import React, { useState } from 'react';\nimport { getToggleState, getToggleStyleKeys } from '../lib/core';\nimport type { ToggleBaseProps } from '../lib/core';\nimport styles from './toggle.module.scss';\n\nexport interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ToggleBaseProps {\n\tpressed?: boolean;\n\tdefaultPressed?: boolean;\n\tonPressedChange?: (pressed: boolean) => void;\n}\n\nconst Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(\n\t({ className = '', variant = 'default', size = 'default', pressed, defaultPressed = false, disabled, onPressedChange, children, ...props }, ref) => {\n\t\tconst [internalPressed, setInternalPressed] = useState(defaultPressed);\n\t\tconst isPressed = pressed !== undefined ? pressed : internalPressed;\n\t\tconst state = getToggleState(isPressed);\n\t\tconst styleKeys = getToggleStyleKeys(variant, size);\n\t\tconst classes = [styles[styleKeys.base], styles[styleKeys.variant], styles[styleKeys.size], className].filter(Boolean).join(' ');\n\n\t\tfunction handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n\t\t\tconst next = !isPressed;\n\n\t\t\tif (pressed === undefined) {\n\t\t\t\tsetInternalPressed(next);\n\t\t\t}\n\n\t\t\tonPressedChange?.(next);\n\t\t\tprops.onClick?.(event);\n\t\t}\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\taria-pressed={isPressed}\n\t\t\t\tdata-state={state}\n\t\t\t\tdata-variant={variant}\n\t\t\t\tdata-size={size}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={classes}\n\t\t\t\t{...props}\n\t\t\t\tonClick={handleClick}>\n\t\t\t\t{children}\n\t\t\t</button>\n\t\t);\n\t},\n);\nToggle.displayName = 'Toggle';\n\nexport { Toggle };\nexport default Toggle;\n"
    },
    {
      "path": "packages/styles/scss/components/toggle.module.scss",
      "type": "registry:file",
      "target": "components/ui/toggle/toggle.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.toggle {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: var(--tile-toggle-gap, #{$spacing-2});\n\twhite-space: nowrap;\n\tborder-radius: var(--tile-toggle-radius, #{$radius});\n\tborder: 1px solid transparent;\n\tfont-size: var(--tile-toggle-font-size, #{$text-sm});\n\tline-height: var(--tile-toggle-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-focus-border, #{$ring});\n\t\tbox-shadow: var(--tile-toggle-focus-shadow, 0 0 0 3px color-mix(in srgb, #{$ring} 50%, transparent));\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-selected-background, #{$accent});\n\t\tcolor: var(--tile-toggle-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-hover-background, #{$muted});\n\t\t\tcolor: var(--tile-toggle-hover-color, #{$muted-foreground});\n\t\t}\n\t}\n\n\t// 样式变体\n\t&.variantDefault {\n\t\tbackground-color: transparent;\n\n\t\t&[data-state='on'] {\n\t\t\tbackground-color: var(--tile-toggle-selected-background, transparent);\n\t\t}\n\t}\n\n\t&.variantOutline {\n\t\tborder-color: var(--tile-toggle-border, #{$border});\n\t\tbox-shadow: var(--tile-toggle-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-ghost-selected-background, #{$muted});\n\t\t\tcolor: var(--tile-toggle-ghost-selected-color, #{$muted-foreground});\n\t\t}\n\t}\n\n\t// 尺寸变体\n\t&.sizeDefault {\n\t\theight: var(--tile-toggle-height, 2.25rem);\n\t\tmin-width: var(--tile-toggle-height, 2.25rem);\n\t\tpadding: 0 var(--tile-toggle-padding-inline, #{$spacing-2});\n\t}\n\n\t&.sizeSm {\n\t\theight: var(--tile-toggle-sm-height, 2rem);\n\t\tmin-width: var(--tile-toggle-sm-height, 2rem);\n\t\tpadding: 0 var(--tile-toggle-sm-padding-inline, #{$spacing-1_5});\n\t\tfont-size: var(--tile-toggle-sm-font-size, #{$text-sm});\n\t\tborder-radius: var(--tile-toggle-sm-radius, #{$radius});\n\t}\n\n\t&.sizeLg {\n\t\theight: var(--tile-toggle-lg-height, 2.5rem);\n\t\tmin-width: var(--tile-toggle-lg-height, 2.5rem);\n\t\tpadding: 0 var(--tile-toggle-lg-padding-inline, #{$spacing-2_5});\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/toggle/index.ts",
      "type": "registry:ui",
      "target": "components/ui/toggle/index.ts",
      "content": "export { Toggle, type ToggleProps } from './toggle';\n"
    }
  ]
}