@kushagradhawan/kookie-ui 0.1.70 → 0.1.72

package/dist/cjs/components/shell.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/shell.types.ts"],
-  "sourcesContent": ["export type PresentationValue = 'fixed' | 'overlay' | 'stacked';\n\nexport type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;\n\nexport type PaneMode = 'expanded' | 'collapsed';\nexport type SidebarMode = 'collapsed' | 'thin' | 'expanded';\n\nexport type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;\n\nexport type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;\n\nexport type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;\n\nexport type PaneSizePersistence = {\n  load?: () => number | Promise<number | undefined> | undefined;\n  save?: (size: number) => void | Promise<void>;\n};\n\nexport const _BREAKPOINTS = {\n  xs: '(min-width: 520px)',\n  sm: '(min-width: 768px)',\n  md: '(min-width: 1024px)',\n  lg: '(min-width: 1280px)',\n  xl: '(min-width: 1640px)',\n} as const;\n\nexport type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;\n\nexport type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAkBO,MAAME,EAAe,CAC1B,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN",
+  "sourcesContent": ["import type * as React from 'react';\n\nexport type PresentationValue = 'fixed' | 'overlay' | 'stacked';\n\nexport type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;\n\nexport type PaneMode = 'expanded' | 'collapsed';\nexport type SidebarMode = 'collapsed' | 'thin' | 'expanded';\n\nexport type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;\n\nexport type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;\n\nexport type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;\n\nexport type PaneSizePersistence = {\n  load?: () => number | Promise<number | undefined> | undefined;\n  save?: (size: number) => void | Promise<void>;\n};\n\nexport interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {\n  presentation?: ResponsivePresentation;\n  expandedSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  height?: string | number;\n  resizable?: boolean;\n  collapsible?: boolean;\n  onExpand?: () => void;\n  onCollapse?: () => void;\n  onResize?: (size: number) => void;\n  resizer?: React.ReactNode;\n  onResizeStart?: (size: number) => void;\n  onResizeEnd?: (size: number) => void;\n  snapPoints?: number[];\n  snapTolerance?: number;\n  collapseThreshold?: number;\n  paneId?: string;\n  persistence?: PaneSizePersistence;\n}\n\nexport const _BREAKPOINTS = {\n  xs: '(min-width: 520px)',\n  sm: '(min-width: 768px)',\n  md: '(min-width: 1024px)',\n  lg: '(min-width: 1280px)',\n  xl: '(min-width: 1640px)',\n} as const;\n\nexport type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;\n\nexport type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAyCO,MAAME,EAAe,CAC1B,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN",
   "names": ["shell_types_exports", "__export", "_BREAKPOINTS", "__toCommonJS"]
 }

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

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC;;;;;GAKG;AACH,UAAU,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC;IAC/E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,YAAY,0GA2DjB,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC;;;;;GAKG;AACH,UAAU,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC;IAC/E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,mDAAmD;IACnD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,YAAY,0GA8BhB,CAAC;AAGH,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -1,2 +1,2 @@
-"use strict";var B=Object.create;var a=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var v=(e,o)=>{for(var t in o)a(e,t,{get:o[t],enumerable:!0})},d=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of h(o))!C.call(e,s)&&s!==t&&a(e,s,{get:()=>o[s],enumerable:!(n=T(o,s))||n.enumerable});return e};var E=(e,o,t)=>(t=e!=null?B(P(e)):{},d(o||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),R=e=>d(a({},"__esModule",{value:!0}),e);var N={};v(N,{ToggleButton:()=>l});module.exports=R(N);var r=E(require("react")),i=require("radix-ui"),f=require("./button.js"),m=require("../hooks/use-live-announcer.js");const l=r.forwardRef(({pressed:e,onPressedChange:o,defaultPressed:t,children:n,...s},c)=>{const u=(0,m.useLiveAnnouncer)(),p=r.useCallback(()=>typeof n=="string"?n:r.isValidElement(n)&&typeof n.props?.children=="string"?n.props.children:"Toggle button",[n]),b=r.useCallback(g=>{const y=p();u(`${y} ${g?"pressed":"unpressed"}`),o?.(g)},[u,o,p]);return r.useEffect(()=>{},[e,o]),r.createElement(i.Toggle.Root,{pressed:e,onPressedChange:b,defaultPressed:t,asChild:!0},r.createElement(f.Button,{...s,ref:c},n))});l.displayName="ToggleButton";
+"use strict";var B=Object.create;var g=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var C=(e,o)=>{for(var t in o)g(e,t,{get:o[t],enumerable:!0})},p=(e,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of y(o))!b.call(e,s)&&s!==t&&g(e,s,{get:()=>o[s],enumerable:!(n=T(o,s))||n.enumerable});return e};var R=(e,o,t)=>(t=e!=null?B(P(e)):{},p(o||!e||!e.__esModule?g(t,"default",{value:e,enumerable:!0}):t,e)),c=e=>p(g({},"__esModule",{value:!0}),e);var E={};C(E,{ToggleButton:()=>a});module.exports=c(E);var r=R(require("react")),l=require("radix-ui"),u=require("./button.js"),f=require("../hooks/use-toggle-state.js");const a=r.forwardRef(({pressed:e,onPressedChange:o,defaultPressed:t,children:n,...s},m)=>{const d=r.useCallback(()=>typeof n=="string"?n:r.isValidElement(n)&&typeof n.props?.children=="string"?n.props.children:"Toggle button",[n]),{handlePressedChange:i}=(0,f.useToggleState)({pressed:e,onPressedChange:o,getAccessibleName:d,componentName:"ToggleButton"});return r.createElement(l.Toggle.Root,{pressed:e,onPressedChange:i,defaultPressed:t,asChild:!0},r.createElement(u.Button,{...s,ref:m},n))});a.displayName="ToggleButton";
 //# sourceMappingURL=toggle-button.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggle-button.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { Button } from './button.js';\nimport { useLiveAnnouncer } from '../hooks/use-live-announcer.js';\n\n/**\n * ToggleButton props that extend Button with toggle-specific functionality\n *\n * The ToggleButton component provides a button that can be pressed/unpressed\n * with proper accessibility announcements and state management.\n */\ninterface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {\n  /** Controlled pressed state */\n  pressed?: boolean;\n  /** Callback when pressed state changes */\n  onPressedChange?: (pressed: boolean) => void;\n  /** Default pressed state for uncontrolled usage */\n  defaultPressed?: boolean;\n}\n\ntype ToggleButtonElement = React.ElementRef<typeof Button>;\n\n/**\n * ToggleButton component for buttons that can be pressed/unpressed\n *\n * The ToggleButton component extends Button with toggle functionality using\n * Radix UI's Toggle primitive. It provides proper accessibility announcements,\n * controlled/uncontrolled state management, and seamless integration with\n * the existing Button component.\n *\n * Key features:\n * - Controlled and uncontrolled state management\n * - Live accessibility announcements for screen readers\n * - Automatic state validation and warnings\n * - Seamless integration with Button props and styling\n * - Proper ARIA attributes for toggle functionality\n *\n * @example\n * ```tsx\n * // Uncontrolled toggle button\n * <ToggleButton defaultPressed={false}>\n *   Toggle Me\n * </ToggleButton>\n *\n * // Controlled toggle button\n * const [pressed, setPressed] = React.useState(false);\n * <ToggleButton\n *   pressed={pressed}\n *   onPressedChange={setPressed}\n * >\n *   {pressed ? 'On' : 'Off'}\n * </ToggleButton>\n *\n * // Toggle button with all Button props\n * <ToggleButton\n *   variant=\"solid\"\n *   size=\"3\"\n *   color=\"blue\"\n *   pressed={isActive}\n *   onPressedChange={setIsActive}\n * >\n *   {isActive ? 'Active' : 'Inactive'}\n * </ToggleButton>\n * ```\n */\nconst ToggleButton = React.forwardRef<ToggleButtonElement, ToggleButtonProps>(\n  ({ pressed, onPressedChange, defaultPressed, children, ...buttonProps }, forwardedRef) => {\n    // Get the live announcer for accessibility announcements\n    const announce = useLiveAnnouncer();\n\n    /**\n     * Extract accessible name from button content for announcements\n     * This ensures screen readers announce meaningful state changes\n     */\n    const getAccessibleName = React.useCallback(() => {\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 'Toggle button';\n    }, [children]);\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          'ToggleButton: 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 button using Radix UI's Toggle primitive\n    // This provides proper ARIA attributes and keyboard navigation\n    return (\n      <Toggle.Root\n        pressed={pressed}\n        onPressedChange={handlePressedChange}\n        defaultPressed={defaultPressed}\n        asChild\n      >\n        <Button {...buttonProps} ref={forwardedRef}>\n          {children}\n        </Button>\n      </Toggle.Root>\n    );\n  },\n);\nToggleButton.displayName = 'ToggleButton';\n\nexport { ToggleButton };\nexport type { ToggleButtonProps };\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,oBACvBC,EAAuB,uBACvBC,EAAiC,0CA8DjC,MAAML,EAAeE,EAAM,WACzB,CAAC,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,SAAAC,EAAU,GAAGC,CAAY,EAAGC,IAAiB,CAExF,MAAMC,KAAW,oBAAiB,EAM5BC,EAAoBX,EAAM,YAAY,IACtC,OAAOO,GAAa,SAAiBA,EACrCP,EAAM,eAAeO,CAAQ,GAAK,OAAQA,EAAS,OAAe,UAAa,SACzEA,EAAS,MAAc,SAE1B,gBACN,CAACA,CAAQ,CAAC,EAMPK,EAAsBZ,EAAM,YAC/Ba,GAAwB,CACvB,MAAMC,EAAiBH,EAAkB,EAEzCD,EAAS,GAAGI,CAAc,IAAID,EAAa,UAAY,WAAW,EAAE,EAEpER,IAAkBQ,CAAU,CAC9B,EACA,CAACH,EAAUL,EAAiBM,CAAiB,CAC/C,EAIA,OAAAX,EAAM,UAAU,IAAM,CAQtB,EAAG,CAACI,EAASC,CAAe,CAAC,EAK3BL,EAAA,cAAC,SAAO,KAAP,CACC,QAASI,EACT,gBAAiBQ,EACjB,eAAgBN,EAChB,QAAO,IAEPN,EAAA,cAAC,UAAQ,GAAGQ,EAAa,IAAKC,GAC3BF,CACH,CACF,CAEJ,CACF,EACAT,EAAa,YAAc",
