@kushagradhawan/kookie-ui 0.1.28 → 0.1.30

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';\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"]
+  "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 { useLiveAnnouncer } from '../hooks/use-live-announcer.js';\nimport type { IconButtonProps } from './icon-button.js';\n\ntype ToggleIconButtonElement = React.ElementRef<typeof BaseButton>;\n\n/**\n * Extract toggle-specific props from Radix Toggle\n * These props control the toggle state and behavior\n */\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof Toggle.Root>;\n\n/**\n * Required accessibility props for icon buttons (same as IconButton)\n * Icon buttons must have an accessible name to meet WCAG guidelines\n *\n * Three ways to provide accessibility:\n * 1. aria-label: Direct descriptive text\n * 2. aria-labelledby: Reference to a label element\n * 3. children: Visible text content (fallback)\n */\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/**\n * Combine IconButton props with Toggle-specific props\n * Includes tooltip props from IconButton for comprehensive functionality\n */\ninterface ToggleIconButtonProps extends Omit<IconButtonProps, 'as'> {\n  /** Controlled pressed state */\n  pressed?: ToggleProps['pressed'];\n  /** Callback when pressed state changes */\n  onPressedChange?: ToggleProps['onPressedChange'];\n  /** Default pressed state for uncontrolled usage */\n  defaultPressed?: ToggleProps['defaultPressed'];\n}\n\n/**\n * Intersection with accessibility props to ensure compliance\n * This type ensures all ToggleIconButton instances have proper accessibility\n */\ntype ToggleIconButtonPropsWithAccessibility = ToggleIconButtonProps & AccessibilityProps;\n\n/**\n * ToggleIconButton component for icon buttons that can be pressed/unpressed\n *\n * The ToggleIconButton component extends IconButton with toggle functionality\n * using Radix UI's Toggle primitive. It provides proper accessibility announcements,\n * controlled/uncontrolled state management, and seamless integration with\n * the existing IconButton component.\n *\n * Key features:\n * - Controlled and uncontrolled state management\n * - Live accessibility announcements for screen readers\n * - Enforced accessibility requirements (aria-label, aria-labelledby, or children)\n * - Automatic state validation and warnings\n * - Seamless integration with IconButton props and styling\n * - Proper ARIA attributes for toggle functionality\n * - Built-in tooltip support from IconButton\n *\n * @example\n * ```tsx\n * // Uncontrolled toggle icon button\n * <ToggleIconButton defaultPressed={false} aria-label=\"Toggle notifications\">\n *   <Bell />\n * </ToggleIconButton>\n *\n * // Controlled toggle icon button\n * const [pressed, setPressed] = React.useState(false);\n * <ToggleIconButton\n *   pressed={pressed}\n *   onPressedChange={setPressed}\n *   aria-label=\"Toggle notifications\"\n * >\n *   <Bell />\n * </ToggleIconButton>\n *\n * // Toggle icon button with tooltip\n * <ToggleIconButton\n *   variant=\"solid\"\n *   size=\"3\"\n *   color=\"blue\"\n *   pressed={isActive}\n *   onPressedChange={setIsActive}\n *   aria-label=\"Toggle feature\"\n *   tooltip=\"Toggle this feature on/off\"\n * >\n *   <Star />\n * </ToggleIconButton>\n *\n * // Toggle icon button with aria-labelledby\n * <ToggleIconButton\n *   aria-labelledby=\"notifications-label\"\n *   pressed={notificationsEnabled}\n *   onPressedChange={setNotificationsEnabled}\n * >\n *   <Bell />\n * </ToggleIconButton>\n * <span id=\"notifications-label\">Toggle notifications</span>\n * ```\n */\nconst ToggleIconButton = React.forwardRef<\n  ToggleIconButtonElement,\n  ToggleIconButtonPropsWithAccessibility\n>(({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n  // Get the live announcer for accessibility announcements\n  const announce = useLiveAnnouncer();\n\n  /**\n   * Extract accessible name from various sources for announcements\n   * This ensures screen readers announce meaningful state changes\n   * Priority: aria-label > aria-labelledby > children > fallback\n   */\n  const getAccessibleName = React.useCallback(() => {\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n    } = iconButtonProps;\n\n    // First priority: direct aria-label\n    if (ariaLabel) return ariaLabel;\n\n    // Second priority: referenced label element\n    if (ariaLabelledBy) {\n      const labelElement = document.getElementById(ariaLabelledBy);\n      return labelElement?.textContent || 'Toggle icon button';\n    }\n\n    // Third priority: visible text children\n    if (typeof children === 'string') return children;\n    if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {\n      return (children.props as any).children;\n    }\n\n    // Fallback for edge cases\n    return 'Toggle icon button';\n  }, [iconButtonProps]);\n\n  /**\n   * Memoized handler for state changes with accessibility announcements\n   * This ensures screen readers announce the new state immediately\n   */\n  const handlePressedChange = React.useCallback(\n    (newPressed: boolean) => {\n      const accessibleName = getAccessibleName();\n      // Announce the state change for screen readers\n      announce(`${accessibleName} ${newPressed ? 'pressed' : 'unpressed'}`);\n      // Call the user's change handler\n      onPressedChange?.(newPressed);\n    },\n    [announce, onPressedChange, getAccessibleName],\n  );\n\n  // Development-only warning for controlled/uncontrolled pattern\n  // This helps developers avoid common state management mistakes\n  React.useEffect(() => {\n    if (process.env.NODE_ENV === 'development' && pressed !== undefined && onPressedChange === undefined) {\n      console.warn(\n        'ToggleIconButton: You provided a `pressed` prop without an `onPressedChange` handler. ' +\n          'This will result in a read-only toggle button. If you want the button to be interactive, ' +\n          'you should provide an `onPressedChange` handler.',\n      );\n    }\n  }, [pressed, onPressedChange]);\n\n  // Render the toggle icon button using Radix UI's Toggle primitive\n  // This provides proper ARIA attributes and keyboard navigation\n  // The IconButton component handles accessibility validation internally\n  return (\n    <Toggle.Root\n      pressed={pressed}\n      onPressedChange={handlePressedChange}\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,sCAC3BC,EAAiC,0CAsGjC,MAAMN,EAAmBE,EAAM,WAG7B,CAAC,CAAE,QAAAK,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAAiB,CAEpF,MAAMC,KAAW,oBAAiB,EAO5BC,EAAoBX,EAAM,YAAY,IAAM,CAChD,KAAM,CACJ,aAAcY,EACd,kBAAmBC,EACnB,SAAAC,CACF,EAAIN,EAGJ,OAAII,IAGAC,EACmB,SAAS,eAAeA,CAAc,GACtC,aAAe,qBAIlC,OAAOC,GAAa,SAAiBA,EACrCd,EAAM,eAAec,CAAQ,GAAK,OAAQA,EAAS,OAAe,UAAa,SACzEA,EAAS,MAAc,SAI1B,qBACT,EAAG,CAACN,CAAe,CAAC,EAMdO,EAAsBf,EAAM,YAC/BgB,GAAwB,CACvB,MAAMC,EAAiBN,EAAkB,EAEzCD,EAAS,GAAGO,CAAc,IAAID,EAAa,UAAY,WAAW,EAAE,EAEpEV,IAAkBU,CAAU,CAC9B,EACA,CAACN,EAAUJ,EAAiBK,CAAiB,CAC/C,EAIA,OAAAX,EAAM,UAAU,IAAM,CAQtB,EAAG,CAACK,EAASC,CAAe,CAAC,EAM3BN,EAAA,cAAC,SAAO,KAAP,CACC,QAASK,EACT,gBAAiBU,EACjB,eAAgBR,EAChB,QAAO,IAEPP,EAAA,cAAC,cAAY,GAAGQ,EAAiB,IAAKC,EAAc,CACtD,CAEJ,CAAC,EACDX,EAAiB,YAAc",
+  "names": ["toggle_icon_button_exports", "__export", "ToggleIconButton", "__toCommonJS", "React", "import_radix_ui", "import_icon_button", "import_base_button", "import_use_live_announcer", "pressed", "onPressedChange", "defaultPressed", "iconButtonProps", "forwardedRef", "announce", "getAccessibleName", "ariaLabel", "ariaLabelledBy", "children", "handlePressedChange", "newPressed", "accessibleName"]
 }

