@kushagradhawan/kookie-ui 0.1.5 → 0.1.7

package/components.css

@@ -1773,13 +1773,18 @@
     padding-left: min(var(--space-5), max(var(--space-3), 0.5em));
 }
 .rt-BaseButton {
+    all: unset;
+    box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     -webkit-user-select: none;
             user-select: none;
-    vertical-align: top;
+    position: relative;
+    cursor: default;
+    gap: var(--base-button-gap);
+    transition: var(--transition-button);
     font-family: var(--default-font-family);
     font-style: normal;
     text-align: center;
@@ -1787,9 +1792,23 @@
 }
 .rt-BaseButton:where([data-disabled]) {
     --spinner-opacity: 1;
+    cursor: not-allowed;
+    pointer-events: none;
 }
 .rt-BaseButton:where(.rt-loading) {
     position: relative;
+    cursor: wait;
+}
+.rt-BaseButton:where(:active:not([data-disabled], [data-state='open'])) {
+    transform: scale(0.98);
+}
+@media (prefers-reduced-motion: reduce) {
+    .rt-BaseButton {
+        transition: none;
+    }
+    .rt-BaseButton:where(:active:not([data-disabled], [data-state='open'])) {
+        transform: none;
+    }
 }
 .rt-BaseButton:where(.rt-full-width) {
     display: flex;
@@ -1930,6 +1949,8 @@
     --base-button-classic-hover-shadow: var(--shadow-3);
     --base-button-classic-active-shadow: var(--shadow-2);
     --base-button-classic-disabled-shadow: none;
+    --base-button-classic-hover-filter: brightness(1.08) saturate(1.02) contrast(1.02);
+    --base-button-classic-active-filter: brightness(0.88) saturate(1.05) contrast(1.1);
     --base-button-solid-active-filter: brightness(0.92) saturate(1.1);
     --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
     --base-button-solid-high-contrast-active-filter: contrast(0.82) saturate(1.2) brightness(1.16);
@@ -1962,6 +1983,8 @@
     --base-button-classic-hover-shadow: var(--shadow-3);
     --base-button-classic-active-shadow: var(--shadow-2);
     --base-button-classic-disabled-shadow: none;
+    --base-button-classic-hover-filter: brightness(1.12) saturate(1.05) contrast(1.02);
+    --base-button-classic-active-filter: brightness(0.92) saturate(1.1) contrast(1.05);
     --base-button-solid-active-filter: brightness(1.08);
     --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
     --base-button-solid-high-contrast-active-filter: brightness(0.95) saturate(1.2);
@@ -2003,8 +2026,9 @@
 }
 @media (hover: hover) {
     .rt-BaseButton:where(.rt-variant-classic):where(:hover) {
-        background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
+        background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
         box-shadow: var(--base-button-classic-hover-shadow);
+        filter: var(--base-button-classic-hover-filter);
     }
     .rt-BaseButton:where(.rt-variant-classic):where(:hover):where(.rt-high-contrast) {
         background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
@@ -2015,8 +2039,9 @@
     }
 }
 .rt-BaseButton:where(.rt-variant-classic):where([data-state='open']) {
-    background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
+    background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
     box-shadow: var(--base-button-classic-hover-shadow);
+    filter: var(--base-button-classic-hover-filter);
 }
 .rt-BaseButton:where(.rt-variant-classic):where([data-state='open']):where(.rt-high-contrast) {
     background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
@@ -2026,11 +2051,12 @@
     background: var(--accent-12);
 }
 .rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled])) {
-    background: linear-gradient(to bottom, var(--accent-10), var(--accent-9));
+    background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
     box-shadow: var(--base-button-classic-active-shadow);
+    filter: var(--base-button-classic-active-filter);
 }
 .rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled])):where(.rt-high-contrast) {
-    background: linear-gradient(to bottom, var(--accent-12), var(--accent-11));
+    background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
     filter: contrast(0.82) saturate(1.2) brightness(1.16);
 }
 .rt-BaseButton:where(.rt-variant-classic):where(:active:not([data-state='open'], [data-disabled])):where(.rt-high-contrast):where(:not([data-accent-color='gray'])) {
@@ -2042,6 +2068,8 @@
     box-shadow: var(--base-button-classic-disabled-shadow);
     outline: none;
     filter: none;
+    cursor: not-allowed;
+    pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-solid) {
     background-color: var(--accent-9);
@@ -2092,6 +2120,8 @@
     background-color: var(--gray-a3);
     outline: none;
     filter: none;
+    cursor: not-allowed;
+    pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost) {
     color: var(--accent-a11);
@@ -2102,6 +2132,8 @@
 .rt-BaseButton:where(.rt-variant-soft, .rt-variant-ghost):where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
+    cursor: not-allowed;
+    pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-soft) {
     background-color: var(--accent-a3);
@@ -2124,6 +2156,8 @@
 .rt-BaseButton:where(.rt-variant-soft):where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
+    cursor: not-allowed;
+    pointer-events: none;
 }
 @media (hover: hover) {
     .rt-BaseButton:where(.rt-variant-ghost):where(:hover) {
@@ -2143,6 +2177,8 @@
 .rt-BaseButton:where(.rt-variant-ghost):where([data-disabled]) {
     color: var(--gray-a8);
     background-color: transparent;
+    cursor: not-allowed;
+    pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-outline) {
     box-shadow: inset 0 0 0 1px var(--accent-a8);
@@ -2171,6 +2207,8 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a7);
     background-color: transparent;
+    cursor: not-allowed;
+    pointer-events: none;
 }
 .rt-BaseButton:where(.rt-variant-surface) {
     background-color: var(--accent-surface);
@@ -2200,24 +2238,36 @@
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
     background-color: var(--gray-a2);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+.rt-BaseButton:where([data-state='on']) {
+    transform: scale(0.98);
+}
+@media (prefers-reduced-motion: reduce) {
+    .rt-BaseButton:where([data-state='on']) {
+        transform: none;
+    }
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-classic) {
-    background: linear-gradient(to bottom, var(--accent-10), var(--accent-11));
-    box-shadow: var(--base-button-classic-hover-shadow);
+    background: linear-gradient(to bottom, var(--accent-9), var(--accent-10));
+    box-shadow: var(--base-button-classic-active-shadow);
+    filter: var(--base-button-classic-active-filter);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where(.rt-high-contrast) {
     background: linear-gradient(to bottom, var(--accent-11), var(--accent-12));
-    filter: contrast(0.88) saturate(1.1) brightness(1.1);
+    filter: contrast(0.82) saturate(1.2) brightness(1.16);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-classic):where(.rt-high-contrast):where(:not([data-accent-color='gray'])) {
     background: var(--accent-12);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid) {
     background-color: var(--accent-10);
+    filter: var(--base-button-solid-active-filter);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-solid):where(.rt-high-contrast) {
     background-color: var(--accent-12);
-    filter: var(--base-button-solid-high-contrast-hover-filter);
+    filter: var(--base-button-solid-high-contrast-active-filter);
 }
 .rt-BaseButton:where([data-state='on']):where(.rt-variant-soft) {
     background-color: var(--accent-a5);
@@ -2232,6 +2282,47 @@
     background-color: var(--accent-a3);
     box-shadow: inset 0 0 0 1px var(--accent-a8);
 }
+.rt-BaseButton:where([disabled][aria-pressed]) {
+    transform: none;
+    color: var(--gray-a8);
+    background-color: var(--gray-a3);
+    background: var(--gray-a3);
+    box-shadow: none;
+    filter: none;
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where([data-state='on']) {
+    transform: none;
+    background: var(--gray-a3);
+    background-color: var(--gray-a3);
+    box-shadow: none;
+    filter: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-classic) {
+    background: var(--gray-a3);
+    box-shadow: none;
+    filter: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-solid) {
+    background-color: var(--gray-a3);
+    filter: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-soft) {
+    background-color: var(--gray-a3);
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-ghost) {
+    background-color: var(--gray-a3);
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-outline) {
+    background-color: var(--gray-a3);
+    box-shadow: none;
+}
+.rt-BaseButton:where([disabled][aria-pressed]):where(.rt-variant-surface) {
+    background-color: var(--gray-a3);
+    box-shadow: none;
+}
 .rt-Button:where(:not(.rt-variant-ghost)) :where(svg) {
     opacity: 0.9;
 }

package/dist/cjs/components/_internal/base-button.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { baseButtonPropDefs } from './base-button.props.js';
 import type { MarginProps } from '../../props/margin.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';
 import type { GetPropDefTypes } from '../../props/prop-def.js';
 type BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;
 type PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {
     as?: C;
-} & BaseButtonOwnProps & MarginProps & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
+} & BaseButtonOwnProps & MarginProps & ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
 interface BaseButtonProps extends PolymorphicBaseButtonProps {
 }
 declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/_internal/base-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAQ5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAGrE,KAAK,0BAA0B,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACxE,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,kBAAkB,GACpB,WAAW,GACX,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,GAAG,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;AAE/F,UAAU,eAAgB,SAAQ,0BAA0B;CAAG;AAE/D,QAAA,MAAM,UAAU,2FAwDd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAQ5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAGrE,KAAK,0BAA0B,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACxE,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,kBAAkB,GACpB,WAAW,GACX,qBAAqB,CAAC,CAAC,EAAE,YAAY,GAAG,MAAM,kBAAkB,GAAG,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;AAE/F,UAAU,eAAgB,SAAQ,0BAA0B;CAAG;AAE/D,QAAA,MAAM,UAAU,2FA8Ed,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/cjs/components/_internal/base-button.js

@@ -1,2 +1,2 @@
-"use strict";var T=Object.create;var p=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var v=(t,o)=>{for(var e in o)p(t,e,{get:o[e],enumerable:!0})},f=(t,o,e,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of E(o))!O.call(t,s)&&s!==e&&p(t,s,{get:()=>o[s],enumerable:!(n=j(o,s))||n.enumerable});return t};var B=(t,o,e)=>(e=t!=null?T(N(t)):{},f(o||!t||!t.__esModule?p(e,"default",{value:t,enumerable:!0}):e,t)),M=t=>f(p({},"__esModule",{value:!0}),t);var k={};v(k,{BaseButton:()=>d});module.exports=M(k);var r=B(require("react")),P=B(require("classnames")),y=require("radix-ui"),m=require("./base-button.props.js"),c=require("../flex.js"),b=require("../spinner.js"),h=require("../visually-hidden.js"),C=require("../../helpers/extract-props.js"),a=require("../../helpers/map-prop-values.js"),g=require("../../props/margin.props.js");const d=r.forwardRef((t,o)=>{const{size:e=m.baseButtonPropDefs.size.default}=t,{className:n,children:s,asChild:l,as:i,color:x,radius:D,disabled:u=t.loading,...w}=(0,C.extractProps)(t,m.baseButtonPropDefs,g.marginPropDefs),z=l?y.Slot.Root:i||"button",S=l||!i||["button","input","textarea","select"].includes(i);return r.createElement(z,{"data-disabled":u||void 0,"data-accent-color":x,"data-radius":D,...w,ref:o,className:(0,P.default)("rt-reset","rt-BaseButton",n),...S&&{disabled:u}},t.loading?r.createElement(r.Fragment,null,r.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},s),r.createElement(h.VisuallyHidden,null,s),r.createElement(c.Flex,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},r.createElement("span",null,r.createElement(b.Spinner,{size:(0,a.mapResponsiveProp)(e,a.mapButtonSizeToSpinnerSize)})))):s)});d.displayName="BaseButton";
+"use strict";var E=Object.create;var a=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var k=(e,o)=>{for(var s in o)a(e,s,{get:o[s],enumerable:!0})},f=(e,o,s,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of I(o))!O.call(e,n)&&n!==s&&a(e,n,{get:()=>o[n],enumerable:!(r=N(o,n))||r.enumerable});return e};var y=(e,o,s)=>(s=e!=null?E(M(e)):{},f(o||!e||!e.__esModule?a(s,"default",{value:e,enumerable:!0}):s,e)),F=e=>f(a({},"__esModule",{value:!0}),e);var G={};k(G,{BaseButton:()=>l});module.exports=F(G);var t=y(require("react")),P=y(require("classnames")),c=require("radix-ui"),d=require("./base-button.props.js"),b=require("../flex.js"),h=require("../spinner.js"),g=require("../visually-hidden.js"),C=require("../../helpers/extract-props.js"),i=require("../../helpers/map-prop-values.js"),x=require("../../props/margin.props.js");const l=t.forwardRef((e,o)=>{const{size:s=d.baseButtonPropDefs.size.default}=e,{className:r,children:n,asChild:m,as:p,color:w,radius:D,disabled:u=e.loading,...z}=(0,C.extractProps)(e,d.baseButtonPropDefs,x.marginPropDefs),S=m?c.Slot.Root:p||"button",T=m||!p||["button","input","textarea","select"].includes(p),j=t.useId(),B=e.loading?`${j}-loading`:void 0,v=e.loading?{"aria-busy":!0,"aria-disabled":!0,"aria-describedby":B}:{};return t.createElement(S,{"data-disabled":u||void 0,"data-accent-color":w,"data-radius":D,...z,...v,ref:o,className:(0,P.default)("rt-reset","rt-BaseButton",r),...T&&{disabled:u}},e.loading?t.createElement(t.Fragment,null,t.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},n),t.createElement(g.VisuallyHidden,null,t.createElement("span",{id:B},"Loading, please wait..."),n),t.createElement(b.Flex,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},t.createElement("span",null,t.createElement(h.Spinner,{size:(0,i.mapResponsiveProp)(s,i.mapButtonSizeToSpinnerSize),"aria-hidden":"true"})))):n)});l.displayName="BaseButton";
 //# sourceMappingURL=base-button.js.map

