@kushagradhawan/kookie-ui 0.12.0 → 0.13.0

package/dist/cjs/hooks/appearance-script.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The pre-paint half of light and dark mode (see `use-appearance.ts`). Kept in its own module
+ * with no client directive, so a server component such as a Next.js root layout can import the
+ * string and inline it in `<head>`.
+ */
+declare const APPEARANCE_STORAGE_KEY = "kookie-appearance";
+/**
+ * Inline this in `<head>`, before any stylesheet paints, e.g.
+ * `<script dangerouslySetInnerHTML={{ __html: appearanceScript }} />`.
+ *
+ * Storage is read inside its own try/catch: browsers that block site data throw on access,
+ * and that must not skip the stamp. `matchMedia` always answers.
+ */
+declare const appearanceScript: string;
+export { appearanceScript, APPEARANCE_STORAGE_KEY };
+//# sourceMappingURL=appearance-script.d.ts.map

package/dist/cjs/hooks/appearance-script.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance-script.d.ts","sourceRoot":"","sources":["../../../src/hooks/appearance-script.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,QAAA,MAAM,sBAAsB,sBAAsB,CAAC;AAEnD;;;;;;GAMG;AACH,QAAA,MAAM,gBAAgB,QAUhB,CAAC;AAEP,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/cjs/hooks/appearance-script.js

@@ -0,0 +1,12 @@
+"use strict";var c=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var i=(a,e)=>{for(var r in e)c(a,r,{get:e[r],enumerable:!0})},n=(a,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of l(e))!m.call(a,t)&&t!==r&&c(a,t,{get:()=>e[t],enumerable:!(o=s(e,t))||o.enumerable});return a};var p=a=>n(c({},"__esModule",{value:!0}),a);var k={};i(k,{APPEARANCE_STORAGE_KEY:()=>d,appearanceScript:()=>h});module.exports=p(k);var d="kookie-appearance",h=`(function () {
+  var e = document.documentElement;
+  var a = null;
+  try { a = localStorage.getItem(${JSON.stringify(d)}); } catch (err) {}
+  var dark = a === "light" ? false : a === "dark" ? true : matchMedia("(prefers-color-scheme: dark)").matches;
+  var mode = dark ? "dark" : "light";
+  e.classList.remove("light", "dark");
+  e.classList.add(mode);
+  e.setAttribute("data-appearance", mode);
+  e.style.colorScheme = mode;
+})();`;
+//# sourceMappingURL=appearance-script.js.map

package/dist/cjs/hooks/appearance-script.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/appearance-script.ts"],
+  "sourcesContent": ["/**\n * The pre-paint half of light and dark mode (see `use-appearance.ts`). Kept in its own module\n * with no client directive, so a server component such as a Next.js root layout can import the\n * string and inline it in `<head>`.\n */\n\nconst APPEARANCE_STORAGE_KEY = 'kookie-appearance';\n\n/**\n * Inline this in `<head>`, before any stylesheet paints, e.g.\n * `<script dangerouslySetInnerHTML={{ __html: appearanceScript }} />`.\n *\n * Storage is read inside its own try/catch: browsers that block site data throw on access,\n * and that must not skip the stamp. `matchMedia` always answers.\n */\nconst appearanceScript = `(function () {\n  var e = document.documentElement;\n  var a = null;\n  try { a = localStorage.getItem(${JSON.stringify(APPEARANCE_STORAGE_KEY)}); } catch (err) {}\n  var dark = a === \"light\" ? false : a === \"dark\" ? true : matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  var mode = dark ? \"dark\" : \"light\";\n  e.classList.remove(\"light\", \"dark\");\n  e.classList.add(mode);\n  e.setAttribute(\"data-appearance\", mode);\n  e.style.colorScheme = mode;\n})();`;\n\nexport { appearanceScript, APPEARANCE_STORAGE_KEY };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,4BAAAE,EAAA,qBAAAC,IAAA,eAAAC,EAAAJ,GAMA,IAAME,EAAyB,oBASzBC,EAAmB;AAAA;AAAA;AAAA,mCAGU,KAAK,UAAUD,CAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": ["appearance_script_exports", "__export", "APPEARANCE_STORAGE_KEY", "appearanceScript", "__toCommonJS"]
+}

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

@@ -2,4 +2,7 @@ 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';
+export { useAppearance, setAppearance } from './use-appearance.js';
+export { appearanceScript, APPEARANCE_STORAGE_KEY } from './appearance-script.js';
+export type { AppearanceChoice, ResolvedAppearance } from './use-appearance.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;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,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;AACvD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAClF,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/cjs/hooks/index.js