package/dist/cjs/helpers/extract-margin-props.d.ts

@@ -1,12 +1,12 @@
 import type { MarginProps } from '../props/margin.props.js';
 export declare function extractMarginProps<T extends MarginProps>(props: T): {
-    m: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    mx: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    my: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    mt: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    mr: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    mb: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
-    ml: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    m: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    mx: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    my: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    mt: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    mr: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    mb: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
+    ml: import("../props/prop-def.js").Responsive<import("../props/prop-def.js").Union<string, "1" | "2" | "3" | "4" | "0" | "5" | "6" | "7" | "8" | "9" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9">> | undefined;
     rest: Omit<T, "m" | "ml" | "mr" | "mt" | "mb" | "mx" | "my">;
 };
 //# sourceMappingURL=extract-margin-props.d.ts.map

package/dist/cjs/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useLiveAnnouncer } from './use-live-announcer.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/cjs/hooks/index.js

@@ -0,0 +1,2 @@
+"use strict";var u=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var s=(n,e)=>{for(var r in e)u(n,r,{get:e[r],enumerable:!0})},t=(n,e,r,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!p.call(n,o)&&o!==r&&u(n,o,{get:()=>e[o],enumerable:!(c=i(e,o))||c.enumerable});return n};var v=n=>t(u({},"__esModule",{value:!0}),n);var x={};s(x,{useLiveAnnouncer:()=>f.useLiveAnnouncer});module.exports=v(x);var f=require("./use-live-announcer.js");
+//# sourceMappingURL=index.js.map

package/dist/cjs/hooks/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/index.ts"],
+  "sourcesContent": ["export { useLiveAnnouncer } from './use-live-announcer.js'; "],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,0DAAAE,EAAAF,GAAA,IAAAG,EAAiC",
+  "names": ["hooks_exports", "__export", "__toCommonJS", "import_use_live_announcer"]
+}

package/dist/cjs/hooks/use-live-announcer.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Hook for making live announcements to screen readers
+ * Creates a hidden aria-live region for announcing dynamic content changes
+ */
+export declare function useLiveAnnouncer(): (message: string) => void;
+//# sourceMappingURL=use-live-announcer.d.ts.map

package/dist/cjs/hooks/use-live-announcer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-live-announcer.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-live-announcer.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,gBAAgB,cA+Be,MAAM,UAcpD"}

package/dist/cjs/hooks/use-live-announcer.js