package/dist/cjs/components/_internal/base-button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/_internal/base-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { baseButtonPropDefs } from './base-button.props.js';\nimport { Flex } from '../flex.js';\nimport { Spinner } from '../spinner.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { extractProps } from '../../helpers/extract-props.js';\nimport { mapResponsiveProp, mapButtonSizeToSpinnerSize } from '../../helpers/map-prop-values.js';\nimport { marginPropDefs } from '../../props/margin.props.js';\n\nimport type { MarginProps } from '../../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../../props/prop-def.js';\n\ntype BaseButtonElement = React.ElementRef<'button'>;\ntype BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;\n\n// Polymorphic types\ntype PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {\n  as?: C;\n} & BaseButtonOwnProps &\n  MarginProps &\n  Omit<React.ComponentPropsWithoutRef<C>, keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;\n\ninterface BaseButtonProps extends PolymorphicBaseButtonProps {}\n\nconst BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props, forwardedRef) => {\n  const { size = baseButtonPropDefs.size.default } = props;\n  const {\n    className,\n    children,\n    asChild,\n    as,\n    color,\n    radius,\n    disabled = props.loading,\n    ...baseButtonProps\n  } = extractProps(props, baseButtonPropDefs, marginPropDefs);\n\n  // asChild takes precedence over as prop\n  const Comp = asChild ? Slot.Root : as || 'button';\n\n  // Only pass disabled for elements that support it\n  const shouldPassDisabled =\n    asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);\n\n  return (\n    <Comp\n      // The `data-disabled` attribute enables correct styles when doing `<Button asChild disabled>`\n      data-disabled={disabled || undefined}\n      data-accent-color={color}\n      data-radius={radius}\n      {...baseButtonProps}\n      ref={forwardedRef}\n      className={classNames('rt-reset', 'rt-BaseButton', className)}\n      {...(shouldPassDisabled && { disabled })}\n    >\n      {props.loading ? (\n        <>\n          {/**\n           * We need a wrapper to set `visibility: hidden` to hide the button content whilst we show the `Spinner`.\n           * The button is a flex container with a `gap`, so we use `display: contents` to ensure the correct flex layout.\n           *\n           * However, `display: contents` removes the content from the accessibility tree in some browsers,\n           * so we force remove it with `aria-hidden` and re-add it in the tree with `VisuallyHidden`\n           */}\n          <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n            {children}\n          </span>\n          <VisuallyHidden>{children}</VisuallyHidden>\n\n          <Flex asChild align=\"center\" justify=\"center\" position=\"absolute\" inset=\"0\">\n            <span>\n              <Spinner size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)} />\n            </span>\n          </Flex>\n        </>\n      ) : (\n        children\n      )}\n    </Comp>\n  );\n});\nBaseButton.displayName = 'BaseButton';\n\nexport { BaseButton };\nexport type { BaseButtonProps };\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAqB,oBAErBC,EAAmC,kCACnCC,EAAqB,sBACrBC,EAAwB,yBACxBC,EAA+B,iCAC/BC,EAA6B,0CAC7BC,EAA8D,4CAC9DC,EAA+B,uCAkB/B,MAAMX,EAAaE,EAAM,WAA+C,CAACU,EAAOC,IAAiB,CAC/F,KAAM,CAAE,KAAAC,EAAO,qBAAmB,KAAK,OAAQ,EAAIF,EAC7C,CACJ,UAAAG,EACA,SAAAC,EACA,QAAAC,EACA,GAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EAAWT,EAAM,QACjB,GAAGU,CACL,KAAI,gBAAaV,EAAO,qBAAoB,gBAAc,EAGpDW,EAAON,EAAU,OAAK,KAAOC,GAAM,SAGnCM,EACJP,GAAW,CAACC,GAAM,CAAC,SAAU,QAAS,WAAY,QAAQ,EAAE,SAASA,CAAE,EAEzE,OACEhB,EAAA,cAACqB,EAAA,CAEC,gBAAeF,GAAY,OAC3B,oBAAmBF,EACnB,cAAaC,EACZ,GAAGE,EACJ,IAAKT,EACL,aAAW,EAAAY,SAAW,WAAY,gBAAiBV,CAAS,EAC3D,GAAIS,GAAsB,CAAE,SAAAH,CAAS,GAErCT,EAAM,QACLV,EAAA,cAAAA,EAAA,cAQEA,EAAA,cAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,IACpEc,CACH,EACAd,EAAA,cAAC,sBAAgBc,CAAS,EAE1Bd,EAAA,cAAC,QAAK,QAAO,GAAC,MAAM,SAAS,QAAQ,SAAS,SAAS,WAAW,MAAM,KACtEA,EAAA,cAAC,YACCA,EAAA,cAAC,WAAQ,QAAM,qBAAkBY,EAAM,4BAA0B,EAAG,CACtE,CACF,CACF,EAEAE,CAEJ,CAEJ,CAAC,EACDhB,EAAW,YAAc",
-  "names": ["base_button_exports", "__export", "BaseButton", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_base_button_props", "import_flex", "import_spinner", "import_visually_hidden", "import_extract_props", "import_map_prop_values", "import_margin_props", "props", "forwardedRef", "size", "className", "children", "asChild", "as", "color", "radius", "disabled", "baseButtonProps", "Comp", "shouldPassDisabled", "classNames"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { baseButtonPropDefs } from './base-button.props.js';\nimport { Flex } from '../flex.js';\nimport { Spinner } from '../spinner.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { extractProps } from '../../helpers/extract-props.js';\nimport { mapResponsiveProp, mapButtonSizeToSpinnerSize } from '../../helpers/map-prop-values.js';\nimport { marginPropDefs } from '../../props/margin.props.js';\n\nimport type { MarginProps } from '../../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../../props/prop-def.js';\n\ntype BaseButtonElement = React.ElementRef<'button'>;\ntype BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;\n\n// Polymorphic types using the proper ComponentPropsWithout pattern\ntype PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {\n  as?: C;\n} & BaseButtonOwnProps &\n  MarginProps &\n  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;\n\ninterface BaseButtonProps extends PolymorphicBaseButtonProps {}\n\nconst BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props, forwardedRef) => {\n  const { size = baseButtonPropDefs.size.default } = props;\n  const {\n    className,\n    children,\n    asChild,\n    as,\n    color,\n    radius,\n    disabled = props.loading,\n    ...baseButtonProps\n  } = extractProps(props, baseButtonPropDefs, marginPropDefs);\n\n  // asChild takes precedence over as prop\n  const Comp = asChild ? Slot.Root : as || 'button';\n\n  // Only pass disabled for elements that support it\n  const shouldPassDisabled =\n    asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);\n\n  // Generate unique ID for loading announcements\n  const loadingId = React.useId();\n  const describedById = props.loading ? `${loadingId}-loading` : undefined;\n\n  // Enhanced accessibility props for loading state\n  const accessibilityProps = props.loading\n    ? {\n        'aria-busy': true,\n        'aria-disabled': true,\n        'aria-describedby': describedById,\n      }\n    : {};\n\n  return (\n    <Comp\n      // The `data-disabled` attribute enables correct styles when doing `<Button asChild disabled>`\n      data-disabled={disabled || undefined}\n      data-accent-color={color}\n      data-radius={radius}\n      {...baseButtonProps}\n      {...accessibilityProps}\n      ref={forwardedRef}\n      className={classNames('rt-reset', 'rt-BaseButton', className)}\n      {...(shouldPassDisabled && { disabled })}\n    >\n      {props.loading ? (\n        <>\n          {/**\n           * We need a wrapper to set `visibility: hidden` to hide the button content whilst we show the `Spinner`.\n           * The button is a flex container with a `gap`, so we use `display: contents` to ensure the correct flex layout.\n           *\n           * However, `display: contents` removes the content from the accessibility tree in some browsers,\n           * so we force remove it with `aria-hidden` and re-add it in the tree with `VisuallyHidden`\n           */}\n          <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n            {children}\n          </span>\n\n          {/* Enhanced accessibility for loading state */}\n          <VisuallyHidden>\n            <span id={describedById}>Loading, please wait...</span>\n            {children}\n          </VisuallyHidden>\n\n          <Flex asChild align=\"center\" justify=\"center\" position=\"absolute\" inset=\"0\">\n            <span>\n              <Spinner\n                size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)}\n                aria-hidden=\"true\"\n              />\n            </span>\n          </Flex>\n        </>\n      ) : (\n        children\n      )}\n    </Comp>\n  );\n});\nBaseButton.displayName = 'BaseButton';\n\nexport { BaseButton };\nexport type { BaseButtonProps };\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAqB,oBAErBC,EAAmC,kCACnCC,EAAqB,sBACrBC,EAAwB,yBACxBC,EAA+B,iCAC/BC,EAA6B,0CAC7BC,EAA8D,4CAC9DC,EAA+B,uCAkB/B,MAAMX,EAAaE,EAAM,WAA+C,CAACU,EAAOC,IAAiB,CAC/F,KAAM,CAAE,KAAAC,EAAO,qBAAmB,KAAK,OAAQ,EAAIF,EAC7C,CACJ,UAAAG,EACA,SAAAC,EACA,QAAAC,EACA,GAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EAAWT,EAAM,QACjB,GAAGU,CACL,KAAI,gBAAaV,EAAO,qBAAoB,gBAAc,EAGpDW,EAAON,EAAU,OAAK,KAAOC,GAAM,SAGnCM,EACJP,GAAW,CAACC,GAAM,CAAC,SAAU,QAAS,WAAY,QAAQ,EAAE,SAASA,CAAE,EAGnEO,EAAYvB,EAAM,MAAM,EACxBwB,EAAgBd,EAAM,QAAU,GAAGa,CAAS,WAAa,OAGzDE,EAAqBf,EAAM,QAC7B,CACE,YAAa,GACb,gBAAiB,GACjB,mBAAoBc,CACtB,EACA,CAAC,EAEL,OACExB,EAAA,cAACqB,EAAA,CAEC,gBAAeF,GAAY,OAC3B,oBAAmBF,EACnB,cAAaC,EACZ,GAAGE,EACH,GAAGK,EACJ,IAAKd,EACL,aAAW,EAAAe,SAAW,WAAY,gBAAiBb,CAAS,EAC3D,GAAIS,GAAsB,CAAE,SAAAH,CAAS,GAErCT,EAAM,QACLV,EAAA,cAAAA,EAAA,cAQEA,EAAA,cAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,IACpEc,CACH,EAGAd,EAAA,cAAC,sBACCA,EAAA,cAAC,QAAK,GAAIwB,GAAe,yBAAuB,EAC/CV,CACH,EAEAd,EAAA,cAAC,QAAK,QAAO,GAAC,MAAM,SAAS,QAAQ,SAAS,SAAS,WAAW,MAAM,KACtEA,EAAA,cAAC,YACCA,EAAA,cAAC,WACC,QAAM,qBAAkBY,EAAM,4BAA0B,EACxD,cAAY,OACd,CACF,CACF,CACF,EAEAE,CAEJ,CAEJ,CAAC,EACDhB,EAAW,YAAc",
+  "names": ["base_button_exports", "__export", "BaseButton", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_base_button_props", "import_flex", "import_spinner", "import_visually_hidden", "import_extract_props", "import_map_prop_values", "import_margin_props", "props", "forwardedRef", "size", "className", "children", "asChild", "as", "color", "radius", "disabled", "baseButtonProps", "Comp", "shouldPassDisabled", "loadingId", "describedById", "accessibilityProps", "classNames"]
 }

package/dist/cjs/components/checkbox-cards.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/checkbox-cards.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Context } from 'radix-ui/internal';\n\nimport * as CheckboxGroupPrimitive from './checkbox-group.primitive.js';\nimport { createCheckboxGroupScope } from './checkbox-group.primitive.js';\nimport { checkboxCardsRootPropDefs } from './checkbox-cards.props.js';\nimport { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';\nimport { Grid } from './grid.js';\nimport { ThickCheckIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { Responsive, GetPropDefTypes } from '../props/prop-def.js';\n\nconst CHECKBOX_CARD_GROUP_NAME = 'CheckboxCards';\n\ntype ScopedProps<P> = P & { __scopeCheckboxCards?: Context.Scope };\nconst [createCheckboxCardsContext] = Context.createContextScope(CHECKBOX_CARD_GROUP_NAME, [\n  createCheckboxGroupScope,\n]);\nconst useCheckboxGroupScope = createCheckboxGroupScope();\n\ntype CheckboxCardsContextValue = {\n  size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;\n  highContrast?: boolean;\n};\n\nconst [CheckboxCardsProvider, useCheckboxCardsContext] =\n  createCheckboxCardsContext<CheckboxCardsContextValue>(CHECKBOX_CARD_GROUP_NAME);\n\ntype CheckboxCardsRootElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;\ntype CheckboxCardsRootOwnProps = GetPropDefTypes<typeof checkboxCardsRootPropDefs>;\ninterface CheckboxCardsRootProps\n  extends ComponentPropsWithout<\n      typeof CheckboxGroupPrimitive.Root,\n      'asChild' | 'color' | 'defaultChecked'\n    >,\n    MarginProps,\n    CheckboxCardsRootOwnProps {}\nconst CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(\n  (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {\n    const { __scopeCheckboxCards, className, color, ...rootProps } = extractProps(\n      props,\n      checkboxCardsRootPropDefs,\n      marginPropDefs\n    );\n    const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);\n    return (\n      <CheckboxCardsProvider\n        scope={__scopeCheckboxCards}\n        size={props.size}\n        highContrast={props.highContrast}\n      >\n        <Grid asChild>\n          <CheckboxGroupPrimitive.Root\n            {...checkboxGroupScope}\n            data-accent-color={color}\n            {...rootProps}\n            ref={forwardedRef}\n            className={classNames('rt-CheckboxCardsRoot', className)}\n          />\n        </Grid>\n      </CheckboxCardsProvider>\n    );\n  }\n);\nCheckboxCardsRoot.displayName = 'CheckboxCards.Root';\n\ntype CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;\ninterface CheckboxCardsItemProps\n  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,\n    MarginProps {}\nconst CheckboxCardsItem = React.forwardRef<\n  CheckboxCardsItemElement,\n  ScopedProps<CheckboxCardsItemProps>\n>(({ __scopeCheckboxCards, children, className, style, ...props }, forwardedRef) => {\n  const context = useCheckboxCardsContext('CheckboxCardsItem', __scopeCheckboxCards);\n  const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);\n  const { className: checkboxClassName } = extractProps(\n    // Pass size / highContrast values from the context and static variant to generate styles\n    { size: context?.size, variant: 'surface', highContrast: context?.highContrast },\n    // Pass size & variant prop defs to allow it to be extracted\n    baseCheckboxPropDefs\n  );\n  return (\n    <label className={classNames('rt-BaseCard', 'rt-CheckboxCardsItem', className)} style={style}>\n      {children}\n      <CheckboxGroupPrimitive.Item\n        {...checkboxGroupScope}\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-reset',\n          'rt-BaseCheckboxRoot',\n          'rt-CheckboxCardCheckbox',\n          checkboxClassName\n        )}\n      >\n        <CheckboxGroupPrimitive.Indicator\n          {...checkboxGroupScope}\n          asChild\n          className=\"rt-BaseCheckboxIndicator\"\n        >\n          <ThickCheckIcon />\n        </CheckboxGroupPrimitive.Indicator>\n      </CheckboxGroupPrimitive.Item>\n    </label>\n  );\n});\nCheckboxCardsItem.displayName = 'CheckboxCards.Item';\n\nexport { CheckboxCardsRoot as Root, CheckboxCardsItem as Item };\nexport type { CheckboxCardsRootProps as RootProps, CheckboxCardsItemProps as ItemProps };\n"],
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Context } from 'radix-ui/internal';\n\nimport * as CheckboxGroupPrimitive from './checkbox-group.primitive.js';\nimport { createCheckboxGroupScope } from './checkbox-group.primitive.js';\nimport { checkboxCardsRootPropDefs } from './checkbox-cards.props.js';\nimport { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';\nimport { Grid } from './grid.js';\nimport { ThickCheckIcon } from './icons.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { Responsive, GetPropDefTypes } from '../props/prop-def.js';\n\nconst CHECKBOX_CARD_GROUP_NAME = 'CheckboxCards';\n\ntype ScopedProps<P> = P & { __scopeCheckboxCards?: Context.Scope };\nconst [createCheckboxCardsContext] = Context.createContextScope(CHECKBOX_CARD_GROUP_NAME, [\n  createCheckboxGroupScope,\n]);\nconst useCheckboxGroupScope = createCheckboxGroupScope();\n\ntype CheckboxCardsContextValue = {\n  size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;\n  highContrast?: boolean;\n};\n\nconst [CheckboxCardsProvider, useCheckboxCardsContext] =\n  createCheckboxCardsContext<CheckboxCardsContextValue>(CHECKBOX_CARD_GROUP_NAME);\n\ntype CheckboxCardsRootElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;\ntype CheckboxCardsRootOwnProps = GetPropDefTypes<typeof checkboxCardsRootPropDefs>;\ninterface CheckboxCardsRootProps\n  extends ComponentPropsWithout<\n      typeof CheckboxGroupPrimitive.Root,\n      'asChild' | 'color' | 'defaultChecked'\n    >,\n    MarginProps,\n    CheckboxCardsRootOwnProps {}\nconst CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(\n  (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {\n    const { __scopeCheckboxCards, className, color, ...rootProps } = extractProps(\n      props,\n      checkboxCardsRootPropDefs,\n      marginPropDefs,\n    );\n    const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);\n    return (\n      <CheckboxCardsProvider\n        scope={__scopeCheckboxCards}\n        size={props.size}\n        highContrast={props.highContrast}\n      >\n        <Grid asChild>\n          <CheckboxGroupPrimitive.Root\n            {...checkboxGroupScope}\n            data-accent-color={color}\n            {...rootProps}\n            ref={forwardedRef}\n            className={classNames('rt-CheckboxCardsRoot', className)}\n          />\n        </Grid>\n      </CheckboxCardsProvider>\n    );\n  },\n);\nCheckboxCardsRoot.displayName = 'CheckboxCards.Root';\n\ntype CheckboxCardsItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;\ninterface CheckboxCardsItemProps\n  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,\n    MarginProps {}\nconst CheckboxCardsItem = React.forwardRef<\n  CheckboxCardsItemElement,\n  ScopedProps<CheckboxCardsItemProps>\n>(({ __scopeCheckboxCards, children, className, style, ...props }, forwardedRef) => {\n  const context = useCheckboxCardsContext('CheckboxCardsItem', __scopeCheckboxCards);\n  const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);\n  const { className: checkboxClassName } = extractProps(\n    // Pass size / highContrast values from the context and static variant to generate styles\n    { size: context?.size, variant: 'surface', highContrast: context?.highContrast },\n    // Pass size & variant prop defs to allow it to be extracted\n    baseCheckboxPropDefs,\n  );\n  return (\n    <label className={classNames('rt-BaseCard', 'rt-CheckboxCardsItem', className)} style={style}>\n      {children}\n      <CheckboxGroupPrimitive.Item\n        {...checkboxGroupScope}\n        {...props}\n        ref={forwardedRef}\n        className={classNames(\n          'rt-reset',\n          'rt-BaseCheckboxRoot',\n          'rt-CheckboxCardCheckbox',\n          checkboxClassName,\n        )}\n      >\n        <CheckboxGroupPrimitive.Indicator\n          {...checkboxGroupScope}\n          asChild\n          className=\"rt-BaseCheckboxIndicator\"\n        >\n          <ThickCheckIcon />\n        </CheckboxGroupPrimitive.Indicator>\n      </CheckboxGroupPrimitive.Item>\n    </label>\n  );\n});\nCheckboxCardsItem.displayName = 'CheckboxCards.Item';\n\nexport { CheckboxCardsRoot as Root, CheckboxCardsItem as Item };\nexport type { CheckboxCardsRootProps as RootProps, CheckboxCardsItemProps as ItemProps };\n"],
   "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,SAAAC,IAAA,eAAAC,EAAAJ,GAEA,IAAAK,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAwB,6BAExBC,EAAwC,4CACxCC,EAAyC,yCACzCC,EAA0C,qCAC1CC,EAAqC,8CACrCC,EAAqB,qBACrBC,EAA+B,sBAC/BC,EAA6B,uCAC7BC,EAA+B,oCAM/B,MAAMC,EAA2B,gBAG3B,CAACC,CAA0B,EAAI,UAAQ,mBAAmBD,EAA0B,CACxF,0BACF,CAAC,EACKE,KAAwB,4BAAyB,EAOjD,CAACC,EAAuBC,CAAuB,EACnDH,EAAsDD,CAAwB,EAW1Eb,EAAoBE,EAAM,WAC9B,CAACgB,EAA4CC,IAAiB,CAC5D,KAAM,CAAE,qBAAAC,EAAsB,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAU,KAAI,gBAC/DL,EACA,4BACA,gBACF,EACMM,EAAqBT,EAAsBK,CAAoB,EACrE,OACElB,EAAA,cAACc,EAAA,CACC,MAAOI,EACP,KAAMF,EAAM,KACZ,aAAcA,EAAM,cAEpBhB,EAAA,cAAC,QAAK,QAAO,IACXA,EAAA,cAACG,EAAuB,KAAvB,CACE,GAAGmB,EACJ,oBAAmBF,EAClB,GAAGC,EACJ,IAAKJ,EACL,aAAW,EAAAM,SAAW,uBAAwBJ,CAAS,EACzD,CACF,CACF,CAEJ,CACF,EACArB,EAAkB,YAAc,qBAMhC,MAAMD,EAAoBG,EAAM,WAG9B,CAAC,CAAE,qBAAAkB,EAAsB,SAAAM,EAAU,UAAAL,EAAW,MAAAM,EAAO,GAAGT,CAAM,EAAGC,IAAiB,CAClF,MAAMS,EAAUX,EAAwB,oBAAqBG,CAAoB,EAC3EI,EAAqBT,EAAsBK,CAAoB,EAC/D,CAAE,UAAWS,CAAkB,KAAI,gBAEvC,CAAE,KAAMD,GAAS,KAAM,QAAS,UAAW,aAAcA,GAAS,YAAa,EAE/E,sBACF,EACA,OACE1B,EAAA,cAAC,SAAM,aAAW,EAAAuB,SAAW,cAAe,uBAAwBJ,CAAS,EAAG,MAAOM,GACpFD,EACDxB,EAAA,cAACG,EAAuB,KAAvB,CACE,GAAGmB,EACH,GAAGN,EACJ,IAAKC,EACL,aAAW,EAAAM,SACT,WACA,sBACA,0BACAI,CACF,GAEA3B,EAAA,cAACG,EAAuB,UAAvB,CACE,GAAGmB,EACJ,QAAO,GACP,UAAU,4BAEVtB,EAAA,cAAC,qBAAe,CAClB,CACF,CACF,CAEJ,CAAC,EACDH,EAAkB,YAAc",
   "names": ["checkbox_cards_exports", "__export", "CheckboxCardsItem", "CheckboxCardsRoot", "__toCommonJS", "React", "import_classnames", "import_internal", "CheckboxGroupPrimitive", "import_checkbox_group_primitive", "import_checkbox_cards_props", "import_base_checkbox_props", "import_grid", "import_icons", "import_extract_props", "import_margin_props", "CHECKBOX_CARD_GROUP_NAME", "createCheckboxCardsContext", "useCheckboxGroupScope", "CheckboxCardsProvider", "useCheckboxCardsContext", "props", "forwardedRef", "__scopeCheckboxCards", "className", "color", "rootProps", "checkboxGroupScope", "classNames", "children", "style", "context", "checkboxClassName"]
 }

package/dist/cjs/components/icon-button.d.ts

@@ -2,7 +2,18 @@ import * as React from 'react';
 import { BaseButton } from './_internal/base-button.js';
 import type { BaseButtonProps } from './_internal/base-button.js';
 type IconButtonElement = React.ElementRef<typeof BaseButton>;
-type IconButtonOwnProps = Omit<BaseButtonProps, 'as'>;
+type AccessibilityProps = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby'?: never;
+    children: React.ReactNode;
+};
+type IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps;
 type IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {
     as?: C;
 } & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;

package/dist/cjs/components/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,KAAK,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAG7D,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;AAEtD,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAEtE,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,UAAU,EAOX,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,KAAK,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAG7D,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAGnF,KAAK,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,kBAAkB,CAAC;AAE3E,KAAK,eAAe,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,kBAAkB,GAAG;IAClF,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC;AAEtE,KAAK,mBAAmB,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAChE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACxE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B,QAAA,MAAM,UAAU,EA6BX,mBAAmB,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAIpD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/cjs/components/icon-button.js

@@ -1,2 +1,2 @@
-"use strict";var I=Object.create;var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var i=(t,o)=>{for(var e in o)p(t,e,{get:o[e],enumerable:!0})},a=(t,o,e,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of l(o))!y.call(t,n)&&n!==e&&p(t,n,{get:()=>o[n],enumerable:!(s=f(o,n))||s.enumerable});return t};var c=(t,o,e)=>(e=t!=null?I(R(t)):{},a(o||!t||!t.__esModule?p(e,"default",{value:t,enumerable:!0}):e,t)),P=t=>a(p({},"__esModule",{value:!0}),t);var d={};i(d,{IconButton:()=>r});module.exports=P(d);var m=c(require("react")),u=c(require("classnames")),B=require("./_internal/base-button.js");const r=m.forwardRef(({className:t,...o},e)=>m.createElement(B.BaseButton,{...o,ref:e,className:(0,u.default)("rt-IconButton",t)}));r.displayName="IconButton";
+"use strict";var m=Object.create;var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(e,t)=>{for(var n in t)a(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!y.call(e,o)&&o!==n&&a(e,o,{get:()=>t[o],enumerable:!(r=u(t,o))||r.enumerable});return e};var i=(e,t,n)=>(n=e!=null?m(B(e)):{},s(t||!e||!e.__esModule?a(n,"default",{value:e,enumerable:!0}):n,e)),I=e=>s(a({},"__esModule",{value:!0}),e);var h={};f(h,{IconButton:()=>l});module.exports=I(h);var p=i(require("react")),c=i(require("classnames")),b=require("./_internal/base-button.js");const l=p.forwardRef(({className:e,...t},n)=>p.createElement(b.BaseButton,{...t,ref:n,className:(0,c.default)("rt-IconButton",e)}));l.displayName="IconButton";
 //# sourceMappingURL=icon-button.js.map

package/dist/cjs/components/icon-button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/icon-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n// Polymorphic IconButton props\ntype IconButtonOwnProps = Omit<BaseButtonProps, 'as'>;\n\ntype IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {\n  as?: C;\n} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },\n) => React.ReactElement | null;\n\nconst IconButton = React.forwardRef(\n  (\n    { className, ...props }: IconButtonProps,\n    forwardedRef: React.ForwardedRef<IconButtonElement>,\n  ) => (\n    <BaseButton {...props} ref={forwardedRef} className={classNames('rt-IconButton', className)} />\n  ),\n) as IconButtonComponent & { displayName?: string };\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA2B,sCAgB3B,MAAMJ,EAAaE,EAAM,WACvB,CACE,CAAE,UAAAG,EAAW,GAAGC,CAAM,EACtBC,IAEAL,EAAA,cAAC,cAAY,GAAGI,EAAO,IAAKC,EAAc,aAAW,EAAAC,SAAW,gBAAiBH,CAAS,EAAG,CAEjG,EAEAL,EAAW,YAAc",
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype IconButtonElement = React.ElementRef<typeof BaseButton>;\n\n// Required accessibility props for icon buttons\ntype AccessibilityProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string }\n  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n// Polymorphic IconButton props with required accessibility\ntype IconButtonOwnProps = Omit<BaseButtonProps, 'as'> & AccessibilityProps;\n\ntype IconButtonProps<C extends React.ElementType = 'button'> = IconButtonOwnProps & {\n  as?: C;\n} & Omit<React.ComponentPropsWithoutRef<C>, keyof IconButtonOwnProps>;\n\ntype IconButtonComponent = <C extends React.ElementType = 'button'>(\n  props: IconButtonProps<C> & { ref?: React.ForwardedRef<IconButtonElement> },\n) => React.ReactElement | null;\n\nconst IconButton = React.forwardRef(\n  (\n    { className, ...props }: IconButtonProps,\n    forwardedRef: React.ForwardedRef<IconButtonElement>,\n  ) => {\n    // Warn in development if no accessibility attributes are provided\n    if (process.env.NODE_ENV === 'development') {\n      const hasAriaLabel = 'aria-label' in props && props['aria-label'];\n      const hasAriaLabelledBy = 'aria-labelledby' in props && props['aria-labelledby'];\n      const hasChildren = 'children' in props && props.children;\n\n      if (!hasAriaLabel && !hasAriaLabelledBy && !hasChildren) {\n        console.warn(\n          'IconButton: Icon buttons must have an accessible name. Please provide either:' +\n            '\\n- aria-label prop with descriptive text' +\n            '\\n- aria-labelledby prop referencing a label element' +\n            '\\n- or visible text children',\n        );\n      }\n    }\n\n    return (\n      <BaseButton\n        {...props}\n        ref={forwardedRef}\n        className={classNames('rt-IconButton', className)}\n      />\n    );\n  },\n) as IconButtonComponent & { displayName?: string };\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton };\nexport type { IconButtonProps };\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,gBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAA2B,sCAsB3B,MAAMJ,EAAaE,EAAM,WACvB,CACE,CAAE,UAAAG,EAAW,GAAGC,CAAM,EACtBC,IAmBEL,EAAA,cAAC,cACE,GAAGI,EACJ,IAAKC,EACL,aAAW,EAAAC,SAAW,gBAAiBH,CAAS,EAClD,CAGN,EAEAL,EAAW,YAAc",
   "names": ["icon_button_exports", "__export", "IconButton", "__toCommonJS", "React", "import_classnames", "import_base_button", "className", "props", "forwardedRef", "classNames"]
 }