@@ -1,4 +1,4 @@
-"use strict";var L=Object.create;var p=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var A=(e,n)=>{for(var t in n)p(e,t,{get:n[t],enumerable:!0})},R=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of I(n))!S.call(e,r)&&r!==t&&p(e,r,{get:()=>n[r],enumerable:!(o=C(n,r))||o.enumerable});return e};var m=(e,n,t)=>(t=e!=null?L(B(e)):{},R(n||!e||!e.__esModule?p(t,"default",{value:e,enumerable:!0}):t,e)),N=e=>R(p({},"__esModule",{value:!0}),e);var O={};A(O,{useBodyPointerEventsCleanup:()=>T,useLiveAnnouncer:()=>f,useToggleState:()=>w,useTooltipWrapper:()=>x});module.exports=N(O);var c=m(require("react")),b=0;function f(){let e=c.useRef(void 0);return c.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 M=Object.create;var h=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var $=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var G=(e,t)=>{for(var n in t)h(e,n,{get:t[n],enumerable:!0})},x=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Y(t))!D.call(e,r)&&r!==n&&h(e,r,{get:()=>t[r],enumerable:!(o=U(t,r))||o.enumerable});return e};var p=(e,t,n)=>(n=e!=null?M($(e)):{},x(t||!e||!e.__esModule?h(n,"default",{value:e,enumerable:!0}):n,e)),q=e=>x(h({},"__esModule",{value:!0}),e);var V={};G(V,{APPEARANCE_STORAGE_KEY:()=>s,appearanceScript:()=>O,setAppearance:()=>C,useAppearance:()=>_,useBodyPointerEventsCleanup:()=>I,useLiveAnnouncer:()=>y,useToggleState:()=>N,useTooltipWrapper:()=>P});module.exports=q(V);var l=p(require("react")),R=0;function y(){let e=l.useRef(void 0);return l.useEffect(()=>{let n=document.getElementById("rt-live-announcer");return n||(n=document.createElement("div"),n.id="rt-live-announcer",n.setAttribute("aria-live","polite"),n.setAttribute("aria-atomic","true"),n.style.cssText=`
         position: absolute;
         left: -10000px;
         width: 1px;
@@ -6,5 +6,15 @@
         overflow: hidden;
         clip: rect(0, 0, 0, 0);
         white-space: nowrap;
-      `,document.body.appendChild(t)),b++,()=>{if(b--,e.current&&clearTimeout(e.current),b===0){let o=document.getElementById("rt-live-announcer");o&&o.remove()}}},[]),c.useCallback(t=>{let o=document.getElementById("rt-live-announcer");o&&(e.current&&clearTimeout(e.current),o.textContent="",e.current=setTimeout(()=>{o.textContent=t},100))},[])}var h=m(require("react")),g=!1;function T(){h.useEffect(()=>{if(typeof document>"u"||g)return;g=!0;let e=new Set,n=(s,i)=>{let E=setTimeout(()=>{e.delete(E),s()},i);e.add(E)},t=()=>{let s=!!document.querySelector('[role="dialog"][aria-modal="true"], [role="alertdialog"][aria-modal="true"]'),i=!!document.querySelector('[data-radix-popper-content-wrapper], [data-state="open"]');return s||i},o=()=>{document.body.style.pointerEvents==="none"&&(console.log("[KookieUI] Force cleaning stuck pointer-events: none from body"),document.body.style.pointerEvents="",document.body.removeAttribute("data-scroll-locked"),document.body.removeAttribute("data-remove-scroll"),document.body.classList.remove("ReactModal__Body--open"))},r=()=>{document.body.style.pointerEvents==="none"&&!t()&&(console.log("[KookieUI] Safe cleaning stuck pointer-events: none from body"),document.body.style.pointerEvents="")},y=s=>{let i=s.target;i&&!i.closest('[role="dialog"], [role="alertdialog"], [data-radix-popper-content-wrapper]')&&n(o,100)},d=s=>{s.key==="Escape"&&n(o,200)},a=()=>{n(r,50)};document.addEventListener("click",y,!0),document.addEventListener("keydown",d,!0),document.addEventListener("pointerup",a,!0),document.addEventListener("transitionend",a,!0),document.addEventListener("animationend",a,!0);let l=new MutationObserver(()=>{n(r,0)});l.observe(document.body,{childList:!0,subtree:!0,attributes:!0});let k=setInterval(()=>{document.body.style.pointerEvents==="none"&&!t()&&(console.log("[KookieUI] Periodic cleanup of stuck pointer-events"),document.body.style.pointerEvents="")},1e3);return n(r,100),()=>{clearInterval(k),e.forEach(clearTimeout),e.clear(),l.disconnect(),document.removeEventListener("click",y,!0),document.removeEventListener("keydown",d,!0),document.removeEventListener("pointerup",a,!0),document.removeEventListener("transitionend",a,!0),document.removeEventListener("animationend",a,!0),g=!1}},[])}var v=m(require("react"));function x(e){let n=v.useId(),t=!!e,o=v.useMemo(()=>t?{"aria-describedby":n}:{},[t,n]);return{tooltipId:n,hasTooltip:t,accessibilityProps:o}}var u=m(require("react"));function w({pressed:e,onPressedChange:n,getAccessibleName:t,componentName:o}){let r=f(),y=u.useRef(!1),d=u.useCallback(a=>{let l=t();r(`${l} ${a?"pressed":"unpressed"}`),n?.(a)},[r,n,t]);return u.useEffect(()=>{},[e,n,o]),{handlePressedChange:d}}
+      `,document.body.appendChild(n)),R++,()=>{if(R--,e.current&&clearTimeout(e.current),R===0){let o=document.getElementById("rt-live-announcer");o&&o.remove()}}},[]),l.useCallback(n=>{let o=document.getElementById("rt-live-announcer");o&&(e.current&&clearTimeout(e.current),o.textContent="",e.current=setTimeout(()=>{o.textContent=n},100))},[])}var T=p(require("react")),b=!1;function I(){T.useEffect(()=>{if(typeof document>"u"||b)return;b=!0;let e=new Set,t=(c,d)=>{let w=setTimeout(()=>{e.delete(w),c()},d);e.add(w)},n=()=>{let c=!!document.querySelector('[role="dialog"][aria-modal="true"], [role="alertdialog"][aria-modal="true"]'),d=!!document.querySelector('[data-radix-popper-content-wrapper], [data-state="open"]');return c||d},o=()=>{document.body.style.pointerEvents==="none"&&(console.log("[KookieUI] Force cleaning stuck pointer-events: none from body"),document.body.style.pointerEvents="",document.body.removeAttribute("data-scroll-locked"),document.body.removeAttribute("data-remove-scroll"),document.body.classList.remove("ReactModal__Body--open"))},r=()=>{document.body.style.pointerEvents==="none"&&!n()&&(console.log("[KookieUI] Safe cleaning stuck pointer-events: none from body"),document.body.style.pointerEvents="")},i=c=>{let d=c.target;d&&!d.closest('[role="dialog"], [role="alertdialog"], [data-radix-popper-content-wrapper]')&&t(o,100)},v=c=>{c.key==="Escape"&&t(o,200)},a=()=>{t(r,50)};document.addEventListener("click",i,!0),document.addEventListener("keydown",v,!0),document.addEventListener("pointerup",a,!0),document.addEventListener("transitionend",a,!0),document.addEventListener("animationend",a,!0);let f=new MutationObserver(()=>{t(r,0)});f.observe(document.body,{childList:!0,subtree:!0,attributes:!0});let K=setInterval(()=>{document.body.style.pointerEvents==="none"&&!n()&&(console.log("[KookieUI] Periodic cleanup of stuck pointer-events"),document.body.style.pointerEvents="")},1e3);return t(r,100),()=>{clearInterval(K),e.forEach(clearTimeout),e.clear(),f.disconnect(),document.removeEventListener("click",i,!0),document.removeEventListener("keydown",v,!0),document.removeEventListener("pointerup",a,!0),document.removeEventListener("transitionend",a,!0),document.removeEventListener("animationend",a,!0),b=!1}},[])}var g=p(require("react"));function P(e){let t=g.useId(),n=!!e,o=g.useMemo(()=>n?{"aria-describedby":t}:{},[n,t]);return{tooltipId:t,hasTooltip:n,accessibilityProps:o}}var u=p(require("react"));function N({pressed:e,onPressedChange:t,getAccessibleName:n,componentName:o}){let r=y(),i=u.useRef(!1),v=u.useCallback(a=>{let f=n();r(`${f} ${a?"pressed":"unpressed"}`),t?.(a)},[r,t,n]);return u.useEffect(()=>{},[e,t,o]),{handlePressedChange:v}}var B=p(require("react"));var s="kookie-appearance",O=`(function () {
+  var e = document.documentElement;
+  var a = null;
+  try { a = localStorage.getItem(${JSON.stringify(s)}); } catch (err) {}
+  var dark = a === "light" ? false : a === "dark" ? true : matchMedia("(prefers-color-scheme: dark)").matches;
+  var mode = dark ? "dark" : "light";
+  e.classList.remove("light", "dark");
+  e.classList.add(mode);
+  e.setAttribute("data-appearance", mode);
+  e.style.colorScheme = mode;
+})();`;var A=new Set;function k(){for(let e of A)e()}function S(){try{let e=globalThis.localStorage?.getItem(s);return e==="light"||e==="dark"?e:"system"}catch{return"system"}}function E(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function L(e){let t=document.documentElement;t.classList.remove("light","dark"),t.classList.add(e),t.setAttribute("data-appearance",e),t.style.colorScheme=e}function W(){let e=document.documentElement;return e.classList.contains("dark")||e.classList.contains("dark-theme")?"dark":e.classList.contains("light")||e.classList.contains("light-theme")?"light":E()}var m=null;function j(){let e=S(),t=W();return(!m||m.choice!==e||m.resolved!==t)&&(m={choice:e,resolved:t}),m}var F={choice:"system",resolved:"light"};function J(e){A.add(e);let t=window.matchMedia("(prefers-color-scheme: dark)"),n=()=>{S()==="system"&&(L(E()),k())},o=r=>{if(r.key!==s)return;let i=S();L(i==="system"?E():i),k()};return t.addEventListener("change",n),window.addEventListener("storage",o),()=>{A.delete(e),t.removeEventListener("change",n),window.removeEventListener("storage",o)}}function C(e){try{e==="system"?localStorage.removeItem(s):localStorage.setItem(s,e)}catch{}L(e==="system"?E():e),k()}function _(){let{choice:e,resolved:t}=B.useSyncExternalStore(J,j,()=>F);return{choice:e,appearance:t,setAppearance:C}}
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/hooks/index.ts", "../../../src/hooks/use-live-announcer.ts", "../../../src/hooks/use-body-pointer-events-cleanup.ts", "../../../src/hooks/use-tooltip-wrapper.ts", "../../../src/hooks/use-toggle-state.ts"],
-  "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", "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", "import * as React from 'react';\n\nlet cleanupInstalled = false;\n\n/**\n * Hook to cleanup stuck pointer-events: none on document.body\n *\n * This addresses an issue where react-remove-scroll (used by Radix UI Dialog)\n * sometimes fails to restore body pointer-events after dialog closes,\n * leaving the page unclickable.\n */\nexport function useBodyPointerEventsCleanup() {\n  React.useEffect(() => {\n    if (typeof document === 'undefined') return;\n    if (cleanupInstalled) return;\n\n    cleanupInstalled = true;\n\n    // Deferred cleanups are tracked so unmount can cancel the ones still\n    // queued. A timer that outlives the document reaches for `document.body`\n    // after it is gone; under jsdom that surfaces as an unhandled\n    // ReferenceError attributed to whichever test happened to be running.\n    const pending = new Set<ReturnType<typeof setTimeout>>();\n\n    const defer = (fn: () => void, delay: number) => {\n      const id = setTimeout(() => {\n        pending.delete(id);\n        fn();\n      }, delay);\n      pending.add(id);\n    };\n\n    const hasOpenModal = (): boolean => {\n      // Check for open dialogs/alertdialogs\n      const hasDialogs = Boolean(\n        document.querySelector(\n          '[role=\"dialog\"][aria-modal=\"true\"], [role=\"alertdialog\"][aria-modal=\"true\"]',\n        ),\n      );\n\n      // Also check for any Radix overlays that are still mounted\n      const hasRadixOverlays = Boolean(\n        document.querySelector('[data-radix-popper-content-wrapper], [data-state=\"open\"]'),\n      );\n\n      return hasDialogs || hasRadixOverlays;\n    };\n\n    const forceCleanup = () => {\n      // Aggressive cleanup - remove pointer-events regardless\n      if (document.body.style.pointerEvents === 'none') {\n        console.log('[KookieUI] Force cleaning stuck pointer-events: none from body');\n        document.body.style.pointerEvents = '';\n\n        // Also remove any scroll-lock related attributes\n        document.body.removeAttribute('data-scroll-locked');\n        document.body.removeAttribute('data-remove-scroll');\n\n        // Remove any classes that might be causing issues\n        document.body.classList.remove('ReactModal__Body--open');\n      }\n    };\n\n    const safeCleanup = () => {\n      if (document.body.style.pointerEvents === 'none' && !hasOpenModal()) {\n        console.log('[KookieUI] Safe cleaning stuck pointer-events: none from body');\n        document.body.style.pointerEvents = '';\n      }\n    };\n\n    // Force cleanup on any click outside modal content\n    const onDocumentClick = (event: Event) => {\n      const target = event.target as Element;\n      if (\n        target &&\n        !target.closest(\n          '[role=\"dialog\"], [role=\"alertdialog\"], [data-radix-popper-content-wrapper]',\n        )\n      ) {\n        // Clicked outside any modal - force cleanup after a short delay\n        defer(forceCleanup, 100);\n      }\n    };\n\n    // Force cleanup on ESC key\n    const onEscapeKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        defer(forceCleanup, 200);\n      }\n    };\n\n    // Safe cleanup on other interactions\n    const onInteraction = () => {\n      defer(safeCleanup, 50);\n    };\n\n    // Install global listeners\n    document.addEventListener('click', onDocumentClick, true);\n    document.addEventListener('keydown', onEscapeKey, true);\n    document.addEventListener('pointerup', onInteraction, true);\n    document.addEventListener('transitionend', onInteraction, true);\n    document.addEventListener('animationend', onInteraction, true);\n\n    // Watch for DOM changes that might indicate overlay removal\n    const observer = new MutationObserver(() => {\n      defer(safeCleanup, 0);\n    });\n    observer.observe(document.body, { childList: true, subtree: true, attributes: true });\n\n    // Fallback periodic cleanup\n    const intervalId = setInterval(() => {\n      if (document.body.style.pointerEvents === 'none' && !hasOpenModal()) {\n        console.log('[KookieUI] Periodic cleanup of stuck pointer-events');\n        document.body.style.pointerEvents = '';\n      }\n    }, 1000);\n\n    // Initial cleanup\n    defer(safeCleanup, 100);\n\n    // Tear everything down together. The observer is the important one: it\n    // fires while React unmounts the tree, so leaving it connected keeps\n    // queueing work against a document that is about to go away. Releasing the\n    // latch lets a later mount reinstall.\n    return () => {\n      clearInterval(intervalId);\n\n      pending.forEach(clearTimeout);\n      pending.clear();\n\n      observer.disconnect();\n\n      document.removeEventListener('click', onDocumentClick, true);\n      document.removeEventListener('keydown', onEscapeKey, true);\n      document.removeEventListener('pointerup', onInteraction, true);\n      document.removeEventListener('transitionend', onInteraction, true);\n      document.removeEventListener('animationend', onInteraction, true);\n\n      cleanupInstalled = false;\n    };\n  }, []);\n}\n", "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", "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": "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",
-  "names": ["hooks_exports", "__export", "useBodyPointerEventsCleanup", "useLiveAnnouncer", "useToggleState", "useTooltipWrapper", "__toCommonJS", "React", "liveRegionRefCount", "useLiveAnnouncer", "timeoutRef", "liveRegion", "region", "message", "React", "cleanupInstalled", "useBodyPointerEventsCleanup", "pending", "defer", "fn", "delay", "id", "hasOpenModal", "hasDialogs", "hasRadixOverlays", "forceCleanup", "safeCleanup", "onDocumentClick", "event", "target", "onEscapeKey", "onInteraction", "observer", "intervalId", "React", "useTooltipWrapper", "tooltip", "tooltipId", "hasTooltip", "accessibilityProps", "React", "useToggleState", "pressed", "onPressedChange", "getAccessibleName", "componentName", "announce", "useLiveAnnouncer", "warnedRef", "handlePressedChange", "newPressed", "accessibleName"]
+  "sources": ["../../../src/hooks/index.ts", "../../../src/hooks/use-live-announcer.ts", "../../../src/hooks/use-body-pointer-events-cleanup.ts", "../../../src/hooks/use-tooltip-wrapper.ts", "../../../src/hooks/use-toggle-state.ts", "../../../src/hooks/use-appearance.ts", "../../../src/hooks/appearance-script.ts"],
+  "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';\nexport { useAppearance, setAppearance } from './use-appearance.js';\nexport { appearanceScript, APPEARANCE_STORAGE_KEY } from './appearance-script.js';\nexport type { AppearanceChoice, ResolvedAppearance } from './use-appearance.js';\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", "import * as React from 'react';\n\nlet cleanupInstalled = false;\n\n/**\n * Hook to cleanup stuck pointer-events: none on document.body\n *\n * This addresses an issue where react-remove-scroll (used by Radix UI Dialog)\n * sometimes fails to restore body pointer-events after dialog closes,\n * leaving the page unclickable.\n */\nexport function useBodyPointerEventsCleanup() {\n  React.useEffect(() => {\n    if (typeof document === 'undefined') return;\n    if (cleanupInstalled) return;\n\n    cleanupInstalled = true;\n\n    // Deferred cleanups are tracked so unmount can cancel the ones still\n    // queued. A timer that outlives the document reaches for `document.body`\n    // after it is gone; under jsdom that surfaces as an unhandled\n    // ReferenceError attributed to whichever test happened to be running.\n    const pending = new Set<ReturnType<typeof setTimeout>>();\n\n    const defer = (fn: () => void, delay: number) => {\n      const id = setTimeout(() => {\n        pending.delete(id);\n        fn();\n      }, delay);\n      pending.add(id);\n    };\n\n    const hasOpenModal = (): boolean => {\n      // Check for open dialogs/alertdialogs\n      const hasDialogs = Boolean(\n        document.querySelector(\n          '[role=\"dialog\"][aria-modal=\"true\"], [role=\"alertdialog\"][aria-modal=\"true\"]',\n        ),\n      );\n\n      // Also check for any Radix overlays that are still mounted\n      const hasRadixOverlays = Boolean(\n        document.querySelector('[data-radix-popper-content-wrapper], [data-state=\"open\"]'),\n      );\n\n      return hasDialogs || hasRadixOverlays;\n    };\n\n    const forceCleanup = () => {\n      // Aggressive cleanup - remove pointer-events regardless\n      if (document.body.style.pointerEvents === 'none') {\n        console.log('[KookieUI] Force cleaning stuck pointer-events: none from body');\n        document.body.style.pointerEvents = '';\n\n        // Also remove any scroll-lock related attributes\n        document.body.removeAttribute('data-scroll-locked');\n        document.body.removeAttribute('data-remove-scroll');\n\n        // Remove any classes that might be causing issues\n        document.body.classList.remove('ReactModal__Body--open');\n      }\n    };\n\n    const safeCleanup = () => {\n      if (document.body.style.pointerEvents === 'none' && !hasOpenModal()) {\n        console.log('[KookieUI] Safe cleaning stuck pointer-events: none from body');\n        document.body.style.pointerEvents = '';\n      }\n    };\n\n    // Force cleanup on any click outside modal content\n    const onDocumentClick = (event: Event) => {\n      const target = event.target as Element;\n      if (\n        target &&\n        !target.closest(\n          '[role=\"dialog\"], [role=\"alertdialog\"], [data-radix-popper-content-wrapper]',\n        )\n      ) {\n        // Clicked outside any modal - force cleanup after a short delay\n        defer(forceCleanup, 100);\n      }\n    };\n\n    // Force cleanup on ESC key\n    const onEscapeKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        defer(forceCleanup, 200);\n      }\n    };\n\n    // Safe cleanup on other interactions\n    const onInteraction = () => {\n      defer(safeCleanup, 50);\n    };\n\n    // Install global listeners\n    document.addEventListener('click', onDocumentClick, true);\n    document.addEventListener('keydown', onEscapeKey, true);\n    document.addEventListener('pointerup', onInteraction, true);\n    document.addEventListener('transitionend', onInteraction, true);\n    document.addEventListener('animationend', onInteraction, true);\n\n    // Watch for DOM changes that might indicate overlay removal\n    const observer = new MutationObserver(() => {\n      defer(safeCleanup, 0);\n    });\n    observer.observe(document.body, { childList: true, subtree: true, attributes: true });\n\n    // Fallback periodic cleanup\n    const intervalId = setInterval(() => {\n      if (document.body.style.pointerEvents === 'none' && !hasOpenModal()) {\n        console.log('[KookieUI] Periodic cleanup of stuck pointer-events');\n        document.body.style.pointerEvents = '';\n      }\n    }, 1000);\n\n    // Initial cleanup\n    defer(safeCleanup, 100);\n\n    // Tear everything down together. The observer is the important one: it\n    // fires while React unmounts the tree, so leaving it connected keeps\n    // queueing work against a document that is about to go away. Releasing the\n    // latch lets a later mount reinstall.\n    return () => {\n      clearInterval(intervalId);\n\n      pending.forEach(clearTimeout);\n      pending.clear();\n\n      observer.disconnect();\n\n      document.removeEventListener('click', onDocumentClick, true);\n      document.removeEventListener('keydown', onEscapeKey, true);\n      document.removeEventListener('pointerup', onInteraction, true);\n      document.removeEventListener('transitionend', onInteraction, true);\n      document.removeEventListener('animationend', onInteraction, true);\n\n      cleanupInstalled = false;\n    };\n  }, []);\n}\n", "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", "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", "'use client';\n\nimport * as React from 'react';\nimport { APPEARANCE_STORAGE_KEY } from './appearance-script.js';\n\n/**\n * Light and dark mode, decided before the first paint and kept on `<html>`.\n *\n * The server cannot know the visitor's mode, so `appearanceScript` runs synchronously in\n * `<head>`: the stored choice first, `prefers-color-scheme` otherwise. It writes the `light`\n * or `dark` class (which every token and component stylesheet already keys off) and\n * `data-appearance` on `<html>`. The root `<Theme>` keeps `appearance=\"inherit\"`, so it\n * writes no class of its own and `<html>` is the one source of truth. Nested themes and\n * portals inherit it from there.\n *\n * `useAppearance` is the client half: an external store over `<html>` and the same storage\n * key. It never mirrors the mode into React state that could disagree with the DOM.\n */\n\ntype AppearanceChoice = 'system' | 'light' | 'dark';\ntype ResolvedAppearance = 'light' | 'dark';\n\nconst listeners = new Set<() => void>();\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction readChoice(): AppearanceChoice {\n  try {\n    const value = globalThis.localStorage?.getItem(APPEARANCE_STORAGE_KEY);\n    return value === 'light' || value === 'dark' ? value : 'system';\n  } catch {\n    return 'system';\n  }\n}\n\nfunction systemAppearance(): ResolvedAppearance {\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\nfunction stamp(mode: ResolvedAppearance) {\n  const root = document.documentElement;\n  root.classList.remove('light', 'dark');\n  root.classList.add(mode);\n  root.setAttribute('data-appearance', mode);\n  root.style.colorScheme = mode;\n}\n\nfunction readResolved(): ResolvedAppearance {\n  const root = document.documentElement;\n  if (root.classList.contains('dark') || root.classList.contains('dark-theme')) return 'dark';\n  if (root.classList.contains('light') || root.classList.contains('light-theme')) return 'light';\n  return systemAppearance();\n}\n\nlet snapshot: { choice: AppearanceChoice; resolved: ResolvedAppearance } | null = null;\n\nfunction getSnapshot() {\n  const choice = readChoice();\n  const resolved = readResolved();\n  if (!snapshot || snapshot.choice !== choice || snapshot.resolved !== resolved) {\n    snapshot = { choice, resolved };\n  }\n  return snapshot;\n}\n\nconst serverSnapshot = { choice: 'system' as AppearanceChoice, resolved: 'light' as ResolvedAppearance };\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  // With no stored choice, follow the system as it changes.\n  const onSystemChange = () => {\n    if (readChoice() === 'system') {\n      stamp(systemAppearance());\n      emit();\n    }\n  };\n  // Another tab changed the choice.\n  const onStorage = (event: StorageEvent) => {\n    if (event.key !== APPEARANCE_STORAGE_KEY) return;\n    const choice = readChoice();\n    stamp(choice === 'system' ? systemAppearance() : choice);\n    emit();\n  };\n  media.addEventListener('change', onSystemChange);\n  window.addEventListener('storage', onStorage);\n  return () => {\n    listeners.delete(listener);\n    media.removeEventListener('change', onSystemChange);\n    window.removeEventListener('storage', onStorage);\n  };\n}\n\n/** Applies a choice to `<html>` and stores it. The change applies even if storage is blocked. */\nfunction setAppearance(choice: AppearanceChoice) {\n  try {\n    if (choice === 'system') localStorage.removeItem(APPEARANCE_STORAGE_KEY);\n    else localStorage.setItem(APPEARANCE_STORAGE_KEY, choice);\n  } catch {\n    // Storage is blocked: the mode still changes for this page.\n  }\n  stamp(choice === 'system' ? systemAppearance() : choice);\n  emit();\n}\n\n/**\n * The page's light or dark mode. `choice` is what the person picked (`system` when they\n * haven't); `appearance` is what is showing. On the server and in the first client render it\n * reports `system` / `light`, then corrects without a hydration mismatch.\n */\nfunction useAppearance() {\n  const { choice, resolved } = React.useSyncExternalStore(subscribe, getSnapshot, () => serverSnapshot);\n  return { choice, appearance: resolved, setAppearance } as const;\n}\n\nexport { useAppearance, setAppearance };\nexport type { AppearanceChoice, ResolvedAppearance };\n", "/**\n * The pre-paint half of light and dark mode (see `use-appearance.ts`). Kept in its own module\n * with no client directive, so a server component such as a Next.js root layout can import the\n * string and inline it in `<head>`.\n */\n\nconst APPEARANCE_STORAGE_KEY = 'kookie-appearance';\n\n/**\n * Inline this in `<head>`, before any stylesheet paints, e.g.\n * `<script dangerouslySetInnerHTML={{ __html: appearanceScript }} />`.\n *\n * Storage is read inside its own try/catch: browsers that block site data throw on access,\n * and that must not skip the stamp. `matchMedia` always answers.\n */\nconst appearanceScript = `(function () {\n  var e = document.documentElement;\n  var a = null;\n  try { a = localStorage.getItem(${JSON.stringify(APPEARANCE_STORAGE_KEY)}); } catch (err) {}\n  var dark = a === \"light\" ? false : a === \"dark\" ? true : matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  var mode = dark ? \"dark\" : \"light\";\n  e.classList.remove(\"light\", \"dark\");\n  e.classList.add(mode);\n  e.setAttribute(\"data-appearance\", mode);\n  e.style.colorScheme = mode;\n})();`;\n\nexport { appearanceScript, APPEARANCE_STORAGE_KEY };\n"],
+  "mappings": "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",
+  "names": ["hooks_exports", "__export", "APPEARANCE_STORAGE_KEY", "appearanceScript", "setAppearance", "useAppearance", "useBodyPointerEventsCleanup", "useLiveAnnouncer", "useToggleState", "useTooltipWrapper", "__toCommonJS", "React", "liveRegionRefCount", "useLiveAnnouncer", "timeoutRef", "liveRegion", "region", "message", "React", "cleanupInstalled", "useBodyPointerEventsCleanup", "pending", "defer", "fn", "delay", "id", "hasOpenModal", "hasDialogs", "hasRadixOverlays", "forceCleanup", "safeCleanup", "onDocumentClick", "event", "target", "onEscapeKey", "onInteraction", "observer", "intervalId", "React", "useTooltipWrapper", "tooltip", "tooltipId", "hasTooltip", "accessibilityProps", "React", "useToggleState", "pressed", "onPressedChange", "getAccessibleName", "componentName", "announce", "useLiveAnnouncer", "warnedRef", "handlePressedChange", "newPressed", "accessibleName", "React", "APPEARANCE_STORAGE_KEY", "appearanceScript", "listeners", "emit", "listener", "readChoice", "value", "APPEARANCE_STORAGE_KEY", "systemAppearance", "stamp", "mode", "root", "readResolved", "snapshot", "getSnapshot", "choice", "resolved", "serverSnapshot", "subscribe", "media", "onSystemChange", "onStorage", "event", "setAppearance", "useAppearance"]
 }