@@ -0,0 +1,10 @@
+"use strict";var a=Object.create;var o=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var p=(t,e)=>{for(var n in e)o(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of s(e))!m.call(t,i)&&i!==n&&o(t,i,{get:()=>e[i],enumerable:!(r=l(e,i))||r.enumerable});return t};var v=(t,e,n)=>(n=t!=null?a(d(t)):{},c(e||!t||!t.__esModule?o(n,"default",{value:t,enumerable:!0}):n,t)),f=t=>c(o({},"__esModule",{value:!0}),t);var x={};p(x,{useLiveAnnouncer:()=>h});module.exports=f(x);var u=v(require("react"));function h(){return u.useEffect(()=>{let e=document.getElementById("rt-live-announcer");return e||(e=document.createElement("div"),e.id="rt-live-announcer",e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","true"),e.style.cssText=`
+        position: absolute;
+        left: -10000px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+      `,document.body.appendChild(e)),()=>{e&&!e.hasChildNodes()&&e.remove()}},[]),u.useCallback(e=>{const n=document.getElementById("rt-live-announcer");n&&(n.textContent="",setTimeout(()=>{n.textContent=e},100))},[])}
+//# sourceMappingURL=use-live-announcer.js.map

package/dist/cjs/hooks/use-live-announcer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-live-announcer.ts"],
+  "sourcesContent": ["import * as React from 'react';\n\n/**\n * Hook for making live announcements to screen readers\n * Creates a hidden aria-live region for announcing dynamic content changes\n */\nexport function useLiveAnnouncer() {\n\n  // Create aria-live region if it doesn't exist\n  React.useEffect(() => {\n    let liveRegion = document.getElementById('rt-live-announcer');\n    \n    if (!liveRegion) {\n      liveRegion = document.createElement('div');\n      liveRegion.id = 'rt-live-announcer';\n      liveRegion.setAttribute('aria-live', 'polite');\n      liveRegion.setAttribute('aria-atomic', 'true');\n      liveRegion.style.cssText = `\n        position: absolute;\n        left: -10000px;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip: rect(0, 0, 0, 0);\n        white-space: nowrap;\n      `;\n      document.body.appendChild(liveRegion);\n    }\n\n    return () => {\n      // Clean up on unmount if no other components are using it\n      if (liveRegion && !liveRegion.hasChildNodes()) {\n        liveRegion.remove();\n      }\n    };\n  }, []);\n\n  const announce = React.useCallback((message: string) => {\n    const liveRegion = document.getElementById('rt-live-announcer');\n    if (liveRegion) {\n      // Clear previous announcements\n      liveRegion.textContent = '';\n      \n      // Add new announcement with a small delay to ensure it's announced\n      setTimeout(() => {\n        liveRegion.textContent = message;\n      }, 100);\n    }\n  }, []);\n\n  return announce;\n} "],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBAMhB,SAASF,GAAmB,CAGjC,OAAAE,EAAM,UAAU,IAAM,CACpB,IAAIC,EAAa,SAAS,eAAe,mBAAmB,EAE5D,OAAKA,IACHA,EAAa,SAAS,cAAc,KAAK,EACzCA,EAAW,GAAK,oBAChBA,EAAW,aAAa,YAAa,QAAQ,EAC7CA,EAAW,aAAa,cAAe,MAAM,EAC7CA,EAAW,MAAM,QAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAS3B,SAAS,KAAK,YAAYA,CAAU,GAG/B,IAAM,CAEPA,GAAc,CAACA,EAAW,cAAc,GAC1CA,EAAW,OAAO,CAEtB,CACF,EAAG,CAAC,CAAC,EAEYD,EAAM,YAAaE,GAAoB,CACtD,MAAMD,EAAa,SAAS,eAAe,mBAAmB,EAC1DA,IAEFA,EAAW,YAAc,GAGzB,WAAW,IAAM,CACfA,EAAW,YAAcC,CAC3B,EAAG,GAAG,EAEV,EAAG,CAAC,CAAC,CAGP",
+  "names": ["use_live_announcer_exports", "__export", "useLiveAnnouncer", "__toCommonJS", "React", "liveRegion", "message"]
+}

package/dist/cjs/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components/index.js';
+export * from './hooks/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC"}

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(r,o,f,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!d.call(r,e)&&e!==f&&a(r,e,{get:()=>o[e],enumerable:!(x=b(o,e))||x.enumerable});return r},t=(r,o,f)=>(p(r,o,"default"),f&&p(f,o,"default"));var g=r=>p(a({},"__esModule",{value:!0}),r);var m={};module.exports=g(m);t(m,require("./components/index.js"),module.exports);
+"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var t=(r,o,p,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let m of c(o))!d.call(r,m)&&m!==p&&a(r,m,{get:()=>o[m],enumerable:!(x=b(o,m))||x.enumerable});return r},f=(r,o,p)=>(t(r,o,"default"),p&&t(p,o,"default"));var g=r=>t(a({},"__esModule",{value:!0}),r);var e={};module.exports=g(e);f(e,require("./components/index.js"),module.exports);f(e,require("./hooks/index.js"),module.exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './components/index.js';\n"],
-  "mappings": "iaAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAAE,EAAAF,EAAc,iCAAd",
+  "sourcesContent": ["export * from './components/index.js';\nexport * from './hooks/index.js';\n"],
+  "mappings": "iaAAA,IAAAA,EAAA,kBAAAC,EAAAD,GAAAE,EAAAF,EAAc,iCAAd,gBACAE,EAAAF,EAAc,4BADd",
   "names": ["src_exports", "__toCommonJS", "__reExport"]
 }

package/dist/cjs/props/weight.prop.d.ts

@@ -2,7 +2,7 @@ declare const weightPropDef: {
     weight: {
         type: "enum";
         className: string;
-        values: readonly ["light", "regular", "medium", "bold"];
+        values: readonly ["thin", "extralight", "light", "regular", "medium", "semibold", "bold", "extrabold"];
         responsive: true;
     };
 };

package/dist/cjs/props/weight.prop.js

@@ -1,2 +1,2 @@
-"use strict";var o=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var r in e)o(t,r,{get:e[r],enumerable:!0})},a=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of f(e))!h.call(t,s)&&s!==r&&o(t,s,{get:()=>e[s],enumerable:!(i=g(e,s))||i.enumerable});return t};var n=t=>a(o({},"__esModule",{value:!0}),t);var w={};m(w,{weightPropDef:()=>p});module.exports=n(w);const u=["light","regular","medium","bold"],p={weight:{type:"enum",className:"rt-r-weight",values:u,responsive:!0}};
+"use strict";var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var l=(t,e)=>{for(var s in e)i(t,s,{get:e[s],enumerable:!0})},m=(t,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of h(e))!a.call(t,r)&&r!==s&&i(t,r,{get:()=>e[r],enumerable:!(o=g(e,r))||o.enumerable});return t};var f=t=>m(i({},"__esModule",{value:!0}),t);var u={};l(u,{weightPropDef:()=>p});module.exports=f(u);const n=["thin","extralight","light","regular","medium","semibold","bold","extrabold"],p={weight:{type:"enum",className:"rt-r-weight",values:n,responsive:!0}};
 //# sourceMappingURL=weight.prop.js.map

package/dist/cjs/props/weight.prop.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/props/weight.prop.ts"],
-  "sourcesContent": ["import type { PropDef } from './prop-def.js';\n\nconst weights = ['light', 'regular', 'medium', 'bold'] as const;\n\nconst weightPropDef = {\n  weight: {\n    type: 'enum',\n    className: 'rt-r-weight',\n    values: weights,\n    responsive: true,\n  },\n} satisfies {\n  weight: PropDef<(typeof weights)[number]>;\n};\n\nexport { weightPropDef };\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAEA,MAAMI,EAAU,CAAC,QAAS,UAAW,SAAU,MAAM,EAE/CF,EAAgB,CACpB,OAAQ,CACN,KAAM,OACN,UAAW,cACX,OAAQE,EACR,WAAY,EACd,CACF",
+  "sourcesContent": ["import type { PropDef } from './prop-def.js';\n\nconst weights = ['thin', 'extralight', 'light', 'regular', 'medium', 'semibold', 'bold', 'extrabold'] as const;\n\nconst weightPropDef = {\n  weight: {\n    type: 'enum',\n    className: 'rt-r-weight',\n    values: weights,\n    responsive: true,\n  },\n} satisfies {\n  weight: PropDef<(typeof weights)[number]>;\n};\n\nexport { weightPropDef };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAEA,MAAMI,EAAU,CAAC,OAAQ,aAAc,QAAS,UAAW,SAAU,WAAY,OAAQ,WAAW,EAE9FF,EAAgB,CACpB,OAAQ,CACN,KAAM,OACN,UAAW,cACX,OAAQE,EACR,WAAY,EACd,CACF",
   "names": ["weight_prop_exports", "__export", "weightPropDef", "__toCommonJS", "weights"]
 }

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

@@ -4,11 +4,47 @@ 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>;
+/**
+ * Polymorphic BaseButton props that support rendering as different HTML elements
+ * Uses the proper ComponentPropsWithout pattern for type safety
+ * @template C - The element type to render as (defaults to 'button')
+ */
 type PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {
+    /** Element type to render as (e.g., 'a', 'span', etc.) */
     as?: C;
 } & BaseButtonOwnProps & MarginProps & ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;
+/**
+ * BaseButton props interface that combines all available props
+ */
 interface BaseButtonProps extends PolymorphicBaseButtonProps {
 }
+/**
+ * BaseButton component that provides the core button functionality
+ *
+ * This is the foundational button component that handles all the complex logic
+ * including loading states, accessibility, performance optimizations, and
+ * polymorphic rendering. It's used by Button, IconButton, and other button
+ * variants to ensure consistent behavior across the design system.
+ *
+ * Key features:
+ * - Loading state with spinner and accessibility announcements
+ * - Performance optimizations for backdrop-filter effects
+ * - Comprehensive accessibility support
+ * - Polymorphic rendering support
+ * - Material/panel background handling
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BaseButton>Click me</BaseButton>
+ *
+ * // With loading state
+ * <BaseButton loading>Processing...</BaseButton>
+ *
+ * // Polymorphic rendering
+ * <BaseButton as="a" href="/link">Link Button</BaseButton>
+ * ```
+ */
 declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { BaseButton };
 export type { BaseButtonProps };

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;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,2FAkFd,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;AAErE;;;;GAIG;AACH,KAAK,0BAA0B,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI;IACxE,0DAA0D;IAC1D,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;;GAEG;AACH,UAAU,eAAgB,SAAQ,0BAA0B;CAAG;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,UAAU,2FAoKd,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 e from"react";import C from"classnames";import{Slot as x}from"radix-ui";import{baseButtonPropDefs as i}from"./base-button.props.js";import{Flex as w}from"../flex.js";import{Spinner as D}from"../spinner.js";import{VisuallyHidden as z}from"../visually-hidden.js";import{extractProps as S}from"../../helpers/extract-props.js";import{mapResponsiveProp as T,mapButtonSizeToSpinnerSize as j}from"../../helpers/map-prop-values.js";import{marginPropDefs as k}from"../../props/margin.props.js";const p=e.forwardRef((o,d)=>{const{size:l=i.size.default}=o,{className:u,children:t,asChild:n,as:s,color:m,radius:f,panelBackground:B,flush:c,disabled:a=o.loading,...y}=S(o,i,k),P=n?x.Root:s||"button",b=n||!s||["button","input","textarea","select"].includes(s),h=e.useId(),r=o.loading?`${h}-loading`:void 0,g=o.loading?{"aria-busy":!0,"aria-disabled":!0,"aria-describedby":r}:{};return e.createElement(P,{"data-disabled":a||void 0,"data-accent-color":m,"data-radius":f,"data-panel-background":B,"data-flush":c?"true":void 0,...y,...g,ref:d,className:C("rt-reset","rt-BaseButton",u),...b&&{disabled:a}},o.loading?e.createElement(e.Fragment,null,e.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},t),e.createElement(z,null,e.createElement("span",{id:r},"Loading, please wait..."),t),e.createElement(w,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},e.createElement("span",null,e.createElement(D,{size:T(l,j),"aria-hidden":"true"})))):t)});p.displayName="BaseButton";export{p as BaseButton};
+import*as e from"react";import S from"classnames";import{Slot as z}from"radix-ui";import{baseButtonPropDefs as m}from"./base-button.props.js";import{Flex as j}from"../flex.js";import{Spinner as I}from"../spinner.js";import{VisuallyHidden as N}from"../visually-hidden.js";import{extractProps as O}from"../../helpers/extract-props.js";import{mapResponsiveProp as V,mapButtonSizeToSpinnerSize as F}from"../../helpers/map-prop-values.js";import{marginPropDefs as H}from"../../props/margin.props.js";const f=e.forwardRef((n,r)=>{const{size:y=m.size.default}=n,{className:B,children:o,asChild:p,as:a,color:b,radius:P,material:g,panelBackground:h,flush:C,disabled:u=n.loading,...T}=O(n,m,H);e.useEffect(()=>{n.panelBackground!==void 0&&console.warn("Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.")},[n.panelBackground]);const s=g??h,d=e.useRef(null);e.useEffect(()=>{const t=d.current;if(!t)return;if(s==="translucent"){t.style.setProperty("will-change","backdrop-filter");const k=()=>{const E=getComputedStyle(t).getPropertyValue("--duration-2")||"75ms",D=parseInt(E)||75;setTimeout(()=>{t&&s!=="translucent"&&t.style.setProperty("will-change","auto")},D)},c=new MutationObserver(k);return c.observe(t,{attributes:!0,attributeFilter:["data-material"]}),()=>{c.disconnect(),t.style.setProperty("will-change","auto")}}else t.style.setProperty("will-change","auto")},[s]);const v=p?z.Root:a||"button",w=p||!a||["button","input","textarea","select"].includes(a),M=e.useId(),i=n.loading?`${M}-loading`:void 0,l=e.useMemo(()=>typeof o=="string"?o:e.isValidElement(o)&&typeof o.props?.children=="string"?o.props.children:"button",[o]),x=e.useMemo(()=>n.loading?{"aria-busy":!0,"aria-disabled":!0,"aria-describedby":i,"aria-label":`${l} (loading)`}:{},[n.loading,i,l]);return e.createElement(v,{"data-disabled":u||void 0,"data-accent-color":b,"data-radius":P,"data-material":s,"data-panel-background":s,"data-flush":C?"true":void 0,...T,...x,ref:t=>{typeof r=="function"?r(t):r&&(r.current=t),d.current=t},className:S("rt-reset","rt-BaseButton",B),...w&&{disabled:u}},n.loading?e.createElement(e.Fragment,null,e.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},o),e.createElement(N,null,e.createElement("span",{id:i},l," is loading, please wait..."),o),e.createElement(j,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},e.createElement("span",null,e.createElement(I,{size:V(y,F),"aria-hidden":"true"})))):o)});f.displayName="BaseButton";export{f 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 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    panelBackground,\n    flush,\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      data-panel-background={panelBackground}\n      data-flush={flush ? 'true' : undefined}\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,gBAAAC,EACA,MAAAC,EACA,SAAAC,EAAWX,EAAM,QACjB,GAAGY,CACL,EAAIjB,EAAaK,EAAOT,EAAoBO,CAAc,EAGpDe,EAAOR,EAAUf,EAAK,KAAOgB,GAAM,SAGnCQ,EACJT,GAAW,CAACC,GAAM,CAAC,SAAU,QAAS,WAAY,QAAQ,EAAE,SAASA,CAAE,EAGnES,EAAY3B,EAAM,MAAM,EACxB4B,EAAgBhB,EAAM,QAAU,GAAGe,CAAS,WAAa,OAGzDE,EAAqBjB,EAAM,QAC7B,CACE,YAAa,GACb,gBAAiB,GACjB,mBAAoBgB,CACtB,EACA,CAAC,EAEL,OACE5B,EAAA,cAACyB,EAAA,CAEC,gBAAeF,GAAY,OAC3B,oBAAmBJ,EACnB,cAAaC,EACb,wBAAuBC,EACvB,aAAYC,EAAQ,OAAS,OAC5B,GAAGE,EACH,GAAGK,EACJ,IAAKhB,EACL,UAAWZ,EAAW,WAAY,gBAAiBc,CAAS,EAC3D,GAAIW,GAAsB,CAAE,SAAAH,CAAS,GAErCX,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,GAAI4B,GAAe,yBAAuB,EAC/CZ,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", "panelBackground", "flush", "disabled", "baseButtonProps", "Comp", "shouldPassDisabled", "loadingId", "describedById", "accessibilityProps"]
+  "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/**\n * Polymorphic BaseButton props that support rendering as different HTML elements\n * Uses the proper ComponentPropsWithout pattern for type safety\n * @template C - The element type to render as (defaults to 'button')\n */\ntype PolymorphicBaseButtonProps<C extends React.ElementType = 'button'> = {\n  /** Element type to render as (e.g., 'a', 'span', etc.) */\n  as?: C;\n} & BaseButtonOwnProps &\n  MarginProps &\n  ComponentPropsWithout<C, RemovedProps | keyof BaseButtonOwnProps | keyof MarginProps | 'as'>;\n\n/**\n * BaseButton props interface that combines all available props\n */\ninterface BaseButtonProps extends PolymorphicBaseButtonProps {}\n\n/**\n * BaseButton component that provides the core button functionality\n *\n * This is the foundational button component that handles all the complex logic\n * including loading states, accessibility, performance optimizations, and\n * polymorphic rendering. It's used by Button, IconButton, and other button\n * variants to ensure consistent behavior across the design system.\n *\n * Key features:\n * - Loading state with spinner and accessibility announcements\n * - Performance optimizations for backdrop-filter effects\n * - Comprehensive accessibility support\n * - Polymorphic rendering support\n * - Material/panel background handling\n *\n * @example\n * ```tsx\n * // Basic usage\n * <BaseButton>Click me</BaseButton>\n *\n * // With loading state\n * <BaseButton loading>Processing...</BaseButton>\n *\n * // Polymorphic rendering\n * <BaseButton as=\"a\" href=\"/link\">Link Button</BaseButton>\n * ```\n */\nconst BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((props, forwardedRef) => {\n  const { size = baseButtonPropDefs.size.default } = props;\n\n  // Extract button-specific props from the combined props object\n  const {\n    className,\n    children,\n    asChild,\n    as,\n    color,\n    radius,\n    material,\n    panelBackground,\n    flush,\n    disabled = props.loading, // Loading state automatically disables the button\n    ...baseButtonProps\n  } = extractProps(props, baseButtonPropDefs, marginPropDefs);\n\n  // Show deprecation warning for panelBackground when used\n  // This helps developers migrate to the new material prop\n  React.useEffect(() => {\n    if (props.panelBackground !== undefined) {\n      console.warn(\n        'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',\n      );\n    }\n  }, [props.panelBackground]);\n\n  // Material takes precedence over panelBackground for backward compatibility\n  const effectiveMaterial = material ?? panelBackground;\n\n  // Will-change cleanup for backdrop-filter performance optimization\n  // This prevents layout thrashing when using translucent materials\n  const buttonRef = React.useRef<HTMLElement>(null);\n\n  React.useEffect(() => {\n    const button = buttonRef.current;\n    if (!button) return;\n\n    const hasTranslucentMaterial = effectiveMaterial === 'translucent';\n\n    if (hasTranslucentMaterial) {\n      // Add will-change when material is translucent to optimize rendering\n      button.style.setProperty('will-change', 'backdrop-filter');\n\n      // Clean up will-change after transition completes to prevent memory leaks\n      const cleanup = () => {\n        const transitionDuration =\n          getComputedStyle(button).getPropertyValue('--duration-2') || '75ms';\n        const duration = parseInt(transitionDuration) || 75;\n\n        setTimeout(() => {\n          if (button && effectiveMaterial !== 'translucent') {\n            button.style.setProperty('will-change', 'auto');\n          }\n        }, duration);\n      };\n\n      // Listen for material changes to clean up will-change property\n      const observer = new MutationObserver(cleanup);\n      observer.observe(button, { attributes: true, attributeFilter: ['data-material'] });\n\n      return () => {\n        observer.disconnect();\n        button.style.setProperty('will-change', 'auto');\n      };\n    } else {\n      // Remove will-change when material is not translucent\n      button.style.setProperty('will-change', 'auto');\n    }\n  }, [effectiveMaterial]);\n\n  // asChild takes precedence over as prop for Radix Slot integration\n  const Comp = asChild ? Slot.Root : as || 'button';\n\n  // Only pass disabled for elements that support it\n  // This prevents invalid HTML attributes on unsupported elements\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  // Extract button text for accessibility announcements\n  const buttonText = React.useMemo(() => {\n    if (typeof children === 'string') return children;\n    if (React.isValidElement(children) && typeof (children.props as any)?.children === 'string') {\n      return (children.props as any).children;\n    }\n    return 'button';\n  }, [children]);\n\n  // Enhanced accessibility props for loading state\n  // These ensure screen readers announce the loading state properly\n  const accessibilityProps = React.useMemo(() => {\n    if (props.loading) {\n      return {\n        'aria-busy': true,\n        'aria-disabled': true,\n        'aria-describedby': describedById,\n        'aria-label': `${buttonText} (loading)`,\n      };\n    }\n    return {};\n  }, [props.loading, describedById, buttonText]);\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      data-material={effectiveMaterial}\n      data-panel-background={effectiveMaterial}\n      data-flush={flush ? 'true' : undefined}\n      {...baseButtonProps}\n      {...accessibilityProps}\n      ref={(node) => {\n        // Handle both forwarded ref and internal ref for performance optimization\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n        buttonRef.current = node;\n      }}\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}>{buttonText} is loading, please wait...</span>\n            {children}\n          </VisuallyHidden>\n\n          {/* Centered spinner overlay during loading state */}\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,8BAqD/B,MAAMC,EAAaX,EAAM,WAA+C,CAACY,EAAOC,IAAiB,CAC/F,KAAM,CAAE,KAAAC,EAAOX,EAAmB,KAAK,OAAQ,EAAIS,EAG7C,CACJ,UAAAG,EACA,SAAAC,EACA,QAAAC,EACA,GAAAC,EACA,MAAAC,EACA,OAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,SAAAC,EAAWZ,EAAM,QACjB,GAAGa,CACL,EAAIlB,EAAaK,EAAOT,EAAoBO,CAAc,EAI1DV,EAAM,UAAU,IAAM,CAChBY,EAAM,kBAAoB,QAC5B,QAAQ,KACN,yHACF,CAEJ,EAAG,CAACA,EAAM,eAAe,CAAC,EAG1B,MAAMc,EAAoBL,GAAYC,EAIhCK,EAAY3B,EAAM,OAAoB,IAAI,EAEhDA,EAAM,UAAU,IAAM,CACpB,MAAM4B,EAASD,EAAU,QACzB,GAAI,CAACC,EAAQ,OAIb,GAF+BF,IAAsB,cAEzB,CAE1BE,EAAO,MAAM,YAAY,cAAe,iBAAiB,EAGzD,MAAMC,EAAU,IAAM,CACpB,MAAMC,EACJ,iBAAiBF,CAAM,EAAE,iBAAiB,cAAc,GAAK,OACzDG,EAAW,SAASD,CAAkB,GAAK,GAEjD,WAAW,IAAM,CACXF,GAAUF,IAAsB,eAClCE,EAAO,MAAM,YAAY,cAAe,MAAM,CAElD,EAAGG,CAAQ,CACb,EAGMC,EAAW,IAAI,iBAAiBH,CAAO,EAC7C,OAAAG,EAAS,QAAQJ,EAAQ,CAAE,WAAY,GAAM,gBAAiB,CAAC,eAAe,CAAE,CAAC,EAE1E,IAAM,CACXI,EAAS,WAAW,EACpBJ,EAAO,MAAM,YAAY,cAAe,MAAM,CAChD,CACF,MAEEA,EAAO,MAAM,YAAY,cAAe,MAAM,CAElD,EAAG,CAACF,CAAiB,CAAC,EAGtB,MAAMO,EAAOhB,EAAUf,EAAK,KAAOgB,GAAM,SAInCgB,EACJjB,GAAW,CAACC,GAAM,CAAC,SAAU,QAAS,WAAY,QAAQ,EAAE,SAASA,CAAE,EAGnEiB,EAAYnC,EAAM,MAAM,EACxBoC,EAAgBxB,EAAM,QAAU,GAAGuB,CAAS,WAAa,OAGzDE,EAAarC,EAAM,QAAQ,IAC3B,OAAOgB,GAAa,SAAiBA,EACrChB,EAAM,eAAegB,CAAQ,GAAK,OAAQA,EAAS,OAAe,UAAa,SACzEA,EAAS,MAAc,SAE1B,SACN,CAACA,CAAQ,CAAC,EAIPsB,EAAqBtC,EAAM,QAAQ,IACnCY,EAAM,QACD,CACL,YAAa,GACb,gBAAiB,GACjB,mBAAoBwB,EACpB,aAAc,GAAGC,CAAU,YAC7B,EAEK,CAAC,EACP,CAACzB,EAAM,QAASwB,EAAeC,CAAU,CAAC,EAE7C,OACErC,EAAA,cAACiC,EAAA,CAEC,gBAAeT,GAAY,OAC3B,oBAAmBL,EACnB,cAAaC,EACb,gBAAeM,EACf,wBAAuBA,EACvB,aAAYH,EAAQ,OAAS,OAC5B,GAAGE,EACH,GAAGa,EACJ,IAAMC,GAAS,CAET,OAAO1B,GAAiB,WAC1BA,EAAa0B,CAAI,EACR1B,IACTA,EAAa,QAAU0B,GAEzBZ,EAAU,QAAUY,CACtB,EACA,UAAWtC,EAAW,WAAY,gBAAiBc,CAAS,EAC3D,GAAImB,GAAsB,CAAE,SAAAV,CAAS,GAErCZ,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,GAAIoC,GAAgBC,EAAW,6BAA2B,EAC/DrB,CACH,EAGAhB,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", "material", "panelBackground", "flush", "disabled", "baseButtonProps", "effectiveMaterial", "buttonRef", "button", "cleanup", "transitionDuration", "duration", "observer", "Comp", "shouldPassDisabled", "loadingId", "describedById", "buttonText", "accessibilityProps", "node"]
 }

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