-  "names": ["toggle_button_exports", "__export", "ToggleButton", "__toCommonJS", "React", "import_radix_ui", "import_button", "import_use_live_announcer", "pressed", "onPressedChange", "defaultPressed", "children", "buttonProps", "forwardedRef", "announce", "getAccessibleName", "handlePressedChange", "newPressed", "accessibleName"]
+  "sourcesContent": ["import * as React from 'react';\nimport { Toggle } from 'radix-ui';\nimport { Button } from './button.js';\nimport { useToggleState } from '../hooks/use-toggle-state.js';\n\n/**\n * ToggleButton props that extend Button with toggle-specific functionality\n *\n * The ToggleButton component provides a button that can be pressed/unpressed\n * with proper accessibility announcements and state management.\n */\ninterface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {\n  /** Controlled pressed state */\n  pressed?: boolean;\n  /** Callback when pressed state changes */\n  onPressedChange?: (pressed: boolean) => void;\n  /** Default pressed state for uncontrolled usage */\n  defaultPressed?: boolean;\n}\n\ntype ToggleButtonElement = React.ElementRef<typeof Button>;\n\n/**\n * ToggleButton component for buttons that can be pressed/unpressed\n *\n * The ToggleButton component extends Button with toggle functionality using\n * Radix UI's Toggle primitive. It provides proper accessibility announcements,\n * controlled/uncontrolled state management, and seamless integration with\n * the existing Button component.\n *\n * Key features:\n * - Controlled and uncontrolled state management\n * - Live accessibility announcements for screen readers\n * - Automatic state validation and warnings\n * - Seamless integration with Button props and styling\n * - Proper ARIA attributes for toggle functionality\n *\n * @example\n * ```tsx\n * // Uncontrolled toggle button\n * <ToggleButton defaultPressed={false}>\n *   Toggle Me\n * </ToggleButton>\n *\n * // Controlled toggle button\n * const [pressed, setPressed] = React.useState(false);\n * <ToggleButton\n *   pressed={pressed}\n *   onPressedChange={setPressed}\n * >\n *   {pressed ? 'On' : 'Off'}\n * </ToggleButton>\n *\n * // Toggle button with all Button props\n * <ToggleButton\n *   variant=\"solid\"\n *   size=\"3\"\n *   color=\"blue\"\n *   pressed={isActive}\n *   onPressedChange={setIsActive}\n * >\n *   {isActive ? 'Active' : 'Inactive'}\n * </ToggleButton>\n * ```\n */\nconst ToggleButton = React.forwardRef<ToggleButtonElement, ToggleButtonProps>(({ pressed, onPressedChange, defaultPressed, children, ...buttonProps }, forwardedRef) => {\n  /**\n   * Extract accessible name from button content for announcements.\n   * This ensures screen readers announce meaningful state changes.\n   */\n  const getAccessibleName = React.useCallback(() => {\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 'Toggle button';\n  }, [children]);\n\n  // Use shared toggle state hook for accessibility announcements and warnings\n  const { handlePressedChange } = useToggleState({\n    pressed,\n    onPressedChange,\n    getAccessibleName,\n    componentName: 'ToggleButton',\n  });\n\n  // Render the toggle button using Radix UI's Toggle primitive\n  // This provides proper ARIA attributes and keyboard navigation\n  return (\n    <Toggle.Root pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>\n      <Button {...buttonProps} ref={forwardedRef}>\n        {children}\n      </Button>\n    </Toggle.Root>\n  );\n});\nToggleButton.displayName = 'ToggleButton';\n\nexport { ToggleButton };\nexport type { ToggleButtonProps };\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,oBACvBC,EAAuB,uBACvBC,EAA+B,wCA8D/B,MAAML,EAAeE,EAAM,WAAmD,CAAC,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,SAAAC,EAAU,GAAGC,CAAY,EAAGC,IAAiB,CAKtK,MAAMC,EAAoBV,EAAM,YAAY,IACtC,OAAOO,GAAa,SAAiBA,EACrCP,EAAM,eAAeO,CAAQ,GAAK,OAAQA,EAAS,OAAe,UAAa,SACzEA,EAAS,MAAc,SAE1B,gBACN,CAACA,CAAQ,CAAC,EAGP,CAAE,oBAAAI,CAAoB,KAAI,kBAAe,CAC7C,QAAAP,EACA,gBAAAC,EACA,kBAAAK,EACA,cAAe,cACjB,CAAC,EAID,OACEV,EAAA,cAAC,SAAO,KAAP,CAAY,QAASI,EAAS,gBAAiBO,EAAqB,eAAgBL,EAAgB,QAAO,IAC1GN,EAAA,cAAC,UAAQ,GAAGQ,EAAa,IAAKC,GAC3BF,CACH,CACF,CAEJ,CAAC,EACDT,EAAa,YAAc",
+  "names": ["toggle_button_exports", "__export", "ToggleButton", "__toCommonJS", "React", "import_radix_ui", "import_button", "import_use_toggle_state", "pressed", "onPressedChange", "defaultPressed", "children", "buttonProps", "forwardedRef", "getAccessibleName", "handlePressedChange"]
 }

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;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAIxD;;;GAGG;AACH,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAEtE;;;;;;;;GAQG;AACH,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;AAEnF;;;GAGG;AACH,UAAU,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;IACjE,+BAA+B;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,0CAA0C;IAC1C,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACjD,mDAAmD;IACnD,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAED;;;GAGG;AACH,KAAK,sCAAsC,GAAG,qBAAqB,GAAG,kBAAkB,CAAC;AAEzF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,QAAA,MAAM,gBAAgB,kHA8EpB,CAAC;AAGH,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,sCAAsC,IAAI,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;AAIlC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAIxD;;;GAGG;AACH,KAAK,WAAW,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AAEtE;;;;;;;;GAQG;AACH,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;AAEnF;;;GAGG;AACH,UAAU,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC;IACjE,+BAA+B;IAC/B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,0CAA0C;IAC1C,eAAe,CAAC,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACjD,mDAAmD;IACnD,cAAc,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;CAChD;AAED;;;GAGG;AACH,KAAK,sCAAsC,GAAG,qBAAqB,GAAG,kBAAkB,CAAC;AAEzF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,QAAA,MAAM,gBAAgB,kHAwDpB,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 h=Object.create;var c=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var v=(e,o)=>{for(var t in o)c(e,t,{get:o[t],enumerable:!0})},u=(e,o,t,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of P(o))!I.call(e,n)&&n!==t&&c(e,n,{get:()=>o[n],enumerable:!(s=T(o,n))||s.enumerable});return e};var C=(e,o,t)=>(t=e!=null?h(B(e)):{},u(o||!e||!e.__esModule?c(t,"default",{value:e,enumerable:!0}):t,e)),E=e=>u(c({},"__esModule",{value:!0}),e);var R={};v(R,{ToggleIconButton:()=>g});module.exports=E(R);var r=C(require("react")),b=require("radix-ui"),f=require("./icon-button.js"),w=require("./_internal/base-button.js"),y=require("../hooks/use-live-announcer.js");const g=r.forwardRef(({pressed:e,onPressedChange:o,defaultPressed:t,...s},n)=>{const p=(0,y.useLiveAnnouncer)(),d=r.useCallback(()=>{const{"aria-label":l,"aria-labelledby":i,children:a}=s;return l||(i?document.getElementById(i)?.textContent||"Toggle icon button":typeof a=="string"?a:r.isValidElement(a)&&typeof a.props?.children=="string"?a.props.children:"Toggle icon button")},[s]),m=r.useCallback(l=>{const i=d();p(`${i} ${l?"pressed":"unpressed"}`),o?.(l)},[p,o,d]);return r.useEffect(()=>{},[e,o]),r.createElement(b.Toggle.Root,{pressed:e,onPressedChange:m,defaultPressed:t,asChild:!0},r.createElement(f.IconButton,{...s,ref:n}))});g.displayName="ToggleIconButton";
+"use strict";var T=Object.create;var g=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var o in t)g(e,o,{get:t[o],enumerable:!0})},u=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of h(t))!R.call(e,n)&&n!==o&&g(e,n,{get:()=>t[n],enumerable:!(s=B(t,n))||s.enumerable});return e};var E=(e,t,o)=>(o=e!=null?T(I(e)):{},u(t||!e||!e.__esModule?g(o,"default",{value:e,enumerable:!0}):o,e)),A=e=>u(g({},"__esModule",{value:!0}),e);var v={};C(v,{ToggleIconButton:()=>p});module.exports=A(v);var r=E(require("react")),d=require("radix-ui"),f=require("./icon-button.js"),N=require("./_internal/base-button.js"),b=require("../hooks/use-toggle-state.js");const p=r.forwardRef(({pressed:e,onPressedChange:t,defaultPressed:o,...s},n)=>{const{"aria-label":c,"aria-labelledby":a,children:l}=s,i=r.useRef(null);r.useEffect(()=>{i.current=null},[a]);const m=r.useCallback(()=>{if(c)return c;if(a){if(i.current===null){const P=document.getElementById(a);i.current=P?.textContent||"Toggle icon button"}return i.current}return typeof l=="string"?l:r.isValidElement(l)&&typeof l.props?.children=="string"?l.props.children:"Toggle icon button"},[c,a,l]),{handlePressedChange:y}=(0,b.useToggleState)({pressed:e,onPressedChange:t,getAccessibleName:m,componentName:"ToggleIconButton"});return r.createElement(d.Toggle.Root,{pressed:e,onPressedChange:y,defaultPressed:o,asChild:!0},r.createElement(f.IconButton,{...s,ref:n}))});p.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';\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"]
+  "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 { useToggleState } from '../hooks/use-toggle-state.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<ToggleIconButtonElement, ToggleIconButtonPropsWithAccessibility>(({ pressed, onPressedChange, defaultPressed, ...iconButtonProps }, forwardedRef) => {\n  // Extract specific props for stable dependency array\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children } = iconButtonProps;\n\n  // Cache the label lookup from aria-labelledby to avoid repeated DOM queries\n  const cachedLabelRef = React.useRef<string | null>(null);\n\n  // Clear cached label when ariaLabelledBy changes\n  React.useEffect(() => {\n    cachedLabelRef.current = null;\n  }, [ariaLabelledBy]);\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    // First priority: direct aria-label\n    if (ariaLabel) return ariaLabel;\n\n    // Second priority: referenced label element (cached)\n    if (ariaLabelledBy) {\n      if (cachedLabelRef.current === null) {\n        const labelElement = document.getElementById(ariaLabelledBy);\n        cachedLabelRef.current = labelElement?.textContent || 'Toggle icon button';\n      }\n      return cachedLabelRef.current;\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  }, [ariaLabel, ariaLabelledBy, children]);\n\n  // Use shared toggle state hook for accessibility announcements and warnings\n  const { handlePressedChange } = useToggleState({\n    pressed,\n    onPressedChange,\n    getAccessibleName,\n    componentName: 'ToggleIconButton',\n  });\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 pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>\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,EAA+B,wCAsG/B,MAAMN,EAAmBE,EAAM,WAA4E,CAAC,CAAE,QAAAK,EAAS,gBAAAC,EAAiB,eAAAC,EAAgB,GAAGC,CAAgB,EAAGC,IAAiB,CAE7L,KAAM,CAAE,aAAcC,EAAW,kBAAmBC,EAAgB,SAAAC,CAAS,EAAIJ,EAG3EK,EAAiBb,EAAM,OAAsB,IAAI,EAGvDA,EAAM,UAAU,IAAM,CACpBa,EAAe,QAAU,IAC3B,EAAG,CAACF,CAAc,CAAC,EAOnB,MAAMG,EAAoBd,EAAM,YAAY,IAAM,CAEhD,GAAIU,EAAW,OAAOA,EAGtB,GAAIC,EAAgB,CAClB,GAAIE,EAAe,UAAY,KAAM,CACnC,MAAME,EAAe,SAAS,eAAeJ,CAAc,EAC3DE,EAAe,QAAUE,GAAc,aAAe,oBACxD,CACA,OAAOF,EAAe,OACxB,CAGA,OAAI,OAAOD,GAAa,SAAiBA,EACrCZ,EAAM,eAAeY,CAAQ,GAAK,OAAQA,EAAS,OAAe,UAAa,SACzEA,EAAS,MAAc,SAI1B,oBACT,EAAG,CAACF,EAAWC,EAAgBC,CAAQ,CAAC,EAGlC,CAAE,oBAAAI,CAAoB,KAAI,kBAAe,CAC7C,QAAAX,EACA,gBAAAC,EACA,kBAAAQ,EACA,cAAe,kBACjB,CAAC,EAKD,OACEd,EAAA,cAAC,SAAO,KAAP,CAAY,QAASK,EAAS,gBAAiBW,EAAqB,eAAgBT,EAAgB,QAAO,IAC1GP,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_toggle_state", "pressed", "onPressedChange", "defaultPressed", "iconButtonProps", "forwardedRef", "ariaLabel", "ariaLabelledBy", "children", "cachedLabelRef", "getAccessibleName", "labelElement", "handlePressedChange"]
 }

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

