@womp/kookie-ui 0.20.0 → 0.22.0

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

@@ -1,4 +1,4 @@
-"use strict";var g=Object.create;var s=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(e,n)=>{for(var t in n)s(e,t,{get:n[t],enumerable:!0})},l=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of R(n))!b.call(e,r)&&r!==t&&s(e,r,{get:()=>n[r],enumerable:!(o=v(n,r))||o.enumerable});return e};var d=(e,n,t)=>(t=e!=null?g(h(e)):{},l(n||!e||!e.__esModule?s(t,"default",{value:e,enumerable:!0}):t,e)),y=e=>l(s({},"__esModule",{value:!0}),e);var C={};w(C,{useToggleState:()=>T});module.exports=y(C);var a=d(require("react"));var i=d(require("react")),u=0;function f(){let e=i.useRef(void 0);return i.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=`
+"use strict";var g=Object.create;var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(e,n)=>{for(var t in n)a(e,t,{get:n[t],enumerable:!0})},l=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of R(n))!b.call(e,r)&&r!==t&&a(e,r,{get:()=>n[r],enumerable:!(o=v(n,r))||o.enumerable});return e};var d=(e,n,t)=>(t=e!=null?g(h(e)):{},l(n||!e||!e.__esModule?a(t,"default",{value:e,enumerable:!0}):t,e)),y=e=>l(a({},"__esModule",{value:!0}),e);var C={};w(C,{useToggleState:()=>T});module.exports=y(C);var u=d(require("react"));var i=d(require("react")),s=0;function f(){let e=i.useRef(void 0);return i.useEffect(()=>{let t=document.getElementById("kui-live-announcer");return t||(t=document.createElement("div"),t.id="kui-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(t)),u++,()=>{if(u--,e.current&&clearTimeout(e.current),u===0){let o=document.getElementById("rt-live-announcer");o&&o.remove()}}},[]),i.useCallback(t=>{let o=document.getElementById("rt-live-announcer");o&&(e.current&&clearTimeout(e.current),o.textContent="",e.current=setTimeout(()=>{o.textContent=t},100))},[])}function T({pressed:e,onPressedChange:n,getAccessibleName:t,componentName:o}){let r=f(),x=a.useRef(!1),p=a.useCallback(c=>{let m=t();r(`${m} ${c?"pressed":"unpressed"}`),n?.(c)},[r,n,t]);return a.useEffect(()=>{},[e,n,o]),{handlePressedChange:p}}
+      `,document.body.appendChild(t)),s++,()=>{if(s--,e.current&&clearTimeout(e.current),s===0){let o=document.getElementById("kui-live-announcer");o&&o.remove()}}},[]),i.useCallback(t=>{let o=document.getElementById("kui-live-announcer");o&&(e.current&&clearTimeout(e.current),o.textContent="",e.current=setTimeout(()=>{o.textContent=t},100))},[])}function T({pressed:e,onPressedChange:n,getAccessibleName:t,componentName:o}){let r=f(),x=u.useRef(!1),p=u.useCallback(c=>{let m=t();r(`${m} ${c?"pressed":"unpressed"}`),n?.(c)},[r,n,t]);return u.useEffect(()=>{},[e,n,o]),{handlePressedChange:p}}
 //# sourceMappingURL=use-toggle-state.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-toggle-state.ts", "../../../src/hooks/use-live-announcer.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", "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,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBCAvB,IAAAC,EAAuB,oBAMnBC,EAAqB,EAMlB,SAASC,GAAmB,CAEjC,IAAMC,EAAmB,SAAkD,MAAS,EAGpF,OAAM,YAAU,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,GAItCH,IAEO,IAAM,CAUX,GARAA,IAGIE,EAAW,SACb,aAAaA,EAAW,OAAO,EAI7BF,IAAuB,EAAG,CAC5B,IAAMI,EAAS,SAAS,eAAe,mBAAmB,EACtDA,GACFA,EAAO,OAAO,CAElB,CACF,CACF,EAAG,CAAC,CAAC,EAEkB,cAAaC,GAAoB,CACtD,IAAMF,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,CD1CO,SAASC,EAAe,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,kBAAAC,EAAmB,cAAAC,CAAc,EAA0B,CACpH,IAAMC,EAAWC,EAAiB,EAG5BC,EAAkB,SAAO,EAAK,EAM9BC,EAA4B,cAC/BC,GAAwB,CACvB,IAAMC,EAAiBP,EAAkB,EAEzCE,EAAS,GAAGK,CAAc,IAAID,EAAa,UAAY,WAAW,EAAE,EAEpEP,IAAkBO,CAAU,CAC9B,EACA,CAACJ,EAAUH,EAAiBC,CAAiB,CAC/C,EAIA,OAAM,YAAU,IAAM,CAStB,EAAG,CAACF,EAASC,EAAiBE,CAAa,CAAC,EAErC,CAAE,oBAAAI,CAAoB,CAC/B",
+  "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: 'Toggle',\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", "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('kui-live-announcer');\n\n    if (!liveRegion) {\n      liveRegion = document.createElement('div');\n      liveRegion.id = 'kui-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('kui-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('kui-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,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBCAvB,IAAAC,EAAuB,oBAMnBC,EAAqB,EAMlB,SAASC,GAAmB,CAEjC,IAAMC,EAAmB,SAAkD,MAAS,EAGpF,OAAM,YAAU,IAAM,CACpB,IAAIC,EAAa,SAAS,eAAe,oBAAoB,EAE7D,OAAKA,IACHA,EAAa,SAAS,cAAc,KAAK,EACzCA,EAAW,GAAK,qBAChBA,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,GAItCH,IAEO,IAAM,CAUX,GARAA,IAGIE,EAAW,SACb,aAAaA,EAAW,OAAO,EAI7BF,IAAuB,EAAG,CAC5B,IAAMI,EAAS,SAAS,eAAe,oBAAoB,EACvDA,GACFA,EAAO,OAAO,CAElB,CACF,CACF,EAAG,CAAC,CAAC,EAEkB,cAAaC,GAAoB,CACtD,IAAMF,EAAa,SAAS,eAAe,oBAAoB,EAC3DA,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,CD1CO,SAASC,EAAe,CAAE,QAAAC,EAAS,gBAAAC,EAAiB,kBAAAC,EAAmB,cAAAC,CAAc,EAA0B,CACpH,IAAMC,EAAWC,EAAiB,EAG5BC,EAAkB,SAAO,EAAK,EAM9BC,EAA4B,cAC/BC,GAAwB,CACvB,IAAMC,EAAiBP,EAAkB,EAEzCE,EAAS,GAAGK,CAAc,IAAID,EAAa,UAAY,WAAW,EAAE,EAEpEP,IAAkBO,CAAU,CAC9B,EACA,CAACJ,EAAUH,EAAiBC,CAAiB,CAC/C,EAIA,OAAM,YAAU,IAAM,CAStB,EAAG,CAACF,EAASC,EAAiBE,CAAa,CAAC,EAErC,CAAE,oBAAAI,CAAoB,CAC/B",
   "names": ["use_toggle_state_exports", "__export", "useToggleState", "__toCommonJS", "React", "React", "liveRegionRefCount", "useLiveAnnouncer", "timeoutRef", "liveRegion", "region", "message", "useToggleState", "pressed", "onPressedChange", "getAccessibleName", "componentName", "announce", "useLiveAnnouncer", "warnedRef", "handlePressedChange", "newPressed", "accessibleName"]
 }