@@ -1,19 +1,73 @@
+/**
+ * Base button prop definitions that define the component's API
+ *
+ * These props are used by all button variants (Button, IconButton, etc.)
+ * to ensure consistent behavior and styling across the design system.
+ *
+ * Key features:
+ * - Responsive sizing with mobile-first approach
+ * - Six visual variants for different interface contexts
+ * - Comprehensive color system with semantic meanings
+ * - Loading states with automatic accessibility
+ * - Material system for visual depth and elevation
+ * - Polymorphic rendering support via asChild
+ *
+ * @example
+ * ```tsx
+ * // Basic button with default props
+ * <BaseButton>Click me</BaseButton>
+ *
+ * // Button with custom size and variant
+ * <BaseButton size="3" variant="solid">Primary Action</BaseButton>
+ *
+ * // Button with loading state
+ * <BaseButton loading>Processing...</BaseButton>
+ *
+ * // Button with material and high contrast
+ * <BaseButton material="translucent" highContrast>Elevated Button</BaseButton>
+ * ```
+ */
 declare const baseButtonPropDefs: {
+    /**
+     * Loading state that shows a spinner and disables interaction
+     * Automatically sets disabled=true and provides accessibility announcements
+     */
     loading: {
         type: "boolean";
         className: string;
         default: false;
     };
+    /**
+     * Full width mode that expands the button to fill its container
+     * Useful for mobile layouts and form submissions
+     */
     fullWidth: {
         type: "boolean";
         className: string;
         default: false;
     };
+    /**
+     * Material type for visual rendering and depth effects
+     * Controls how the button renders its visual elements
+     */
+    material: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: undefined;
+    };
+    /**
+     * Panel background type (deprecated)
+     * @deprecated Use `material` prop instead. This prop will be removed in a future version.
+     */
     panelBackground: {
         type: "enum";
         values: readonly ["solid", "translucent"];
         default: undefined;
     };