@@ -1,3 +1,5 @@
 export { useLiveAnnouncer } from './use-live-announcer.js';
 export { useBodyPointerEventsCleanup } from './use-body-pointer-events-cleanup.js';
+export { useTooltipWrapper } from './use-tooltip-wrapper.js';
+export { useToggleState } from './use-toggle-state.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAE,MAAM,sCAAsC,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/cjs/hooks/index.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/index.ts"],
-  "sourcesContent": ["export { useLiveAnnouncer } from './use-live-announcer.js';\nexport { useBodyPointerEventsCleanup } from './use-body-pointer-events-cleanup.js';\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,wHAAAE,EAAAF,GAAA,IAAAG,EAAiC,mCACjCC,EAA4C",
-  "names": ["hooks_exports", "__export", "__toCommonJS", "import_use_live_announcer", "import_use_body_pointer_events_cleanup"]
+  "sourcesContent": ["export { useLiveAnnouncer } from './use-live-announcer.js';\nexport { useBodyPointerEventsCleanup } from './use-body-pointer-events-cleanup.js';\nexport { useTooltipWrapper } from './use-tooltip-wrapper.js';\nexport { useToggleState } from './use-toggle-state.js';\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sMAAAE,EAAAF,GAAA,IAAAG,EAAiC,mCACjCC,EAA4C,gDAC5CC,EAAkC,oCAClCC,EAA+B",
+  "names": ["hooks_exports", "__export", "__toCommonJS", "import_use_live_announcer", "import_use_body_pointer_events_cleanup", "import_use_tooltip_wrapper", "import_use_toggle_state"]
 }

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

@@ -1 +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"}
+{"version":3,"file":"use-live-announcer.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-live-announcer.ts"],"names":[],"mappings":"AAQA;;;GAGG;AACH,wBAAgB,gBAAgB,cA+Ce,MAAM,UAmBpD"}

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

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

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

