@spark-ui/components 18.1.0 → 18.1.2

package/dist/{button-D0s-21qo.js.map → button-3vvMrf1L.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-D0s-21qo.js","names":[],"sources":["../src/button/Button.appearance-styles.tsx","../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const buttonAppearanceStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'rounded-button',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Add underline to the button text.\n       */\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Semantic appearance of the button that combines design and intent.\n       * When specified, this prop overrides both `design` and `intent`.\n       *\n       * - `primary`: Main action, filled background\n       * - `secondary`: Secondary action, filled support background\n       * - `tertiary`: Tertiary action, outlined with surface background\n       * - `contrast`: Contrast action, surface background\n       * - `ghost`: Link-style without background\n       * - `success`: Success action, outlined with transparent background\n       * - `danger`: Danger action, outlined with transparent background\n       * - `boost`: Accent action, filled accent background\n       * - `AI`: AI action, filled AI background\n       */\n      appearance: {\n        primary: [\n          'bg-main',\n          'text-on-main',\n          'rounded-button',\n          'enabled:hover:bg-main-hovered',\n          'enabled:active:bg-main-hovered',\n          'enabled:focus-visible:bg-main-hovered',\n        ],\n        secondary: [\n          'bg-support',\n          'text-on-support',\n          'rounded-button',\n          'enabled:hover:bg-support-hovered',\n          'enabled:active:bg-support-hovered',\n          'enabled:focus-visible:bg-support-hovered',\n        ],\n        tertiary: [\n          'border-outline',\n          'border-sm',\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        contrast: [\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        ghost: ['text-on-surface default:-mx-md px-md enabled:hover:bg-surface-hovered'],\n        success: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-success',\n          'rounded-button',\n          'enabled:hover:bg-success-container',\n          'enabled:active:bg-success-container',\n          'enabled:focus-visible:bg-success-container',\n        ],\n        danger: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-error',\n          'rounded-button',\n          'enabled:hover:bg-error-container',\n          'enabled:active:bg-error-container',\n          'enabled:focus-visible:bg-error-container',\n        ],\n        boost: [\n          'bg-accent',\n          'text-on-accent',\n          'rounded-button',\n          'enabled:hover:bg-accent-hovered',\n          'enabled:active:bg-accent-hovered',\n          'enabled:focus-visible:bg-accent-hovered',\n        ],\n        AI: [\n          'bg-ai',\n          'text-on-ai',\n          'rounded-button',\n          'enabled:hover:bg-ai-hovered',\n          'enabled:active:bg-ai-hovered',\n          'enabled:focus-visible:bg-ai-hovered',\n        ],\n      },\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32 h-sz-32'],\n        md: ['min-w-sz-44 h-sz-44'],\n        lg: ['min-w-sz-56 h-sz-56'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport type ButtonAppearanceStylesProps = VariantProps<typeof buttonAppearanceStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // AI\n  {\n    intent: 'ai',\n    design: 'filled',\n    class: tw([\n      'bg-ai',\n      'text-on-ai',\n      'hover:bg-ai-hovered',\n      'enabled:active:bg-ai-hovered',\n      'focus-visible:bg-ai-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'ghost',\n    class: tw([\n      'text-on-ai-container',\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n      'text-ai',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'tinted',\n    class: tw([\n      'bg-ai-container',\n      'text-on-ai-container',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'contrast',\n    class: tw([\n      'text-on-ai-container bg-surface',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the button.\n       *\n       * - `filled`: Button will be plain.\n       *\n       * - `outlined`: Button will be transparent with an outline.\n       *\n       * - `tinted`: Button will be filled but using a lighter color scheme.\n       *\n       * - `ghost`: Button will look like a link. No borders, plain text.\n       *\n       * - `contrast`: Button will be surface filled. No borders, plain text.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'ai',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        ai: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-button'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport {\n  buttonAppearanceStyles,\n  type ButtonAppearanceStylesProps,\n} from './Button.appearance-styles'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends\n    Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>,\n    Omit<ButtonStylesProps, 'design' | 'intent'>,\n    Pick<ButtonAppearanceStylesProps, 'appearance'> {\n  /**\n   * Main style of the button.\n   */\n  design?: ButtonStylesProps['design']\n  /**\n   * Color scheme of the button.\n   */\n  intent?: ButtonStylesProps['intent']\n  /**\n   * Combined appearance preset (replaces `design` and `intent`).\n   * @beta This API is in beta and may change in future versions.\n   */\n  appearance?: ButtonAppearanceStylesProps['appearance']\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n   * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n   */\n  loadingText?: string\n  /**\n   * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n   * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n   * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n   */\n  ariaDisabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  ariaDisabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'pill',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  appearance,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n  const useNativeDisabled = !!disabled && !ariaDisabled\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(key => {\n        result[key] = (e: React.SyntheticEvent) => {\n          // Allow Tab to move focus away from the button\n          if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n          /*\n            Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n            Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n          */\n          e.preventDefault()\n        }\n      })\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  // Use appearance styles when appearance is specified, otherwise use legacy styles\n  const buttonClassName = appearance\n    ? buttonAppearanceStyles({\n        className,\n        appearance,\n        disabled: shouldNotInteract,\n        size,\n        underline,\n      })\n    : buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonClassName}\n      disabled={useNativeDisabled}\n      aria-disabled={shouldNotInteract ? true : undefined}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n"],"mappings":"wMAGA,IAAa,GAAA,EAAA,EAAA,IAAA,CACX,CACE,6BACA,8EACA,gBACA,iBACA,wBACA,yBACF,EACA,CACE,SAAU,CAIR,UAAW,CACT,KAAM,CAAC,WAAW,CACpB,EAeA,WAAY,CACV,QAAS,CACP,UACA,eACA,iBACA,gCACA,iCACA,uCACF,EACA,UAAW,CACT,aACA,kBACA,iBACA,mCACA,oCACA,0CACF,EACA,SAAU,CACR,iBACA,YACA,aACA,kBACA,iBACA,mCACA,oCACA,0CACF,EACA,SAAU,CACR,aACA,kBACA,iBACA,mCACA,oCACA,0CACF,EACA,MAAO,CAAC,uEAAuE,EAC/E,QAAS,CACP,iBACA,YACA,iBACA,eACA,iBACA,qCACA,sCACA,4CACF,EACA,OAAQ,CACN,iBACA,YACA,iBACA,aACA,iBACA,mCACA,oCACA,0CACF,EACA,MAAO,CACL,YACA,iBACA,iBACA,kCACA,mCACA,yCACF,EACA,GAAI,CACF,QACA,aACA,iBACA,8BACA,+BACA,qCACF,CACF,EAIA,MAAA,EAAA,EAAA,aAAA,CAA+C,CAC7C,GAAI,CAAC,qBAAqB,EAC1B,GAAI,CAAC,qBAAqB,EAC1B,GAAI,CAAC,qBAAqB,CAC5B,CAAC,EAID,SAAU,CACR,KAAM,CAAC,kCAAkC,EACzC,MAAO,CAAC,gBAAgB,CAC1B,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EC7Ha,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,UACA,eACA,wBACA,iCACA,+BACF,CAAC,CACH,EAEA,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,aACA,kBACA,2BACA,oCACA,kCACF,CAAC,CACH,EAEA,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,YACA,iBACA,0BACA,mCACA,iCACF,CAAC,CACH,EAEA,CACE,OAAQ,KACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,QACA,aACA,sBACA,+BAC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"}
+{"version":3,"file":"button-3vvMrf1L.js","names":[],"sources":["../src/button/Button.appearance-styles.tsx","../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const buttonAppearanceStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'rounded-button',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Add underline to the button text.\n       */\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Semantic appearance of the button that combines design and intent.\n       * When specified, this prop overrides both `design` and `intent`.\n       *\n       * - `primary`: Main action, filled background\n       * - `secondary`: Secondary action, filled support background\n       * - `tertiary`: Tertiary action, outlined with surface background\n       * - `contrast`: Contrast action, surface background\n       * - `ghost`: Link-style without background\n       * - `success`: Success action, outlined with transparent background\n       * - `danger`: Danger action, outlined with transparent background\n       * - `boost`: Accent action, filled accent background\n       * - `AI`: AI action, filled AI background\n       */\n      appearance: {\n        primary: [\n          'bg-main',\n          'text-on-main',\n          'rounded-button',\n          'enabled:hover:bg-main-hovered',\n          'enabled:active:bg-main-hovered',\n          'enabled:focus-visible:bg-main-hovered',\n        ],\n        secondary: [\n          'bg-support',\n          'text-on-support',\n          'rounded-button',\n          'enabled:hover:bg-support-hovered',\n          'enabled:active:bg-support-hovered',\n          'enabled:focus-visible:bg-support-hovered',\n        ],\n        tertiary: [\n          'border-outline',\n          'border-sm',\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        contrast: [\n          'bg-surface',\n          'text-on-surface',\n          'rounded-button',\n          'enabled:hover:bg-surface-hovered',\n          'enabled:active:bg-surface-hovered',\n          'enabled:focus-visible:bg-surface-hovered',\n        ],\n        ghost: ['text-on-surface default:-mx-md px-md enabled:hover:bg-surface-hovered'],\n        success: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-success',\n          'rounded-button',\n          'enabled:hover:bg-success-container',\n          'enabled:active:bg-success-container',\n          'enabled:focus-visible:bg-success-container',\n        ],\n        danger: [\n          'border-outline',\n          'border-sm',\n          'bg-transparent',\n          'text-error',\n          'rounded-button',\n          'enabled:hover:bg-error-container',\n          'enabled:active:bg-error-container',\n          'enabled:focus-visible:bg-error-container',\n        ],\n        boost: [\n          'bg-accent',\n          'text-on-accent',\n          'rounded-button',\n          'enabled:hover:bg-accent-hovered',\n          'enabled:active:bg-accent-hovered',\n          'enabled:focus-visible:bg-accent-hovered',\n        ],\n        AI: [\n          'bg-ai',\n          'text-on-ai',\n          'rounded-button',\n          'enabled:hover:bg-ai-hovered',\n          'enabled:active:bg-ai-hovered',\n          'enabled:focus-visible:bg-ai-hovered',\n        ],\n      },\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32 h-sz-32'],\n        md: ['min-w-sz-44 h-sz-44'],\n        lg: ['min-w-sz-56 h-sz-56'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\nexport type ButtonAppearanceStylesProps = VariantProps<typeof buttonAppearanceStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // AI\n  {\n    intent: 'ai',\n    design: 'filled',\n    class: tw([\n      'bg-ai',\n      'text-on-ai',\n      'hover:bg-ai-hovered',\n      'enabled:active:bg-ai-hovered',\n      'focus-visible:bg-ai-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'ghost',\n    class: tw([\n      'text-on-ai-container',\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-ai/dim-5',\n      'enabled:active:bg-ai/dim-5',\n      'focus-visible:bg-ai/dim-5',\n      'text-ai',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'tinted',\n    class: tw([\n      'bg-ai-container',\n      'text-on-ai-container',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'ai',\n    design: 'contrast',\n    class: tw([\n      'text-on-ai-container bg-surface',\n      'hover:bg-ai-container-hovered',\n      'enabled:active:bg-ai-container-hovered',\n      'focus-visible:bg-ai-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1-highlight',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the button.\n       *\n       * - `filled`: Button will be plain.\n       *\n       * - `outlined`: Button will be transparent with an outline.\n       *\n       * - `tinted`: Button will be filled but using a lighter color scheme.\n       *\n       * - `ghost`: Button will look like a link. No borders, plain text.\n       *\n       * - `contrast`: Button will be surface filled. No borders, plain text.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'ai',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        ai: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-button'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport {\n  buttonAppearanceStyles,\n  type ButtonAppearanceStylesProps,\n} from './Button.appearance-styles'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends\n    Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>,\n    Omit<ButtonStylesProps, 'design' | 'intent'>,\n    Pick<ButtonAppearanceStylesProps, 'appearance'> {\n  /**\n   * Main style of the button.\n   */\n  design?: ButtonStylesProps['design']\n  /**\n   * Color scheme of the button.\n   */\n  intent?: ButtonStylesProps['intent']\n  /**\n   * Combined appearance preset (replaces `design` and `intent`).\n   * @beta This API is in beta and may change in future versions.\n   */\n  appearance?: ButtonAppearanceStylesProps['appearance']\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n   * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n   */\n  loadingText?: string\n  /**\n   * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n   * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n   * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n   */\n  ariaDisabled?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  ariaDisabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'pill',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  appearance,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n  const useNativeDisabled = !!disabled && !ariaDisabled\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(key => {\n        result[key] = (e: React.SyntheticEvent) => {\n          // Allow Tab to move focus away from the button\n          if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n          /*\n            Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n            Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n          */\n          e.preventDefault()\n        }\n      })\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  // Use appearance styles when appearance is specified, otherwise use legacy styles\n  const buttonClassName = appearance\n    ? buttonAppearanceStyles({\n        className,\n        appearance,\n        disabled: shouldNotInteract,\n        size,\n        underline,\n      })\n    : buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonClassName}\n      disabled={useNativeDisabled}\n      aria-disabled={shouldNotInteract ? true : undefined}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n"],"mappings":"wMAGA,IAAa,GAAA,EAAA,EAAA,IAAA,CACX,CACE,6BACA,8EACA,gBACA,iBACA,wBACA,yBACF,EACA,CACE,SAAU,CAIR,UAAW,CACT,KAAM,CAAC,WAAW,CACpB,EAeA,WAAY,CACV,QAAS,CACP,UACA,eACA,iBACA,gCACA,iCACA,uCACF,EACA,UAAW,CACT,aACA,kBACA,iBACA,mCACA,oCACA,0CACF,EACA,SAAU,CACR,iBACA,YACA,aACA,kBACA,iBACA,mCACA,oCACA,0CACF,EACA,SAAU,CACR,aACA,kBACA,iBACA,mCACA,oCACA,0CACF,EACA,MAAO,CAAC,uEAAuE,EAC/E,QAAS,CACP,iBACA,YACA,iBACA,eACA,iBACA,qCACA,sCACA,4CACF,EACA,OAAQ,CACN,iBACA,YACA,iBACA,aACA,iBACA,mCACA,oCACA,0CACF,EACA,MAAO,CACL,YACA,iBACA,iBACA,kCACA,mCACA,yCACF,EACA,GAAI,CACF,QACA,aACA,iBACA,8BACA,+BACA,qCACF,CACF,EAIA,MAAA,EAAA,EAAA,aAAA,CAA+C,CAC7C,GAAI,CAAC,qBAAqB,EAC1B,GAAI,CAAC,qBAAqB,EAC1B,GAAI,CAAC,qBAAqB,CAC5B,CAAC,EAID,SAAU,CACR,KAAM,CAAC,kCAAkC,EACzC,MAAO,CAAC,gBAAgB,CAC1B,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EC7Ha,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,UACA,eACA,wBACA,iCACA,+BACF,CAAC,CACH,EAEA,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,aACA,kBACA,2BACA,oCACA,kCACF,CAAC,CACH,EAEA,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,YACA,iBACA,0BACA,mCACA,iCACF,CAAC,CACH,EAEA,CACE,OAAQ,KACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,QACA,aACA,sBACA,+BAC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"}