+    /**
+     * Flush mode that removes visual padding for seamless text integration
+     * Only effective with ghost variant
+     */
     flush: {
         type: "boolean";
         default: false;
@@ -33,6 +87,10 @@ declare const baseButtonPropDefs: {
         values: readonly ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"];
         default: "gray" | "gold" | "bronze" | "brown" | "yellow" | "amber" | "orange" | "tomato" | "red" | "ruby" | "crimson" | "pink" | "plum" | "purple" | "violet" | "iris" | "indigo" | "blue" | "cyan" | "teal" | "jade" | "green" | "grass" | "lime" | "mint" | "sky";
     };
+    /**
+     * Button size for responsive design and interface density
+     * Supports responsive objects: { initial: '1', sm: '2', md: '3', lg: '4' }
+     */
     size: {
         type: "enum";
         className: string;
@@ -40,6 +98,9 @@ declare const baseButtonPropDefs: {
         default: "2";
         responsive: true;
     };
+    /**
+     * Visual variant that determines the button's appearance and context
+     */
     variant: {
         type: "enum";
         className: string;

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

@@ -1 +1 @@
-{"version":3,"file":"base-button.props.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-button.props.ts"],"names":[],"mappings":"AAWA,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBvB,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"base-button.props.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-button.props.ts"],"names":[],"mappings":"AAwCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,QAAA,MAAM,kBAAkB;IActB;;;OAGG;;;;;;IAEH;;;OAGG;;;;;;IAEH;;;OAGG;;;;;;IAEH;;;OAGG;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;IAnCH;;;OAGG;;;;;;;;IAEH;;OAEG;;;;;;;;;;CAsCJ,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

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

@@ -1,2 +1,2 @@
-import{asChildPropDef as e}from"../../props/as-child.prop.js";import{accentColorPropDef as o}from"../../props/color.prop.js";import{highContrastPropDef as a}from"../../props/high-contrast.prop.js";import{radiusPropDef as s}from"../../props/radius.prop.js";const t=["1","2","3","4"],r=["classic","solid","soft","surface","outline","ghost"],n=["solid","translucent"],l={...e,size:{type:"enum",className:"rt-r-size",values:t,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:r,default:"solid"},...o,...a,...s,loading:{type:"boolean",className:"rt-loading",default:!1},fullWidth:{type:"boolean",className:"rt-full-width",default:!1},panelBackground:{type:"enum",values:n,default:void 0},flush:{type:"boolean",default:!1}};export{l as baseButtonPropDefs};
+import{asChildPropDef as e}from"../../props/as-child.prop.js";import{accentColorPropDef as a}from"../../props/color.prop.js";import{highContrastPropDef as o}from"../../props/high-contrast.prop.js";import{radiusPropDef as s}from"../../props/radius.prop.js";const t=["1","2","3","4"],n=["classic","solid","soft","surface","outline","ghost"],r=["solid","translucent"],l=["solid","translucent"],f={...e,size:{type:"enum",className:"rt-r-size",values:t,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:n,default:"solid"},...a,...o,...s,loading:{type:"boolean",className:"rt-loading",default:!1},fullWidth:{type:"boolean",className:"rt-full-width",default:!1},material:{type:"enum",values:l,default:void 0},panelBackground:{type:"enum",values:r,default:void 0},flush:{type:"boolean",default:!1}};export{f as baseButtonPropDefs};
 //# sourceMappingURL=base-button.props.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/_internal/base-button.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../props/as-child.prop.js';\nimport { accentColorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\nimport { radiusPropDef } from '../../props/radius.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4'] as const;\nconst variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\nconst baseButtonPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n  ...radiusPropDef,\n  loading: { type: 'boolean', className: 'rt-loading', default: false },\n  fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  flush: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  loading: PropDef<boolean>;\n  fullWidth: PropDef<boolean>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  flush: PropDef<boolean>;\n};\n\nexport { baseButtonPropDefs };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,+BAC/B,OAAS,sBAAAC,MAA0B,4BACnC,OAAS,uBAAAC,MAA2B,oCACpC,OAAS,iBAAAC,MAAqB,6BAI9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAC3BC,EAAW,CAAC,UAAW,QAAS,OAAQ,UAAW,UAAW,OAAO,EACrEC,EAAmB,CAAC,QAAS,aAAa,EAE1CC,EAAqB,CACzB,GAAGP,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQI,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,OAAQ,EACrF,GAAGJ,EACH,GAAGC,EACH,GAAGC,EACH,QAAS,CAAE,KAAM,UAAW,UAAW,aAAc,QAAS,EAAM,EACpE,UAAW,CAAE,KAAM,UAAW,UAAW,gBAAiB,QAAS,EAAM,EACzE,gBAAiB,CAAE,KAAM,OAAQ,OAAQG,EAAkB,QAAS,MAAU,EAC9E,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
-  "names": ["asChildPropDef", "accentColorPropDef", "highContrastPropDef", "radiusPropDef", "sizes", "variants", "panelBackgrounds", "baseButtonPropDefs"]
+  "sourcesContent": ["import { asChildPropDef } from '../../props/as-child.prop.js';\nimport { accentColorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\nimport { radiusPropDef } from '../../props/radius.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\n/**\n * Available button sizes for responsive design\n * Size 1: 24px - Compact for toolbars and dense interfaces\n * Size 2: 32px - Standard for most interface contexts\n * Size 3: 40px - Large for important actions and mobile touch targets\n * Size 4: 48px - Extra large for hero sections and maximum impact\n */\nconst sizes = ['1', '2', '3', '4'] as const;\n\n/**\n * Available button variants for different visual contexts\n * - classic: Premium, sophisticated appearance\n * - solid: Primary actions that should be noticed first\n * - soft: Content-heavy interfaces, natural integration\n * - surface: Elevated appearance with subtle depth\n * - outline: Secondary actions that support primary actions\n * - ghost: Utility functions that don't compete for attention\n */\nconst variants = ['classic', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;\n\n/**\n * Available panel background options (deprecated)\n * @deprecated Use `materials` instead\n */\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\n/**\n * Available material options for visual rendering\n * - solid: Opaque backgrounds and borders\n * - translucent: Elevated effects with depth and visual separation\n */\nconst materials = ['solid', 'translucent'] as const;\n\n/**\n * Base button prop definitions that define the component's API\n * \n * These props are used by all button variants (Button, IconButton, etc.)\n * to ensure consistent behavior and styling across the design system.\n * \n * Key features:\n * - Responsive sizing with mobile-first approach\n * - Six visual variants for different interface contexts\n * - Comprehensive color system with semantic meanings\n * - Loading states with automatic accessibility\n * - Material system for visual depth and elevation\n * - Polymorphic rendering support via asChild\n * \n * @example\n * ```tsx\n * // Basic button with default props\n * <BaseButton>Click me</BaseButton>\n * \n * // Button with custom size and variant\n * <BaseButton size=\"3\" variant=\"solid\">Primary Action</BaseButton>\n * \n * // Button with loading state\n * <BaseButton loading>Processing...</BaseButton>\n * \n * // Button with material and high contrast\n * <BaseButton material=\"translucent\" highContrast>Elevated Button</BaseButton>\n * ```\n */\nconst baseButtonPropDefs = {\n  ...asChildPropDef,\n  /**\n   * Button size for responsive design and interface density\n   * Supports responsive objects: { initial: '1', sm: '2', md: '3', lg: '4' }\n   */\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  /**\n   * Visual variant that determines the button's appearance and context\n   */\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n  ...radiusPropDef,\n  /**\n   * Loading state that shows a spinner and disables interaction\n   * Automatically sets disabled=true and provides accessibility announcements\n   */\n  loading: { type: 'boolean', className: 'rt-loading', default: false },\n  /**\n   * Full width mode that expands the button to fill its container\n   * Useful for mobile layouts and form submissions\n   */\n  fullWidth: { type: 'boolean', className: 'rt-full-width', default: false },\n  /**\n   * Material type for visual rendering and depth effects\n   * Controls how the button renders its visual elements\n   */\n  material: { type: 'enum', values: materials, default: undefined },\n  /**\n   * Panel background type (deprecated)\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  /**\n   * Flush mode that removes visual padding for seamless text integration\n   * Only effective with ghost variant\n   */\n  flush: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  loading: PropDef<boolean>;\n  fullWidth: PropDef<boolean>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  flush: PropDef<boolean>;\n};\n\nexport { baseButtonPropDefs };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,+BAC/B,OAAS,sBAAAC,MAA0B,4BACnC,OAAS,uBAAAC,MAA2B,oCACpC,OAAS,iBAAAC,MAAqB,6BAW9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAW3BC,EAAW,CAAC,UAAW,QAAS,OAAQ,UAAW,UAAW,OAAO,EAMrEC,EAAmB,CAAC,QAAS,aAAa,EAO1CC,EAAY,CAAC,QAAS,aAAa,EA+BnCC,EAAqB,CACzB,GAAGR,EAKH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQI,EAAO,QAAS,IAAK,WAAY,EAAK,EAI5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,OAAQ,EACrF,GAAGJ,EACH,GAAGC,EACH,GAAGC,EAKH,QAAS,CAAE,KAAM,UAAW,UAAW,aAAc,QAAS,EAAM,EAKpE,UAAW,CAAE,KAAM,UAAW,UAAW,gBAAiB,QAAS,EAAM,EAKzE,SAAU,CAAE,KAAM,OAAQ,OAAQI,EAAW,QAAS,MAAU,EAKhE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,MAAU,EAK9E,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
+  "names": ["asChildPropDef", "accentColorPropDef", "highContrastPropDef", "radiusPropDef", "sizes", "variants", "panelBackgrounds", "materials", "baseButtonPropDefs"]
 }

package/dist/esm/components/_internal/base-checkbox.props.d.ts

@@ -19,9 +19,14 @@ declare const baseCheckboxPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["classic", "solid", "soft"];
+        values: readonly ["classic", "solid", "soft", "outline", "surface"];
         default: "solid";
     };
+    material: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: undefined;
+    };
 };
 export { baseCheckboxPropDefs };
 //# sourceMappingURL=base-checkbox.props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-checkbox.props.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-checkbox.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;CAQzB,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"base-checkbox.props.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-checkbox.props.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUzB,CAAC;AAEF,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/esm/components/_internal/base-checkbox.props.js