@@ -1,7 +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"]
+  "sourcesContent": ["import * as React from 'react';\n\n/**\n * Reference counter to track how many components are using the live region.\n * Only remove the live region when no components are using it.\n */\nlet liveRegionRefCount = 0;\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  // Track the timeout so we can clean it up on unmount\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\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    // Increment ref count when component mounts\n    liveRegionRefCount++;\n\n    return () => {\n      // Decrement ref count when component unmounts\n      liveRegionRefCount--;\n\n      // Clean up timeout on unmount\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n\n      // Only remove the live region if no components are using it\n      if (liveRegionRefCount === 0) {\n        const region = document.getElementById('rt-live-announcer');\n        if (region) {\n          region.remove();\n        }\n      }\n    };\n  }, []);\n\n  const announce = React.useCallback((message: string) => {\n    const liveRegion = document.getElementById('rt-live-announcer');\n    if (liveRegion) {\n      // Clear any pending timeout\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n\n      // Clear previous announcements\n      liveRegion.textContent = '';\n\n      // Add new announcement with a small delay to ensure it's announced\n      timeoutRef.current = setTimeout(() => {\n        liveRegion.textContent = message;\n      }, 100);\n    }\n  }, []);\n\n  return announce;\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBAMvB,IAAIC,EAAqB,EAMlB,SAASH,GAAmB,CAEjC,MAAMI,EAAaF,EAAM,OAAkD,MAAS,EAGpF,OAAAA,EAAM,UAAU,IAAM,CACpB,IAAIG,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,GAItCF,IAEO,IAAM,CAUX,GARAA,IAGIC,EAAW,SACb,aAAaA,EAAW,OAAO,EAI7BD,IAAuB,EAAG,CAC5B,MAAMG,EAAS,SAAS,eAAe,mBAAmB,EACtDA,GACFA,EAAO,OAAO,CAElB,CACF,CACF,EAAG,CAAC,CAAC,EAEYJ,EAAM,YAAaK,GAAoB,CACtD,MAAMF,EAAa,SAAS,eAAe,mBAAmB,EAC1DA,IAEED,EAAW,SACb,aAAaA,EAAW,OAAO,EAIjCC,EAAW,YAAc,GAGzBD,EAAW,QAAU,WAAW,IAAM,CACpCC,EAAW,YAAcE,CAC3B,EAAG,GAAG,EAEV,EAAG,CAAC,CAAC,CAGP",
+  "names": ["use_live_announcer_exports", "__export", "useLiveAnnouncer", "__toCommonJS", "React", "liveRegionRefCount", "timeoutRef", "liveRegion", "region", "message"]
 }

package/dist/cjs/hooks/use-toggle-state.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Options for the useToggleState hook
+ */
+interface UseToggleStateOptions {
+    /** Controlled pressed state */
+    pressed?: boolean;
+    /** Callback when pressed state changes */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Function to get the accessible name for announcements */
+    getAccessibleName: () => string;
+    /** Component name for warning messages */
+    componentName: string;
+}
+/**
+ * Hook for shared toggle button state management.
+ * Provides accessibility announcements and controlled/uncontrolled warnings.
+ *
+ * @param options - Configuration options for the toggle state
+ * @returns Object containing the handlePressedChange callback
+ *
+ * @example
+ * ```tsx
+ * const getAccessibleName = React.useCallback(() => 'Toggle button', []);
+ *
+ * const { handlePressedChange } = useToggleState({
+ *   pressed,
+ *   onPressedChange,
+ *   getAccessibleName,
+ *   componentName: 'ToggleButton',
+ * });
+ * ```
+ */
+export declare function useToggleState({ pressed, onPressedChange, getAccessibleName, componentName }: UseToggleStateOptions): {
+    handlePressedChange: (newPressed: boolean) => void;
+};
+export {};
+//# sourceMappingURL=use-toggle-state.d.ts.map

package/dist/cjs/hooks/use-toggle-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toggle-state.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-toggle-state.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,UAAU,qBAAqB;IAC7B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,4DAA4D;IAC5D,iBAAiB,EAAE,MAAM,MAAM,CAAC;IAChC,0CAA0C;IAC1C,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,aAAa,EAAE,EAAE,qBAAqB;sCAWnG,OAAO;EAwBvB"}

package/dist/cjs/hooks/use-toggle-state.js

