npm - @fremtind/jokul - Versions diffs - 5.0.0-next.0 → 5.0.0-next.10 - Mend

@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (739) hide show

package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../~~core/~~tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/*\n Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n \n @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n isOpen: boolean,\n options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n const wasOpen = usePreviousValue(isOpen);\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const display = options?.display \|\| defaultDisplay;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n function handleTransitionEnd(event: TransitionEvent) {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n if (isOpen) {\n element.removeAttribute(\"style\");\n } else {\n element.removeAttribute(\"style\");\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef);\n }\n }\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n // Ikke kjør animasjonen hvis elementet ikke er rendret,\n // eller hvis det er første render.\n if (!element \|\| wasOpen === undefined) {\n return;\n }\n\n if (!isOpen) {\n element.style.display = \"none\";\n if (!wasOpen) {\n // Første render eller rerender med isOpen false\n return;\n }\n } else if (isOpen && wasOpen) {\n // Re-render etter å ha vært lukket, men forblitt åpen.\n return;\n }\n\n options?.onTransitionStart?.(isOpen, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n } else {\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n element.style.transition = transition;\n element.style.display = display;\n element.style.overflow = \"hidden\";\n\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n element.style.height = \"0\";\n element.style.height = `${element.scrollHeight}px`;\n } else {\n // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n // style: height: 0; display: block; overflow:hidden\n if (element.scrollHeight === 0) {\n element.removeAttribute(\"style\");\n return;\n }\n\n element.style.height = `${element.scrollHeight}px`;\n\n raf1.current = requestAnimationFrame(() => {\n raf2.current = requestAnimationFrame(() => {\n element.style.height = `${0}px`;\n });\n });\n }\n }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isOpen\n useEffect(() => {\n runAnimation();\n }, [isOpen, runAnimation]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [isOpen]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, []);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","onTransitionEnd","runAnimation","useCallback","onTransitionStart","onFirstVisible","overflow","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"~~wQAiBO~~,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAUC,EAAiBH,GAC3BI,EAASH,GAASG,QAfN,WAgBZC,EAASJ,GAASI,QAfN,aAgBZC,EAAUL,GAASK,SAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,GACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAE5BL,GAASsB,kBAAkBvB,EAAQe,GAE3C,CAEA,MAAMS,EAAeC,EAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAI3B,GAAKD,QAAuB,IAAZhB,EAIhB,CAAA,GAAKF,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFAD,GAASyB,oBAAoB1B,EAAQe,GAEjCL,EAQA,OAPAQ,EAAQG,gBAAgB,SACpBrB,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAElCG,EAAQI,MAAMhB,QAAU,YAE5BL,GAASsB,kBAAkBvB,EAAQe,GAQvC,GAJAG,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMM,SAAW,SAErB5B,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAClCG,EAAQI,MAAMO,OAAS,IACvBX,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,qBAC/B,CAIH,GAA6B,IAAzBZ,EAAQY,aAER,YADAZ,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,iBAElClB,EAAKO,QAAUY,sBAAsB,KACjCjB,EAAKK,QAAUY,sBAAsB,KACjCb,EAAQI,MAAMO,OAAS,SAGnC,CAAA,GACD,CAAC7B,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAGhE,OAAA0B,EAAU,KACNR,KACD,CAACxB,EAAQwB,IAGZQ,EAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACAA,EAAQgB,oBACJ,gBACAlB,KAIb,CAAChB,IAEJgC,EAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAACrB,EAAYS,EACxB"}
1	+ {"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/*\n Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n \n @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n isOpen: boolean,\n options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n const wasOpen = usePreviousValue(isOpen);\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const display = options?.display \|\| defaultDisplay;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n function handleTransitionEnd(event: TransitionEvent) {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n if (isOpen) {\n element.removeAttribute(\"style\");\n } else {\n element.removeAttribute(\"style\");\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef);\n }\n }\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n // Ikke kjør animasjonen hvis elementet ikke er rendret,\n // eller hvis det er første render.\n if (!element \|\| wasOpen === undefined) {\n return;\n }\n\n if (!isOpen) {\n element.style.display = \"none\";\n if (!wasOpen) {\n // Første render eller rerender med isOpen false\n return;\n }\n } else if (isOpen && wasOpen) {\n // Re-render etter å ha vært lukket, men forblitt åpen.\n return;\n }\n\n options?.onTransitionStart?.(isOpen, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n } else {\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n element.style.transition = transition;\n element.style.display = display;\n element.style.overflow = \"hidden\";\n\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n element.style.height = \"0\";\n element.style.height = `${element.scrollHeight}px`;\n } else {\n // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n // style: height: 0; display: block; overflow:hidden\n if (element.scrollHeight === 0) {\n element.removeAttribute(\"style\");\n return;\n }\n\n element.style.height = `${element.scrollHeight}px`;\n\n raf1.current = requestAnimationFrame(() => {\n raf2.current = requestAnimationFrame(() => {\n element.style.height = `${0}px`;\n });\n });\n }\n }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isOpen\n useEffect(() => {\n runAnimation();\n }, [isOpen, runAnimation]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [isOpen]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, []);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","onTransitionEnd","runAnimation","useCallback","onTransitionStart","onFirstVisible","overflow","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"mQAiBO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAUC,EAAiBH,GAC3BI,EAASH,GAASG,QAfN,WAgBZC,EAASJ,GAASI,QAfN,aAgBZC,EAAUL,GAASK,SAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,GACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAE5BL,GAASsB,kBAAkBvB,EAAQe,GAE3C,CAEA,MAAMS,EAAeC,EAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAI3B,GAAKD,QAAuB,IAAZhB,EAIhB,CAAA,GAAKF,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFAD,GAASyB,oBAAoB1B,EAAQe,GAEjCL,EAQA,OAPAQ,EAAQG,gBAAgB,SACpBrB,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAElCG,EAAQI,MAAMhB,QAAU,YAE5BL,GAASsB,kBAAkBvB,EAAQe,GAQvC,GAJAG,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMM,SAAW,SAErB5B,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAClCG,EAAQI,MAAMO,OAAS,IACvBX,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,qBAC/B,CAIH,GAA6B,IAAzBZ,EAAQY,aAER,YADAZ,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,iBAElClB,EAAKO,QAAUY,sBAAsB,KACjCjB,EAAKK,QAAUY,sBAAsB,KACjCb,EAAQI,MAAMO,OAAS,SAGnC,CAAA,GACD,CAAC7B,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAGhE,OAAA0B,EAAU,KACNR,KACD,CAACxB,EAAQwB,IAGZQ,EAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACAA,EAAQgB,oBACJ,gBACAlB,KAIb,CAAChB,IAEJgC,EAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAACrB,EAAYS,EACxB"}

package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../core/tokens.js";import{useBrowserPreferences as s}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as o}from"../usePreviousValue/usePreviousValue.js";function i(i,a){const u=o(i),c=a?.easing||"standard",d=a?.timing||"productive",l=`${n.motion.timing[d]} height ${n.motion.easing[c]}`,{prefersReducedMotion:m}=s(),p=e(),y=e(),f=e(null),g=t(e=>{const t=f.current;t&&e.target===t&&(t.removeAttribute("style"),a?.onTransitionEnd?.(i,f))},[a,i]),h=t(()=>{const e=f.current;if(e&&(void 0===u&&(e.dataset.expanded=i?"true":"false"),!(!i&&!u||i&&u))){if(a?.onTransitionStart?.(i,f),m)return e.removeAttribute("style"),e.dataset.expanded=i?"true":"false",void a?.onTransitionEnd?.(i,f);i?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.style.setProperty("height",`${e}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${o}px`),s.dataset.expanded="true"})})}(f,l,p,y):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.dataset.expanded="true",s.style.setProperty("height",`${o}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${e}px`),s.dataset.expanded="false"})})}(f,l,p,y)}},[u,i,a,m,l]);return r(()=>{h()},[i,h]),r(()=>{const e=f.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}},[i]),r(()=>{const e=p.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[f,h]}export{i as useAnimatedHeightBetween};
+import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../tokens.js";import{useBrowserPreferences as s}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as o}from"../usePreviousValue/usePreviousValue.js";function i(i,a){const u=o(i),c=a?.easing||"standard",d=a?.timing||"productive",l=`${n.motion.timing[d]} height ${n.motion.easing[c]}`,{prefersReducedMotion:m}=s(),p=e(),y=e(),f=e(null),g=t(e=>{const t=f.current;t&&e.target===t&&(t.removeAttribute("style"),a?.onTransitionEnd?.(i,f))},[a,i]),h=t(()=>{const e=f.current;if(e&&(void 0===u&&(e.dataset.expanded=i?"true":"false"),!(!i&&!u||i&&u))){if(a?.onTransitionStart?.(i,f),m)return e.removeAttribute("style"),e.dataset.expanded=i?"true":"false",void a?.onTransitionEnd?.(i,f);i?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.style.setProperty("height",`${e}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${o}px`),s.dataset.expanded="true"})})}(f,l,p,y):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.dataset.expanded="true",s.style.setProperty("height",`${o}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${e}px`),s.dataset.expanded="false"})})}(f,l,p,y)}},[u,i,a,m,l]);return r(()=>{h()},[i,h]),r(()=>{const e=f.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}},[i]),r(()=>{const e=p.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[f,h]}export{i as useAnimatedHeightBetween};
 //# sourceMappingURL=useAnimatedHeightBetween.js.map

package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAnimatedHeightBetween.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeightBetween.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../~~core/~~tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\nfunction collapseElement<T extends HTMLElement>(\n elementRef: RefObject<T \| null>,\n transition: string,\n raf1: React.MutableRefObject<number \| undefined>,\n raf2: React.MutableRefObject<number \| undefined>,\n) {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const expandedHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Hent kollapset høyde\n element.style.removeProperty(\"transition\");\n element.dataset.expanded = \"false\";\n const collapsedHeight = element.getBoundingClientRect().height;\n element.dataset.expanded = \"true\";\n\n // Sett høyde tilbake til utvidet høyde\n element.style.setProperty(\"height\", `${expandedHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til kollapset høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${collapsedHeight}px`);\n element.dataset.expanded = \"false\";\n });\n });\n}\n\nfunction expandElement<T extends HTMLElement>(\n elementRef: RefObject<T \| null>,\n transition: string,\n raf1: React.MutableRefObject<number \| undefined>,\n raf2: React.MutableRefObject<number \| undefined>,\n) {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const expandedHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Hent utvidet høyde\n element.style.removeProperty(\"transition\");\n element.dataset.expanded = \"false\";\n const collapsedHeight = element.getBoundingClientRect().height;\n\n // Sett høyde tilbake til kollapset høyde\n element.style.setProperty(\"height\", `${collapsedHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til utvidet høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${expandedHeight}px`);\n element.dataset.expanded = \"true\";\n });\n });\n}\n\n/*\n Lar deg enklere animere mellom to tilstander, gitt ved å sette `data-expanded` på et element til `true` eller `false`.\n * Du bestemmer selv hvilke stiler elementet skal ha i de to tilstandene (vha CSS/Sass), og høyden animeres dersom den endrer seg.\n * @param isExpanded indikerer om elementet skal være utvidet eller ikke\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns En tuple med referanse til elementet og en funksjon som kan trigge animasjonen\n */\nexport function useAnimatedHeightBetween<T extends HTMLElement>(\n isExpanded: boolean,\n options?: Omit<UseAnimatedHeightOptions<T>, \"display\" \| \"onFirstVisible\">,\n): [RefObject<T>, () => void] {\n const wasExpanded = usePreviousValue(isExpanded);\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n const handleTransitionEnd = useCallback(\n (event: TransitionEvent) => {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n element.removeAttribute(\"style\");\n options?.onTransitionEnd?.(isExpanded, elementRef);\n }\n },\n [options, isExpanded],\n );\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n if (wasExpanded === undefined) {\n // Første render\n element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n }\n\n if ((!isExpanded && !wasExpanded) \|\| (isExpanded && wasExpanded)) {\n // Ingen endring\n return;\n }\n\n options?.onTransitionStart?.(isExpanded, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n options?.onTransitionEnd?.(isExpanded, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n if (isExpanded) {\n expandElement(elementRef, transition, raf1, raf2);\n } else {\n collapseElement(elementRef, transition, raf1, raf2);\n }\n }, [wasExpanded, isExpanded, options, prefersReducedMotion, transition]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isExpanded\n useEffect(() => {\n runAnimation();\n }, [isExpanded, runAnimation]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [isExpanded]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, []);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeightBetween","isExpanded","options","wasExpanded","usePreviousValue","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","runAnimation","dataset","expanded","onTransitionStart","expandedHeight","scrollHeight","requestAnimationFrame","style","removeProperty","collapsedHeight","getBoundingClientRect","height","setProperty","expandElement","collapseElement","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"~~wQAiFO~~,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAcC,EAAiBH,GAC/BI,EAASH,GAASG,QAhFN,WAiFZC,EAASJ,GAASI,QAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBpB,GAASqB,kBAAkBtB,EAAYc,KAG/C,CAACb,EAASD,IAGRuB,EAAeP,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,SAEe,IAAhBhB,IAEAgB,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,YAG/CA,IAAeE,GAAiBF,GAAcE,IAOpD,CAAA,GAFAD,GAASyB,oBAAoB1B,EAAYc,GAErCL,EAIA,OAHAS,EAAQG,gBAAgB,SACxBH,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,aACjDC,GAASqB,kBAAkBtB,EAAYc,GAIvCd,EA3FZ,SACIc,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OAGxDhB,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQM,QAAQC,SAAW,UAGvC,CA8DYW,CAActB,EAAYR,EAAYK,EAAME,GA7HxD,SACIC,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OACxDhB,EAAQM,QAAQC,SAAW,OAG3BP,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQM,QAAQC,SAAW,WAGvC,CAgGYY,CAAgBvB,EAAYR,EAAYK,EAAME,EAAI,GAEvD,CAACX,EAAaF,EAAYC,EAASQ,EAAsBH,IAG5D,OAAAgC,EAAU,KACNf,KACD,CAACvB,EAAYuB,IAGhBe,EAAU,KACN,MAAMpB,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQqB,iBAAiB,gBAAiBxB,GAGvC,KACCG,GACAA,EAAQsB,oBACJ,gBACAzB,KAIb,CAACf,IAEJsC,EAAU,KACN,MAAMG,EAAK9B,EAAKQ,QACVuB,EAAK7B,EAAKM,QAChB,MAAO,KACHsB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAAC5B,EAAYS,EACxB"}
1	+ {"version":3,"file":"useAnimatedHeightBetween.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeightBetween.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\nfunction collapseElement<T extends HTMLElement>(\n elementRef: RefObject<T \| null>,\n transition: string,\n raf1: React.MutableRefObject<number \| undefined>,\n raf2: React.MutableRefObject<number \| undefined>,\n) {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const expandedHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Hent kollapset høyde\n element.style.removeProperty(\"transition\");\n element.dataset.expanded = \"false\";\n const collapsedHeight = element.getBoundingClientRect().height;\n element.dataset.expanded = \"true\";\n\n // Sett høyde tilbake til utvidet høyde\n element.style.setProperty(\"height\", `${expandedHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til kollapset høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${collapsedHeight}px`);\n element.dataset.expanded = \"false\";\n });\n });\n}\n\nfunction expandElement<T extends HTMLElement>(\n elementRef: RefObject<T \| null>,\n transition: string,\n raf1: React.MutableRefObject<number \| undefined>,\n raf2: React.MutableRefObject<number \| undefined>,\n) {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const expandedHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Hent utvidet høyde\n element.style.removeProperty(\"transition\");\n element.dataset.expanded = \"false\";\n const collapsedHeight = element.getBoundingClientRect().height;\n\n // Sett høyde tilbake til kollapset høyde\n element.style.setProperty(\"height\", `${collapsedHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til utvidet høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${expandedHeight}px`);\n element.dataset.expanded = \"true\";\n });\n });\n}\n\n/*\n Lar deg enklere animere mellom to tilstander, gitt ved å sette `data-expanded` på et element til `true` eller `false`.\n * Du bestemmer selv hvilke stiler elementet skal ha i de to tilstandene (vha CSS/Sass), og høyden animeres dersom den endrer seg.\n * @param isExpanded indikerer om elementet skal være utvidet eller ikke\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns En tuple med referanse til elementet og en funksjon som kan trigge animasjonen\n */\nexport function useAnimatedHeightBetween<T extends HTMLElement>(\n isExpanded: boolean,\n options?: Omit<UseAnimatedHeightOptions<T>, \"display\" \| \"onFirstVisible\">,\n): [RefObject<T>, () => void] {\n const wasExpanded = usePreviousValue(isExpanded);\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n const handleTransitionEnd = useCallback(\n (event: TransitionEvent) => {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n element.removeAttribute(\"style\");\n options?.onTransitionEnd?.(isExpanded, elementRef);\n }\n },\n [options, isExpanded],\n );\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n if (wasExpanded === undefined) {\n // Første render\n element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n }\n\n if ((!isExpanded && !wasExpanded) \|\| (isExpanded && wasExpanded)) {\n // Ingen endring\n return;\n }\n\n options?.onTransitionStart?.(isExpanded, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n options?.onTransitionEnd?.(isExpanded, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n if (isExpanded) {\n expandElement(elementRef, transition, raf1, raf2);\n } else {\n collapseElement(elementRef, transition, raf1, raf2);\n }\n }, [wasExpanded, isExpanded, options, prefersReducedMotion, transition]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isExpanded\n useEffect(() => {\n runAnimation();\n }, [isExpanded, runAnimation]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [isExpanded]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, []);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeightBetween","isExpanded","options","wasExpanded","usePreviousValue","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","runAnimation","dataset","expanded","onTransitionStart","expandedHeight","scrollHeight","requestAnimationFrame","style","removeProperty","collapsedHeight","getBoundingClientRect","height","setProperty","expandElement","collapseElement","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"mQAiFO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAcC,EAAiBH,GAC/BI,EAASH,GAASG,QAhFN,WAiFZC,EAASJ,GAASI,QAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBpB,GAASqB,kBAAkBtB,EAAYc,KAG/C,CAACb,EAASD,IAGRuB,EAAeP,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,SAEe,IAAhBhB,IAEAgB,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,YAG/CA,IAAeE,GAAiBF,GAAcE,IAOpD,CAAA,GAFAD,GAASyB,oBAAoB1B,EAAYc,GAErCL,EAIA,OAHAS,EAAQG,gBAAgB,SACxBH,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,aACjDC,GAASqB,kBAAkBtB,EAAYc,GAIvCd,EA3FZ,SACIc,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OAGxDhB,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQM,QAAQC,SAAW,UAGvC,CA8DYW,CAActB,EAAYR,EAAYK,EAAME,GA7HxD,SACIC,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OACxDhB,EAAQM,QAAQC,SAAW,OAG3BP,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQM,QAAQC,SAAW,WAGvC,CAgGYY,CAAgBvB,EAAYR,EAAYK,EAAME,EAAI,GAEvD,CAACX,EAAaF,EAAYC,EAASQ,EAAsBH,IAG5D,OAAAgC,EAAU,KACNf,KACD,CAACvB,EAAYuB,IAGhBe,EAAU,KACN,MAAMpB,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQqB,iBAAiB,gBAAiBxB,GAGvC,KACCG,GACAA,EAAQsB,oBACJ,gBACAzB,KAIb,CAACf,IAEJsC,EAAU,KACN,MAAMG,EAAK9B,EAAKQ,QACVuB,EAAK7B,EAAKM,QAChB,MAAO,KACHsB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAAC5B,EAAYS,EACxB"}

package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { Easing, Timing } from '../../core/types.js';
+import { Easing, Timing } from '../../utilities/types.js';
 export type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {
     easing?: Easing;
     /**

package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useState as e,useRef as r,useCallback as t,useEffect as n}from"react";import s from"../../core/tokens.js";import{useBrowserPreferences as o}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as i}from"../usePreviousValue/usePreviousValue.js";function a(a,u){const c=i(a),[m,l]=e(0),f=u?.easing||"standard",d=u?.timing||"expressive",p=`${s.motion.timing[d]} height ${s.motion.easing[f]}`,{prefersReducedMotion:v}=o(),y=r(),g=r(),P=r(null),h=t(e=>{const r=P.current;r&&e.target===r&&(r.removeAttribute("style"),u?.onTransitionEnd?.(P))},[u]),A=t(()=>{const e=P.current;if(!e)return;e.removeAttribute("style");const r=e.scrollHeight;y.current=requestAnimationFrame(()=>{e.style.removeProperty("transition"),e.style.setProperty("height",`${m}px`),e.style.setProperty("overflow-y","hidden"),g.current=requestAnimationFrame(()=>{e.style.setProperty("transition",p),e.style.setProperty("height",`${r}px`)})}),l(r)},[p,m]),E=t(()=>{const e=P.current;if(e){if(void 0===c)return void l(e.scrollHeight);if(a!==c){if(u?.onTransitionStart?.(P),v)return void u?.onTransitionEnd?.(P);A()}}},[A,a,c,u,v]);return n(()=>{E()},[a,E]),n(()=>{const e=P.current;return e&&e.addEventListener("transitionend",h),()=>{e&&e.removeEventListener("transitionend",h)}},[h]),n(()=>{const e=y.current,r=g.current;return()=>{e&&cancelAnimationFrame(e),r&&cancelAnimationFrame(r)}},[]),P}export{a as useAutoAnimatedHeight};
+import{useState as e,useRef as r,useCallback as t,useEffect as n}from"react";import s from"../../tokens.js";import{useBrowserPreferences as o}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as i}from"../usePreviousValue/usePreviousValue.js";function a(a,u){const c=i(a),[m,l]=e(0),f=u?.easing||"standard",d=u?.timing||"expressive",p=`${s.motion.timing[d]} height ${s.motion.easing[f]}`,{prefersReducedMotion:v}=o(),y=r(),g=r(),P=r(null),h=t(e=>{const r=P.current;r&&e.target===r&&(r.removeAttribute("style"),u?.onTransitionEnd?.(P))},[u]),A=t(()=>{const e=P.current;if(!e)return;e.removeAttribute("style");const r=e.scrollHeight;y.current=requestAnimationFrame(()=>{e.style.removeProperty("transition"),e.style.setProperty("height",`${m}px`),e.style.setProperty("overflow-y","hidden"),g.current=requestAnimationFrame(()=>{e.style.setProperty("transition",p),e.style.setProperty("height",`${r}px`)})}),l(r)},[p,m]),E=t(()=>{const e=P.current;if(e){if(void 0===c)return void l(e.scrollHeight);if(a!==c){if(u?.onTransitionStart?.(P),v)return void u?.onTransitionEnd?.(P);A()}}},[A,a,c,u,v]);return n(()=>{E()},[a,E]),n(()=>{const e=P.current;return e&&e.addEventListener("transitionend",h),()=>{e&&e.removeEventListener("transitionend",h)}},[h]),n(()=>{const e=y.current,r=g.current;return()=>{e&&cancelAnimationFrame(e),r&&cancelAnimationFrame(r)}},[]),P}export{a as useAutoAnimatedHeight};
 //# sourceMappingURL=useAutoAnimateHeight.js.map

package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAutoAnimateHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAutoAnimateHeight.ts"],"sourcesContent":["import {\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport tokens from \"../../~~core/~~tokens.js\";\nimport type { Easing, Timing } from \"../../~~core~~/types.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"expressive\";\n\nexport type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {\n easing?: Easing;\n /*\n Overstyr standard timing\n * @default \"expressive\"\n /\n timing?: Timing;\n onTransitionStart?: (ref: RefObject<T \| null>) => void;\n onTransitionEnd?: (ref: RefObject<T \| null>) => void;\n};\n\n/\n Gjør det enklere å animere høyden på et element når innholdet endrer seg, men kan brukes på mer generelt grunnlag.\n * Hooken tar inn en triggerverdi, og når denne endrer seg animeres høyden på elementet dersom den har endret seg.\n * @param trigger verdien som brukes til å trigge animasjonen. Dersom denne endrer seg animeres høyden på elementet.\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns en referanse til elementet som skal animeres\n */\nexport function useAutoAnimatedHeight<T extends HTMLElement = HTMLElement>(\n trigger: any,\n options?: UseAutoAnimatedHeightOptions<T>,\n) {\n const previousTriggerValue = usePreviousValue(trigger);\n const [previousHeight, setPreviousHeight] = useState(0);\n\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n const handleTransitionEnd = useCallback(\n (event: TransitionEvent) => {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n element.removeAttribute(\"style\");\n options?.onTransitionEnd?.(elementRef);\n }\n },\n [options],\n );\n\n const animateElement = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const newHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Sett høyde tilbake til forrige høyde\n element.style.removeProperty(\"transition\");\n element.style.setProperty(\"height\", `${previousHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til kollapset høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${newHeight}px`);\n });\n });\n\n setPreviousHeight(newHeight);\n }, [transition, previousHeight]);\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n if (previousTriggerValue === undefined) {\n // Første render\n setPreviousHeight(element.scrollHeight);\n return;\n }\n\n if (trigger === previousTriggerValue) {\n // Ingen endring\n return;\n }\n\n options?.onTransitionStart?.(elementRef);\n\n if (prefersReducedMotion) {\n options?.onTransitionEnd?.(elementRef); // make sure to call callback when animation is off\n return;\n }\n\n animateElement();\n }, [\n animateElement,\n trigger,\n previousTriggerValue,\n options,\n prefersReducedMotion,\n ]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Vi vil trige med trigger\n useEffect(() => {\n runAnimation();\n }, [trigger, runAnimation]);\n\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [handleTransitionEnd]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, []);\n\n return elementRef;\n}\n"],"names":["useAutoAnimatedHeight","trigger","options","previousTriggerValue","usePreviousValue","previousHeight","setPreviousHeight","useState","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","animateElement","newHeight","scrollHeight","requestAnimationFrame","style","removeProperty","setProperty","runAnimation","onTransitionStart","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"~~sRAiCO~~,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAuBC,EAAiBH,IACvCI,EAAgBC,GAAqBC,EAAS,GAE/CC,EAASN,GAASM,QA5BN,WA6BZC,EAASP,GAASO,QA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBvB,GAASwB,kBAAkBR,KAGnC,CAAChB,IAGCyB,EAAiBP,EAAY,KAC/B,MAAME,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMG,EAAYN,EAAQO,aAE1Bd,EAAKQ,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAMC,eAAe,cAC7BV,EAAQS,MAAME,YAAY,SAAU,GAAG5B,OACvCiB,EAAQS,MAAME,YAAY,aAAc,UAExChB,EAAKM,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAME,YAAY,aAAcvB,GACxCY,EAAQS,MAAME,YAAY,SAAU,GAAGL,WAI/CtB,EAAkBsB,IACnB,CAAClB,EAAYL,IAEV6B,EAAed,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQO,cAI9B,GAAI5B,IAAYE,EAOhB,CAAA,GAFAD,GAASiC,oBAAoBjB,GAEzBL,EAEA,YADAX,GAASwB,kBAAkBR,GAI/BS,GAAA,CAAA,GACD,CACCA,EACA1B,EACAE,EACAD,EACAW,IAIJ,OAAAuB,EAAU,KACNF,KACD,CAACjC,EAASiC,IAEbE,EAAU,KACN,MAAMd,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBlB,GAGvC,KACCG,GACAA,EAAQgB,oBACJ,gBACAnB,KAIb,CAACA,IAEJiB,EAAU,KACN,MAAMG,EAAKxB,EAAKQ,QACViB,EAAKvB,EAAKM,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEItB,CACX"}
1	+ {"version":3,"file":"useAutoAnimateHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAutoAnimateHeight.ts"],"sourcesContent":["import {\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport tokens from \"../../tokens.js\";\nimport type { Easing, Timing } from \"../../utilities/types.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"expressive\";\n\nexport type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {\n easing?: Easing;\n /*\n Overstyr standard timing\n * @default \"expressive\"\n /\n timing?: Timing;\n onTransitionStart?: (ref: RefObject<T \| null>) => void;\n onTransitionEnd?: (ref: RefObject<T \| null>) => void;\n};\n\n/\n Gjør det enklere å animere høyden på et element når innholdet endrer seg, men kan brukes på mer generelt grunnlag.\n * Hooken tar inn en triggerverdi, og når denne endrer seg animeres høyden på elementet dersom den har endret seg.\n * @param trigger verdien som brukes til å trigge animasjonen. Dersom denne endrer seg animeres høyden på elementet.\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns en referanse til elementet som skal animeres\n */\nexport function useAutoAnimatedHeight<T extends HTMLElement = HTMLElement>(\n trigger: any,\n options?: UseAutoAnimatedHeightOptions<T>,\n) {\n const previousTriggerValue = usePreviousValue(trigger);\n const [previousHeight, setPreviousHeight] = useState(0);\n\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n const handleTransitionEnd = useCallback(\n (event: TransitionEvent) => {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n element.removeAttribute(\"style\");\n options?.onTransitionEnd?.(elementRef);\n }\n },\n [options],\n );\n\n const animateElement = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n element.removeAttribute(\"style\");\n const newHeight = element.scrollHeight;\n\n raf1.current = requestAnimationFrame(() => {\n // Sett høyde tilbake til forrige høyde\n element.style.removeProperty(\"transition\");\n element.style.setProperty(\"height\", `${previousHeight}px`);\n element.style.setProperty(\"overflow-y\", \"hidden\");\n\n raf2.current = requestAnimationFrame(() => {\n // Sett høyde til kollapset høyde og start transition\n element.style.setProperty(\"transition\", transition);\n element.style.setProperty(\"height\", `${newHeight}px`);\n });\n });\n\n setPreviousHeight(newHeight);\n }, [transition, previousHeight]);\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n if (!element) return;\n\n if (previousTriggerValue === undefined) {\n // Første render\n setPreviousHeight(element.scrollHeight);\n return;\n }\n\n if (trigger === previousTriggerValue) {\n // Ingen endring\n return;\n }\n\n options?.onTransitionStart?.(elementRef);\n\n if (prefersReducedMotion) {\n options?.onTransitionEnd?.(elementRef); // make sure to call callback when animation is off\n return;\n }\n\n animateElement();\n }, [\n animateElement,\n trigger,\n previousTriggerValue,\n options,\n prefersReducedMotion,\n ]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Vi vil trige med trigger\n useEffect(() => {\n runAnimation();\n }, [trigger, runAnimation]);\n\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [handleTransitionEnd]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, []);\n\n return elementRef;\n}\n"],"names":["useAutoAnimatedHeight","trigger","options","previousTriggerValue","usePreviousValue","previousHeight","setPreviousHeight","useState","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","animateElement","newHeight","scrollHeight","requestAnimationFrame","style","removeProperty","setProperty","runAnimation","onTransitionStart","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"iRAiCO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAuBC,EAAiBH,IACvCI,EAAgBC,GAAqBC,EAAS,GAE/CC,EAASN,GAASM,QA5BN,WA6BZC,EAASP,GAASO,QA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBvB,GAASwB,kBAAkBR,KAGnC,CAAChB,IAGCyB,EAAiBP,EAAY,KAC/B,MAAME,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMG,EAAYN,EAAQO,aAE1Bd,EAAKQ,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAMC,eAAe,cAC7BV,EAAQS,MAAME,YAAY,SAAU,GAAG5B,OACvCiB,EAAQS,MAAME,YAAY,aAAc,UAExChB,EAAKM,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAME,YAAY,aAAcvB,GACxCY,EAAQS,MAAME,YAAY,SAAU,GAAGL,WAI/CtB,EAAkBsB,IACnB,CAAClB,EAAYL,IAEV6B,EAAed,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQO,cAI9B,GAAI5B,IAAYE,EAOhB,CAAA,GAFAD,GAASiC,oBAAoBjB,GAEzBL,EAEA,YADAX,GAASwB,kBAAkBR,GAI/BS,GAAA,CAAA,GACD,CACCA,EACA1B,EACAE,EACAD,EACAW,IAIJ,OAAAuB,EAAU,KACNF,KACD,CAACjC,EAASiC,IAEbE,EAAU,KACN,MAAMd,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBlB,GAGvC,KACCG,GACAA,EAAQgB,oBACJ,gBACAnB,KAIb,CAACA,IAEJiB,EAAU,KACN,MAAMG,EAAKxB,EAAKQ,QACViB,EAAKvB,EAAKM,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEItB,CACX"}

package/build/es/hooks/useAriaLiveRegion/useAriaLiveRegion.d.ts CHANGED Viewed

@@ -11,5 +11,5 @@ export interface UseAriaLiveRegionOptions {
  * @returns
  */
 export declare function useAriaLiveRegion(watch: unknown | unknown[], options?: UseAriaLiveRegionOptions): {
-    "aria-live": "polite" | "assertive" | "off" | undefined;
+    "aria-live": "off" | "assertive" | "polite" | undefined;
 };

package/build/es/hooks/useBrowserPreferences/useBrowserPreferences.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../core/types.js';
+import { ColorScheme } from '../../utilities/types.js';
 type BrowserPreferences = {
     prefersReducedMotion: boolean;
     prefersColorScheme: ColorScheme;

package/build/es/hooks/useBrowserPreferences/useBrowserPreferences.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useBrowserPreferences.js","sources":["../../../../src/hooks/useBrowserPreferences/useBrowserPreferences.tsx"],"sourcesContent":["import { type Reducer, useEffect, useReducer, useState } from \"react\";\nimport type { ColorScheme } from \"../../~~core~~/types.js\";\nimport {\n addMediaQueryListener,\n getInitialMediaQueryMatch,\n removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\n\ntype BrowserPreferences = {\n prefersReducedMotion: boolean;\n prefersColorScheme: ColorScheme;\n forcedColors: boolean;\n};\n\nconst ActionType = {\n PrefersColorScheme: \"COLOR_SCHEME_CHANGED\",\n PrefersReducedMotion: \"REDUCED_MOTION_CHANGED\",\n ForcedColors: \"FORCED_COLORS_CHANGED\",\n} as const;\n\ntype Action =\n \| {\n type: typeof ActionType.PrefersColorScheme;\n value: ColorScheme;\n }\n \| {\n type: typeof ActionType.PrefersReducedMotion;\n value: boolean;\n }\n \| {\n type: typeof ActionType.ForcedColors;\n value: boolean;\n };\n\nconst PREFERS_REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\nconst PREFERS_LIGHT_COLOR_SCHEME = \"(prefers-color-scheme: light)\";\nconst FORCED_COLORS = \"(forced-colors: active)\";\n\nconst initialState: BrowserPreferences = {\n prefersReducedMotion: false,\n prefersColorScheme: \"light\",\n forcedColors: false,\n};\n\nconst reducer: Reducer<BrowserPreferences, Action> = (state, action) => {\n switch (action.type) {\n case ActionType.PrefersColorScheme:\n return {\n ...state,\n prefersColorScheme: action.value,\n };\n case ActionType.PrefersReducedMotion:\n return {\n ...state,\n prefersReducedMotion: action.value,\n };\n case ActionType.ForcedColors:\n return {\n ...state,\n forcedColors: action.value,\n };\n default:\n return state;\n }\n};\n\n/*\n Hook som gir informasjon om brukerens foretrukne konfigurasjon.\n * @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).\n */\nexport const useBrowserPreferences = (): BrowserPreferences => {\n const [hasMounted, setHasMounted] = useState(false);\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n useEffect(() => {\n setHasMounted(true);\n const prefersReducedMotion = getInitialMediaQueryMatch(\n PREFERS_REDUCED_MOTION,\n );\n const prefersColorScheme = getInitialMediaQueryMatch(\n PREFERS_LIGHT_COLOR_SCHEME,\n )\n ? \"light\"\n : \"dark\";\n const forcedColors = getInitialMediaQueryMatch(FORCED_COLORS);\n dispatch({\n type: ActionType.PrefersReducedMotion,\n value: prefersReducedMotion,\n });\n dispatch({\n type: ActionType.PrefersColorScheme,\n value: prefersColorScheme,\n });\n dispatch({ type: ActionType.ForcedColors, value: forcedColors });\n }, []);\n\n useEffect(() => {\n if (!hasMounted \|\| !window.matchMedia) {\n return;\n }\n const onPrefersReducedMotionChange = (e: MediaQueryListEvent) => {\n dispatch({\n type: ActionType.PrefersReducedMotion,\n value: e.matches,\n });\n };\n const onPrefersColorSchemeChange = (e: MediaQueryListEvent) => {\n dispatch({\n type: ActionType.PrefersColorScheme,\n value: e.matches ? \"light\" : \"dark\",\n });\n };\n const onForcedColorsChange = (e: MediaQueryListEvent) => {\n dispatch({ type: ActionType.ForcedColors, value: e.matches });\n };\n\n addMediaQueryListener(\n window.matchMedia(PREFERS_REDUCED_MOTION),\n onPrefersReducedMotionChange,\n );\n addMediaQueryListener(\n window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n onPrefersColorSchemeChange,\n );\n addMediaQueryListener(\n window.matchMedia(FORCED_COLORS),\n onForcedColorsChange,\n );\n\n return () => {\n removeMediaQueryListener(\n window.matchMedia(PREFERS_REDUCED_MOTION),\n onPrefersReducedMotionChange,\n );\n removeMediaQueryListener(\n window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n onPrefersColorSchemeChange,\n );\n removeMediaQueryListener(\n window.matchMedia(FORCED_COLORS),\n onForcedColorsChange,\n );\n };\n }, [hasMounted]);\n\n return { ...state };\n};\n"],"names":["ActionType","PREFERS_REDUCED_MOTION","PREFERS_LIGHT_COLOR_SCHEME","FORCED_COLORS","initialState","prefersReducedMotion","prefersColorScheme","forcedColors","reducer","state","action","type","value","useBrowserPreferences","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"2LAcA,MAAMA,EACkB,uBADlBA,EAEoB,yBAFpBA,EAGY,wBAiBZC,EAAyB,mCACzBC,EAA6B,gCAC7BC,EAAgB,0BAEhBC,EAAmC,CACrCC,sBAAsB,EACtBC,mBAAoB,QACpBC,cAAc,GAGZC,EAA+C,CAACC,EAAOC,KACzD,OAAQA,EAAOC,MACX,KAAKX,EACD,MAAO,IACAS,EACHH,mBAAoBI,EAAOE,OAEnC,KAAKZ,EACD,MAAO,IACAS,EACHJ,qBAAsBK,EAAOE,OAErC,KAAKZ,EACD,MAAO,IACAS,EACHF,aAAcG,EAAOE,OAE7B,QACI,OAAOH,IAQNI,EAAwB,KACjC,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCP,EAAOQ,GAAYC,EAAWV,EAASJ,GAE9C,OAAAe,EAAU,KACNJ,GAAc,GACd,MAAMV,EAAuBe,EACzBnB,GAEEK,EAAqBc,EACvBlB,GAEE,QACA,OACAK,EAAea,EAA0BjB,GAC/Cc,EAAS,CACLN,KAAMX,EACNY,MAAOP,IAEXY,EAAS,CACLN,KAAMX,EACNY,MAAON,IAEXW,EAAS,CAAEN,KAAMX,EAAyBY,MAAOL,KAClD,IAEHY,EAAU,KACN,IAAKL,IAAeO,OAAOC,WACvB,OAEJ,MAAMC,EAAgCC,IAClCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,WAGXC,EAA8BF,IAChCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,QAAU,QAAU,UAG/BE,EAAwBH,IAC1BP,EAAS,CAAEN,KAAMX,EAAyBY,MAAOY,EAAEC,WAGvD,OAAAG,EACIP,OAAOC,WAAWrB,GAClBsB,GAEJK,EACIP,OAAOC,WAAWpB,GAClBwB,GAEJE,EACIP,OAAOC,WAAWnB,GAClBwB,GAGG,KACHE,EACIR,OAAOC,WAAWrB,GAClBsB,GAEJM,EACIR,OAAOC,WAAWpB,GAClBwB,GAEJG,EACIR,OAAOC,WAAWnB,GAClBwB,KAGT,CAACb,IAEG,IAAKL"}
1	+ {"version":3,"file":"useBrowserPreferences.js","sources":["../../../../src/hooks/useBrowserPreferences/useBrowserPreferences.tsx"],"sourcesContent":["import { type Reducer, useEffect, useReducer, useState } from \"react\";\nimport type { ColorScheme } from \"../../utilities/types.js\";\nimport {\n addMediaQueryListener,\n getInitialMediaQueryMatch,\n removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\n\ntype BrowserPreferences = {\n prefersReducedMotion: boolean;\n prefersColorScheme: ColorScheme;\n forcedColors: boolean;\n};\n\nconst ActionType = {\n PrefersColorScheme: \"COLOR_SCHEME_CHANGED\",\n PrefersReducedMotion: \"REDUCED_MOTION_CHANGED\",\n ForcedColors: \"FORCED_COLORS_CHANGED\",\n} as const;\n\ntype Action =\n \| {\n type: typeof ActionType.PrefersColorScheme;\n value: ColorScheme;\n }\n \| {\n type: typeof ActionType.PrefersReducedMotion;\n value: boolean;\n }\n \| {\n type: typeof ActionType.ForcedColors;\n value: boolean;\n };\n\nconst PREFERS_REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\nconst PREFERS_LIGHT_COLOR_SCHEME = \"(prefers-color-scheme: light)\";\nconst FORCED_COLORS = \"(forced-colors: active)\";\n\nconst initialState: BrowserPreferences = {\n prefersReducedMotion: false,\n prefersColorScheme: \"light\",\n forcedColors: false,\n};\n\nconst reducer: Reducer<BrowserPreferences, Action> = (state, action) => {\n switch (action.type) {\n case ActionType.PrefersColorScheme:\n return {\n ...state,\n prefersColorScheme: action.value,\n };\n case ActionType.PrefersReducedMotion:\n return {\n ...state,\n prefersReducedMotion: action.value,\n };\n case ActionType.ForcedColors:\n return {\n ...state,\n forcedColors: action.value,\n };\n default:\n return state;\n }\n};\n\n/*\n Hook som gir informasjon om brukerens foretrukne konfigurasjon.\n * @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).\n */\nexport const useBrowserPreferences = (): BrowserPreferences => {\n const [hasMounted, setHasMounted] = useState(false);\n\n const [state, dispatch] = useReducer(reducer, initialState);\n\n useEffect(() => {\n setHasMounted(true);\n const prefersReducedMotion = getInitialMediaQueryMatch(\n PREFERS_REDUCED_MOTION,\n );\n const prefersColorScheme = getInitialMediaQueryMatch(\n PREFERS_LIGHT_COLOR_SCHEME,\n )\n ? \"light\"\n : \"dark\";\n const forcedColors = getInitialMediaQueryMatch(FORCED_COLORS);\n dispatch({\n type: ActionType.PrefersReducedMotion,\n value: prefersReducedMotion,\n });\n dispatch({\n type: ActionType.PrefersColorScheme,\n value: prefersColorScheme,\n });\n dispatch({ type: ActionType.ForcedColors, value: forcedColors });\n }, []);\n\n useEffect(() => {\n if (!hasMounted \|\| !window.matchMedia) {\n return;\n }\n const onPrefersReducedMotionChange = (e: MediaQueryListEvent) => {\n dispatch({\n type: ActionType.PrefersReducedMotion,\n value: e.matches,\n });\n };\n const onPrefersColorSchemeChange = (e: MediaQueryListEvent) => {\n dispatch({\n type: ActionType.PrefersColorScheme,\n value: e.matches ? \"light\" : \"dark\",\n });\n };\n const onForcedColorsChange = (e: MediaQueryListEvent) => {\n dispatch({ type: ActionType.ForcedColors, value: e.matches });\n };\n\n addMediaQueryListener(\n window.matchMedia(PREFERS_REDUCED_MOTION),\n onPrefersReducedMotionChange,\n );\n addMediaQueryListener(\n window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n onPrefersColorSchemeChange,\n );\n addMediaQueryListener(\n window.matchMedia(FORCED_COLORS),\n onForcedColorsChange,\n );\n\n return () => {\n removeMediaQueryListener(\n window.matchMedia(PREFERS_REDUCED_MOTION),\n onPrefersReducedMotionChange,\n );\n removeMediaQueryListener(\n window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n onPrefersColorSchemeChange,\n );\n removeMediaQueryListener(\n window.matchMedia(FORCED_COLORS),\n onForcedColorsChange,\n );\n };\n }, [hasMounted]);\n\n return { ...state };\n};\n"],"names":["ActionType","PREFERS_REDUCED_MOTION","PREFERS_LIGHT_COLOR_SCHEME","FORCED_COLORS","initialState","prefersReducedMotion","prefersColorScheme","forcedColors","reducer","state","action","type","value","useBrowserPreferences","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"2LAcA,MAAMA,EACkB,uBADlBA,EAEoB,yBAFpBA,EAGY,wBAiBZC,EAAyB,mCACzBC,EAA6B,gCAC7BC,EAAgB,0BAEhBC,EAAmC,CACrCC,sBAAsB,EACtBC,mBAAoB,QACpBC,cAAc,GAGZC,EAA+C,CAACC,EAAOC,KACzD,OAAQA,EAAOC,MACX,KAAKX,EACD,MAAO,IACAS,EACHH,mBAAoBI,EAAOE,OAEnC,KAAKZ,EACD,MAAO,IACAS,EACHJ,qBAAsBK,EAAOE,OAErC,KAAKZ,EACD,MAAO,IACAS,EACHF,aAAcG,EAAOE,OAE7B,QACI,OAAOH,IAQNI,EAAwB,KACjC,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCP,EAAOQ,GAAYC,EAAWV,EAASJ,GAE9C,OAAAe,EAAU,KACNJ,GAAc,GACd,MAAMV,EAAuBe,EACzBnB,GAEEK,EAAqBc,EACvBlB,GAEE,QACA,OACAK,EAAea,EAA0BjB,GAC/Cc,EAAS,CACLN,KAAMX,EACNY,MAAOP,IAEXY,EAAS,CACLN,KAAMX,EACNY,MAAON,IAEXW,EAAS,CAAEN,KAAMX,EAAyBY,MAAOL,KAClD,IAEHY,EAAU,KACN,IAAKL,IAAeO,OAAOC,WACvB,OAEJ,MAAMC,EAAgCC,IAClCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,WAGXC,EAA8BF,IAChCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,QAAU,QAAU,UAG/BE,EAAwBH,IAC1BP,EAAS,CAAEN,KAAMX,EAAyBY,MAAOY,EAAEC,WAGvD,OAAAG,EACIP,OAAOC,WAAWrB,GAClBsB,GAEJK,EACIP,OAAOC,WAAWpB,GAClBwB,GAEJE,EACIP,OAAOC,WAAWnB,GAClBwB,GAGG,KACHE,EACIR,OAAOC,WAAWrB,GAClBsB,GAEJM,EACIR,OAAOC,WAAWpB,GAClBwB,GAEJG,EACIR,OAAOC,WAAWnB,GAClBwB,KAGT,CAACb,IAEG,IAAKL"}

package/build/es/hooks/useScreen/useScreen.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useState as e,useReducer as i,useEffect as t,useCallback as a}from"react";import r from"../../core/tokens.js";import{getInitialMediaQueryMatch as s,addMediaQueryListener as o,removeMediaQueryListener as n}from"../mediaQueryUtils.js";import{reducer as c,ActionType as m}from"./state.js";const{breakpoint:d}=r,p=e=>Number.parseInt(e.replace("px","")),u={isSmallDevice:`(max-width: ${p(d.medium)-1}px)`,isMediumDevice:`(min-width: ${d.medium}) and (max-width: ${p(d.large)-1}px)`,isLargeDevice:`(min-width: ${d.large}) and (max-width: ${p(d.xl)-1}px)`,isXlDevice:`(min-width: ${d.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},l=e=>({type:"isLandscape"===e||"isPortrait"===e?m.orientation:m.deviceSize,property:e}),f=()=>{const[r,m]=e(!1),[d,p]=i(c,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});t(()=>{m(!0);const e=Object.entries(u).map(([e,i])=>[e,s(i)]);for(const[i,t]of e)t&&p(l(i))},[]);const f=a(e=>i=>{requestAnimationFrame(()=>{i.matches&&p(l(e))})},[]);return t(()=>{if(!r||!window.matchMedia)return;const e=[];for(const[i,t]of Object.entries(u)){const a=window.matchMedia(t),r=f(i);e.push([a,r]),o(a,r)}return()=>{for(const[i,t]of e)n(i,t)}},[f,r]),{...d}};export{f as useScreen};
+import{useState as e,useReducer as i,useEffect as t,useCallback as a}from"react";import s from"../../tokens.js";import{getInitialMediaQueryMatch as r,addMediaQueryListener as o,removeMediaQueryListener as n}from"../mediaQueryUtils.js";import{reducer as c,ActionType as m}from"./state.js";const{breakpoint:d}=s,p=e=>Number.parseInt(e.replace("px","")),u={isSmallDevice:`(max-width: ${p(d.medium)-1}px)`,isMediumDevice:`(min-width: ${d.medium}) and (max-width: ${p(d.large)-1}px)`,isLargeDevice:`(min-width: ${d.large}) and (max-width: ${p(d.xl)-1}px)`,isXlDevice:`(min-width: ${d.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},l=e=>({type:"isLandscape"===e||"isPortrait"===e?m.orientation:m.deviceSize,property:e}),f=()=>{const[s,m]=e(!1),[d,p]=i(c,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});t(()=>{m(!0);const e=Object.entries(u).map(([e,i])=>[e,r(i)]);for(const[i,t]of e)t&&p(l(i))},[]);const f=a(e=>i=>{requestAnimationFrame(()=>{i.matches&&p(l(e))})},[]);return t(()=>{if(!s||!window.matchMedia)return;const e=[];for(const[i,t]of Object.entries(u)){const a=window.matchMedia(t),s=f(i);e.push([a,s]),o(a,s)}return()=>{for(const[i,t]of e)n(i,t)}},[f,s]),{...d}};export{f as useScreen};
 //# sourceMappingURL=useScreen.js.map

package/build/es/hooks/useScreen/useScreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScreen.js","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport { tokens } from \"../../~~core/index~~.js\";\nimport {\n addMediaQueryListener,\n getInitialMediaQueryMatch,\n removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport {\n ActionType,\n type ScreenAction,\n type ScreenState,\n reducer,\n} from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n Number.parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n isSmallDevice: `(max-width: ${\n breakpointsAsNumber(breakpoint.medium) - 1\n }px)`,\n isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n breakpointsAsNumber(breakpoint.large) - 1\n }px)`,\n isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: ${\n breakpointsAsNumber(breakpoint.xl) - 1\n }px)`,\n isXlDevice: `(min-width: ${breakpoint.xl})`,\n isPortrait: \"(orientation: portrait)\",\n isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n type:\n property === \"isLandscape\" \|\| property === \"isPortrait\"\n ? ActionType.orientation\n : ActionType.deviceSize,\n property,\n});\n\n/*\n Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n const [hasMounted, setHasMounted] = useState(false);\n\n const [device, deviceDispatch] = useReducer(reducer, {\n isSmallDevice: false,\n isMediumDevice: false,\n isLargeDevice: false,\n isXlDevice: false,\n isLandscape: false,\n isPortrait: false,\n });\n\n useEffect(() => {\n setHasMounted(true);\n const initialMatches = Object.entries(MEDIA_RULES).map(\n ([key, rule]) => [key, getInitialMediaQueryMatch(rule)],\n );\n\n for (const [key, value] of initialMatches) {\n if (value) {\n deviceDispatch(createAction(key as keyof ScreenState));\n }\n }\n }, []);\n\n const createListener = useCallback(\n (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n requestAnimationFrame(() => {\n if (e.matches) {\n deviceDispatch(createAction(key));\n }\n });\n },\n [],\n );\n\n useEffect(() => {\n if (!hasMounted \|\| !window.matchMedia) {\n return;\n }\n const eventListenerPairs: Array<\n [MediaQueryList, (e: MediaQueryListEvent) => void]\n > = [];\n\n for (const [key, rule] of Object.entries(MEDIA_RULES)) {\n const queryList = window.matchMedia(rule);\n const listener = createListener(key as keyof ScreenState);\n eventListenerPairs.push([queryList, listener]);\n addMediaQueryListener(queryList, listener);\n }\n\n return () => {\n for (const [queryList, listener] of eventListenerPairs) {\n removeMediaQueryListener(queryList, listener);\n }\n };\n }, [createListener, hasMounted]);\n\n return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","Number","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","xl","isXlDevice","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","useScreen","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","initialMatches","Object","entries","map","key","rule","getInitialMediaQueryMatch","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"~~qSAcA~~,MAAQA,WAAAA,GAAeC,EAEjBC,EAAuBF,GACzBG,OAAOC,SAASJ,EAAWK,QAAQ,KAAM,KAEvCC,EAAiD,CACnDC,cAAe,eACXL,EAAoBF,EAAWQ,QAAU,OAE7CC,eAAgB,eAAeT,EAAWQ,2BACtCN,EAAoBF,EAAWU,OAAS,OAE5CC,cAAe,eAAeX,EAAWU,0BACrCR,EAAoBF,EAAWY,IAAM,OAEzCC,WAAY,eAAeb,EAAWY,MACtCE,WAAY,0BACZC,YAAa,4BAGXC,EAAgBC,IAAAA,CAClBC,KACiB,gBAAbD,GAA2C,eAAbA,EACxBE,EAAWC,YACXD,EAAWE,WACrBJ,SAAAA,IAOSK,EAAY,KACrB,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCC,EAAQC,GAAkBC,EAAWC,EAAS,CACjDtB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfE,YAAY,EACZE,aAAa,EACbD,YAAY,IAGhBgB,EAAU,KACNN,GAAc,GACd,MAAMO,EAAiBC,OAAOC,QAAQ3B,GAAa4B,IAC/C,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAA0BD,KAGrD,IAAA,MAAYD,EAAKG,KAAUP,EACnBO,GACAX,EAAeX,EAAamB,KAGrC,IAEH,MAAMI,EAAiBC,EAClBL,GAA4BM,IACzBC,sBAAsB,KACdD,EAAEE,SACFhB,EAAeX,EAAamB,OAIxC,IAGJ,OAAAL,EAAU,KACN,IAAKP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEJ,IAAA,MAAYX,EAAKC,KAASJ,OAAOC,QAAQ3B,GAAc,CACnD,MAAMyC,EAAYH,OAAOC,WAAWT,GAC9BY,EAAWT,EAAeJ,GAChCW,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,EAAsBH,EAAWC,EACrC,CAEA,MAAO,KACH,IAAA,MAAYD,EAAWC,KAAaF,EAChCK,EAAyBJ,EAAWC,KAG7C,CAACT,EAAgBhB,IAEb,IAAKG"}
1	+ {"version":3,"file":"useScreen.js","sources":["../../../../src/hooks/useScreen/useScreen.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useState } from \"react\";\nimport tokens from \"../../tokens.js\";\nimport {\n addMediaQueryListener,\n getInitialMediaQueryMatch,\n removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\nimport {\n ActionType,\n type ScreenAction,\n type ScreenState,\n reducer,\n} from \"./state.js\";\n\nconst { breakpoint } = tokens;\n\nconst breakpointsAsNumber = (breakpoint: string): number =>\n Number.parseInt(breakpoint.replace(\"px\", \"\"));\n\nconst MEDIA_RULES: Record<keyof ScreenState, string> = {\n isSmallDevice: `(max-width: ${\n breakpointsAsNumber(breakpoint.medium) - 1\n }px)`,\n isMediumDevice: `(min-width: ${breakpoint.medium}) and (max-width: ${\n breakpointsAsNumber(breakpoint.large) - 1\n }px)`,\n isLargeDevice: `(min-width: ${breakpoint.large}) and (max-width: ${\n breakpointsAsNumber(breakpoint.xl) - 1\n }px)`,\n isXlDevice: `(min-width: ${breakpoint.xl})`,\n isPortrait: \"(orientation: portrait)\",\n isLandscape: \"(orientation: landscape)\",\n};\n\nconst createAction = (property: keyof ScreenState): ScreenAction => ({\n type:\n property === \"isLandscape\" \|\| property === \"isPortrait\"\n ? ActionType.orientation\n : ActionType.deviceSize,\n property,\n});\n\n/*\n Finn størrelsen og orienteringen til skjermen.\n * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.\n */\nexport const useScreen = (): ScreenState => {\n const [hasMounted, setHasMounted] = useState(false);\n\n const [device, deviceDispatch] = useReducer(reducer, {\n isSmallDevice: false,\n isMediumDevice: false,\n isLargeDevice: false,\n isXlDevice: false,\n isLandscape: false,\n isPortrait: false,\n });\n\n useEffect(() => {\n setHasMounted(true);\n const initialMatches = Object.entries(MEDIA_RULES).map(\n ([key, rule]) => [key, getInitialMediaQueryMatch(rule)],\n );\n\n for (const [key, value] of initialMatches) {\n if (value) {\n deviceDispatch(createAction(key as keyof ScreenState));\n }\n }\n }, []);\n\n const createListener = useCallback(\n (key: keyof ScreenState) => (e: MediaQueryListEvent) => {\n requestAnimationFrame(() => {\n if (e.matches) {\n deviceDispatch(createAction(key));\n }\n });\n },\n [],\n );\n\n useEffect(() => {\n if (!hasMounted \|\| !window.matchMedia) {\n return;\n }\n const eventListenerPairs: Array<\n [MediaQueryList, (e: MediaQueryListEvent) => void]\n > = [];\n\n for (const [key, rule] of Object.entries(MEDIA_RULES)) {\n const queryList = window.matchMedia(rule);\n const listener = createListener(key as keyof ScreenState);\n eventListenerPairs.push([queryList, listener]);\n addMediaQueryListener(queryList, listener);\n }\n\n return () => {\n for (const [queryList, listener] of eventListenerPairs) {\n removeMediaQueryListener(queryList, listener);\n }\n };\n }, [createListener, hasMounted]);\n\n return { ...device };\n};\n"],"names":["breakpoint","tokens","breakpointsAsNumber","Number","parseInt","replace","MEDIA_RULES","isSmallDevice","medium","isMediumDevice","large","isLargeDevice","xl","isXlDevice","isPortrait","isLandscape","createAction","property","type","ActionType","orientation","deviceSize","useScreen","hasMounted","setHasMounted","useState","device","deviceDispatch","useReducer","reducer","useEffect","initialMatches","Object","entries","map","key","rule","getInitialMediaQueryMatch","value","createListener","useCallback","e","requestAnimationFrame","matches","window","matchMedia","eventListenerPairs","queryList","listener","push","addMediaQueryListener","removeMediaQueryListener"],"mappings":"gSAcA,MAAQA,WAAAA,GAAeC,EAEjBC,EAAuBF,GACzBG,OAAOC,SAASJ,EAAWK,QAAQ,KAAM,KAEvCC,EAAiD,CACnDC,cAAe,eACXL,EAAoBF,EAAWQ,QAAU,OAE7CC,eAAgB,eAAeT,EAAWQ,2BACtCN,EAAoBF,EAAWU,OAAS,OAE5CC,cAAe,eAAeX,EAAWU,0BACrCR,EAAoBF,EAAWY,IAAM,OAEzCC,WAAY,eAAeb,EAAWY,MACtCE,WAAY,0BACZC,YAAa,4BAGXC,EAAgBC,IAAAA,CAClBC,KACiB,gBAAbD,GAA2C,eAAbA,EACxBE,EAAWC,YACXD,EAAWE,WACrBJ,SAAAA,IAOSK,EAAY,KACrB,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCC,EAAQC,GAAkBC,EAAWC,EAAS,CACjDtB,eAAe,EACfE,gBAAgB,EAChBE,eAAe,EACfE,YAAY,EACZE,aAAa,EACbD,YAAY,IAGhBgB,EAAU,KACNN,GAAc,GACd,MAAMO,EAAiBC,OAAOC,QAAQ3B,GAAa4B,IAC/C,EAAEC,EAAKC,KAAU,CAACD,EAAKE,EAA0BD,KAGrD,IAAA,MAAYD,EAAKG,KAAUP,EACnBO,GACAX,EAAeX,EAAamB,KAGrC,IAEH,MAAMI,EAAiBC,EAClBL,GAA4BM,IACzBC,sBAAsB,KACdD,EAAEE,SACFhB,EAAeX,EAAamB,OAIxC,IAGJ,OAAAL,EAAU,KACN,IAAKP,IAAeqB,OAAOC,WACvB,OAEJ,MAAMC,EAEF,GAEJ,IAAA,MAAYX,EAAKC,KAASJ,OAAOC,QAAQ3B,GAAc,CACnD,MAAMyC,EAAYH,OAAOC,WAAWT,GAC9BY,EAAWT,EAAeJ,GAChCW,EAAmBG,KAAK,CAACF,EAAWC,IACpCE,EAAsBH,EAAWC,EACrC,CAEA,MAAO,KACH,IAAA,MAAYD,EAAWC,KAAaF,EAChCK,EAAyBJ,EAAWC,KAG7C,CAACT,EAAgBhB,IAEb,IAAKG"}

package/build/es/tailwind/plugins/jokulTypographyPlugin.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{k as o}from"../../../index-DOHQmuhD.js";import t from"tailwindcss/plugin.js";import s from"../../core/tokens.js";const{breakpoint:e,typography:i}=s,m=t(({addComponents:t})=>{const s=Object.entries(i.style).map(([t,s])=>[`.${o(t)}`,{...s.small,[`@media (min-width: ${e.medium})`]:{...s.base}}]);t(Object.fromEntries(s))});export{m as jokulTypographyPlugin};
+import e from"tailwindcss/plugin.js";import t from"../../tokens.js";const n=new RegExp("([\\p{Ll}\\d])(\\p{Lu})","gu"),r=new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])","gu"),c=new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d","u"),o=/[^\p{L}\d]+/giu,i="$1\0$2";function s(e){let t=e.trim();t=t.replace(n,i).replace(r,i),t=t.replace(o,"\0");let c=0,s=t.length;for(;"\0"===t.charAt(c);)c++;if(c===s)return[];for(;"\0"===t.charAt(s-1);)s--;return t.slice(c,s).split(/\0/g)}function l(e){const t=s(e);for(let e=0;e<t.length;e++){const n=t[e],r=c.exec(n);if(r){const c=r.index+(r[1]??r[2]).length;t.splice(e,1,n.slice(0,c),n.slice(c))}}return t}function p(e,t){const[n,r,c]=function(e,t={}){const n=t.split??(t.separateNumbers?l:s),r=t.prefixCharacters??"",c=t.suffixCharacters??"";let o=0,i=e.length;for(;o<e.length;){const t=e.charAt(o);if(!r.includes(t))break;o++}for(;i>o;){const t=i-1,n=e.charAt(t);if(!c.includes(n))break;i=t}return[e.slice(0,o),n(e.slice(o,i)),e.slice(i)]}(e,t);return n+r.map(function(e){return!1===e?e=>e.toLowerCase():t=>t.toLocaleLowerCase(e)}(t?.locale)).join(t?.delimiter??" ")+c}function u(e,t){return p(e,{delimiter:"-",...t})}const{textStyle:a}=t,f=e(({addComponents:e})=>{const t=Object.entries(a).map(([e,t])=>[`.${u(e)}`,{font:t}]);e(Object.fromEntries(t))});export{f as jokulTypographyPlugin};
 //# sourceMappingURL=jokulTypographyPlugin.js.map

package/build/es/tailwind/plugins/jokulTypographyPlugin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"jokulTypographyPlugin.js","sources":["../../../../src/tailwind/plugins/jokulTypographyPlugin.ts"],"sourcesContent":["import { kebabCase } from \"change-case\";\nimport plugin from \"tailwindcss/plugin.js\";\nimport tokens from \"../../core/tokens.js\";\n\nconst { breakpoint, typography } = tokens;\n\nexport const jokulTypographyPlugin = plugin(({ addComponents }) => {\n const mappedTextStyles = Object.entries(typography.style).map(\n ([name, style]) => [\n `.${kebabCase(name)}`,\n {\n ...style.small,\n [`@media (min-width: ${breakpoint.medium})`]: {\n ...style.base,\n },\n },\n ],\n );\n\n addComponents(Object.fromEntries(mappedTextStyles));\n});\n"],"names":["breakpoint","typography","tokens","jokulTypographyPlugin","plugin","addComponents","mappedTextStyles","Object","entries","style","map","name","kebabCase","small","medium","base","fromEntries"],"mappings":"wHAIA,MAAQA,WAAAA,EAAYC,WAAAA,GAAeC,EAEtBC,EAAwBC,EAAO,EAAGC,cAAAA,MAC3C,MAAMC,EAAmBC,OAAOC,QAAQP,EAAWQ,OAAOC,IACtD,EAAEC,EAAMF,KAAW,CACf,IAAIG,EAAUD,KACd,IACOF,EAAMI,MACT,CAAC,sBAAsBb,EAAWc,WAAY,IACvCL,EAAMM,SAMzBV,EAAcE,OAAOS,YAAYV"}
1	+ {"version":3,"file":"jokulTypographyPlugin.js","sources":["../../../../../../node_modules/.pnpm/change-case@5.4.4/node_modules/change-case/dist/index.js","../../../../src/tailwind/plugins/jokulTypographyPlugin.ts"],"sourcesContent":["// Regexps involved with splitting words in various case formats.\nconst SPLIT_LOWER_UPPER_RE = /([\\p{Ll}\\d])(\\p{Lu})/gu;\nconst SPLIT_UPPER_UPPER_RE = /(\\p{Lu})([\\p{Lu}][\\p{Ll}])/gu;\n// Used to iterate over the initial split result and separate numbers.\nconst SPLIT_SEPARATE_NUMBER_RE = /(\\d)\\p{Ll}\|(\\p{L})\\d/u;\n// Regexp involved with stripping non-word characters from the result.\nconst DEFAULT_STRIP_REGEXP = /[^\\p{L}\\d]+/giu;\n// The replacement value for splits.\nconst SPLIT_REPLACE_VALUE = \"$1\\0$2\";\n// The default characters to keep after transforming case.\nconst DEFAULT_PREFIX_SUFFIX_CHARACTERS = \"\";\n/*\n Split any cased input strings into an array of words.\n /\nexport function split(value) {\n let result = value.trim();\n result = result\n .replace(SPLIT_LOWER_UPPER_RE, SPLIT_REPLACE_VALUE)\n .replace(SPLIT_UPPER_UPPER_RE, SPLIT_REPLACE_VALUE);\n result = result.replace(DEFAULT_STRIP_REGEXP, \"\\0\");\n let start = 0;\n let end = result.length;\n // Trim the delimiter from around the output string.\n while (result.charAt(start) === \"\\0\")\n start++;\n if (start === end)\n return [];\n while (result.charAt(end - 1) === \"\\0\")\n end--;\n return result.slice(start, end).split(/\\0/g);\n}\n/\n Split the input string into an array of words, separating numbers.\n /\nexport function splitSeparateNumbers(value) {\n const words = split(value);\n for (let i = 0; i < words.length; i++) {\n const word = words[i];\n const match = SPLIT_SEPARATE_NUMBER_RE.exec(word);\n if (match) {\n const offset = match.index + (match[1] ?? match[2]).length;\n words.splice(i, 1, word.slice(0, offset), word.slice(offset));\n }\n }\n return words;\n}\n/\n Convert a string to space separated lower case (`foo bar`).\n /\nexport function noCase(input, options) {\n const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n return (prefix +\n words.map(lowerFactory(options?.locale)).join(options?.delimiter ?? \" \") +\n suffix);\n}\n/\n Convert a string to camel case (`fooBar`).\n /\nexport function camelCase(input, options) {\n const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n const lower = lowerFactory(options?.locale);\n const upper = upperFactory(options?.locale);\n const transform = options?.mergeAmbiguousCharacters\n ? capitalCaseTransformFactory(lower, upper)\n : pascalCaseTransformFactory(lower, upper);\n return (prefix +\n words\n .map((word, index) => {\n if (index === 0)\n return lower(word);\n return transform(word, index);\n })\n .join(options?.delimiter ?? \"\") +\n suffix);\n}\n/\n Convert a string to pascal case (`FooBar`).\n /\nexport function pascalCase(input, options) {\n const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n const lower = lowerFactory(options?.locale);\n const upper = upperFactory(options?.locale);\n const transform = options?.mergeAmbiguousCharacters\n ? capitalCaseTransformFactory(lower, upper)\n : pascalCaseTransformFactory(lower, upper);\n return prefix + words.map(transform).join(options?.delimiter ?? \"\") + suffix;\n}\n/\n Convert a string to pascal snake case (`Foo_Bar`).\n /\nexport function pascalSnakeCase(input, options) {\n return capitalCase(input, { delimiter: \"_\", ...options });\n}\n/\n Convert a string to capital case (`Foo Bar`).\n /\nexport function capitalCase(input, options) {\n const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n const lower = lowerFactory(options?.locale);\n const upper = upperFactory(options?.locale);\n return (prefix +\n words\n .map(capitalCaseTransformFactory(lower, upper))\n .join(options?.delimiter ?? \" \") +\n suffix);\n}\n/\n Convert a string to constant case (`FOO_BAR`).\n /\nexport function constantCase(input, options) {\n const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n return (prefix +\n words.map(upperFactory(options?.locale)).join(options?.delimiter ?? \"_\") +\n suffix);\n}\n/\n Convert a string to dot case (`foo.bar`).\n /\nexport function dotCase(input, options) {\n return noCase(input, { delimiter: \".\", ...options });\n}\n/\n Convert a string to kebab case (`foo-bar`).\n /\nexport function kebabCase(input, options) {\n return noCase(input, { delimiter: \"-\", ...options });\n}\n/\n Convert a string to path case (`foo/bar`).\n /\nexport function pathCase(input, options) {\n return noCase(input, { delimiter: \"/\", ...options });\n}\n/\n Convert a string to path case (`Foo bar`).\n /\nexport function sentenceCase(input, options) {\n const [prefix, words, suffix] = splitPrefixSuffix(input, options);\n const lower = lowerFactory(options?.locale);\n const upper = upperFactory(options?.locale);\n const transform = capitalCaseTransformFactory(lower, upper);\n return (prefix +\n words\n .map((word, index) => {\n if (index === 0)\n return transform(word);\n return lower(word);\n })\n .join(options?.delimiter ?? \" \") +\n suffix);\n}\n/\n Convert a string to snake case (`foo_bar`).\n /\nexport function snakeCase(input, options) {\n return noCase(input, { delimiter: \"_\", ...options });\n}\n/\n Convert a string to header case (`Foo-Bar`).\n */\nexport function trainCase(input, options) {\n return capitalCase(input, { delimiter: \"-\", ...options });\n}\nfunction lowerFactory(locale) {\n return locale === false\n ? (input) => input.toLowerCase()\n : (input) => input.toLocaleLowerCase(locale);\n}\nfunction upperFactory(locale) {\n return locale === false\n ? (input) => input.toUpperCase()\n : (input) => input.toLocaleUpperCase(locale);\n}\nfunction capitalCaseTransformFactory(lower, upper) {\n return (word) => `${upper(word[0])}${lower(word.slice(1))}`;\n}\nfunction pascalCaseTransformFactory(lower, upper) {\n return (word, index) => {\n const char0 = word[0];\n const initial = index > 0 && char0 >= \"0\" && char0 <= \"9\" ? \"_\" + char0 : upper(char0);\n return initial + lower(word.slice(1));\n };\n}\nfunction splitPrefixSuffix(input, options = {}) {\n const splitFn = options.split ?? (options.separateNumbers ? splitSeparateNumbers : split);\n const prefixCharacters = options.prefixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;\n const suffixCharacters = options.suffixCharacters ?? DEFAULT_PREFIX_SUFFIX_CHARACTERS;\n let prefixIndex = 0;\n let suffixIndex = input.length;\n while (prefixIndex < input.length) {\n const char = input.charAt(prefixIndex);\n if (!prefixCharacters.includes(char))\n break;\n prefixIndex++;\n }\n while (suffixIndex > prefixIndex) {\n const index = suffixIndex - 1;\n const char = input.charAt(index);\n if (!suffixCharacters.includes(char))\n break;\n suffixIndex = index;\n }\n return [\n input.slice(0, prefixIndex),\n splitFn(input.slice(prefixIndex, suffixIndex)),\n input.slice(suffixIndex),\n ];\n}\n//# sourceMappingURL=index.js.map","import { kebabCase } from \"change-case\";\nimport plugin from \"tailwindcss/plugin.js\";\nimport tokens from \"../../tokens.js\";\n\nconst { textStyle } = tokens;\n\nexport const jokulTypographyPlugin = plugin(({ addComponents }) => {\n const mappedTextStyles = Object.entries(textStyle).map(([name, style]) => [\n `.${kebabCase(name)}`,\n {\n font: style,\n },\n ]);\n\n addComponents(Object.fromEntries(mappedTextStyles));\n});\n"],"names":["SPLIT_LOWER_UPPER_RE","RegExp","SPLIT_UPPER_UPPER_RE","SPLIT_SEPARATE_NUMBER_RE","DEFAULT_STRIP_REGEXP","SPLIT_REPLACE_VALUE","split","value","result","trim","replace","start","end","length","charAt","slice","splitSeparateNumbers","words","i","word","match","exec","offset","index","splice","noCase","input","options","prefix","suffix","splitFn","separateNumbers","prefixCharacters","suffixCharacters","prefixIndex","suffixIndex","char","includes","splitPrefixSuffix","map","locale","toLowerCase","toLocaleLowerCase","lowerFactory","join","delimiter","kebabCase","textStyle","tokens","jokulTypographyPlugin","plugin","addComponents","mappedTextStyles","Object","entries","name","style","font","fromEntries"],"mappings":"oEACA,MAAMA,EAAuB,IAAAC,OAAA,0BAAA,MACvBC,EAAuB,WAAA,gCAAA,MAEvBC,EAA2B,IAAAF,OAAA,2BAAA,KAE3BG,EAAuB,iBAEvBC,EAAsB,SAMrB,SAASC,EAAMC,GAClB,IAAIC,EAASD,EAAME,OACnBD,EAASA,EACJE,QAAQV,EAAsBK,GAC9BK,QAAQR,EAAsBG,GACnCG,EAASA,EAAOE,QAAQN,EAAsB,MAC9C,IAAIO,EAAQ,EACRC,EAAMJ,EAAOK,OAEjB,KAAgC,OAAzBL,EAAOM,OAAOH,IACjBA,IACJ,GAAIA,IAAUC,EACV,MAAO,GACX,KAAkC,OAA3BJ,EAAOM,OAAOF,EAAM,IACvBA,IACJ,OAAOJ,EAAOO,MAAMJ,EAAOC,GAAKN,MAAM,MAC1C,CAIO,SAASU,EAAqBT,GACjC,MAAMU,EAAQX,EAAMC,GACpB,IAAA,IAASW,EAAI,EAAGA,EAAID,EAAMJ,OAAQK,IAAK,CACnC,MAAMC,EAAOF,EAAMC,GACbE,EAAQjB,EAAyBkB,KAAKF,GAC5C,GAAIC,EAAO,CACP,MAAME,EAASF,EAAMG,OAASH,EAAM,IAAMA,EAAM,IAAIP,OACpDI,EAAMO,OAAON,EAAG,EAAGC,EAAKJ,MAAM,EAAGO,GAASH,EAAKJ,MAAMO,GACzD,CACJ,CACA,OAAOL,CACX,CAIO,SAASQ,EAAOC,EAAOC,GAC1B,MAAOC,EAAQX,EAAOY,GAqI1B,SAA2BH,EAAOC,EAAU,IACxC,MAAMG,EAAUH,EAAQrB,QAAUqB,EAAQI,gBAAkBf,EAAuBV,GAC7E0B,EAAmBL,EAAQK,kBA/KI,GAgL/BC,EAAmBN,EAAQM,kBAhLI,GAiLrC,IAAIC,EAAc,EACdC,EAAcT,EAAMb,OACxB,KAAOqB,EAAcR,EAAMb,QAAQ,CAC/B,MAAMuB,EAAOV,EAAMZ,OAAOoB,GAC1B,IAAKF,EAAiBK,SAASD,GAC3B,MACJF,GACJ,CACA,KAAOC,EAAcD,GAAa,CAC9B,MAAMX,EAAQY,EAAc,EACtBC,EAAOV,EAAMZ,OAAOS,GAC1B,IAAKU,EAAiBI,SAASD,GAC3B,MACJD,EAAcZ,CAClB,CACA,MAAO,CACHG,EAAMX,MAAM,EAAGmB,GACfJ,EAAQJ,EAAMX,MAAMmB,EAAaC,IACjCT,EAAMX,MAAMoB,GAEpB,CA7JoCG,CAAkBZ,EAAOC,GACzD,OAAQC,EACJX,EAAMsB,IA+Gd,SAAsBC,GAClB,OAAkB,IAAXA,EACAd,GAAUA,EAAMe,cAChBf,GAAUA,EAAMgB,kBAAkBF,EAC7C,CAnHkBG,CAAahB,GAASa,SAASI,KAAKjB,GAASkB,WAAa,KACpEhB,CACR,CAsEO,SAASiB,EAAUpB,EAAOC,GAC7B,OAAOF,EAAOC,EAAO,CAAEmB,UAAW,OAAQlB,GAC9C,CC1HA,MAAQoB,UAAAA,GAAcC,EAETC,EAAwBC,EAAO,EAAGC,cAAAA,MAC3C,MAAMC,EAAmBC,OAAOC,QAAQP,GAAWR,IAAI,EAAEgB,EAAMC,KAAW,CACtE,IAAIV,EAAUS,KACd,CACIE,KAAMD,KAIdL,EAAcE,OAAOK,YAAYN","x_google_ignoreList":[0]}

package/build/es/tailwind/tailwindPreset.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import o from"../core/tokens.js";import r from"./colors.js";import{jokulTypographyPlugin as e}from"./plugins/jokulTypographyPlugin.js";const i={theme:{colors:r,spacing:o.spacing,fontWeight:o.typography.weight,fontSize:o.typography.font.size,lineHeight:o.typography.line.height,borderRadius:o.border.radius,borderWidth:o.border.width,screens:{sm:o.breakpoint.medium,md:o.breakpoint.large,lg:o.breakpoint.xl}},plugins:[e]};export{i as jokulPreset};
+import o from"../tokens.js";import{jokulTypographyPlugin as e}from"./plugins/jokulTypographyPlugin.js";const i={theme:{colors:o.color,spacing:o.spacing,fontWeight:o.font.weight,fontSize:o.font.size,lineHeight:o.lineHeight,borderRadius:o.border.radius,borderWidth:o.border.width,screens:{sm:o.breakpoint.medium,md:o.breakpoint.large,lg:o.breakpoint.xl}},plugins:[e]};export{i as jokulPreset};
 //# sourceMappingURL=tailwindPreset.js.map

package/build/es/tailwind/tailwindPreset.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tailwindPreset.js","sources":["../../../src/tailwind/tailwindPreset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\nimport tokens from \"../~~core/~~tokens.js\";\nimport ~~colors from \"./colors.js\";\nimport~~ { jokulTypographyPlugin } from \"./plugins/jokulTypographyPlugin.js\";\n\nexport const jokulPreset: Partial<Config> = {\n theme: {\n colors,\n spacing: tokens.spacing,\n fontWeight: tokens.~~typography~~.weight,\n fontSize: tokens.~~typography.~~font.size,\n lineHeight: tokens.~~typography.line.height~~,\n borderRadius: tokens.border.radius,\n borderWidth: tokens.border.width,\n screens: {\n sm: tokens.breakpoint.medium,\n md: tokens.breakpoint.large,\n lg: tokens.breakpoint.xl,\n },\n },\n plugins: [jokulTypographyPlugin],\n};\n"],"names":["jokulPreset","theme","colors","~~spacing~~","~~tokens~~","fontWeight","~~typography~~","weight","fontSize","~~font","~~size","lineHeight","~~line","height","~~borderRadius","border","radius","borderWidth","width","screens","sm","breakpoint","medium","md","large","lg","xl","plugins","jokulTypographyPlugin"],"mappings":"~~uIAKO~~,MAAMA,EAA+B,CACxCC,MAAO,CACHC,~~OAAAA~~,~~EACAC~~,~~QAASC~~,~~EAAOD~~,~~QAChBE,WAAYD,~~EAAOE,~~WAAWC~~,~~OAC9BC~~,~~SAAUJ~~,~~EAAOE~~,~~WAAWG~~,~~KAAKC~~,~~KACjCC~~,~~WAAYP~~,~~EAAOE~~,~~WAAWM~~,~~KAAKC~~,~~OACnCC~~,~~aAAcV~~,~~EAAOW~~,OAAOC,OAC5BC,~~YAAab~~,~~EAAOW~~,OAAOG,MAC3BC,QAAS,CACLC,~~GAAIhB~~,~~EAAOiB~~,WAAWC,OACtBC,~~GAAInB~~,~~EAAOiB~~,WAAWG,MACtBC,~~GAAIrB~~,~~EAAOiB~~,WAAWK,KAG9BC,QAAS,CAACC"}
1	+ {"version":3,"file":"tailwindPreset.js","sources":["../../../src/tailwind/tailwindPreset.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\nimport tokens from \"../tokens.js\";\nimport { jokulTypographyPlugin } from \"./plugins/jokulTypographyPlugin.js\";\n\nexport const jokulPreset: Partial<Config> = {\n theme: {\n colors: tokens.color,\n spacing: tokens.spacing,\n fontWeight: tokens.font.weight,\n fontSize: tokens.font.size,\n lineHeight: tokens.lineHeight,\n borderRadius: tokens.border.radius,\n borderWidth: tokens.border.width,\n screens: {\n sm: tokens.breakpoint.medium,\n md: tokens.breakpoint.large,\n lg: tokens.breakpoint.xl,\n },\n },\n plugins: [jokulTypographyPlugin],\n};\n"],"names":["jokulPreset","theme","colors","tokens","color","spacing","fontWeight","font","weight","fontSize","size","lineHeight","borderRadius","border","radius","borderWidth","width","screens","sm","breakpoint","medium","md","large","lg","xl","plugins","jokulTypographyPlugin"],"mappings":"uGAIO,MAAMA,EAA+B,CACxCC,MAAO,CACHC,OAAQC,EAAOC,MACfC,QAASF,EAAOE,QAChBC,WAAYH,EAAOI,KAAKC,OACxBC,SAAUN,EAAOI,KAAKG,KACtBC,WAAYR,EAAOQ,WACnBC,aAAcT,EAAOU,OAAOC,OAC5BC,YAAaZ,EAAOU,OAAOG,MAC3BC,QAAS,CACLC,GAAIf,EAAOgB,WAAWC,OACtBC,GAAIlB,EAAOgB,WAAWG,MACtBC,GAAIpB,EAAOgB,WAAWK,KAG9BC,QAAS,CAACC"}

package/build/es/tokens.d.ts ADDED Viewed

@@ -0,0 +1,228 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+declare const _default: {
+    color: {
+        "@": {
+            background: {
+                page: string;
+                container: string;
+                "container-accent": string;
+                contrast: string;
+            };
+            text: {
+                default: string;
+                subdued: string;
+                accent: string;
+                "on-contrast": string;
+            };
+            border: {
+                default: string;
+                subdued: string;
+                strong: string;
+            };
+        };
+        warning: {
+            background: {
+                page: string;
+                container: string;
+                "container-accent": string;
+                contrast: string;
+            };
+            text: {
+                default: string;
+                subdued: string;
+                accent: string;
+                "on-contrast": string;
+            };
+            border: {
+                default: string;
+                subdued: string;
+                strong: string;
+            };
+        };
+        success: {
+            background: {
+                page: string;
+                container: string;
+                "container-accent": string;
+                contrast: string;
+            };
+            text: {
+                default: string;
+                subdued: string;
+                accent: string;
+                "on-contrast": string;
+            };
+            border: {
+                default: string;
+                subdued: string;
+                strong: string;
+            };
+        };
+        info: {
+            background: {
+                page: string;
+                container: string;
+                "container-accent": string;
+                contrast: string;
+            };
+            text: {
+                default: string;
+                subdued: string;
+                accent: string;
+                "on-contrast": string;
+            };
+            border: {
+                default: string;
+                subdued: string;
+                strong: string;
+            };
+        };
+        error: {
+            background: {
+                page: string;
+                container: string;
+                "container-accent": string;
+                contrast: string;
+            };
+            text: {
+                default: string;
+                subdued: string;
+                accent: string;
+                "on-contrast": string;
+            };
+            border: {
+                default: string;
+                subdued: string;
+                strong: string;
+            };
+        };
+    };
+    unit: {
+        0: string;
+        10: string;
+        15: string;
+        20: string;
+        25: string;
+        30: string;
+        35: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+        130: string;
+        210: string;
+        base: string;
+        "02": string;
+        "05": string;
+    };
+    spacing: {
+        0: string;
+        2: string;
+        4: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        32: string;
+        40: string;
+        64: string;
+        104: string;
+        168: string;
+        none: string;
+        "2xs": string;
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        "2xl": string;
+    };
+    border: {
+        width: {
+            1: string;
+            2: string;
+            3: string;
+        };
+        radius: {
+            none: string;
+            xs: string;
+            s: string;
+            m: string;
+            l: string;
+            full: string;
+        };
+    };
+    breakpoint: {
+        small: string;
+        medium: string;
+        large: string;
+        xl: string;
+    };
+    motion: {
+        timing: {
+            energetic: string;
+            snappy: string;
+            productive: string;
+            polite: string;
+            expressive: string;
+            lazy: string;
+        };
+        easing: {
+            standard: string;
+            entrance: string;
+            exit: string;
+            easeInBounceOut: string;
+            focus: string;
+        };
+    };
+    font: {
+        size: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
+            7: string;
+            8: string;
+            9: string;
+            10: string;
+        };
+        weight: {
+            normal: string;
+            bold: string;
+        };
+        family: {
+            regular: string;
+            display: string;
+            mono: string;
+        };
+    };
+    lineHeight: {
+        flush: string;
+        tight: string;
+        relaxed: string;
+    };
+    textStyle: {
+        title: string;
+        "title-small": string;
+        "heading-1": string;
+        "heading-2": string;
+        "heading-3": string;
+        "heading-4": string;
+        "heading-5": string;
+        "paragraph-large": string;
+        "paragraph-medium": string;
+        "paragraph-small": string;
+        "text-large": string;
+        "text-medium": string;
+        "text-small": string;
+        "text-micro": string;
+    };
+};
+export default _default;

package/build/es/tokens.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const r={color:{"@":{background:{page:"var(--jkl-color-background-page)",container:"var(--jkl-color-background-container)","container-accent":"var(--jkl-color-background-container-accent)",contrast:"var(--jkl-color-background-contrast)"},text:{default:"var(--jkl-color-text-default)",subdued:"var(--jkl-color-text-subdued)",accent:"var(--jkl-color-text-accent)","on-contrast":"var(--jkl-color-text-on-contrast)"},border:{default:"var(--jkl-color-border-default)",subdued:"var(--jkl-color-border-subdued)",strong:"var(--jkl-color-border-strong)"}},warning:{background:{page:"var(--jkl-color-warning-background-page)",container:"var(--jkl-color-warning-background-container)","container-accent":"var(--jkl-color-warning-background-container-accent)",contrast:"var(--jkl-color-warning-background-contrast)"},text:{default:"var(--jkl-color-warning-text-default)",subdued:"var(--jkl-color-warning-text-subdued)",accent:"var(--jkl-color-warning-text-accent)","on-contrast":"var(--jkl-color-warning-text-on-contrast)"},border:{default:"var(--jkl-color-warning-border-default)",subdued:"var(--jkl-color-warning-border-subdued)",strong:"var(--jkl-color-warning-border-strong)"}},success:{background:{page:"var(--jkl-color-success-background-page)",container:"var(--jkl-color-success-background-container)","container-accent":"var(--jkl-color-success-background-container-accent)",contrast:"var(--jkl-color-success-background-contrast)"},text:{default:"var(--jkl-color-success-text-default)",subdued:"var(--jkl-color-success-text-subdued)",accent:"var(--jkl-color-success-text-accent)","on-contrast":"var(--jkl-color-success-text-on-contrast)"},border:{default:"var(--jkl-color-success-border-default)",subdued:"var(--jkl-color-success-border-subdued)",strong:"var(--jkl-color-success-border-strong)"}},info:{background:{page:"var(--jkl-color-info-background-page)",container:"var(--jkl-color-info-background-container)","container-accent":"var(--jkl-color-info-background-container-accent)",contrast:"var(--jkl-color-info-background-contrast)"},text:{default:"var(--jkl-color-info-text-default)",subdued:"var(--jkl-color-info-text-subdued)",accent:"var(--jkl-color-info-text-accent)","on-contrast":"var(--jkl-color-info-text-on-contrast)"},border:{default:"var(--jkl-color-info-border-default)",subdued:"var(--jkl-color-info-border-subdued)",strong:"var(--jkl-color-info-border-strong)"}},error:{background:{page:"var(--jkl-color-error-background-page)",container:"var(--jkl-color-error-background-container)","container-accent":"var(--jkl-color-error-background-container-accent)",contrast:"var(--jkl-color-error-background-contrast)"},text:{default:"var(--jkl-color-error-text-default)",subdued:"var(--jkl-color-error-text-subdued)",accent:"var(--jkl-color-error-text-accent)","on-contrast":"var(--jkl-color-error-text-on-contrast)"},border:{default:"var(--jkl-color-error-border-default)",subdued:"var(--jkl-color-error-border-subdued)",strong:"var(--jkl-color-error-border-strong)"}}},unit:{0:"var(--jkl-unit-0)",10:"var(--jkl-unit-10)",15:"var(--jkl-unit-15)",20:"var(--jkl-unit-20)",25:"var(--jkl-unit-25)",30:"var(--jkl-unit-30)",35:"var(--jkl-unit-35)",40:"var(--jkl-unit-40)",50:"var(--jkl-unit-50)",60:"var(--jkl-unit-60)",70:"var(--jkl-unit-70)",80:"var(--jkl-unit-80)",90:"var(--jkl-unit-90)",100:"var(--jkl-unit-100)",130:"var(--jkl-unit-130)",210:"var(--jkl-unit-210)",base:"var(--jkl-unit-base)","02":"var(--jkl-unit-02)","05":"var(--jkl-unit-05)"},spacing:{0:"var(--jkl-spacing-0)",2:"var(--jkl-spacing-2)",4:"var(--jkl-spacing-4)",8:"var(--jkl-spacing-8)",12:"var(--jkl-spacing-12)",16:"var(--jkl-spacing-16)",24:"var(--jkl-spacing-24)",32:"var(--jkl-spacing-32)",40:"var(--jkl-spacing-40)",64:"var(--jkl-spacing-64)",104:"var(--jkl-spacing-104)",168:"var(--jkl-spacing-168)",none:"var(--jkl-spacing-none)","2xs":"var(--jkl-spacing-2xs)",xs:"var(--jkl-spacing-xs)",s:"var(--jkl-spacing-s)",m:"var(--jkl-spacing-m)",l:"var(--jkl-spacing-l)",xl:"var(--jkl-spacing-xl)","2xl":"var(--jkl-spacing-2xl)"},border:{width:{1:"var(--jkl-border-width-1)",2:"var(--jkl-border-width-2)",3:"var(--jkl-border-width-3)"},radius:{none:"var(--jkl-border-radius-none)",xs:"var(--jkl-border-radius-xs)",s:"var(--jkl-border-radius-s)",m:"var(--jkl-border-radius-m)",l:"var(--jkl-border-radius-l)",full:"var(--jkl-border-radius-full)"}},breakpoint:{small:"var(--jkl-breakpoint-small)",medium:"var(--jkl-breakpoint-medium)",large:"var(--jkl-breakpoint-large)",xl:"var(--jkl-breakpoint-xl)"},motion:{timing:{energetic:"var(--jkl-motion-timing-energetic)",snappy:"var(--jkl-motion-timing-snappy)",productive:"var(--jkl-motion-timing-productive)",polite:"var(--jkl-motion-timing-polite)",expressive:"var(--jkl-motion-timing-expressive)",lazy:"var(--jkl-motion-timing-lazy)"},easing:{standard:"var(--jkl-motion-easing-standard)",entrance:"var(--jkl-motion-easing-entrance)",exit:"var(--jkl-motion-easing-exit)",easeInBounceOut:"var(--jkl-motion-easing-ease-in-bounce-out)",focus:"var(--jkl-motion-easing-focus)"}},font:{size:{1:"var(--jkl-font-size-1)",2:"var(--jkl-font-size-2)",3:"var(--jkl-font-size-3)",4:"var(--jkl-font-size-4)",5:"var(--jkl-font-size-5)",6:"var(--jkl-font-size-6)",7:"var(--jkl-font-size-7)",8:"var(--jkl-font-size-8)",9:"var(--jkl-font-size-9)",10:"var(--jkl-font-size-10)"},weight:{normal:"var(--jkl-font-weight-normal)",bold:"var(--jkl-font-weight-bold)"},family:{regular:"var(--jkl-font-family-regular)",display:"var(--jkl-font-family-display)",mono:"var(--jkl-font-family-mono)"}},lineHeight:{flush:"var(--jkl-line-height-flush)",tight:"var(--jkl-line-height-tight)",relaxed:"var(--jkl-line-height-relaxed)"},textStyle:{title:"var(--jkl-text-style-title)","title-small":"var(--jkl-text-style-title-small)","heading-1":"var(--jkl-text-style-heading-1)","heading-2":"var(--jkl-text-style-heading-2)","heading-3":"var(--jkl-text-style-heading-3)","heading-4":"var(--jkl-text-style-heading-4)","heading-5":"var(--jkl-text-style-heading-5)","paragraph-large":"var(--jkl-text-style-paragraph-large)","paragraph-medium":"var(--jkl-text-style-paragraph-medium)","paragraph-small":"var(--jkl-text-style-paragraph-small)","text-large":"var(--jkl-text-style-text-large)","text-medium":"var(--jkl-text-style-text-medium)","text-small":"var(--jkl-text-style-text-small)","text-micro":"var(--jkl-text-style-text-micro)"}};export{r as default};
2	+ //# sourceMappingURL=tokens.js.map

package/build/es/tokens.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tokens.js","sources":["../../src/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n color: {\n \"@\": {\n background: {\n page: \"var(--jkl-color-background-page)\",\n container: \"var(--jkl-color-background-container)\",\n \"container-accent\": \"var(--jkl-color-background-container-accent)\",\n contrast: \"var(--jkl-color-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-text-default)\",\n subdued: \"var(--jkl-color-text-subdued)\",\n accent: \"var(--jkl-color-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-border-default)\",\n subdued: \"var(--jkl-color-border-subdued)\",\n strong: \"var(--jkl-color-border-strong)\",\n },\n },\n warning: {\n background: {\n page: \"var(--jkl-color-warning-background-page)\",\n container: \"var(--jkl-color-warning-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-warning-background-container-accent)\",\n contrast: \"var(--jkl-color-warning-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-warning-text-default)\",\n subdued: \"var(--jkl-color-warning-text-subdued)\",\n accent: \"var(--jkl-color-warning-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-warning-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-warning-border-default)\",\n subdued: \"var(--jkl-color-warning-border-subdued)\",\n strong: \"var(--jkl-color-warning-border-strong)\",\n },\n },\n success: {\n background: {\n page: \"var(--jkl-color-success-background-page)\",\n container: \"var(--jkl-color-success-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-success-background-container-accent)\",\n contrast: \"var(--jkl-color-success-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-success-text-default)\",\n subdued: \"var(--jkl-color-success-text-subdued)\",\n accent: \"var(--jkl-color-success-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-success-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-success-border-default)\",\n subdued: \"var(--jkl-color-success-border-subdued)\",\n strong: \"var(--jkl-color-success-border-strong)\",\n },\n },\n info: {\n background: {\n page: \"var(--jkl-color-info-background-page)\",\n container: \"var(--jkl-color-info-background-container)\",\n \"container-accent\": \"var(--jkl-color-info-background-container-accent)\",\n contrast: \"var(--jkl-color-info-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-info-text-default)\",\n subdued: \"var(--jkl-color-info-text-subdued)\",\n accent: \"var(--jkl-color-info-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-info-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-info-border-default)\",\n subdued: \"var(--jkl-color-info-border-subdued)\",\n strong: \"var(--jkl-color-info-border-strong)\",\n },\n },\n error: {\n background: {\n page: \"var(--jkl-color-error-background-page)\",\n container: \"var(--jkl-color-error-background-container)\",\n \"container-accent\":\n \"var(--jkl-color-error-background-container-accent)\",\n contrast: \"var(--jkl-color-error-background-contrast)\",\n },\n text: {\n default: \"var(--jkl-color-error-text-default)\",\n subdued: \"var(--jkl-color-error-text-subdued)\",\n accent: \"var(--jkl-color-error-text-accent)\",\n \"on-contrast\": \"var(--jkl-color-error-text-on-contrast)\",\n },\n border: {\n default: \"var(--jkl-color-error-border-default)\",\n subdued: \"var(--jkl-color-error-border-subdued)\",\n strong: \"var(--jkl-color-error-border-strong)\",\n },\n },\n },\n unit: {\n 0: \"var(--jkl-unit-0)\",\n 10: \"var(--jkl-unit-10)\",\n 15: \"var(--jkl-unit-15)\",\n 20: \"var(--jkl-unit-20)\",\n 25: \"var(--jkl-unit-25)\",\n 30: \"var(--jkl-unit-30)\",\n 35: \"var(--jkl-unit-35)\",\n 40: \"var(--jkl-unit-40)\",\n 50: \"var(--jkl-unit-50)\",\n 60: \"var(--jkl-unit-60)\",\n 70: \"var(--jkl-unit-70)\",\n 80: \"var(--jkl-unit-80)\",\n 90: \"var(--jkl-unit-90)\",\n 100: \"var(--jkl-unit-100)\",\n 130: \"var(--jkl-unit-130)\",\n 210: \"var(--jkl-unit-210)\",\n base: \"var(--jkl-unit-base)\",\n \"02\": \"var(--jkl-unit-02)\",\n \"05\": \"var(--jkl-unit-05)\",\n },\n spacing: {\n 0: \"var(--jkl-spacing-0)\",\n 2: \"var(--jkl-spacing-2)\",\n 4: \"var(--jkl-spacing-4)\",\n 8: \"var(--jkl-spacing-8)\",\n 12: \"var(--jkl-spacing-12)\",\n 16: \"var(--jkl-spacing-16)\",\n 24: \"var(--jkl-spacing-24)\",\n 32: \"var(--jkl-spacing-32)\",\n 40: \"var(--jkl-spacing-40)\",\n 64: \"var(--jkl-spacing-64)\",\n 104: \"var(--jkl-spacing-104)\",\n 168: \"var(--jkl-spacing-168)\",\n none: \"var(--jkl-spacing-none)\",\n \"2xs\": \"var(--jkl-spacing-2xs)\",\n xs: \"var(--jkl-spacing-xs)\",\n s: \"var(--jkl-spacing-s)\",\n m: \"var(--jkl-spacing-m)\",\n l: \"var(--jkl-spacing-l)\",\n xl: \"var(--jkl-spacing-xl)\",\n \"2xl\": \"var(--jkl-spacing-2xl)\",\n },\n border: {\n width: {\n 1: \"var(--jkl-border-width-1)\",\n 2: \"var(--jkl-border-width-2)\",\n 3: \"var(--jkl-border-width-3)\",\n },\n radius: {\n none: \"var(--jkl-border-radius-none)\",\n xs: \"var(--jkl-border-radius-xs)\",\n s: \"var(--jkl-border-radius-s)\",\n m: \"var(--jkl-border-radius-m)\",\n l: \"var(--jkl-border-radius-l)\",\n full: \"var(--jkl-border-radius-full)\",\n },\n },\n breakpoint: {\n small: \"var(--jkl-breakpoint-small)\",\n medium: \"var(--jkl-breakpoint-medium)\",\n large: \"var(--jkl-breakpoint-large)\",\n xl: \"var(--jkl-breakpoint-xl)\",\n },\n motion: {\n timing: {\n energetic: \"var(--jkl-motion-timing-energetic)\",\n snappy: \"var(--jkl-motion-timing-snappy)\",\n productive: \"var(--jkl-motion-timing-productive)\",\n polite: \"var(--jkl-motion-timing-polite)\",\n expressive: \"var(--jkl-motion-timing-expressive)\",\n lazy: \"var(--jkl-motion-timing-lazy)\",\n },\n easing: {\n standard: \"var(--jkl-motion-easing-standard)\",\n entrance: \"var(--jkl-motion-easing-entrance)\",\n exit: \"var(--jkl-motion-easing-exit)\",\n easeInBounceOut: \"var(--jkl-motion-easing-ease-in-bounce-out)\",\n focus: \"var(--jkl-motion-easing-focus)\",\n },\n },\n font: {\n size: {\n 1: \"var(--jkl-font-size-1)\",\n 2: \"var(--jkl-font-size-2)\",\n 3: \"var(--jkl-font-size-3)\",\n 4: \"var(--jkl-font-size-4)\",\n 5: \"var(--jkl-font-size-5)\",\n 6: \"var(--jkl-font-size-6)\",\n 7: \"var(--jkl-font-size-7)\",\n 8: \"var(--jkl-font-size-8)\",\n 9: \"var(--jkl-font-size-9)\",\n 10: \"var(--jkl-font-size-10)\",\n },\n weight: {\n normal: \"var(--jkl-font-weight-normal)\",\n bold: \"var(--jkl-font-weight-bold)\",\n },\n family: {\n regular: \"var(--jkl-font-family-regular)\",\n display: \"var(--jkl-font-family-display)\",\n mono: \"var(--jkl-font-family-mono)\",\n },\n },\n lineHeight: {\n flush: \"var(--jkl-line-height-flush)\",\n tight: \"var(--jkl-line-height-tight)\",\n relaxed: \"var(--jkl-line-height-relaxed)\",\n },\n textStyle: {\n title: \"var(--jkl-text-style-title)\",\n \"title-small\": \"var(--jkl-text-style-title-small)\",\n \"heading-1\": \"var(--jkl-text-style-heading-1)\",\n \"heading-2\": \"var(--jkl-text-style-heading-2)\",\n \"heading-3\": \"var(--jkl-text-style-heading-3)\",\n \"heading-4\": \"var(--jkl-text-style-heading-4)\",\n \"heading-5\": \"var(--jkl-text-style-heading-5)\",\n \"paragraph-large\": \"var(--jkl-text-style-paragraph-large)\",\n \"paragraph-medium\": \"var(--jkl-text-style-paragraph-medium)\",\n \"paragraph-small\": \"var(--jkl-text-style-paragraph-small)\",\n \"text-large\": \"var(--jkl-text-style-text-large)\",\n \"text-medium\": \"var(--jkl-text-style-text-medium)\",\n \"text-small\": \"var(--jkl-text-style-text-small)\",\n \"text-micro\": \"var(--jkl-text-style-text-micro)\",\n },\n};\n"],"names":["tokens","color","background","page","container","contrast","text","default","subdued","accent","border","strong","warning","success","info","error","unit","base","spacing","none","xs","s","m","l","xl","width","radius","full","breakpoint","small","medium","large","motion","timing","energetic","snappy","productive","polite","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","focus","font","size","weight","normal","bold","family","regular","display","mono","lineHeight","flush","tight","relaxed","textStyle","title"],"mappings":"AAIA,MAAAA,EAAe,CACbC,MAAO,CACL,IAAK,CACHC,WAAY,CACVC,KAAM,mCACNC,UAAW,wCACX,mBAAoB,+CACpBC,SAAU,wCAEZC,KAAM,CACJC,QAAS,gCACTC,QAAS,gCACTC,OAAQ,+BACR,cAAe,qCAEjBC,OAAQ,CACNH,QAAS,kCACTC,QAAS,kCACTG,OAAQ,mCAGZC,QAAS,CACPV,WAAY,CACVC,KAAM,2CACNC,UAAW,gDACX,mBACE,uDACFC,SAAU,gDAEZC,KAAM,CACJC,QAAS,wCACTC,QAAS,wCACTC,OAAQ,uCACR,cAAe,6CAEjBC,OAAQ,CACNH,QAAS,0CACTC,QAAS,0CACTG,OAAQ,2CAGZE,QAAS,CACPX,WAAY,CACVC,KAAM,2CACNC,UAAW,gDACX,mBACE,uDACFC,SAAU,gDAEZC,KAAM,CACJC,QAAS,wCACTC,QAAS,wCACTC,OAAQ,uCACR,cAAe,6CAEjBC,OAAQ,CACNH,QAAS,0CACTC,QAAS,0CACTG,OAAQ,2CAGZG,KAAM,CACJZ,WAAY,CACVC,KAAM,wCACNC,UAAW,6CACX,mBAAoB,oDACpBC,SAAU,6CAEZC,KAAM,CACJC,QAAS,qCACTC,QAAS,qCACTC,OAAQ,oCACR,cAAe,0CAEjBC,OAAQ,CACNH,QAAS,uCACTC,QAAS,uCACTG,OAAQ,wCAGZI,MAAO,CACLb,WAAY,CACVC,KAAM,yCACNC,UAAW,8CACX,mBACE,qDACFC,SAAU,8CAEZC,KAAM,CACJC,QAAS,sCACTC,QAAS,sCACTC,OAAQ,qCACR,cAAe,2CAEjBC,OAAQ,CACNH,QAAS,wCACTC,QAAS,wCACTG,OAAQ,0CAIdK,KAAM,CACJ,EAAG,oBACH,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,GAAI,qBACJ,IAAK,sBACL,IAAK,sBACL,IAAK,sBACLC,KAAM,uBACN,KAAM,qBACN,KAAM,sBAERC,QAAS,CACP,EAAG,uBACH,EAAG,uBACH,EAAG,uBACH,EAAG,uBACH,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,GAAI,wBACJ,IAAK,yBACL,IAAK,yBACLC,KAAM,0BACN,MAAO,yBACPC,GAAI,wBACJC,EAAG,uBACHC,EAAG,uBACHC,EAAG,uBACHC,GAAI,wBACJ,MAAO,0BAETd,OAAQ,CACNe,MAAO,CACL,EAAG,4BACH,EAAG,4BACH,EAAG,6BAELC,OAAQ,CACNP,KAAM,gCACNC,GAAI,8BACJC,EAAG,6BACHC,EAAG,6BACHC,EAAG,6BACHI,KAAM,kCAGVC,WAAY,CACVC,MAAO,8BACPC,OAAQ,+BACRC,MAAO,8BACPP,GAAI,4BAENQ,OAAQ,CACNC,OAAQ,CACNC,UAAW,qCACXC,OAAQ,kCACRC,WAAY,sCACZC,OAAQ,kCACRC,WAAY,sCACZC,KAAM,iCAERC,OAAQ,CACNC,SAAU,oCACVC,SAAU,oCACVC,KAAM,gCACNC,gBAAiB,8CACjBC,MAAO,mCAGXC,KAAM,CACJC,KAAM,CACJ,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,EAAG,yBACH,GAAI,2BAENC,OAAQ,CACNC,OAAQ,gCACRC,KAAM,+BAERC,OAAQ,CACNC,QAAS,iCACTC,QAAS,iCACTC,KAAM,gCAGVC,WAAY,CACVC,MAAO,+BACPC,MAAO,+BACPC,QAAS,kCAEXC,UAAW,CACTC,MAAO,8BACP,cAAe,oCACf,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,YAAa,kCACb,kBAAmB,wCACnB,mBAAoB,yCACpB,kBAAmB,wCACnB,aAAc,mCACd,cAAe,oCACf,aAAc,mCACd,aAAc"}

package/build/es/utilities/getThemeAndSize.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Size } from '../core/types.js';
+import { Size } from './types.js';
 export declare const getThemeAndSize: (element: Element | undefined) => {
     theme?: string;
     size?: Size;

package/build/es/utilities/getThemeAndSize.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const e=e=>{if(!e)return{};const t=getComputedStyle(e),r=Number.parseInt(t.getPropertyValue("--jkl-background-color").replace("#",""),16)<8388607.5?"dark":"light",a=e.closest("[data-size]")?.getAttribute("data-size");return{theme:r,size:a}};export{e as getThemeAndSize};
+const e=e=>{if(!e)return{};const t=getComputedStyle(e).colorScheme,s=e.closest("[data-size]")?.getAttribute("data-size");return{theme:t,size:s}};export{e as getThemeAndSize};
 //# sourceMappingURL=getThemeAndSize.js.map