@@ -1,2 +1,2 @@
-import{colorPropDef as s}from"../../props/color.prop.js";import{highContrastPropDef as e}from"../../props/high-contrast.prop.js";const o=["1","2","3"],r=["classic","solid","soft"],t={size:{type:"enum",className:"rt-r-size",values:o,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:r,default:"solid"},...s,...e};export{t as baseCheckboxPropDefs};
+import{colorPropDef as e}from"../../props/color.prop.js";import{highContrastPropDef as s}from"../../props/high-contrast.prop.js";const t=["1","2","3"],a=["classic","solid","soft","outline","surface"],r=["solid","translucent"],o={size:{type:"enum",className:"rt-r-size",values:t,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:a,default:"solid"},material:{type:"enum",values:r,default:void 0},...e,...s};export{o as baseCheckboxPropDefs};
 //# sourceMappingURL=base-checkbox.props.js.map

package/dist/esm/components/_internal/base-checkbox.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/_internal/base-checkbox.props.ts"],
-  "sourcesContent": ["import { colorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'solid', 'soft'] as const;\n\nconst baseCheckboxPropDefs = {\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n};\n\nexport { baseCheckboxPropDefs };\n"],
-  "mappings": "AAAA,OAAS,gBAAAA,MAAoB,4BAC7B,OAAS,uBAAAC,MAA2B,oCAIpC,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,QAAS,MAAM,EAEtCC,EAAuB,CAC3B,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQF,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,OAAQ,EACrF,GAAGH,EACH,GAAGC,CACL",
-  "names": ["colorPropDef", "highContrastPropDef", "sizes", "variants", "baseCheckboxPropDefs"]
+  "sourcesContent": ["import { colorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['classic', 'solid', 'soft', 'outline', 'surface'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\nconst baseCheckboxPropDefs = {\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },\n  material: { type: 'enum', values: materials, default: undefined },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n};\n\nexport { baseCheckboxPropDefs };\n"],
+  "mappings": "AAAA,OAAS,gBAAAA,MAAoB,4BAC7B,OAAS,uBAAAC,MAA2B,oCAIpC,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,UAAW,QAAS,OAAQ,UAAW,SAAS,EAC5DC,EAAY,CAAC,QAAS,aAAa,EAEnCC,EAAuB,CAC3B,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQH,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,OAAQ,EACrF,SAAU,CAAE,KAAM,OAAQ,OAAQC,EAAW,QAAS,MAAU,EAChE,GAAGJ,EACH,GAAGC,CACL",
+  "names": ["colorPropDef", "highContrastPropDef", "sizes", "variants", "materials", "baseCheckboxPropDefs"]
 }