@@ -0,0 +1,2 @@
+"use strict";var p=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var b=(e,n)=>{for(var o in n)r(e,o,{get:n[o],enumerable:!0})},u=(e,n,o,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of g(n))!m.call(e,s)&&s!==o&&r(e,s,{get:()=>n[s],enumerable:!(t=f(n,s))||t.enumerable});return e};var v=(e,n,o)=>(o=e!=null?p(h(e)):{},u(n||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),w=e=>u(r({},"__esModule",{value:!0}),e);var R={};b(R,{useToggleState:()=>N});module.exports=w(R);var a=v(require("react")),i=require("./use-live-announcer.js");function N({pressed:e,onPressedChange:n,getAccessibleName:o,componentName:t}){const s=(0,i.useLiveAnnouncer)(),C=a.useRef(!1),l=a.useCallback(d=>{const c=o();s(`${c} ${d?"pressed":"unpressed"}`),n?.(d)},[s,n,o]);return a.useEffect(()=>{},[e,n,t]),{handlePressedChange:l}}
+//# sourceMappingURL=use-toggle-state.js.map

package/dist/cjs/hooks/use-toggle-state.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-toggle-state.ts"],
+  "sourcesContent": ["import * as React from 'react';\nimport { useLiveAnnouncer } from './use-live-announcer.js';\n\n/**\n * Options for the useToggleState hook\n */\ninterface UseToggleStateOptions {\n  /** Controlled pressed state */\n  pressed?: boolean;\n  /** Callback when pressed state changes */\n  onPressedChange?: (pressed: boolean) => void;\n  /** Function to get the accessible name for announcements */\n  getAccessibleName: () => string;\n  /** Component name for warning messages */\n  componentName: string;\n}\n\n/**\n * Hook for shared toggle button state management.\n * Provides accessibility announcements and controlled/uncontrolled warnings.\n *\n * @param options - Configuration options for the toggle state\n * @returns Object containing the handlePressedChange callback\n *\n * @example\n * ```tsx\n * const getAccessibleName = React.useCallback(() => 'Toggle button', []);\n *\n * const { handlePressedChange } = useToggleState({\n *   pressed,\n *   onPressedChange,\n *   getAccessibleName,\n *   componentName: 'ToggleButton',\n * });\n * ```\n */\nexport function useToggleState({ pressed, onPressedChange, getAccessibleName, componentName }: UseToggleStateOptions) {\n  const announce = useLiveAnnouncer();\n\n  // Track if we've already warned about controlled without handler\n  const warnedRef = React.useRef(false);\n\n  /**\n   * Memoized handler for state changes with accessibility announcements.\n   * Announces the new state immediately for screen readers.\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  // Only warns once to avoid console spam\n  React.useEffect(() => {\n    if (process.env.NODE_ENV === 'development' && pressed !== undefined && onPressedChange === undefined && !warnedRef.current) {\n      warnedRef.current = true;\n      console.warn(\n        `${componentName}: 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, componentName]);\n\n  return { handlePressedChange };\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAiC,mCAmC1B,SAASH,EAAe,CAAE,QAAAI,EAAS,gBAAAC,EAAiB,kBAAAC,EAAmB,cAAAC,CAAc,EAA0B,CACpH,MAAMC,KAAW,oBAAiB,EAG5BC,EAAYP,EAAM,OAAO,EAAK,EAM9BQ,EAAsBR,EAAM,YAC/BS,GAAwB,CACvB,MAAMC,EAAiBN,EAAkB,EAEzCE,EAAS,GAAGI,CAAc,IAAID,EAAa,UAAY,WAAW,EAAE,EAEpEN,IAAkBM,CAAU,CAC9B,EACA,CAACH,EAAUH,EAAiBC,CAAiB,CAC/C,EAIA,OAAAJ,EAAM,UAAU,IAAM,CAStB,EAAG,CAACE,EAASC,EAAiBE,CAAa,CAAC,EAErC,CAAE,oBAAAG,CAAoB,CAC/B",
+  "names": ["use_toggle_state_exports", "__export", "useToggleState", "__toCommonJS", "React", "import_use_live_announcer", "pressed", "onPressedChange", "getAccessibleName", "componentName", "announce", "warnedRef", "handlePressedChange", "newPressed", "accessibleName"]
+}

package/dist/cjs/hooks/use-tooltip-wrapper.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+/**
+ * Hook for managing tooltip accessibility props and conditional rendering.
+ * Encapsulates tooltip ID generation and aria-describedby binding.
+ *
+ * @param tooltip - The tooltip content (if any)
+ * @returns Object containing tooltipId, hasTooltip flag, and accessibility props
+ *
+ * @example
+ * ```tsx
+ * const { tooltipId, hasTooltip, accessibilityProps } = useTooltipWrapper(tooltip);
+ *
+ * const button = <button {...accessibilityProps}>Click me</button>;
+ *
+ * if (!hasTooltip) return button;
+ *
+ * return <Tooltip id={tooltipId} content={tooltip}>{button}</Tooltip>;
+ * ```
+ */
+export declare function useTooltipWrapper(tooltip: React.ReactNode): {
+    tooltipId: string;
+    hasTooltip: boolean;
+    accessibilityProps: {
+        'aria-describedby': string;
+    } | {
+        'aria-describedby'?: undefined;
+    };
+};
+//# sourceMappingURL=use-tooltip-wrapper.d.ts.map

package/dist/cjs/hooks/use-tooltip-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tooltip-wrapper.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-tooltip-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS;;;;;;;;EAOzD"}

package/dist/cjs/hooks/use-tooltip-wrapper.js

@@ -0,0 +1,2 @@
+"use strict";var p=Object.create;var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var t in e)c(o,t,{get:e[t],enumerable:!0})},i=(o,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of d(e))!u.call(o,s)&&s!==t&&c(o,s,{get:()=>e[s],enumerable:!(a=n(e,s))||a.enumerable});return o};var m=(o,e,t)=>(t=o!=null?p(l(o)):{},i(e||!o||!o.__esModule?c(t,"default",{value:o,enumerable:!0}):t,o)),R=o=>i(c({},"__esModule",{value:!0}),o);var y={};b(y,{useTooltipWrapper:()=>f});module.exports=R(y);var r=m(require("react"));function f(o){const e=r.useId(),t=!!o,a=r.useMemo(()=>t?{"aria-describedby":e}:{},[t,e]);return{tooltipId:e,hasTooltip:t,accessibilityProps:a}}
+//# sourceMappingURL=use-tooltip-wrapper.js.map

