{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button",
  "type": "registry:ui",
  "title": "Button",
  "description": "Multi-variant React button component for Tile UI.",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/utils",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/button/button.tsx",
      "type": "registry:ui",
      "target": "components/ui/button/button.tsx",
      "content": "import React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { getButtonStyleKeys, isButtonDisabled } from '../lib/core';\nimport type { ButtonBaseProps } from '../lib/core';\nimport styles from './button.module.scss';\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonBaseProps {}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t({ className = '', variant = 'default', size = 'default', asChild = false, loading = false, disabled, children, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : 'button';\n\t\tconst styleKeys = getButtonStyleKeys(variant, size);\n\n\t\tconst classes = [styles[styleKeys.base], styles[styleKeys.variant], styles[styleKeys.size], className].filter(Boolean).join(' ');\n\n\t\treturn (\n\t\t\t<Comp ref={ref} className={classes} disabled={isButtonDisabled(disabled, loading)} {...props}>\n\t\t\t\t{asChild ? (\n\t\t\t\t\tchildren\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{loading && (\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName={styles.spinner}\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\">\n\t\t\t\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</Comp>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n\nexport { Button };\nexport default Button;\n"
    },
    {
      "path": "packages/styles/scss/components/button.module.scss",
      "type": "registry:file",
      "target": "components/ui/button/button.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.button {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: var(--tile-button-gap, #{$spacing-2});\n\twhite-space: nowrap;\n\tborder-radius: var(--tile-button-radius, #{$radius});\n\tfont-family: var(--tile-button-font-family, inherit);\n\tfont-size: var(--tile-button-font-size, #{$text-sm});\n\tline-height: var(--tile-button-line-height, inherit);\n\tfont-weight: $font-medium;\n\ttransition: all $transition-fast;\n\tcursor: pointer;\n\toutline: none;\n\n\t&:focus-visible {\n\t\toutline: var(--tile-button-focus-outline, none);\n\t\toutline-offset: var(--tile-button-focus-outline-offset, 0px);\n\t\toutline-style: var(--tile-button-focus-outline-style, none);\n\t\tbox-shadow:\n\t\t\t0 0 0 2px $background,\n\t\t\t0 0 0 4px $ring;\n\t}\n\n\t&:disabled,\n\t&.disabled,\n\t&[aria-disabled='true'] {\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\twidth: var(--tile-button-icon-size, 1em);\n\t\theight: var(--tile-button-icon-size, 1em);\n\t}\n\n\t// 尺寸变体\n\t&.sizeDefault {\n\t\theight: var(--tile-button-height, 2.25rem);\n\t\tpadding: 0 var(--tile-button-padding-inline, #{$spacing-4});\n\t\tpadding-block: var(--tile-button-padding-block, 0);\n\n\t\t&.hasIcon {\n\t\t\tpadding-inline: var(--tile-button-icon-padding-inline, #{$spacing-3});\n\t\t}\n\t}\n\n\t&.sizeXs {\n\t\theight: var(--tile-button-xs-height, 1.5rem);\n\t\tgap: var(--tile-button-xs-gap, #{$spacing-1});\n\t\tborder-radius: var(--tile-button-xs-radius, #{$radius});\n\t\tpadding: 0 var(--tile-button-xs-padding-inline, #{$spacing-2});\n\t\tpadding-block: var(--tile-button-xs-padding-block, 0);\n\t\tfont-size: var(--tile-button-xs-font-size, #{$text-xs});\n\t\tline-height: var(--tile-button-compact-line-height, inherit);\n\n\t\tsvg {\n\t\t\twidth: 0.75rem;\n\t\t\theight: 0.75rem;\n\t\t}\n\n\t\t&.hasIcon {\n\t\t\tpadding-inline: var(--tile-button-xs-icon-padding-inline, #{$spacing-1_5});\n\t\t}\n\t}\n\n\t&.sizeSm {\n\t\theight: var(--tile-button-sm-height, 2rem);\n\t\tborder-radius: var(--tile-button-sm-radius, #{$radius-sm});\n\t\tpadding: 0 var(--tile-button-sm-padding-inline, #{$spacing-3});\n\t\tpadding-block: var(--tile-button-sm-padding-block, 0);\n\t\tfont-size: var(--tile-button-sm-font-size, #{$text-xs});\n\t\tline-height: var(--tile-button-compact-line-height, inherit);\n\t\tgap: var(--tile-button-sm-gap, #{$spacing-2});\n\n\t\t&.hasIcon {\n\t\t\tpadding-inline: var(--tile-button-sm-icon-padding-inline, #{$spacing-2});\n\t\t\tgap: var(--tile-button-sm-gap, #{$spacing-1});\n\t\t}\n\t}\n\n\t&.sizeLg {\n\t\theight: var(--tile-button-lg-height, 2.5rem);\n\t\tborder-radius: var(--tile-button-lg-radius, #{$radius-md});\n\t\tpadding: 0 var(--tile-button-lg-padding-inline, #{$spacing-6});\n\t\tpadding-block: var(--tile-button-lg-padding-block, 0);\n\t\tfont-size: var(--tile-button-lg-font-size, #{$text-base});\n\t\tgap: var(--tile-button-lg-gap, #{$spacing-2});\n\n\t\t&.hasIcon {\n\t\t\tpadding-inline: var(--tile-button-lg-icon-padding-inline, #{$spacing-4});\n\t\t}\n\t}\n\n\t&.sizeIcon {\n\t\theight: var(--tile-button-height, 2.25rem);\n\t\twidth: var(--tile-button-height, 2.25rem);\n\t\tpadding: 0;\n\t}\n\n\t&.sizeIconXs {\n\t\theight: var(--tile-button-icon-xs-size, 1.5rem);\n\t\twidth: var(--tile-button-icon-xs-size, 1.5rem);\n\t\tborder-radius: var(--tile-button-xs-radius, #{$radius});\n\t\tpadding: 0;\n\n\t\tsvg {\n\t\t\twidth: 0.75rem;\n\t\t\theight: 0.75rem;\n\t\t}\n\t}\n\n\t&.sizeIconSm {\n\t\theight: var(--tile-button-sm-height, 2rem);\n\t\twidth: var(--tile-button-sm-height, 2rem);\n\t\tborder-radius: var(--tile-button-icon-sm-radius, #{$radius});\n\t\tpadding: 0;\n\t}\n\n\t&.sizeIconLg {\n\t\theight: var(--tile-button-lg-height, 2.5rem);\n\t\twidth: var(--tile-button-lg-height, 2.5rem);\n\t\tpadding: 0;\n\t}\n\n\t// 样式变体\n\t&.variantDefault {\n\t\tbackground-color: var(--tile-button-default-background, #{$primary});\n\t\tbackground-image: var(--tile-button-default-background-image, none);\n\t\tcolor: var(--tile-button-default-color, #{$primary-foreground});\n\t\tborder: none;\n\t\tbox-shadow: var(--tile-button-default-shadow, #{$shadow-sm});\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: var(--tile-button-default-focus-shadow, #{$shadow-sm});\n\t\t}\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--tile-button-default-hover-background, #{$primary-hover});\n\t\t\tbackground-image: var(--tile-button-default-hover-background-image, none);\n\t\t}\n\n\t\t&:active:not(:disabled) {\n\t\t\tbackground-color: var(--tile-button-default-active-background, #{$primary-active});\n\t\t\tbackground-image: var(--tile-button-default-active-background-image, none);\n\t\t}\n\t}\n\n\t&.variantDestructive {\n\t\tbackground-color: var(--tile-button-destructive-background, #{$destructive});\n\t\tbackground-image: var(--tile-button-destructive-background-image, none);\n\t\tcolor: var(--tile-button-destructive-color, #{$destructive-foreground});\n\t\tborder: none;\n\t\tbox-shadow: var(--tile-button-destructive-shadow, #{$shadow-sm});\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--tile-button-destructive-hover-background, #{$destructive-hover});\n\t\t\tbackground-image: var(--tile-button-destructive-hover-background-image, none);\n\t\t}\n\t}\n\n\t&.variantOutline {\n\t\tbackground-color: var(--tile-button-outline-background, transparent);\n\t\tcolor: var(--tile-button-outline-color, #{$foreground});\n\t\tborder: var(--tile-button-outline-border-width, 1px) solid $border;\n\t\tbox-shadow: var(--tile-button-outline-shadow, #{$shadow-sm});\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--tile-button-outline-hover-background, #{$accent});\n\t\t\tcolor: var(--tile-button-outline-hover-color, #{$accent-foreground});\n\t\t\tbox-shadow: var(--tile-button-outline-hover-shadow, #{$shadow-sm});\n\t\t}\n\t}\n\n\t&.variantSecondary {\n\t\tbackground-color: var(--tile-button-secondary-background, #{$secondary});\n\t\tcolor: var(--tile-button-secondary-color, #{$secondary-foreground});\n\t\tborder: none;\n\t\tbox-shadow: var(--tile-button-secondary-shadow, #{$shadow-sm});\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--tile-button-secondary-hover-background, #{$secondary-hover});\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: var(--tile-button-secondary-focus-shadow, #{$shadow-sm});\n\t\t}\n\n\t\t&:disabled,\n\t\t&.disabled,\n\t\t&[aria-disabled='true'] {\n\t\t\tcolor: var(--tile-button-secondary-disabled-color, #{$secondary-foreground});\n\t\t\tbackground-color: var(--tile-button-secondary-disabled-background, #{$secondary});\n\t\t}\n\t}\n\n\t&.variantGhost {\n\t\tbackground-color: var(--tile-button-ghost-background, transparent);\n\t\tcolor: var(--tile-button-ghost-color, #{$foreground});\n\t\tbox-shadow: var(--tile-button-ghost-shadow, none);\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground-color: var(--tile-button-ghost-hover-background, #{$accent});\n\t\t\tcolor: var(--tile-button-ghost-hover-color, #{$accent-foreground});\n\t\t}\n\t}\n\n\t&.variantLink {\n\t\tbackground-color: transparent;\n\t\tcolor: var(--tile-button-link-color, #{$primary});\n\t\ttext-decoration: underline;\n\t\ttext-underline-offset: 4px;\n\n\t\t&:hover:not(:disabled) {\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/button/index.ts",
      "type": "registry:ui",
      "target": "components/ui/button/index.ts",
      "content": "export { Button, type ButtonProps } from './button';\n"
    }
  ]
}