package/dist/esm/components/_internal/base-menu.props.d.ts

@@ -22,6 +22,14 @@ declare const baseMenuContentPropDefs: {
         values: readonly ["solid", "soft"];
         default: "solid";
     };
+    material: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: undefined;
+    };
+    /**
+     * @deprecated Use `material` prop instead. This prop will be removed in a future version.
+     */
     panelBackground: {
         type: "enum";
         values: readonly ["solid", "translucent"];

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

@@ -1 +1 @@
-{"version":3,"file":"base-menu.props.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-menu.props.ts"],"names":[],"mappings":"AAUA,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyB5B,CAAC;AAEF,QAAA,MAAM,oBAAoB;;;;;;;;;;;;CAMzB,CAAC;AAEF,QAAA,MAAM,4BAA4B;;;;;;;;;CAKjC,CAAC;AAEF,QAAA,MAAM,yBAAyB;;;;;;CAE9B,CAAC;AAEF,OAAO,EACL,uBAAuB,EACvB,oBAAoB,EACpB,4BAA4B,EAC5B,yBAAyB,GAC1B,CAAC"}
+{"version":3,"file":"base-menu.props.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-menu.props.ts"],"names":[],"mappings":"AAWA,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAmB3B;;OAEG;;;;;;CAaJ,CAAC;AAEF,QAAA,MAAM,oBAAoB;;;;;;;;;;;;CAMzB,CAAC;AAEF,QAAA,MAAM,4BAA4B;;;;;;;;;CAKjC,CAAC;AAEF,QAAA,MAAM,yBAAyB;;;;;;CAE9B,CAAC;AAEF,OAAO,EACL,uBAAuB,EACvB,oBAAoB,EACpB,4BAA4B,EAC5B,yBAAyB,GAC1B,CAAC"}