package/dist/cjs/hooks/use-appearance.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Light and dark mode, decided before the first paint and kept on `<html>`.
+ *
+ * The server cannot know the visitor's mode, so `appearanceScript` runs synchronously in
+ * `<head>`: the stored choice first, `prefers-color-scheme` otherwise. It writes the `light`
+ * or `dark` class (which every token and component stylesheet already keys off) and
+ * `data-appearance` on `<html>`. The root `<Theme>` keeps `appearance="inherit"`, so it
+ * writes no class of its own and `<html>` is the one source of truth. Nested themes and
+ * portals inherit it from there.
+ *
+ * `useAppearance` is the client half: an external store over `<html>` and the same storage
+ * key. It never mirrors the mode into React state that could disagree with the DOM.
+ */
+type AppearanceChoice = 'system' | 'light' | 'dark';
+type ResolvedAppearance = 'light' | 'dark';
+/** Applies a choice to `<html>` and stores it. The change applies even if storage is blocked. */
+declare function setAppearance(choice: AppearanceChoice): void;
+/**
+ * The page's light or dark mode. `choice` is what the person picked (`system` when they
+ * haven't); `appearance` is what is showing. On the server and in the first client render it
+ * reports `system` / `light`, then corrects without a hydration mismatch.
+ */
+declare function useAppearance(): {
+    readonly choice: AppearanceChoice;
+    readonly appearance: ResolvedAppearance;
+    readonly setAppearance: typeof setAppearance;
+};
+export { useAppearance, setAppearance };
+export type { AppearanceChoice, ResolvedAppearance };
+//# sourceMappingURL=use-appearance.d.ts.map