package/dist/cjs/hooks/use-tooltip-wrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-tooltip-wrapper.ts"],
+  "sourcesContent": ["import * as React from 'react';\n\n/**\n * Hook for managing tooltip accessibility props and conditional rendering.\n * Encapsulates tooltip ID generation and aria-describedby binding.\n *\n * @param tooltip - The tooltip content (if any)\n * @returns Object containing tooltipId, hasTooltip flag, and accessibility props\n *\n * @example\n * ```tsx\n * const { tooltipId, hasTooltip, accessibilityProps } = useTooltipWrapper(tooltip);\n *\n * const button = <button {...accessibilityProps}>Click me</button>;\n *\n * if (!hasTooltip) return button;\n *\n * return <Tooltip id={tooltipId} content={tooltip}>{button}</Tooltip>;\n * ```\n */\nexport function useTooltipWrapper(tooltip: React.ReactNode) {\n  const tooltipId = React.useId();\n  const hasTooltip = Boolean(tooltip);\n\n  const accessibilityProps = React.useMemo(() => (hasTooltip ? { 'aria-describedby': tooltipId } : {}), [hasTooltip, tooltipId]);\n\n  return { tooltipId, hasTooltip, accessibilityProps };\n}\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBAoBhB,SAASF,EAAkBG,EAA0B,CAC1D,MAAMC,EAAYF,EAAM,MAAM,EACxBG,EAAa,EAAQF,EAErBG,EAAqBJ,EAAM,QAAQ,IAAOG,EAAa,CAAE,mBAAoBD,CAAU,EAAI,CAAC,EAAI,CAACC,EAAYD,CAAS,CAAC,EAE7H,MAAO,CAAE,UAAAA,EAAW,WAAAC,EAAY,mBAAAC,CAAmB,CACrD",
+  "names": ["use_tooltip_wrapper_exports", "__export", "useTooltipWrapper", "__toCommonJS", "React", "tooltip", "tooltipId", "hasTooltip", "accessibilityProps"]
+}

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;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,2FA4Kd,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,2FA8Kd,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 N from"classnames";import{Slot as j}from"radix-ui";import{baseButtonPropDefs as f}from"./base-button.props.js";import{Flex as I}from"../flex.js";import{Spinner as O}from"../spinner.js";import{VisuallyHidden as V}from"../visually-hidden.js";import{extractProps as F}from"../../helpers/extract-props.js";import{mapResponsiveProp as H,mapButtonSizeToSpinnerSize as W}from"../../helpers/map-prop-values.js";import{marginPropDefs as G}from"../../props/margin.props.js";const y=t.forwardRef((n,a)=>{const{size:b=f.size.default}=n,{className:B,children:o,asChild:i,as:s,color:P,radius:g,material:h,panelBackground:T,flush:v,disabled:p=n.loading,...d}=F(n,f,G);t.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 r=h??T,c=t.useRef(null);t.useEffect(()=>{const e=c.current;if(!e)return;if(r==="translucent"){e.style.setProperty("will-change","backdrop-filter");const D=()=>{const S=getComputedStyle(e).getPropertyValue("--duration-2")||"75ms",z=parseInt(S)||75;setTimeout(()=>{e&&r!=="translucent"&&e.style.setProperty("will-change","auto")},z)},m=new MutationObserver(D);return m.observe(e,{attributes:!0,attributeFilter:["data-material"]}),()=>{m.disconnect(),e.style.setProperty("will-change","auto")}}else e.style.setProperty("will-change","auto")},[r]);const w=i?j.Root:s||"button",C=i||!s||["button","input","textarea","select"].includes(s),x=!i&&(!s||s==="button"),E="type"in d,M=t.useId(),l=n.loading?`${M}-loading`:void 0,u=t.useMemo(()=>typeof o=="string"?o:t.isValidElement(o)&&typeof o.props?.children=="string"?o.props.children:"button",[o]),k=t.useMemo(()=>n.loading?{"aria-busy":!0,"aria-disabled":!0,"aria-describedby":l,"aria-label":`${u} (loading)`}:{},[n.loading,l,u]);return t.createElement(w,{"data-disabled":p||void 0,"data-accent-color":P,"data-radius":g,"data-material":r,"data-panel-background":r,"data-flush":v?"true":void 0,...d,...k,ref:e=>{typeof a=="function"?a(e):a&&(a.current=e),c.current=e},className:N("rt-reset","rt-BaseButton",B),...C&&{disabled:p},...x&&!E?{type:"button"}:{}},n.loading?t.createElement(t.Fragment,null,t.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},o),t.createElement(V,null,t.createElement("span",{id:l},u," is loading, please wait..."),o),t.createElement(I,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},t.createElement("span",null,t.createElement(O,{size:H(b,W),"aria-hidden":"true"})))):o)});y.displayName="BaseButton";export{y as BaseButton};
+import*as e from"react";import j from"classnames";import{Slot as O}from"radix-ui";import{baseButtonPropDefs as b}from"./base-button.props.js";import{Flex as V}from"../flex.js";import{Spinner as F}from"../spinner.js";import{VisuallyHidden as H}from"../visually-hidden.js";import{extractProps as R}from"../../helpers/extract-props.js";import{mapResponsiveProp as W,mapButtonSizeToSpinnerSize as G}from"../../helpers/map-prop-values.js";import{marginPropDefs as $}from"../../props/margin.props.js";const B=e.forwardRef((n,a)=>{const{size:P=b.size.default}=n,{className:g,children:o,asChild:i,as:s,color:h,radius:T,material:v,panelBackground:w,flush:C,disabled:d=n.loading,...c}=R(n,b,$);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 r=v??w,m=e.useRef(null),f=e.useRef(r);f.current=r,e.useEffect(()=>{const t=m.current;if(!t)return;if(r==="translucent"){t.style.setProperty("will-change","backdrop-filter");let p;const z=()=>{const I=getComputedStyle(t).getPropertyValue("--duration-2")||"75ms",N=parseInt(I)||75;p=setTimeout(()=>{t&&f.current!=="translucent"&&t.style.setProperty("will-change","auto")},N)},y=new MutationObserver(z);return y.observe(t,{attributes:!0,attributeFilter:["data-material"]}),()=>{p&&clearTimeout(p),y.disconnect(),t.style.setProperty("will-change","auto")}}else t.style.setProperty("will-change","auto")},[r]);const x=i?O.Root:s||"button",E=i||!s||["button","input","textarea","select"].includes(s),M=!i&&(!s||s==="button"),k="type"in c,D=e.useId(),u=n.loading?`${D}-loading`:void 0,l=e.useMemo(()=>typeof o=="string"?o:e.isValidElement(o)&&typeof o.props?.children=="string"?o.props.children:"button",[o]),S=e.useMemo(()=>n.loading?{"aria-busy":!0,"aria-disabled":!0,"aria-describedby":u,"aria-label":`${l} (loading)`}:{},[n.loading,u,l]);return e.createElement(x,{"data-disabled":d||void 0,"data-accent-color":h,"data-radius":T,"data-material":r,"data-panel-background":r,"data-flush":C?"true":void 0,...c,...S,ref:t=>{typeof a=="function"?a(t):a&&(a.current=t),m.current=t},className:j("rt-reset","rt-BaseButton",g),...E&&{disabled:d},...M&&!k?{type:"button"}:{}},n.loading?e.createElement(e.Fragment,null,e.createElement("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0},o),e.createElement(H,null,e.createElement("span",{id:u},l," is loading, please wait..."),o),e.createElement(V,{asChild:!0,align:"center",justify:"center",position:"absolute",inset:"0"},e.createElement("span",null,e.createElement(F,{size:W(P,G),"aria-hidden":"true"})))):o)});B.displayName="BaseButton";export{B 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/**\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  // Determine if we are rendering a real <button> element so we can set a safe\n  // default type. Native <button> defaults to type=\"submit\" which can cause\n  // accidental form submissions. We default to type=\"button\" unless the user\n  // explicitly provided a type or we're using asChild (unknown underlying node).\n  const isNativeButtonElement = !asChild && (!as || as === 'button');\n  const hasExplicitTypeAttribute = 'type' in (baseButtonProps as Record<string, unknown>);\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      {...(isNativeButtonElement && !hasExplicitTypeAttribute ? { type: 'button' } : {})}\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": "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",
-  "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", "isNativeButtonElement", "hasExplicitTypeAttribute", "loadingId", "describedById", "buttonText", "accessibilityProps", "node"]
+  "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('Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.');\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  // Use a ref to track current material value to avoid stale closures in setTimeout\n  const materialRef = React.useRef(effectiveMaterial);\n  materialRef.current = effectiveMaterial;\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      // Track timeout for cleanup\n      let timeoutId: ReturnType<typeof setTimeout> | undefined;\n\n      // Clean up will-change after transition completes to prevent memory leaks\n      const cleanup = () => {\n        const transitionDuration = getComputedStyle(button).getPropertyValue('--duration-2') || '75ms';\n        const duration = parseInt(transitionDuration) || 75;\n\n        timeoutId = setTimeout(() => {\n          // Use ref to get current value, not stale closure value\n          if (button && materialRef.current !== '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        if (timeoutId) clearTimeout(timeoutId);\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 = asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);\n\n  // Determine if we are rendering a real <button> element so we can set a safe\n  // default type. Native <button> defaults to type=\"submit\" which can cause\n  // accidental form submissions. We default to type=\"button\" unless the user\n  // explicitly provided a type or we're using asChild (unknown underlying node).\n  const isNativeButtonElement = !asChild && (!as || as === 'button');\n  const hasExplicitTypeAttribute = 'type' in (baseButtonProps as Record<string, unknown>);\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      {...(isNativeButtonElement && !hasExplicitTypeAttribute ? { type: 'button' } : {})}\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 size={mapResponsiveProp(size, mapButtonSizeToSpinnerSize)} aria-hidden=\"true\" />\n            </span>\n          </Flex>\n        </>\n      ) : (\n        children\n      )}\n    </Comp>\n  );\n});\nBaseButton.displayName = 'BaseButton';\n\nexport { BaseButton };\nexport type { BaseButtonProps };\n"],
+  "mappings": "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",
+  "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", "materialRef", "button", "timeoutId", "cleanup", "transitionDuration", "duration", "observer", "Comp", "shouldPassDisabled", "isNativeButtonElement", "hasExplicitTypeAttribute", "loadingId", "describedById", "buttonText", "accessibilityProps", "node"]
 }

package/dist/esm/components/_internal/shell-bottom.d.ts

@@ -1,25 +1,6 @@
 import * as React from 'react';
 import { BottomHandle } from './shell-handles.js';
-import type { Breakpoint, PaneSizePersistence, ResponsivePresentation } from '../shell.types.js';
-interface PaneProps extends React.ComponentPropsWithoutRef<'div'> {
-    presentation?: ResponsivePresentation;
-    expandedSize?: number;
-    minSize?: number;
-    maxSize?: number;
-    resizable?: boolean;
-    collapsible?: boolean;
-    onExpand?: () => void;
-    onCollapse?: () => void;
-    onResize?: (size: number) => void;
-    resizer?: React.ReactNode;
-    onResizeStart?: (size: number) => void;
-    onResizeEnd?: (size: number) => void;
-    snapPoints?: number[];
-    snapTolerance?: number;
-    collapseThreshold?: number;
-    paneId?: string;
-    persistence?: PaneSizePersistence;
-}
+import type { Breakpoint, PaneBaseProps } from '../shell.types.js';
 type BottomOpenChangeMeta = {
     reason: 'init' | 'toggle' | 'responsive';
 };
@@ -44,7 +25,7 @@ type BottomSizeUncontrolledProps = {
 type BottomSizeChangeMeta = {
     reason: 'init' | 'resize' | 'controlled';
 };
-type BottomPublicProps = PaneProps & (BottomControlledProps | BottomUncontrolledProps) & (BottomSizeControlledProps | BottomSizeUncontrolledProps) & {
+type BottomPublicProps = PaneBaseProps & (BottomControlledProps | BottomUncontrolledProps) & (BottomSizeControlledProps | BottomSizeUncontrolledProps) & {
     onSizeChange?: (size: number, meta: BottomSizeChangeMeta) => void;
     sizeUpdate?: 'throttle' | 'debounce';
     sizeUpdateMs?: number;

package/dist/esm/components/_internal/shell-bottom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shell-bottom.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAY,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3G,UAAU,SAAU,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC/D,YAAY,CAAC,EAAE,sBAAsB,CAAC;IAEtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,qBAAqB,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC/K,KAAK,uBAAuB,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC3I,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAChF,KAAK,2BAA2B,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnF,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,iBAAiB,GAAG,SAAS,GAChC,CAAC,qBAAqB,GAAG,uBAAuB,CAAC,GACjD,CAAC,yBAAyB,GAAG,2BAA2B,CAAC,GAAG;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEJ,KAAK,eAAe,GAAG,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,YAAY,CAAA;CAAE,CAAC;AAElJ,eAAO,MAAM,MAAM,EAwUd,eAAe,CAAC"}
+{"version":3,"file":"shell-bottom.d.ts","sourceRoot":"","sources":["../../../../src/components/_internal/shell-bottom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,YAAY,EAAc,MAAM,oBAAoB,CAAC;AAE9D,OAAO,KAAK,EAAE,UAAU,EAAyD,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG1H,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,qBAAqB,GAAG;IAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC/K,KAAK,uBAAuB,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAC3I,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAChF,KAAK,2BAA2B,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACnF,KAAK,oBAAoB,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY,CAAA;CAAE,CAAC;AACzE,KAAK,iBAAiB,GAAG,aAAa,GACpC,CAAC,qBAAqB,GAAG,uBAAuB,CAAC,GACjD,CAAC,yBAAyB,GAAG,2BAA2B,CAAC,GAAG;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClE,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEJ,KAAK,eAAe,GAAG,KAAK,CAAC,yBAAyB,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC,GAAG;IAAE,MAAM,EAAE,OAAO,YAAY,CAAA;CAAE,CAAC;AAgBlJ,eAAO,MAAM,MAAM,EA8Tb,eAAe,CAAC"}

package/dist/esm/components/_internal/shell-bottom.js

@@ -1,2 +1,2 @@
-import*as t from"react";import le from"classnames";import*as O from"../sheet.js";import{VisuallyHidden as ue}from"../visually-hidden.js";import{useShell as me}from"../shell.context.js";import{useResponsivePresentation as fe,useResponsiveValue as q}from"../shell.hooks.js";import{PaneResizeContext as ce}from"./shell-resize.js";import{BottomHandle as k,PaneHandle as pe}from"./shell-handles.js";import"../shell.types.js";const K=t.forwardRef(({className:G,presentation:J="fixed",defaultOpen:f,open:i,onOpenChange:z,expandedSize:P=200,minSize:l=100,maxSize:u=400,resizable:g=!1,collapsible:Q=!0,onExpand:T,onCollapse:D,onResize:B,onResizeStart:X,onResizeEnd:Y,snapPoints:Z,snapTolerance:ee,collapseThreshold:te,paneId:M,persistence:C,children:oe,style:ne,...a},c)=>{const n=me(),R=fe(J),p=R==="overlay",re=R==="stacked",d=t.useRef(null),se=t.useCallback(e=>{d.current=e,typeof c=="function"?c(e):c&&(c.current=e)},[c]),H=t.Children.toArray(oe),U=H.filter(e=>t.isValidElement(e)&&e.type===k),F=H.filter(e=>!(t.isValidElement(e)&&e.type===k)),I=a.onSizeChange,_=a.sizeUpdate,$=a.sizeUpdateMs,b=t.useMemo(()=>{const e=I,o=_,s=$??50;if(!e)return()=>{};if(o==="debounce"){let r=null;return(m,w)=>{r&&clearTimeout(r),r=setTimeout(()=>{e(m,w)},s)}}if(o==="throttle"){let r=0;return(m,w)=>{const j=Date.now();j-r>=s&&(r=j,e(m,w))}}return(r,m)=>e(r,m)},[I,_,$]),V=t.useRef(!1),ie=t.useRef(!1),A=q(f);t.useEffect(()=>{if(!V.current&&n.currentBreakpointReady&&(V.current=!0,typeof i>"u"&&typeof f<"u")){const e=!!A;n.setBottomMode(e?"expanded":"collapsed"),ie.current=!0}},[n,i,f,A]);const y=t.useRef(null);t.useEffect(()=>{const e=typeof i<"u";if(y.current===null){y.current=e;return}y.current!==e&&(console.warn("Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported."),y.current=e)},[i]),t.useEffect(()=>{typeof i>"u"||n.setBottomMode(i?"expanded":"collapsed")},[n,i]);const L=t.useRef(!1),S=q(i);t.useEffect(()=>{if(typeof S>"u")return;const e=!!S;n.setBottomMode(e?"expanded":"collapsed")},[n,S]);const W=t.useRef(!1),v=t.useRef(null);t.useEffect(()=>{!W.current&&typeof i>"u"&&f&&n.bottomMode==="expanded"&&(z?.(!0,{reason:"init"}),W.current=!0),typeof i>"u"&&(v.current!==null&&v.current!==n.bottomMode&&(L.current||z?.(n.bottomMode==="expanded",{reason:"toggle"}),L.current=!1),v.current=n.bottomMode)},[n.bottomMode,i,f,z]),t.useEffect(()=>{n.bottomMode==="expanded"?T?.():D?.()},[n.bottomMode,T,D]);const x=n.bottomMode==="expanded",h=t.useMemo(()=>{if(!M||C)return C;const e=`kookie-ui:shell:bottom:${M}`;return{load:()=>{if(typeof window>"u")return;const s=window.localStorage.getItem(e);return s?Number(s):void 0},save:s=>{typeof window>"u"||window.localStorage.setItem(e,String(s))}}},[M,C]);t.useEffect(()=>{let e=!0;return(async()=>{if(!g||!h?.load||p)return;const o=await h.load();e&&typeof o=="number"&&d.current&&(d.current.style.setProperty("--bottom-size",`${o}px`),B?.(o))})(),()=>{e=!1}},[g,h,B,p]);const ae=g&&!p&&x?t.createElement(ce.Provider,{value:{containerRef:d,cssVarName:"--bottom-size",minSize:l,maxSize:u,defaultSize:P,orientation:"horizontal",edge:"start",computeNext:(e,o,s)=>{const r=e-o;return s-r},onResize:B,onResizeStart:X,onResizeEnd:e=>{Y?.(e),b(e,{reason:"resize"}),h?.save?.(e)},target:"bottom",collapsible:Q,snapPoints:Z,snapTolerance:ee??8,collapseThreshold:te,requestCollapse:()=>n.setBottomMode("collapsed"),requestToggle:()=>n.togglePane("bottom")}},U.length>0?U.map((e,o)=>t.cloneElement(e,{key:e.key??o})):t.createElement(pe,null)):null,{defaultOpen:be,open:ye,onOpenChange:he,size:ze,defaultSize:Pe,onSizeChange:ge,sizeUpdate:Be,sizeUpdateMs:Me,...de}=a,E=t.useCallback(e=>{if(e==null)return;if(typeof e=="number"&&Number.isFinite(e))return e;const o=String(e).trim();if(!o)return;if(o.endsWith("px"))return Number.parseFloat(o);if(o.endsWith("rem")){const r=Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16")||16;return Number.parseFloat(o)*r}if(o.endsWith("%")){const r=Number.parseFloat(o),m=document.documentElement.clientHeight||window.innerHeight||0;return r/100*m}const s=Number.parseFloat(o);return Number.isFinite(s)?s:void 0},[]);t.useEffect(()=>{if(d.current&&typeof a.size>"u"&&typeof a.defaultSize<"u"){const e=E(a.defaultSize);if(typeof e=="number"&&Number.isFinite(e)){const r=Math.min((typeof u=="number"?u:void 0)??e,Math.max((typeof l=="number"?l:void 0)??e,e));d.current.style.setProperty("--bottom-size",`${r}px`),b(r,{reason:"init"})}}},[]);const N=a.size;if(t.useEffect(()=>{if(!d.current||typeof N>"u")return;const e=E(N);if(typeof e=="number"&&Number.isFinite(e)){const r=Math.min((typeof u=="number"?u:void 0)??e,Math.max((typeof l=="number"?l:void 0)??e,e));d.current.style.setProperty("--bottom-size",`${r}px`),b(r,{reason:"controlled"})}},[N,l,u,E,b]),p){const e=n.bottomMode==="expanded";return t.createElement(O.Root,{open:e,onOpenChange:o=>n.setBottomMode(o?"expanded":"collapsed")},t.createElement(O.Content,{side:"bottom",style:{padding:0},height:{initial:`${P}px`}},t.createElement(ue,null,t.createElement(O.Title,null,"Bottom panel")),F))}return t.createElement("div",{...de,ref:se,className:le("rt-ShellBottom",G),"data-mode":n.bottomMode,"data-peek":n.peekTarget==="bottom"||void 0,"data-presentation":n.currentBreakpointReady?R:void 0,"data-open":n.currentBreakpointReady&&re&&x||void 0,style:{...ne,"--bottom-size":`${P}px`,"--bottom-min-size":`${l}px`,"--bottom-max-size":`${u}px`}},t.createElement("div",{className:"rt-ShellBottomContent","data-visible":x||void 0},F),ae)});K.displayName="Shell.Bottom",K.Handle=k;export{K as Bottom};
+import*as t from"react";import de from"classnames";import*as N from"../sheet.js";import{VisuallyHidden as pe}from"../visually-hidden.js";import{useShell as ue}from"../shell.context.js";import{useResponsivePresentation as me,useResponsiveInitialState as ce}from"../shell.hooks.js";import{PaneResizeContext as fe}from"./shell-resize.js";import{BottomHandle as O,PaneHandle as be}from"./shell-handles.js";import"../shell.types.js";import{extractPaneDomProps as he,mapResponsiveBooleanToPaneMode as j}from"./shell-prop-helpers.js";const ye=["className","children","defaultOpen","open","onOpenChange","size","defaultSize","onSizeChange","sizeUpdate","sizeUpdateMs","style"],W=t.forwardRef((w,u)=>{const{className:q,presentation:K="fixed",defaultOpen:c,open:s,onOpenChange:m,expandedSize:z=200,minSize:l=100,maxSize:d=400,resizable:P=!1,collapsible:Y=!0,onExpand:T,onCollapse:k,onResize:S,onResizeStart:G,onResizeEnd:J,snapPoints:Q,snapTolerance:X,collapseThreshold:Z,paneId:B,persistence:M,children:ee,style:te,size:D,defaultSize:H,onSizeChange:V,sizeUpdate:F,sizeUpdateMs:U=50}=w,oe=he(w,ye),r=ue(),g=me(K),f=g==="overlay",ne=g==="stacked",a=t.useRef(null),re=t.useCallback(e=>{a.current=e,typeof u=="function"?u(e):u&&(u.current=e)},[u]),I=t.Children.toArray(ee),_=I.filter(e=>t.isValidElement(e)&&e.type===O),$=I.filter(e=>!(t.isValidElement(e)&&e.type===O)),ie=t.useMemo(()=>j(s),[s]),se=t.useMemo(()=>j(c),[c]),ae=typeof s=="object"&&s!==null;ce({controlledValue:ie,defaultValue:se,currentValue:r.bottomMode,setValue:r.setBottomMode,breakpointReady:r.currentBreakpointReady,controlledIsResponsive:ae,onResponsiveChange:e=>m?.(e==="expanded",{reason:"responsive"}),onInit:e=>{typeof s>"u"&&m?.(e==="expanded",{reason:"init"})}});const b=t.useMemo(()=>{const e=V,n=F,i=U??50;if(!e)return()=>{};if(n==="debounce"){let o=null;return(p,E)=>{o&&clearTimeout(o),o=setTimeout(()=>{e(p,E)},i)}}if(n==="throttle"){let o=0;return(p,E)=>{const A=Date.now();A-o>=i&&(o=A,e(p,E))}}return(o,p)=>e(o,p)},[V,F,U]),h=t.useRef(null);t.useEffect(()=>{const e=typeof s<"u";if(h.current===null){h.current=e;return}h.current!==e&&(console.warn("Shell.Bottom: Switching between controlled and uncontrolled `open` is not supported."),h.current=e)},[s]);const L=t.useRef(!1),x=t.useRef(null);t.useEffect(()=>{!L.current&&typeof s>"u"&&c&&r.bottomMode==="expanded"&&(m?.(!0,{reason:"init"}),L.current=!0),typeof s>"u"&&(x.current!==null&&x.current!==r.bottomMode&&m?.(r.bottomMode==="expanded",{reason:"toggle"}),x.current=r.bottomMode)},[r.bottomMode,s,c,m]),t.useEffect(()=>{r.bottomMode==="expanded"?T?.():k?.()},[r.bottomMode,T,k]);const C=r.bottomMode==="expanded",y=t.useMemo(()=>{if(!B||M)return M;const e=`kookie-ui:shell:bottom:${B}`;return{load:()=>{if(!(typeof window>"u"))try{const i=window.localStorage.getItem(e);return i?Number(i):void 0}catch{return}},save:i=>{if(!(typeof window>"u"))try{window.localStorage.setItem(e,String(i))}catch{}}}},[B,M]);t.useEffect(()=>{let e=!0;if(!P||!y?.load||f)return;const n=y.load(),i=o=>{!e||typeof o!="number"||!a.current||(a.current.style.setProperty("--bottom-size",`${o}px`),S?.(o))};return n instanceof Promise?n.then(i).catch(o=>{}):i(n),()=>{e=!1}},[P,y,S,f]);const le=P&&!f&&C?t.createElement(fe.Provider,{value:{containerRef:a,cssVarName:"--bottom-size",minSize:l,maxSize:d,defaultSize:z,orientation:"horizontal",edge:"start",computeNext:(e,n,i)=>{const o=e-n;return i-o},onResize:S,onResizeStart:G,onResizeEnd:e=>{J?.(e),b(e,{reason:"resize"}),y?.save?.(e)},target:"bottom",collapsible:Y,snapPoints:Q,snapTolerance:X??8,collapseThreshold:Z,requestCollapse:()=>r.setBottomMode("collapsed"),requestToggle:()=>r.togglePane("bottom")}},_.length>0?_.map((e,n)=>t.cloneElement(e,{key:e.key??n})):t.createElement(be,null)):null,R=t.useCallback(e=>{if(e==null)return;if(typeof e=="number"&&Number.isFinite(e))return e;const n=String(e).trim();if(!n)return;if(n.endsWith("px"))return Number.parseFloat(n);if(n.endsWith("rem")){const o=Number.parseFloat(getComputedStyle(document.documentElement).fontSize||"16")||16;return Number.parseFloat(n)*o}if(n.endsWith("%")){const o=Number.parseFloat(n),p=document.documentElement.clientHeight||window.innerHeight||0;return o/100*p}const i=Number.parseFloat(n);return Number.isFinite(i)?i:void 0},[]);t.useEffect(()=>{if(a.current&&typeof D>"u"&&typeof H<"u"){const e=R(H);if(typeof e=="number"&&Number.isFinite(e)){const o=Math.min((typeof d=="number"?d:void 0)??e,Math.max((typeof l=="number"?l:void 0)??e,e));a.current.style.setProperty("--bottom-size",`${o}px`),b(o,{reason:"init"})}}},[]);const v=D;if(t.useEffect(()=>{if(!a.current||typeof v>"u")return;const e=R(v);if(typeof e=="number"&&Number.isFinite(e)){const o=Math.min((typeof d=="number"?d:void 0)??e,Math.max((typeof l=="number"?l:void 0)??e,e));a.current.style.setProperty("--bottom-size",`${o}px`),b(o,{reason:"controlled"})}},[v,l,d,R,b]),f){const e=r.bottomMode==="expanded";return t.createElement(N.Root,{open:e,onOpenChange:n=>r.setBottomMode(n?"expanded":"collapsed")},t.createElement(N.Content,{side:"bottom",style:{padding:0},height:{initial:`${z}px`}},t.createElement(pe,null,t.createElement(N.Title,null,"Bottom panel")),$))}return t.createElement("div",{...oe,ref:re,className:de("rt-ShellBottom",q),"data-mode":r.bottomMode,"data-peek":r.peekTarget==="bottom"||void 0,"data-presentation":r.currentBreakpointReady?g:void 0,"data-open":r.currentBreakpointReady&&ne&&C||void 0,style:{...te,"--bottom-size":`${z}px`,"--bottom-min-size":`${l}px`,"--bottom-max-size":`${d}px`}},t.createElement("div",{className:"rt-ShellBottomContent","data-visible":C||void 0},$),le)});W.displayName="Shell.Bottom",W.Handle=O;export{W as Bottom};
 //# sourceMappingURL=shell-bottom.js.map