package/dist/cjs/components/radio-cards.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/radio-cards.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\nimport { radioCardsRootPropDefs } from './radio-cards.props.js';\nimport { Grid } from './grid.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype RadioCardsRootElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;\ntype RadioCardsRootOwnProps = GetPropDefTypes<typeof radioCardsRootPropDefs>;\ninterface RadioCardsRootProps\n  extends ComponentPropsWithout<\n      typeof RadioGroupPrimitive.Root,\n      'asChild' | 'color' | 'defaultChecked'\n    >,\n    MarginProps,\n    RadioCardsRootOwnProps {}\nconst RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(\n  (props, forwardedRef) => {\n    const { className, color, ...rootProps } = extractProps(\n      props,\n      radioCardsRootPropDefs,\n      marginPropDefs\n    );\n    return (\n      <Grid asChild>\n        <RadioGroupPrimitive.Root\n          data-accent-color={color}\n          {...rootProps}\n          ref={forwardedRef}\n          className={classNames('rt-RadioCardsRoot', className)}\n        />\n      </Grid>\n    );\n  }\n);\nRadioCardsRoot.displayName = 'RadioCards.Root';\n\ntype RadioCardsItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;\ninterface RadioCardsItemProps\n  extends ComponentPropsWithout<typeof RadioGroupPrimitive.Item, RemovedProps>,\n    MarginProps {}\nconst RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <RadioGroupPrimitive.Item\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('rt-reset', 'rt-BaseCard', 'rt-RadioCardsItem', className)}\n    />\n  )\n);\nRadioCardsItem.displayName = 'RadioCards.Item';\n\nexport { RadioCardsRoot as Root, RadioCardsItem as Item };\nexport type { RadioCardsRootProps as RootProps, RadioCardsItemProps as ItemProps };\n"],
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { RadioGroup as RadioGroupPrimitive } from 'radix-ui';\n\nimport { radioCardsRootPropDefs } from './radio-cards.props.js';\nimport { Grid } from './grid.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype RadioCardsRootElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;\ntype RadioCardsRootOwnProps = GetPropDefTypes<typeof radioCardsRootPropDefs>;\ninterface RadioCardsRootProps\n  extends ComponentPropsWithout<\n      typeof RadioGroupPrimitive.Root,\n      'asChild' | 'color' | 'defaultChecked'\n    >,\n    MarginProps,\n    RadioCardsRootOwnProps {}\nconst RadioCardsRoot = React.forwardRef<RadioCardsRootElement, RadioCardsRootProps>(\n  (props, forwardedRef) => {\n    const { className, color, ...rootProps } = extractProps(\n      props,\n      radioCardsRootPropDefs,\n      marginPropDefs,\n    );\n    return (\n      <Grid asChild>\n        <RadioGroupPrimitive.Root\n          data-accent-color={color}\n          {...rootProps}\n          ref={forwardedRef}\n          className={classNames('rt-RadioCardsRoot', className)}\n        />\n      </Grid>\n    );\n  },\n);\nRadioCardsRoot.displayName = 'RadioCards.Root';\n\ntype RadioCardsItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;\ninterface RadioCardsItemProps\n  extends ComponentPropsWithout<typeof RadioGroupPrimitive.Item, RemovedProps>,\n    MarginProps {}\nconst RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemProps>(\n  ({ className, ...props }, forwardedRef) => (\n    <RadioGroupPrimitive.Item\n      {...props}\n      asChild={false}\n      ref={forwardedRef}\n      className={classNames('rt-reset', 'rt-BaseCard', 'rt-RadioCardsItem', className)}\n    />\n  ),\n);\nRadioCardsItem.displayName = 'RadioCards.Item';\n\nexport { RadioCardsRoot as Root, RadioCardsItem as Item };\nexport type { RadioCardsRootProps as RootProps, RadioCardsItemProps as ItemProps };\n"],
   "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,SAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAkD,oBAElDC,EAAuC,kCACvCC,EAAqB,qBACrBC,EAA6B,uCAC7BC,EAA+B,oCAe/B,MAAMR,EAAiBE,EAAM,WAC3B,CAACO,EAAOC,IAAiB,CACvB,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,GAAGC,CAAU,KAAI,gBACzCJ,EACA,yBACA,gBACF,EACA,OACEP,EAAA,cAAC,QAAK,QAAO,IACXA,EAAA,cAAC,EAAAY,WAAoB,KAApB,CACC,oBAAmBF,EAClB,GAAGC,EACJ,IAAKH,EACL,aAAW,EAAAK,SAAW,oBAAqBJ,CAAS,EACtD,CACF,CAEJ,CACF,EACAX,EAAe,YAAc,kBAM7B,MAAMD,EAAiBG,EAAM,WAC3B,CAAC,CAAE,UAAAS,EAAW,GAAGF,CAAM,EAAGC,IACxBR,EAAA,cAAC,EAAAY,WAAoB,KAApB,CACE,GAAGL,EACJ,QAAS,GACT,IAAKC,EACL,aAAW,EAAAK,SAAW,WAAY,cAAe,oBAAqBJ,CAAS,EACjF,CAEJ,EACAZ,EAAe,YAAc",
   "names": ["radio_cards_exports", "__export", "RadioCardsItem", "RadioCardsRoot", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_radio_cards_props", "import_grid", "import_extract_props", "import_margin_props", "props", "forwardedRef", "className", "color", "rootProps", "RadioGroupPrimitive", "classNames"]
 }