package/dist/cjs/hooks/use-appearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-appearance.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-appearance.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;GAYG;AAEH,KAAK,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACpD,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM,CAAC;AA2E3C,iGAAiG;AACjG,iBAAS,aAAa,CAAC,MAAM,EAAE,gBAAgB,QAS9C;AAED;;;;GAIG;AACH,iBAAS,aAAa;;;;EAGrB;AAED,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/cjs/hooks/use-appearance.js

@@ -0,0 +1,12 @@
+"use strict";"use client";var A=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var a in t)c(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of y(t))!S.call(e,r)&&r!==a&&c(e,r,{get:()=>t[r],enumerable:!(o=f(t,r))||o.enumerable});return e};var R=(e,t,a)=>(a=e!=null?A(k(e)):{},u(t||!e||!e.__esModule?c(a,"default",{value:e,enumerable:!0}):a,e)),L=e=>u(c({},"__esModule",{value:!0}),e);var P={};E(P,{setAppearance:()=>g,useAppearance:()=>I});module.exports=L(P);var v=R(require("react"));var s="kookie-appearance",M=`(function () {
+  var e = document.documentElement;
+  var a = null;
+  try { a = localStorage.getItem(${JSON.stringify(s)}); } catch (err) {}
+  var dark = a === "light" ? false : a === "dark" ? true : matchMedia("(prefers-color-scheme: dark)").matches;
+  var mode = dark ? "dark" : "light";
+  e.classList.remove("light", "dark");
+  e.classList.add(mode);
+  e.setAttribute("data-appearance", mode);
+  e.style.colorScheme = mode;
+})();`;var l=new Set;function d(){for(let e of l)e()}function p(){try{let e=globalThis.localStorage?.getItem(s);return e==="light"||e==="dark"?e:"system"}catch{return"system"}}function i(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function m(e){let t=document.documentElement;t.classList.remove("light","dark"),t.classList.add(e),t.setAttribute("data-appearance",e),t.style.colorScheme=e}function C(){let e=document.documentElement;return e.classList.contains("dark")||e.classList.contains("dark-theme")?"dark":e.classList.contains("light")||e.classList.contains("light-theme")?"light":i()}var n=null;function w(){let e=p(),t=C();return(!n||n.choice!==e||n.resolved!==t)&&(n={choice:e,resolved:t}),n}var b={choice:"system",resolved:"light"};function x(e){l.add(e);let t=window.matchMedia("(prefers-color-scheme: dark)"),a=()=>{p()==="system"&&(m(i()),d())},o=r=>{if(r.key!==s)return;let h=p();m(h==="system"?i():h),d()};return t.addEventListener("change",a),window.addEventListener("storage",o),()=>{l.delete(e),t.removeEventListener("change",a),window.removeEventListener("storage",o)}}function g(e){try{e==="system"?localStorage.removeItem(s):localStorage.setItem(s,e)}catch{}m(e==="system"?i():e),d()}function I(){let{choice:e,resolved:t}=v.useSyncExternalStore(x,w,()=>b);return{choice:e,appearance:t,setAppearance:g}}
+//# sourceMappingURL=use-appearance.js.map

package/dist/cjs/hooks/use-appearance.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-appearance.ts", "../../../src/hooks/appearance-script.ts"],
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport { APPEARANCE_STORAGE_KEY } from './appearance-script.js';\n\n/**\n * Light and dark mode, decided before the first paint and kept on `<html>`.\n *\n * The server cannot know the visitor's mode, so `appearanceScript` runs synchronously in\n * `<head>`: the stored choice first, `prefers-color-scheme` otherwise. It writes the `light`\n * or `dark` class (which every token and component stylesheet already keys off) and\n * `data-appearance` on `<html>`. The root `<Theme>` keeps `appearance=\"inherit\"`, so it\n * writes no class of its own and `<html>` is the one source of truth. Nested themes and\n * portals inherit it from there.\n *\n * `useAppearance` is the client half: an external store over `<html>` and the same storage\n * key. It never mirrors the mode into React state that could disagree with the DOM.\n */\n\ntype AppearanceChoice = 'system' | 'light' | 'dark';\ntype ResolvedAppearance = 'light' | 'dark';\n\nconst listeners = new Set<() => void>();\n\nfunction emit() {\n  for (const listener of listeners) listener();\n}\n\nfunction readChoice(): AppearanceChoice {\n  try {\n    const value = globalThis.localStorage?.getItem(APPEARANCE_STORAGE_KEY);\n    return value === 'light' || value === 'dark' ? value : 'system';\n  } catch {\n    return 'system';\n  }\n}\n\nfunction systemAppearance(): ResolvedAppearance {\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\nfunction stamp(mode: ResolvedAppearance) {\n  const root = document.documentElement;\n  root.classList.remove('light', 'dark');\n  root.classList.add(mode);\n  root.setAttribute('data-appearance', mode);\n  root.style.colorScheme = mode;\n}\n\nfunction readResolved(): ResolvedAppearance {\n  const root = document.documentElement;\n  if (root.classList.contains('dark') || root.classList.contains('dark-theme')) return 'dark';\n  if (root.classList.contains('light') || root.classList.contains('light-theme')) return 'light';\n  return systemAppearance();\n}\n\nlet snapshot: { choice: AppearanceChoice; resolved: ResolvedAppearance } | null = null;\n\nfunction getSnapshot() {\n  const choice = readChoice();\n  const resolved = readResolved();\n  if (!snapshot || snapshot.choice !== choice || snapshot.resolved !== resolved) {\n    snapshot = { choice, resolved };\n  }\n  return snapshot;\n}\n\nconst serverSnapshot = { choice: 'system' as AppearanceChoice, resolved: 'light' as ResolvedAppearance };\n\nfunction subscribe(listener: () => void) {\n  listeners.add(listener);\n  const media = window.matchMedia('(prefers-color-scheme: dark)');\n  // With no stored choice, follow the system as it changes.\n  const onSystemChange = () => {\n    if (readChoice() === 'system') {\n      stamp(systemAppearance());\n      emit();\n    }\n  };\n  // Another tab changed the choice.\n  const onStorage = (event: StorageEvent) => {\n    if (event.key !== APPEARANCE_STORAGE_KEY) return;\n    const choice = readChoice();\n    stamp(choice === 'system' ? systemAppearance() : choice);\n    emit();\n  };\n  media.addEventListener('change', onSystemChange);\n  window.addEventListener('storage', onStorage);\n  return () => {\n    listeners.delete(listener);\n    media.removeEventListener('change', onSystemChange);\n    window.removeEventListener('storage', onStorage);\n  };\n}\n\n/** Applies a choice to `<html>` and stores it. The change applies even if storage is blocked. */\nfunction setAppearance(choice: AppearanceChoice) {\n  try {\n    if (choice === 'system') localStorage.removeItem(APPEARANCE_STORAGE_KEY);\n    else localStorage.setItem(APPEARANCE_STORAGE_KEY, choice);\n  } catch {\n    // Storage is blocked: the mode still changes for this page.\n  }\n  stamp(choice === 'system' ? systemAppearance() : choice);\n  emit();\n}\n\n/**\n * The page's light or dark mode. `choice` is what the person picked (`system` when they\n * haven't); `appearance` is what is showing. On the server and in the first client render it\n * reports `system` / `light`, then corrects without a hydration mismatch.\n */\nfunction useAppearance() {\n  const { choice, resolved } = React.useSyncExternalStore(subscribe, getSnapshot, () => serverSnapshot);\n  return { choice, appearance: resolved, setAppearance } as const;\n}\n\nexport { useAppearance, setAppearance };\nexport type { AppearanceChoice, ResolvedAppearance };\n", "/**\n * The pre-paint half of light and dark mode (see `use-appearance.ts`). Kept in its own module\n * with no client directive, so a server component such as a Next.js root layout can import the\n * string and inline it in `<head>`.\n */\n\nconst APPEARANCE_STORAGE_KEY = 'kookie-appearance';\n\n/**\n * Inline this in `<head>`, before any stylesheet paints, e.g.\n * `<script dangerouslySetInnerHTML={{ __html: appearanceScript }} />`.\n *\n * Storage is read inside its own try/catch: browsers that block site data throw on access,\n * and that must not skip the stamp. `matchMedia` always answers.\n */\nconst appearanceScript = `(function () {\n  var e = document.documentElement;\n  var a = null;\n  try { a = localStorage.getItem(${JSON.stringify(APPEARANCE_STORAGE_KEY)}); } catch (err) {}\n  var dark = a === \"light\" ? false : a === \"dark\" ? true : matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  var mode = dark ? \"dark\" : \"light\";\n  e.classList.remove(\"light\", \"dark\");\n  e.classList.add(mode);\n  e.setAttribute(\"data-appearance\", mode);\n  e.style.colorScheme = mode;\n})();`;\n\nexport { appearanceScript, APPEARANCE_STORAGE_KEY };\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,EAAA,kBAAAC,IAAA,eAAAC,EAAAJ,GAEA,IAAAK,EAAuB,oBCIvB,IAAMC,EAAyB,oBASzBC,EAAmB;AAAA;AAAA;AAAA,mCAGU,KAAK,UAAUD,CAAsB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ODIzE,IAAME,EAAY,IAAI,IAEtB,SAASC,GAAO,CACd,QAAWC,KAAYF,EAAWE,EAAS,CAC7C,CAEA,SAASC,GAA+B,CACtC,GAAI,CACF,IAAMC,EAAQ,WAAW,cAAc,QAAQC,CAAsB,EACrE,OAAOD,IAAU,SAAWA,IAAU,OAASA,EAAQ,QACzD,MAAQ,CACN,MAAO,QACT,CACF,CAEA,SAASE,GAAuC,CAC9C,OAAO,OAAO,WAAW,8BAA8B,EAAE,QAAU,OAAS,OAC9E,CAEA,SAASC,EAAMC,EAA0B,CACvC,IAAMC,EAAO,SAAS,gBACtBA,EAAK,UAAU,OAAO,QAAS,MAAM,EACrCA,EAAK,UAAU,IAAID,CAAI,EACvBC,EAAK,aAAa,kBAAmBD,CAAI,EACzCC,EAAK,MAAM,YAAcD,CAC3B,CAEA,SAASE,GAAmC,CAC1C,IAAMD,EAAO,SAAS,gBACtB,OAAIA,EAAK,UAAU,SAAS,MAAM,GAAKA,EAAK,UAAU,SAAS,YAAY,EAAU,OACjFA,EAAK,UAAU,SAAS,OAAO,GAAKA,EAAK,UAAU,SAAS,aAAa,EAAU,QAChFH,EAAiB,CAC1B,CAEA,IAAIK,EAA8E,KAElF,SAASC,GAAc,CACrB,IAAMC,EAASV,EAAW,EACpBW,EAAWJ,EAAa,EAC9B,OAAI,CAACC,GAAYA,EAAS,SAAWE,GAAUF,EAAS,WAAaG,KACnEH,EAAW,CAAE,OAAAE,EAAQ,SAAAC,CAAS,GAEzBH,CACT,CAEA,IAAMI,EAAiB,CAAE,OAAQ,SAA8B,SAAU,OAA8B,EAEvG,SAASC,EAAUd,EAAsB,CACvCF,EAAU,IAAIE,CAAQ,EACtB,IAAMe,EAAQ,OAAO,WAAW,8BAA8B,EAExDC,EAAiB,IAAM,CACvBf,EAAW,IAAM,WACnBI,EAAMD,EAAiB,CAAC,EACxBL,EAAK,EAET,EAEMkB,EAAaC,GAAwB,CACzC,GAAIA,EAAM,MAAQf,EAAwB,OAC1C,IAAMQ,EAASV,EAAW,EAC1BI,EAAMM,IAAW,SAAWP,EAAiB,EAAIO,CAAM,EACvDZ,EAAK,CACP,EACA,OAAAgB,EAAM,iBAAiB,SAAUC,CAAc,EAC/C,OAAO,iBAAiB,UAAWC,CAAS,EACrC,IAAM,CACXnB,EAAU,OAAOE,CAAQ,EACzBe,EAAM,oBAAoB,SAAUC,CAAc,EAClD,OAAO,oBAAoB,UAAWC,CAAS,CACjD,CACF,CAGA,SAASE,EAAcR,EAA0B,CAC/C,GAAI,CACEA,IAAW,SAAU,aAAa,WAAWR,CAAsB,EAClE,aAAa,QAAQA,EAAwBQ,CAAM,CAC1D,MAAQ,CAER,CACAN,EAAMM,IAAW,SAAWP,EAAiB,EAAIO,CAAM,EACvDZ,EAAK,CACP,CAOA,SAASqB,GAAgB,CACvB,GAAM,CAAE,OAAAT,EAAQ,SAAAC,CAAS,EAAU,uBAAqBE,EAAWJ,EAAa,IAAMG,CAAc,EACpG,MAAO,CAAE,OAAAF,EAAQ,WAAYC,EAAU,cAAAO,CAAc,CACvD",
+  "names": ["use_appearance_exports", "__export", "setAppearance", "useAppearance", "__toCommonJS", "React", "APPEARANCE_STORAGE_KEY", "appearanceScript", "listeners", "emit", "listener", "readChoice", "value", "APPEARANCE_STORAGE_KEY", "systemAppearance", "stamp", "mode", "root", "readResolved", "snapshot", "getSnapshot", "choice", "resolved", "serverSnapshot", "subscribe", "media", "onSystemChange", "onStorage", "event", "setAppearance", "useAppearance"]
+}