package/dist/esm/components/_internal/base-menu.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as t}from"../../props/as-child.prop.js";import{colorPropDef as e}from"../../props/color.prop.js";import{highContrastPropDef as s}from"../../props/high-contrast.prop.js";const o=["1","2"],n=["solid","soft"],r=["solid","translucent"],a={size:{type:"enum",className:"rt-r-size",values:o,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:n,default:"solid"},panelBackground:{type:"enum",values:r,default:void 0},...e,...s},p={...t,...e,shortcut:{type:"string"}},i={...e,shortcut:{type:"string"}},f={...e};export{i as baseMenuCheckboxItemPropDefs,a as baseMenuContentPropDefs,p as baseMenuItemPropDefs,f as baseMenuRadioItemPropDefs};
+import{asChildPropDef as t}from"../../props/as-child.prop.js";import{colorPropDef as e}from"../../props/color.prop.js";import{highContrastPropDef as s}from"../../props/high-contrast.prop.js";const n=["1","2"],o=["solid","soft"],r=["solid","translucent"],a=["solid","translucent"],i={size:{type:"enum",className:"rt-r-size",values:n,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:o,default:"solid"},material:{type:"enum",values:a,default:void 0},panelBackground:{type:"enum",values:r,default:void 0},...e,...s},p={...t,...e,shortcut:{type:"string"}},f={...e,shortcut:{type:"string"}},u={...e};export{f as baseMenuCheckboxItemPropDefs,i as baseMenuContentPropDefs,p as baseMenuItemPropDefs,u as baseMenuRadioItemPropDefs};
 //# sourceMappingURL=base-menu.props.js.map

package/dist/esm/components/_internal/base-menu.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/_internal/base-menu.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../props/as-child.prop.js';\nimport { colorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\nconst contentSizes = ['1', '2'] as const;\nconst contentVariants = ['solid', 'soft'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\nconst baseMenuContentPropDefs = {\n  size: {\n    type: 'enum',\n    className: 'rt-r-size',\n    values: contentSizes,\n    default: '2',\n    responsive: true,\n  },\n  variant: {\n    type: 'enum',\n    className: 'rt-variant',\n    values: contentVariants,\n    default: 'solid',\n  },\n  panelBackground: {\n    type: 'enum',\n    values: panelBackgrounds,\n    default: undefined,\n  },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof contentSizes)[number]>;\n  variant: PropDef<(typeof contentVariants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n};\n\nconst baseMenuItemPropDefs = {\n  ...asChildPropDef,\n  ...colorPropDef,\n  shortcut: { type: 'string' },\n} satisfies {\n  shortcut: PropDef<string>;\n};\n\nconst baseMenuCheckboxItemPropDefs = {\n  ...colorPropDef,\n  shortcut: { type: 'string' },\n} satisfies {\n  shortcut: PropDef<string>;\n};\n\nconst baseMenuRadioItemPropDefs = {\n  ...colorPropDef,\n};\n\nexport {\n  baseMenuContentPropDefs,\n  baseMenuItemPropDefs,\n  baseMenuCheckboxItemPropDefs,\n  baseMenuRadioItemPropDefs,\n};\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,+BAC/B,OAAS,gBAAAC,MAAoB,4BAC7B,OAAS,uBAAAC,MAA2B,oCAIpC,MAAMC,EAAe,CAAC,IAAK,GAAG,EACxBC,EAAkB,CAAC,QAAS,MAAM,EAClCC,EAAmB,CAAC,QAAS,aAAa,EAE1CC,EAA0B,CAC9B,KAAM,CACJ,KAAM,OACN,UAAW,YACX,OAAQH,EACR,QAAS,IACT,WAAY,EACd,EACA,QAAS,CACP,KAAM,OACN,UAAW,aACX,OAAQC,EACR,QAAS,OACX,EACA,gBAAiB,CACf,KAAM,OACN,OAAQC,EACR,QAAS,MACX,EACA,GAAGJ,EACH,GAAGC,CACL,EAMMK,EAAuB,CAC3B,GAAGP,EACH,GAAGC,EACH,SAAU,CAAE,KAAM,QAAS,CAC7B,EAIMO,EAA+B,CACnC,GAAGP,EACH,SAAU,CAAE,KAAM,QAAS,CAC7B,EAIMQ,EAA4B,CAChC,GAAGR,CACL",
-  "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "contentSizes", "contentVariants", "panelBackgrounds", "baseMenuContentPropDefs", "baseMenuItemPropDefs", "baseMenuCheckboxItemPropDefs", "baseMenuRadioItemPropDefs"]
+  "sourcesContent": ["import { asChildPropDef } from '../../props/as-child.prop.js';\nimport { colorPropDef } from '../../props/color.prop.js';\nimport { highContrastPropDef } from '../../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../../props/prop-def.js';\n\nconst contentSizes = ['1', '2'] as const;\nconst contentVariants = ['solid', 'soft'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\nconst baseMenuContentPropDefs = {\n  size: {\n    type: 'enum',\n    className: 'rt-r-size',\n    values: contentSizes,\n    default: '2',\n    responsive: true,\n  },\n  variant: {\n    type: 'enum',\n    className: 'rt-variant',\n    values: contentVariants,\n    default: 'solid',\n  },\n  material: {\n    type: 'enum',\n    values: materials,\n    default: undefined,\n  },\n  /**\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   */\n  panelBackground: {\n    type: 'enum',\n    values: panelBackgrounds,\n    default: undefined,\n  },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof contentSizes)[number]>;\n  variant: PropDef<(typeof contentVariants)[number]>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n};\n\nconst baseMenuItemPropDefs = {\n  ...asChildPropDef,\n  ...colorPropDef,\n  shortcut: { type: 'string' },\n} satisfies {\n  shortcut: PropDef<string>;\n};\n\nconst baseMenuCheckboxItemPropDefs = {\n  ...colorPropDef,\n  shortcut: { type: 'string' },\n} satisfies {\n  shortcut: PropDef<string>;\n};\n\nconst baseMenuRadioItemPropDefs = {\n  ...colorPropDef,\n};\n\nexport {\n  baseMenuContentPropDefs,\n  baseMenuItemPropDefs,\n  baseMenuCheckboxItemPropDefs,\n  baseMenuRadioItemPropDefs,\n};\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,+BAC/B,OAAS,gBAAAC,MAAoB,4BAC7B,OAAS,uBAAAC,MAA2B,oCAIpC,MAAMC,EAAe,CAAC,IAAK,GAAG,EACxBC,EAAkB,CAAC,QAAS,MAAM,EAClCC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAEnCC,EAA0B,CAC9B,KAAM,CACJ,KAAM,OACN,UAAW,YACX,OAAQJ,EACR,QAAS,IACT,WAAY,EACd,EACA,QAAS,CACP,KAAM,OACN,UAAW,aACX,OAAQC,EACR,QAAS,OACX,EACA,SAAU,CACR,KAAM,OACN,OAAQE,EACR,QAAS,MACX,EAIA,gBAAiB,CACf,KAAM,OACN,OAAQD,EACR,QAAS,MACX,EACA,GAAGJ,EACH,GAAGC,CACL,EAOMM,EAAuB,CAC3B,GAAGR,EACH,GAAGC,EACH,SAAU,CAAE,KAAM,QAAS,CAC7B,EAIMQ,EAA+B,CACnC,GAAGR,EACH,SAAU,CAAE,KAAM,QAAS,CAC7B,EAIMS,EAA4B,CAChC,GAAGT,CACL",
+  "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "contentSizes", "contentVariants", "panelBackgrounds", "materials", "baseMenuContentPropDefs", "baseMenuItemPropDefs", "baseMenuCheckboxItemPropDefs", "baseMenuRadioItemPropDefs"]
 }

package/dist/esm/components/_internal/base-radio.props.d.ts

@@ -19,9 +19,14 @@ declare const baseRadioPropDefs: {
     variant: {
         type: "enum";
         className: string;
-        values: readonly ["classic", "solid", "soft"];
+        values: readonly ["classic", "solid", "soft", "outline", "surface"];
         default: "solid";
     };
+    material: {
+        type: "enum";
+        values: readonly ["solid", "translucent"];
+        default: undefined;
+    };
 };
 export { baseRadioPropDefs };
 //# sourceMappingURL=base-radio.props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-radio.props.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-radio.props.ts"],"names":[],"mappings":"AAQA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;CAQtB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"base-radio.props.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/base-radio.props.ts"],"names":[],"mappings":"AASA,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUtB,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC"}