package/dist/cjs/components/toggle-icon-button.d.ts

@@ -1,11 +1,25 @@
 import * as React from 'react';
-import { IconButton } from './icon-button.js';
-interface ToggleIconButtonProps extends React.ComponentPropsWithoutRef<typeof IconButton> {
-    pressed?: boolean;
-    onPressedChange?: (pressed: boolean) => void;
-    defaultPressed?: boolean;
+import { Toggle } from 'radix-ui';
+import type { BaseButtonProps } from './_internal/base-button.js';
+type ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;
+type AccessibilityProps = {
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby'?: never;
+    children: React.ReactNode;
+};
+interface ToggleIconButtonProps extends Omit<BaseButtonProps, 'as'> {
+    pressed?: ToggleProps['pressed'];
+    onPressedChange?: ToggleProps['onPressedChange'];
+    defaultPressed?: ToggleProps['defaultPressed'];
 }
-declare const ToggleIconButton: React.ForwardRefExoticComponent<Omit<ToggleIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;
+declare const ToggleIconButton: React.ForwardRefExoticComponent<ToggleIconButtonPropsWithAccessibility & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleIconButton };
-export type { ToggleIconButtonProps };
+export type { ToggleIconButtonPropsWithAccessibility as ToggleIconButtonProps };
 //# sourceMappingURL=toggle-icon-button.d.ts.map

package/dist/cjs/components/toggle-icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,UAAU,qBAAsB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,UAAU,CAAC;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID,QAAA,MAAM,gBAAgB,8GAarB,CAAC;AAGF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"toggle-icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAKlE,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAGtE,KAAK,kBAAkB,GACnB;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAE,GACnD;IAAE,YAAY,CAAC,EAAE,KAAK,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC;AAGnF,UAAU,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;IACjE,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACjD,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAGD,KAAK,sCAAsC,GAAG,qBAAqB,GAAG,kBAAkB,CAAC;AAEzF,QAAA,MAAM,gBAAgB,kHAcpB,CAAC;AAGH,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,sCAAsC,IAAI,qBAAqB,EAAE,CAAC"}

package/dist/cjs/components/toggle-icon-button.js

@@ -1,2 +1,2 @@
-"use strict";var u=Object.create;var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var I=(o,e)=>{for(var t in e)s(o,t,{get:e[t],enumerable:!0})},p=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of f(e))!B.call(o,n)&&n!==t&&s(o,n,{get:()=>e[n],enumerable:!(r=c(e,n))||r.enumerable});return o};var T=(o,e,t)=>(t=o!=null?u(m(o)):{},p(e||!o||!o.__esModule?s(t,"default",{value:o,enumerable:!0}):t,o)),i=o=>p(s({},"__esModule",{value:!0}),o);var P={};I(P,{ToggleIconButton:()=>l});module.exports=i(P);var g=T(require("react")),a=require("radix-ui"),d=require("./icon-button.js");const l=g.forwardRef(({pressed:o,onPressedChange:e,defaultPressed:t,...r},n)=>g.createElement(a.Toggle.Root,{pressed:o,onPressedChange:e,defaultPressed:t,asChild:!0},g.createElement(d.IconButton,{...r,ref:n})));l.displayName="ToggleIconButton";
+"use strict";var c=Object.create;var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var y=(e,o)=>{for(var t in o)n(e,t,{get:o[t],enumerable:!0})},g=(e,o,t,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of u(o))!B.call(e,s)&&s!==t&&n(e,s,{get:()=>o[s],enumerable:!(r=d(o,s))||r.enumerable});return e};var T=(e,o,t)=>(t=e!=null?c(P(e)):{},g(o||!e||!e.__esModule?n(t,"default",{value:e,enumerable:!0}):t,e)),b=e=>g(n({},"__esModule",{value:!0}),e);var f={};y(f,{ToggleIconButton:()=>a});module.exports=b(f);var l=T(require("react")),i=require("radix-ui"),p=require("./icon-button.js"),I=require("./_internal/base-button.js");const a=l.forwardRef(({pressed:e,onPressedChange:o,defaultPressed:t,...r},s)=>l.createElement(i.Toggle.Root,{pressed:e,onPressedChange:o,defaultPressed:t,asChild:!0},l.createElement(p.IconButton,{...r,ref:s})));a.displayName="ToggleIconButton";
 //# sourceMappingURL=toggle-icon-button.js.map

package/dist/cjs/components/toggle-icon-button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggle-icon-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { IconButton } from './icon-button.js';\n\ninterface ToggleIconButtonProps extends React.ComponentPropsWithoutRef<typeof IconButton> {\n  pressed?: boolean;\n  onPressedChange?: (pressed: boolean) => void;\n  defaultPressed?: boolean;\n}\n\ntype ToggleIconButtonElement = React.ElementRef<typeof IconButton>;\n\nconst ToggleIconButton = React.forwardRef<ToggleIconButtonElement, ToggleIconButtonProps>(\n  ({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n    return (\n      <Toggle.Root\n        pressed={pressed}\n        onPressedChange={onPressedChange}\n        defaultPressed={defaultPressed}\n        asChild\n      >\n        <IconButton {...iconButtonProps} ref={forwardedRef} />\n      </Toggle.Root>\n    );\n  },\n);\nToggleIconButton.displayName = 'ToggleIconButton';\n\nexport { ToggleIconButton };\nexport type { ToggleIconButtonProps };\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,oBACvBC,EAA2B,4BAU3B,MAAMJ,EAAmBE,EAAM,WAC7B,CAAC,CAAE,QAAAG,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAE/DP,EAAA,cAAC,SAAO,KAAP,CACC,QAASG,EACT,gBAAiBC,EACjB,eAAgBC,EAChB,QAAO,IAEPL,EAAA,cAAC,cAAY,GAAGM,EAAiB,IAAKC,EAAc,CACtD,CAGN,EACAT,EAAiB,YAAc",
-  "names": ["toggle_icon_button_exports", "__export", "ToggleIconButton", "__toCommonJS", "React", "import_radix_ui", "import_icon_button", "pressed", "onPressedChange", "defaultPressed", "iconButtonProps", "forwardedRef"]
+  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { IconButton } from './icon-button.js';\nimport { BaseButton } from './_internal/base-button.js';\nimport type { BaseButtonProps } from './_internal/base-button.js';\n\ntype ToggleIconButtonElement = React.ElementRef<typeof BaseButton>;\n\n// Extract toggle-specific props from Radix Toggle\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;\n\n// Required accessibility props for icon buttons (same as IconButton)\ntype AccessibilityProps =\n  | { 'aria-label': string; 'aria-labelledby'?: never }\n  | { 'aria-label'?: never; 'aria-labelledby': string }\n  | { 'aria-label'?: never; 'aria-labelledby'?: never; children: React.ReactNode };\n\n// Combine BaseButton props with Toggle-specific props and accessibility requirements\ninterface ToggleIconButtonProps extends Omit<BaseButtonProps, 'as'> {\n  pressed?: ToggleProps['pressed'];\n  onPressedChange?: ToggleProps['onPressedChange'];\n  defaultPressed?: ToggleProps['defaultPressed'];\n}\n\n// Intersection with accessibility props\ntype ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;\n\nconst ToggleIconButton = React.forwardRef<\n  ToggleIconButtonElement,\n  ToggleIconButtonPropsWithAccessibility\n>(({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n  return (\n    <Toggle.Root\n      pressed={pressed}\n      onPressedChange={onPressedChange}\n      defaultPressed={defaultPressed}\n      asChild\n    >\n      <IconButton {...iconButtonProps} ref={forwardedRef} />\n    </Toggle.Root>\n  );\n});\nToggleIconButton.displayName = 'ToggleIconButton';\n\nexport { ToggleIconButton };\nexport type { ToggleIconButtonPropsWithAccessibility as ToggleIconButtonProps };\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,oBACvBC,EAA2B,4BAC3BC,EAA2B,sCAwB3B,MAAML,EAAmBE,EAAM,WAG7B,CAAC,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAEjER,EAAA,cAAC,SAAO,KAAP,CACC,QAASI,EACT,gBAAiBC,EACjB,eAAgBC,EAChB,QAAO,IAEPN,EAAA,cAAC,cAAY,GAAGO,EAAiB,IAAKC,EAAc,CACtD,CAEH,EACDV,EAAiB,YAAc",
+  "names": ["toggle_icon_button_exports", "__export", "ToggleIconButton", "__toCommonJS", "React", "import_radix_ui", "import_icon_button", "import_base_button", "pressed", "onPressedChange", "defaultPressed", "iconButtonProps", "forwardedRef"]
 }

package/dist/esm/components/_internal/base-button.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { baseButtonPropDefs } from './base-button.props.js';
 import type { MarginProps } from '../../props/margin.props.js';
+import type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';
 import type { GetPropDefTypes } from '../../props/prop-def.js';
 type BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;
 type PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {
     as?: C;
-} & BaseButtonOwnProps & MarginProps & Omit<React.ComponentPropsWithoutRef<C>, keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
+} & BaseButtonOwnProps & MarginProps & ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
 interface BaseButtonProps extends PolymorphicBaseButtonProps {
 }
 declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/_internal/base-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAQ5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAGrE,KAAK,0BAA0B,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACxE,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,kBAAkB,GACpB,WAAW,GACX,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,GAAG,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;AAE/F,UAAU,eAAgB,SAAQ,0BAA0B;CAAG;AAE/D,QAAA,MAAM,UAAU,2FAwDd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAQ5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAC5F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAGrE,KAAK,0BAA0B,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACxE,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,kBAAkB,GACpB,WAAW,GACX,qBAAqB,CAAC,CAAC,EAAE,YAAY,GAAG,MAAM,kBAAkB,GAAG,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;AAE/F,UAAU,eAAgB,SAAQ,0BAA0B;CAAG;AAE/D,QAAA,MAAM,UAAU,2FA8Ed,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/esm/components/_internal/base-button.js

@@ -1,2 +1,2 @@
-import*as t from"react";import y from"classnames";import{Slot as c}from"radix-ui";import{baseButtonPropDefs as p}from"./base-button.props.js";import{Flex as b}from"../flex.js";import{Spinner as h}from"../spinner.js";import{VisuallyHidden as C}from"../visually-hidden.js";import{extractProps as g}from"../../helpers/extract-props.js";import{mapResponsiveProp as x,mapButtonSizeToSpinnerSize as D}from"../../helpers/map-prop-values.js";import{marginPropDefs as w}from"../../props/margin.props.js";const a=t.forwardRef((o,i)=>{const{size:m=p.size.default}=o,{className:d,children:e,asChild:r,as:s,color:l,radius:u,disabled:n=o.loading,...f}=g(o,p,w),B=r?c.Root:s||"button",P=r||!s||["button","input","textarea","select"].includes(s);return t.createElement(B,{"data-disabled":n||void 0,"data-accent-color":l,"data-radius":u,...f,ref:i,className:y("rt-reset","rt-BaseButton",d),...P&&{disabled:n}},o.loading?t.createElement(t.Fragment,null,t.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},e),t.createElement(C,null,e),t.createElement(b,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},t.createElement("span",null,t.createElement(h,{size:x(m,D)})))):e)});a.displayName="BaseButton";export{a as BaseButton};
+import*as e from"react";import h from"classnames";import{Slot as g}from"radix-ui";import{baseButtonPropDefs as i}from"./base-button.props.js";import{Flex as C}from"../flex.js";import{Spinner as x}from"../spinner.js";import{VisuallyHidden as w}from"../visually-hidden.js";import{extractProps as D}from"../../helpers/extract-props.js";import{mapResponsiveProp as z,mapButtonSizeToSpinnerSize as S}from"../../helpers/map-prop-values.js";import{marginPropDefs as T}from"../../props/margin.props.js";const p=e.forwardRef((o,d)=>{const{size:l=i.size.default}=o,{className:m,children:t,asChild:n,as:s,color:u,radius:B,disabled:r=o.loading,...f}=D(o,i,T),y=n?g.Root:s||"button",P=n||!s||["button","input","textarea","select"].includes(s),c=e.useId(),a=o.loading?`${c}-loading`:void 0,b=o.loading?{"aria-busy":!0,"aria-disabled":!0,"aria-describedby":a}:{};return e.createElement(y,{"data-disabled":r||void 0,"data-accent-color":u,"data-radius":B,...f,...b,ref:d,className:h("rt-reset","rt-BaseButton",m),...P&&{disabled:r}},o.loading?e.createElement(e.Fragment,null,e.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},t),e.createElement(w,null,e.createElement("span",{id:a},"Loading, please wait..."),t),e.createElement(C,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},e.createElement("span",null,e.createElement(x,{size:z(l,S),"aria-hidden":"true"})))):t)});p.displayName="BaseButton";export{p as BaseButton};
 //# sourceMappingURL=base-button.js.map

package/dist/esm/components/_internal/base-button.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/_internal/base-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { baseButtonPropDefs } from './base-button.props.js';\nimport { Flex } from '../flex.js';\nimport { Spinner } from '../spinner.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { extractProps } from '../../helpers/extract-props.js';\nimport { mapResponsiveProp, mapButtonSizeToSpinnerSize } from '../../helpers/map-prop-values.js';\nimport { marginPropDefs } from '../../props/margin.props.js';\n\nimport type { MarginProps } from '../../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../../props/prop-def.js';\n\ntype BaseButtonElement = React.ElementRef<'button'>;\ntype BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;\n\n// Polymorphic types\ntype PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {\n  as?: C;\n} & BaseButtonOwnProps &\n  MarginProps &\n  Omit<React.ComponentPropsWithoutRef<C>, keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;\n\ninterface BaseButtonProps extends PolymorphicBaseButtonProps {}\n\nconst BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props, forwardedRef) => {\n  const { size = baseButtonPropDefs.size.default } = props;\n  const {\n    className,\n    children,\n    asChild,\n    as,\n    color,\n    radius,\n    disabled = props.loading,\n    ...baseButtonProps\n  } = extractProps(props, baseButtonPropDefs, marginPropDefs);\n\n  // asChild takes precedence over as prop\n  const Comp = asChild ? Slot.Root : as || 'button';\n\n  // Only pass disabled for elements that support it\n  const shouldPassDisabled =\n    asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);\n\n  return (\n    <Comp\n      // The `data-disabled` attribute enables correct styles when doing `<Button asChild disabled>`\n      data-disabled={disabled || undefined}\n      data-accent-color={color}\n      data-radius={radius}\n      {...baseButtonProps}\n      ref={forwardedRef}\n      className={classNames('rt-reset', 'rt-BaseButton', className)}\n      {...(shouldPassDisabled && { disabled })}\n    >\n      {props.loading ? (\n        <>\n          {/**\n           * We need a wrapper to set `visibility: hidden` to hide the button content whilst we show the `Spinner`.\n           * The button is a flex container with a `gap`, so we use `display: contents` to ensure the correct flex layout.\n           *\n           * However, `display: contents` removes the content from the accessibility tree in some browsers,\n           * so we force remove it with `aria-hidden` and re-add it in the tree with `VisuallyHidden`\n           */}\n          <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n            {children}\n          </span>\n          <VisuallyHidden>{children}</VisuallyHidden>\n\n          <Flex asChild align=\"center\" justify=\"center\" position=\"absolute\" inset=\"0\">\n            <span>\n              <Spinner size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)} />\n            </span>\n          </Flex>\n        </>\n      ) : (\n        children\n      )}\n    </Comp>\n  );\n});\nBaseButton.displayName = 'BaseButton';\n\nexport { BaseButton };\nexport type { BaseButtonProps };\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,QAAAC,MAAY,WAErB,OAAS,sBAAAC,MAA0B,yBACnC,OAAS,QAAAC,MAAY,aACrB,OAAS,WAAAC,MAAe,gBACxB,OAAS,kBAAAC,MAAsB,wBAC/B,OAAS,gBAAAC,MAAoB,iCAC7B,OAAS,qBAAAC,EAAmB,8BAAAC,MAAkC,mCAC9D,OAAS,kBAAAC,MAAsB,8BAkB/B,MAAMC,EAAaX,EAAM,WAA+C,CAACY,EAAOC,IAAiB,CAC/F,KAAM,CAAE,KAAAC,EAAOX,EAAmB,KAAK,OAAQ,EAAIS,EAC7C,CACJ,UAAAG,EACA,SAAAC,EACA,QAAAC,EACA,GAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EAAWT,EAAM,QACjB,GAAGU,CACL,EAAIf,EAAaK,EAAOT,EAAoBO,CAAc,EAGpDa,EAAON,EAAUf,EAAK,KAAOgB,GAAM,SAGnCM,EACJP,GAAW,CAACC,GAAM,CAAC,SAAU,QAAS,WAAY,QAAQ,EAAE,SAASA,CAAE,EAEzE,OACElB,EAAA,cAACuB,EAAA,CAEC,gBAAeF,GAAY,OAC3B,oBAAmBF,EACnB,cAAaC,EACZ,GAAGE,EACJ,IAAKT,EACL,UAAWZ,EAAW,WAAY,gBAAiBc,CAAS,EAC3D,GAAIS,GAAsB,CAAE,SAAAH,CAAS,GAErCT,EAAM,QACLZ,EAAA,cAAAA,EAAA,cAQEA,EAAA,cAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,IACpEgB,CACH,EACAhB,EAAA,cAACM,EAAA,KAAgBU,CAAS,EAE1BhB,EAAA,cAACI,EAAA,CAAK,QAAO,GAAC,MAAM,SAAS,QAAQ,SAAS,SAAS,WAAW,MAAM,KACtEJ,EAAA,cAAC,YACCA,EAAA,cAACK,EAAA,CAAQ,KAAMG,EAAkBM,EAAML,CAA0B,EAAG,CACtE,CACF,CACF,EAEAO,CAEJ,CAEJ,CAAC,EACDL,EAAW,YAAc",
-  "names": ["React", "classNames", "Slot", "baseButtonPropDefs", "Flex", "Spinner", "VisuallyHidden", "extractProps", "mapResponsiveProp", "mapButtonSizeToSpinnerSize", "marginPropDefs", "BaseButton", "props", "forwardedRef", "size", "className", "children", "asChild", "as", "color", "radius", "disabled", "baseButtonProps", "Comp", "shouldPassDisabled"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { baseButtonPropDefs } from './base-button.props.js';\nimport { Flex } from '../flex.js';\nimport { Spinner } from '../spinner.js';\nimport { VisuallyHidden } from '../visually-hidden.js';\nimport { extractProps } from '../../helpers/extract-props.js';\nimport { mapResponsiveProp, mapButtonSizeToSpinnerSize } from '../../helpers/map-prop-values.js';\nimport { marginPropDefs } from '../../props/margin.props.js';\n\nimport type { MarginProps } from '../../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../../props/prop-def.js';\n\ntype BaseButtonElement = React.ElementRef<'button'>;\ntype BaseButtonOwnProps = GetPropDefTypes<typeof baseButtonPropDefs>;\n\n// Polymorphic types using the proper ComponentPropsWithout pattern\ntype PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {\n  as?: C;\n} & BaseButtonOwnProps &\n  MarginProps &\n  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;\n\ninterface BaseButtonProps extends PolymorphicBaseButtonProps {}\n\nconst BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props, forwardedRef) => {\n  const { size = baseButtonPropDefs.size.default } = props;\n  const {\n    className,\n    children,\n    asChild,\n    as,\n    color,\n    radius,\n    disabled = props.loading,\n    ...baseButtonProps\n  } = extractProps(props, baseButtonPropDefs, marginPropDefs);\n\n  // asChild takes precedence over as prop\n  const Comp = asChild ? Slot.Root : as || 'button';\n\n  // Only pass disabled for elements that support it\n  const shouldPassDisabled =\n    asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);\n\n  // Generate unique ID for loading announcements\n  const loadingId = React.useId();\n  const describedById = props.loading ? `${loadingId}-loading` : undefined;\n\n  // Enhanced accessibility props for loading state\n  const accessibilityProps = props.loading\n    ? {\n        'aria-busy': true,\n        'aria-disabled': true,\n        'aria-describedby': describedById,\n      }\n    : {};\n\n  return (\n    <Comp\n      // The `data-disabled` attribute enables correct styles when doing `<Button asChild disabled>`\n      data-disabled={disabled || undefined}\n      data-accent-color={color}\n      data-radius={radius}\n      {...baseButtonProps}\n      {...accessibilityProps}\n      ref={forwardedRef}\n      className={classNames('rt-reset', 'rt-BaseButton', className)}\n      {...(shouldPassDisabled && { disabled })}\n    >\n      {props.loading ? (\n        <>\n          {/**\n           * We need a wrapper to set `visibility: hidden` to hide the button content whilst we show the `Spinner`.\n           * The button is a flex container with a `gap`, so we use `display: contents` to ensure the correct flex layout.\n           *\n           * However, `display: contents` removes the content from the accessibility tree in some browsers,\n           * so we force remove it with `aria-hidden` and re-add it in the tree with `VisuallyHidden`\n           */}\n          <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n            {children}\n          </span>\n\n          {/* Enhanced accessibility for loading state */}\n          <VisuallyHidden>\n            <span id={describedById}>Loading, please wait...</span>\n            {children}\n          </VisuallyHidden>\n\n          <Flex asChild align=\"center\" justify=\"center\" position=\"absolute\" inset=\"0\">\n            <span>\n              <Spinner\n                size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)}\n                aria-hidden=\"true\"\n              />\n            </span>\n          </Flex>\n        </>\n      ) : (\n        children\n      )}\n    </Comp>\n  );\n});\nBaseButton.displayName = 'BaseButton';\n\nexport { BaseButton };\nexport type { BaseButtonProps };\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,QAAAC,MAAY,WAErB,OAAS,sBAAAC,MAA0B,yBACnC,OAAS,QAAAC,MAAY,aACrB,OAAS,WAAAC,MAAe,gBACxB,OAAS,kBAAAC,MAAsB,wBAC/B,OAAS,gBAAAC,MAAoB,iCAC7B,OAAS,qBAAAC,EAAmB,8BAAAC,MAAkC,mCAC9D,OAAS,kBAAAC,MAAsB,8BAkB/B,MAAMC,EAAaX,EAAM,WAA+C,CAACY,EAAOC,IAAiB,CAC/F,KAAM,CAAE,KAAAC,EAAOX,EAAmB,KAAK,OAAQ,EAAIS,EAC7C,CACJ,UAAAG,EACA,SAAAC,EACA,QAAAC,EACA,GAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EAAWT,EAAM,QACjB,GAAGU,CACL,EAAIf,EAAaK,EAAOT,EAAoBO,CAAc,EAGpDa,EAAON,EAAUf,EAAK,KAAOgB,GAAM,SAGnCM,EACJP,GAAW,CAACC,GAAM,CAAC,SAAU,QAAS,WAAY,QAAQ,EAAE,SAASA,CAAE,EAGnEO,EAAYzB,EAAM,MAAM,EACxB0B,EAAgBd,EAAM,QAAU,GAAGa,CAAS,WAAa,OAGzDE,EAAqBf,EAAM,QAC7B,CACE,YAAa,GACb,gBAAiB,GACjB,mBAAoBc,CACtB,EACA,CAAC,EAEL,OACE1B,EAAA,cAACuB,EAAA,CAEC,gBAAeF,GAAY,OAC3B,oBAAmBF,EACnB,cAAaC,EACZ,GAAGE,EACH,GAAGK,EACJ,IAAKd,EACL,UAAWZ,EAAW,WAAY,gBAAiBc,CAAS,EAC3D,GAAIS,GAAsB,CAAE,SAAAH,CAAS,GAErCT,EAAM,QACLZ,EAAA,cAAAA,EAAA,cAQEA,EAAA,cAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,IACpEgB,CACH,EAGAhB,EAAA,cAACM,EAAA,KACCN,EAAA,cAAC,QAAK,GAAI0B,GAAe,yBAAuB,EAC/CV,CACH,EAEAhB,EAAA,cAACI,EAAA,CAAK,QAAO,GAAC,MAAM,SAAS,QAAQ,SAAS,SAAS,WAAW,MAAM,KACtEJ,EAAA,cAAC,YACCA,EAAA,cAACK,EAAA,CACC,KAAMG,EAAkBM,EAAML,CAA0B,EACxD,cAAY,OACd,CACF,CACF,CACF,EAEAO,CAEJ,CAEJ,CAAC,EACDL,EAAW,YAAc",
+  "names": ["React", "classNames", "Slot", "baseButtonPropDefs", "Flex", "Spinner", "VisuallyHidden", "extractProps", "mapResponsiveProp", "mapButtonSizeToSpinnerSize", "marginPropDefs", "BaseButton", "props", "forwardedRef", "size", "className", "children", "asChild", "as", "color", "radius", "disabled", "baseButtonProps", "Comp", "shouldPassDisabled", "loadingId", "describedById", "accessibilityProps"]
 }