@xanui/core 1.3.7 → 1.3.9

package/hooks/useColorTemplate.js

@@ -1,68 +1,65 @@
 "use client";
 const useColorTemplate = (color, type) => {
-    const is_def = color === "default";
-    if (is_def) {
-        color = "divider";
-    }
+    const is_def = color === "surface";
     if (type === "outline") {
         return {
-            primary: {
+            main: {
                 bgcolor: `transparent`,
-                color: is_def ? `text.primary` : `${color}.primary`,
+                color: is_def ? `surface.contrast` : `${color}.main`,
                 border: "1px solid",
-                borderColor: is_def ? `divider` : `${color}.primary`,
+                borderColor: is_def ? `surface.muted` : `${color}.main`,
             },
-            secondary: {
+            hover: {
                 bgcolor: `transparent`,
-                color: is_def ? `text.primary` : `${color}.secondary`,
+                color: is_def ? `surface.contrast` : `${color}.light`,
                 border: "1px solid",
-                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,
+                borderColor: is_def ? `surface.muted` : `${color}.light`,
             }
         };
     }
     else if (type === "fill") {
         return {
-            primary: {
-                bgcolor: color,
-                color: is_def ? `text.primary` : `${color}.text`,
+            main: {
+                bgcolor: is_def ? `surface.light` : `${color}`,
+                color: is_def ? `surface.contrast` : `${color}.contrast`,
                 border: "1px solid",
-                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,
+                borderColor: is_def ? `surface.divider` : `${color}.light`,
             },
-            secondary: {
-                bgcolor: `${color}.secondary`,
-                color: is_def ? `text.primary` : `${color}.text`,
+            hover: {
+                bgcolor: is_def ? `surface.dark` : `${color}.light`,
+                color: is_def ? `surface.contrast` : `${color}.contrast`,
                 border: "1px solid",
-                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,
+                borderColor: is_def ? `surface.divider` : `${color}.light`,
             }
         };
     }
     else if (type === "text") {
         return {
-            primary: {
+            main: {
                 bgcolor: "transparent",
-                color: is_def ? `text.primary` : `${color}.primary`,
+                color: is_def ? `surface.contrast` : `${color}.main`,
                 border: 0,
                 borderColor: `transparent`,
             },
-            secondary: {
+            hover: {
                 bgcolor: "transparent",
-                color: is_def ? `text.primary` : `${color}.secondary`,
+                color: is_def ? `surface.contrast` : `${color}.light`,
                 border: 0,
                 borderColor: `transparent`,
             }
         };
     }
-    else if (type === "soft") {
+    else if (type === "ghost") {
         return {
-            primary: {
-                bgcolor: `${color}.soft.primary`,
-                color: is_def ? `text.primary` : color,
+            main: {
+                bgcolor: `${color}.ghost`,
+                color: is_def ? `surface.contrast` : color,
                 border: 0,
                 borderColor: `transparent`,
             },
-            secondary: {
-                bgcolor: `${color}.soft.secondary`,
-                color: is_def ? `text.primary` : `${color}.secondary`,
+            hover: {
+                bgcolor: `${color}.ghost`,
+                color: is_def ? `surface.contrast` : `${color}.light`,
                 border: 0,
                 borderColor: `transparent`,
             }

package/hooks/useColorTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["\"use client\";\r\nexport type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"soft\"\r\nexport type UseColorTemplateColor = \"default\" | \"brand\" | \"accent\" | \"success\" | \"info\" | \"warning\" | \"danger\"\r\n\r\nconst useColorTemplate = (color: UseColorTemplateColor, type: UseColorTemplateType) => {\r\n    const is_def = color === \"default\";\r\n    if (is_def) {\r\n        color = \"divider\" as any\r\n    }\r\n\r\n    if (type === \"outline\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: `transparent`,\r\n                color: is_def ? `text.primary` : `${color}.primary`,\r\n                border: \"1px solid\",\r\n                borderColor: is_def ? `divider` : `${color}.primary`,\r\n            },\r\n            secondary: {\r\n                bgcolor: `transparent`,\r\n                color: is_def ? `text.primary` : `${color}.secondary`,\r\n                border: \"1px solid\",\r\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\r\n            }\r\n        }\r\n    } else if (type === \"fill\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: color,\r\n                color: is_def ? `text.primary` : `${color}.text`,\r\n                border: \"1px solid\",\r\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\r\n            },\r\n            secondary: {\r\n                bgcolor: `${color}.secondary`,\r\n                color: is_def ? `text.primary` : `${color}.text`,\r\n                border: \"1px solid\",\r\n                borderColor: is_def ? `divider.secondary` : `${color}.secondary`,\r\n            }\r\n        }\r\n    } else if (type === \"text\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: \"transparent\",\r\n                color: is_def ? `text.primary` : `${color}.primary`,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            },\r\n            secondary: {\r\n                bgcolor: \"transparent\",\r\n                color: is_def ? `text.primary` : `${color}.secondary`,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    } else if (type === \"soft\") {\r\n        return {\r\n            primary: {\r\n                bgcolor: `${color}.soft.primary`,\r\n                color: is_def ? `text.primary` : color,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            },\r\n            secondary: {\r\n                bgcolor: `${color}.soft.secondary`,\r\n                color: is_def ? `text.primary` : `${color}.secondary`,\r\n                border: 0,\r\n                borderColor: `transparent`,\r\n            }\r\n        }\r\n    }\r\n\r\n    throw new Error(`useColorTemplate: Unknown type ${type}`);\r\n}\r\n\r\nexport default useColorTemplate"],"names":[],"mappings":";AAIA;AACI;;;;AAKA;;AAEQ;AACI;;AAEA;;AAEH;AACD;AACI;;AAEA;;AAEH;;;AAEF;;AAEC;AACI;;AAEA;;AAEH;AACD;;;AAGI;;AAEH;;;AAEF;;AAEC;AACI;;AAEA;AACA;AACH;AACD;AACI;;AAEA;AACA;AACH;;;AAEF;;AAEC;;;AAGI;AACA;AACH;AACD;;;AAGI;AACA;AACH;;;AAIT;AACJ;;"}
+{"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["\"use client\";\n\nimport { ThemeColorKeys } from \"../theme/types\";\n\nexport type UseColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"ghost\"\nexport type UseColorTemplateColor = ThemeColorKeys\n\nconst useColorTemplate = (color: UseColorTemplateColor, type: UseColorTemplateType) => {\n    const is_def = color === \"surface\";\n\n    if (type === \"outline\") {\n        return {\n            main: {\n                bgcolor: `transparent`,\n                color: is_def ? `surface.contrast` : `${color}.main`,\n                border: \"1px solid\",\n                borderColor: is_def ? `surface.muted` : `${color}.main`,\n            },\n            hover: {\n                bgcolor: `transparent`,\n                color: is_def ? `surface.contrast` : `${color}.light`,\n                border: \"1px solid\",\n                borderColor: is_def ? `surface.muted` : `${color}.light`,\n            }\n        }\n    } else if (type === \"fill\") {\n        return {\n            main: {\n                bgcolor: is_def ? `surface.light` : `${color}`,\n                color: is_def ? `surface.contrast` : `${color}.contrast`,\n                border: \"1px solid\",\n                borderColor: is_def ? `surface.divider` : `${color}.light`,\n            },\n            hover: {\n                bgcolor: is_def ? `surface.dark` : `${color}.light`,\n                color: is_def ? `surface.contrast` : `${color}.contrast`,\n                border: \"1px solid\",\n                borderColor: is_def ? `surface.divider` : `${color}.light`,\n            }\n        }\n    } else if (type === \"text\") {\n        return {\n            main: {\n                bgcolor: \"transparent\",\n                color: is_def ? `surface.contrast` : `${color}.main`,\n                border: 0,\n                borderColor: `transparent`,\n            },\n            hover: {\n                bgcolor: \"transparent\",\n                color: is_def ? `surface.contrast` : `${color}.light`,\n                border: 0,\n                borderColor: `transparent`,\n            }\n        }\n    } else if (type === \"ghost\") {\n        return {\n            main: {\n                bgcolor: `${color}.ghost`,\n                color: is_def ? `surface.contrast` : color,\n                border: 0,\n                borderColor: `transparent`,\n            },\n            hover: {\n                bgcolor: `${color}.ghost`,\n                color: is_def ? `surface.contrast` : `${color}.light`,\n                border: 0,\n                borderColor: `transparent`,\n            }\n        }\n    }\n\n    throw new Error(`useColorTemplate: Unknown type ${type}`);\n}\n\nexport default useColorTemplate"],"names":[],"mappings":";AAOA;AACI;AAEA;;AAEQ;AACI;;AAEA;;AAEH;AACD;AACI;;AAEA;;AAEH;;;AAEF;;AAEC;;;AAGI;;AAEH;AACD;;;AAGI;;AAEH;;;AAEF;;AAEC;AACI;;AAEA;AACA;AACH;AACD;AACI;;AAEA;AACA;AACH;;;AAEF;;AAEC;;;AAGI;AACA;AACH;AACD;;;AAGI;AACA;AACH;;;AAIT;AACJ;;"}

package/hooks/useInterface.cjs

@@ -9,6 +9,7 @@ require('../css/getValue.cjs');
 require('oncss');
 require('../Document/index.cjs');
 require('../css/CSSCacheProvider.cjs');
+require('../theme/ThemeDefaultOptions.cjs');
 
 const useInterface = (name, userPorps, defaultProps) => {
     const theme = core.useTheme();

package/hooks/useInterface.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useInterface.cjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\r\n\r\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\r\n    const theme = useTheme()\r\n    let _props = { ...defaultProps, ...userPorps } as P\r\n    if (name in theme.interfaces) {\r\n        return theme.interfaces[name](_props, theme)\r\n    }\r\n    return [_props, theme]\r\n}\r\n\r\nexport default useInterface"],"names":["useTheme"],"mappings":";;;;;;;;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}
+{"version":3,"file":"useInterface.cjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n    const theme = useTheme()\n    let _props = { ...defaultProps, ...userPorps } as P\n    if (name in theme.interfaces) {\n        return theme.interfaces[name](_props, theme)\n    }\n    return [_props, theme]\n}\n\nexport default useInterface"],"names":["useTheme"],"mappings":";;;;;;;;;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}

package/hooks/useInterface.d.ts

@@ -1,5 +1,3 @@
-import { ThemeOptions } from '../theme/types.js';
-
-declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => P | (P | ThemeOptions)[];
+declare const useInterface: <P extends object>(name: string, userPorps: P, defaultProps: P) => any;
 
 export { useInterface as default };

package/hooks/useInterface.js

@@ -7,6 +7,7 @@ import '../css/getValue.js';
 import 'oncss';
 import '../Document/index.js';
 import '../css/CSSCacheProvider.js';
+import '../theme/ThemeDefaultOptions.js';
 
 const useInterface = (name, userPorps, defaultProps) => {
     const theme = useTheme();

package/hooks/useInterface.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\r\n\r\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\r\n    const theme = useTheme()\r\n    let _props = { ...defaultProps, ...userPorps } as P\r\n    if (name in theme.interfaces) {\r\n        return theme.interfaces[name](_props, theme)\r\n    }\r\n    return [_props, theme]\r\n}\r\n\r\nexport default useInterface"],"names":[],"mappings":";;;;;;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}
+{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n    const theme = useTheme()\n    let _props = { ...defaultProps, ...userPorps } as P\n    if (name in theme.interfaces) {\n        return theme.interfaces[name](_props, theme)\n    }\n    return [_props, theme]\n}\n\nexport default useInterface"],"names":[],"mappings":";;;;;;;;;;;AAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,IAAI,MAAM,GAAG,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,YAAY,CAAA,EAAK,SAAS,CAAO;AACnD,IAAA,IAAI,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;QAC1B,OAAO,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC;IAChD;AACA,IAAA,OAAO,CAAC,MAAM,EAAE,KAAK,CAAC;AAC1B;;;;"}

package/hooks/useMergeRefs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMergeRefs.cjs","sources":["../../src/hooks/useMergeRefs.ts"],"sourcesContent":["\"use client\";\r\nimport { useCallback } from \"react\";\r\n\r\nfunction useMergeRefs<T>(\r\n   ...refs: Array<React.Ref<T> | undefined>\r\n) {\r\n   return useCallback((value: T | null) => {\r\n      for (const ref of refs) {\r\n         if (!ref) continue;\r\n         if (typeof ref === \"function\") {\r\n            ref(value);\r\n         } else {\r\n            (ref as React.MutableRefObject<T | null>).current = value;\r\n         }\r\n      }\r\n   }, refs);\r\n}\r\n\r\nexport default useMergeRefs;"],"names":[],"mappings":";;;;;AAGA;AAGG;AACG;AACG;;AACA;;;;AAGI;;;;AAIb;;"}
+{"version":3,"file":"useMergeRefs.cjs","sources":["../../src/hooks/useMergeRefs.ts"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\n\nfunction useMergeRefs<T>(\n   ...refs: Array<React.Ref<T> | undefined>\n) {\n   return useCallback((value: T | null) => {\n      for (const ref of refs) {\n         if (!ref) continue;\n         if (typeof ref === \"function\") {\n            ref(value);\n         } else {\n            (ref as React.MutableRefObject<T | null>).current = value;\n         }\n      }\n   }, refs);\n}\n\nexport default useMergeRefs;"],"names":[],"mappings":";;;;;AAGA;AAGG;AACG;AACG;;AACA;;;;AAGI;;;;AAIb;;"}

package/hooks/useMergeRefs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMergeRefs.js","sources":["../../src/hooks/useMergeRefs.ts"],"sourcesContent":["\"use client\";\r\nimport { useCallback } from \"react\";\r\n\r\nfunction useMergeRefs<T>(\r\n   ...refs: Array<React.Ref<T> | undefined>\r\n) {\r\n   return useCallback((value: T | null) => {\r\n      for (const ref of refs) {\r\n         if (!ref) continue;\r\n         if (typeof ref === \"function\") {\r\n            ref(value);\r\n         } else {\r\n            (ref as React.MutableRefObject<T | null>).current = value;\r\n         }\r\n      }\r\n   }, refs);\r\n}\r\n\r\nexport default useMergeRefs;"],"names":[],"mappings":";;;AAGA;AAGG;AACG;AACG;;AACA;;;;AAGI;;;;AAIb;;"}
+{"version":3,"file":"useMergeRefs.js","sources":["../../src/hooks/useMergeRefs.ts"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\n\nfunction useMergeRefs<T>(\n   ...refs: Array<React.Ref<T> | undefined>\n) {\n   return useCallback((value: T | null) => {\n      for (const ref of refs) {\n         if (!ref) continue;\n         if (typeof ref === \"function\") {\n            ref(value);\n         } else {\n            (ref as React.MutableRefObject<T | null>).current = value;\n         }\n      }\n   }, refs);\n}\n\nexport default useMergeRefs;"],"names":[],"mappings":";;;AAGA;AAGG;AACG;AACG;;AACA;;;;AAGI;;;;AAIb;;"}

package/hooks/useTransition.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTransition.cjs","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\r\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\r\nimport animate, { AnimateOptions } from \"../animate\"\r\n\r\nexport type UseTransitionStatus =\r\n   | \"entering\"\r\n   | \"entered\"\r\n   | \"exiting\"\r\n   | \"exited\"\r\n\r\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\r\n   initialStatus?: \"entered\" | \"exited\"\r\n   onEnter?: () => void\r\n   onEntered?: () => void\r\n   onExit?: () => void\r\n   onExited?: () => void\r\n}\r\n\r\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\r\n   const {\r\n      initialStatus = \"exited\",\r\n      onEnter,\r\n      onEntered,\r\n      onExit,\r\n      onExited,\r\n      ...options\r\n   } = props\r\n\r\n   const resolve = (val: T | (() => T)): T =>\r\n      typeof val === \"function\" ? (val as () => T)() : val\r\n\r\n   const [open, setOpen] = useState(initialStatus === \"entered\")\r\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\r\n\r\n   const stateRef = useRef<T | null>(null)\r\n   const readyRef = useRef(false)\r\n\r\n   const animating = useRef<null | (() => void)>(null)\r\n\r\n   useLayoutEffect(() => {\r\n      const from = resolve(options.from)\r\n      const to = resolve(options.to)\r\n      stateRef.current = initialStatus === \"entered\" ? to : from\r\n      readyRef.current = true\r\n   }, [])\r\n\r\n   const run = useCallback(\r\n      (nextOpen: boolean, withAnimation = true) => {\r\n         if (!readyRef.current || !stateRef.current) return\r\n\r\n         animating.current?.()\r\n\r\n         const resolvedFrom = resolve(options.from)\r\n         const resolvedTo = resolve(options.to)\r\n         const from = stateRef.current\r\n         const to = nextOpen ? resolvedTo : resolvedFrom\r\n\r\n         if (nextOpen) {\r\n            setStatus(\"entering\")\r\n            onEnter?.()\r\n         } else {\r\n            setStatus(\"exiting\")\r\n            onExit?.()\r\n         }\r\n\r\n         if (!withAnimation) {\r\n            stateRef.current = to\r\n            options.onUpdate?.(to, 1)\r\n\r\n            if (nextOpen) {\r\n               setStatus(\"entered\")\r\n               onEntered?.()\r\n            } else {\r\n               setStatus(\"exited\")\r\n               onExited?.()\r\n            }\r\n\r\n            options.onDone?.(stateRef.current)\r\n            return\r\n         }\r\n\r\n         animating.current = animate({\r\n            ...options,\r\n            from,\r\n            to,\r\n            duration: options.duration ?? 400,\r\n            onUpdate: (value: T, progress: number) => {\r\n               stateRef.current = value\r\n               options.onUpdate?.(value, progress)\r\n            },\r\n            onDone: (value) => {\r\n               if (nextOpen) {\r\n                  setStatus(\"entered\")\r\n                  onEntered?.()\r\n               } else {\r\n                  setStatus(\"exited\")\r\n                  onExited?.()\r\n               }\r\n               options.onDone?.(value)\r\n            },\r\n         })\r\n      },\r\n      [options, onEnter, onEntered, onExit, onExited]\r\n   )\r\n\r\n   const enter = useCallback((withAnimation = true) => {\r\n      setOpen(true)\r\n      run(true, withAnimation)\r\n   }, [run])\r\n\r\n   const exit = useCallback((withAnimation = true) => {\r\n      setOpen(false)\r\n      run(false, withAnimation)\r\n   }, [run])\r\n\r\n   const toggle = useCallback((withAnimation = true) => {\r\n      setOpen((prev) => {\r\n         const next = !prev\r\n         run(next, withAnimation)\r\n         return next\r\n      })\r\n   }, [run])\r\n\r\n   return {\r\n      isEntered: open,\r\n      status,\r\n      state: stateRef,\r\n      enter,\r\n      exit,\r\n      toggle,\r\n      isReady: readyRef.current\r\n   }\r\n}\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;;;;AAON;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}
+{"version":3,"file":"useTransition.cjs","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\nimport animate, { AnimateOptions } from \"../animate\"\n\nexport type UseTransitionStatus =\n   | \"entering\"\n   | \"entered\"\n   | \"exiting\"\n   | \"exited\"\n\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\n   initialStatus?: \"entered\" | \"exited\"\n   onEnter?: () => void\n   onEntered?: () => void\n   onExit?: () => void\n   onExited?: () => void\n}\n\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\n   const {\n      initialStatus = \"exited\",\n      onEnter,\n      onEntered,\n      onExit,\n      onExited,\n      ...options\n   } = props\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val\n\n   const [open, setOpen] = useState(initialStatus === \"entered\")\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\n\n   const stateRef = useRef<T | null>(null)\n   const readyRef = useRef(false)\n\n   const animating = useRef<null | (() => void)>(null)\n\n   useLayoutEffect(() => {\n      const from = resolve(options.from)\n      const to = resolve(options.to)\n      stateRef.current = initialStatus === \"entered\" ? to : from\n      readyRef.current = true\n   }, [])\n\n   const run = useCallback(\n      (nextOpen: boolean, withAnimation = true) => {\n         if (!readyRef.current || !stateRef.current) return\n\n         animating.current?.()\n\n         const resolvedFrom = resolve(options.from)\n         const resolvedTo = resolve(options.to)\n         const from = stateRef.current\n         const to = nextOpen ? resolvedTo : resolvedFrom\n\n         if (nextOpen) {\n            setStatus(\"entering\")\n            onEnter?.()\n         } else {\n            setStatus(\"exiting\")\n            onExit?.()\n         }\n\n         if (!withAnimation) {\n            stateRef.current = to\n            options.onUpdate?.(to, 1)\n\n            if (nextOpen) {\n               setStatus(\"entered\")\n               onEntered?.()\n            } else {\n               setStatus(\"exited\")\n               onExited?.()\n            }\n\n            options.onDone?.(stateRef.current)\n            return\n         }\n\n         animating.current = animate({\n            ...options,\n            from,\n            to,\n            duration: options.duration ?? 400,\n            onUpdate: (value: T, progress: number) => {\n               stateRef.current = value\n               options.onUpdate?.(value, progress)\n            },\n            onDone: (value) => {\n               if (nextOpen) {\n                  setStatus(\"entered\")\n                  onEntered?.()\n               } else {\n                  setStatus(\"exited\")\n                  onExited?.()\n               }\n               options.onDone?.(value)\n            },\n         })\n      },\n      [options, onEnter, onEntered, onExit, onExited]\n   )\n\n   const enter = useCallback((withAnimation = true) => {\n      setOpen(true)\n      run(true, withAnimation)\n   }, [run])\n\n   const exit = useCallback((withAnimation = true) => {\n      setOpen(false)\n      run(false, withAnimation)\n   }, [run])\n\n   const toggle = useCallback((withAnimation = true) => {\n      setOpen((prev) => {\n         const next = !prev\n         run(next, withAnimation)\n         return next\n      })\n   }, [run])\n\n   return {\n      isEntered: open,\n      status,\n      state: stateRef,\n      enter,\n      exit,\n      toggle,\n      isReady: readyRef.current\n   }\n}\n\nexport default useTransition"],"names":[],"mappings":";;;;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;;;;AAON;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}

package/hooks/useTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTransition.js","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\r\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\r\nimport animate, { AnimateOptions } from \"../animate\"\r\n\r\nexport type UseTransitionStatus =\r\n   | \"entering\"\r\n   | \"entered\"\r\n   | \"exiting\"\r\n   | \"exited\"\r\n\r\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\r\n   initialStatus?: \"entered\" | \"exited\"\r\n   onEnter?: () => void\r\n   onEntered?: () => void\r\n   onExit?: () => void\r\n   onExited?: () => void\r\n}\r\n\r\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\r\n   const {\r\n      initialStatus = \"exited\",\r\n      onEnter,\r\n      onEntered,\r\n      onExit,\r\n      onExited,\r\n      ...options\r\n   } = props\r\n\r\n   const resolve = (val: T | (() => T)): T =>\r\n      typeof val === \"function\" ? (val as () => T)() : val\r\n\r\n   const [open, setOpen] = useState(initialStatus === \"entered\")\r\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\r\n\r\n   const stateRef = useRef<T | null>(null)\r\n   const readyRef = useRef(false)\r\n\r\n   const animating = useRef<null | (() => void)>(null)\r\n\r\n   useLayoutEffect(() => {\r\n      const from = resolve(options.from)\r\n      const to = resolve(options.to)\r\n      stateRef.current = initialStatus === \"entered\" ? to : from\r\n      readyRef.current = true\r\n   }, [])\r\n\r\n   const run = useCallback(\r\n      (nextOpen: boolean, withAnimation = true) => {\r\n         if (!readyRef.current || !stateRef.current) return\r\n\r\n         animating.current?.()\r\n\r\n         const resolvedFrom = resolve(options.from)\r\n         const resolvedTo = resolve(options.to)\r\n         const from = stateRef.current\r\n         const to = nextOpen ? resolvedTo : resolvedFrom\r\n\r\n         if (nextOpen) {\r\n            setStatus(\"entering\")\r\n            onEnter?.()\r\n         } else {\r\n            setStatus(\"exiting\")\r\n            onExit?.()\r\n         }\r\n\r\n         if (!withAnimation) {\r\n            stateRef.current = to\r\n            options.onUpdate?.(to, 1)\r\n\r\n            if (nextOpen) {\r\n               setStatus(\"entered\")\r\n               onEntered?.()\r\n            } else {\r\n               setStatus(\"exited\")\r\n               onExited?.()\r\n            }\r\n\r\n            options.onDone?.(stateRef.current)\r\n            return\r\n         }\r\n\r\n         animating.current = animate({\r\n            ...options,\r\n            from,\r\n            to,\r\n            duration: options.duration ?? 400,\r\n            onUpdate: (value: T, progress: number) => {\r\n               stateRef.current = value\r\n               options.onUpdate?.(value, progress)\r\n            },\r\n            onDone: (value) => {\r\n               if (nextOpen) {\r\n                  setStatus(\"entered\")\r\n                  onEntered?.()\r\n               } else {\r\n                  setStatus(\"exited\")\r\n                  onExited?.()\r\n               }\r\n               options.onDone?.(value)\r\n            },\r\n         })\r\n      },\r\n      [options, onEnter, onEntered, onExit, onExited]\r\n   )\r\n\r\n   const enter = useCallback((withAnimation = true) => {\r\n      setOpen(true)\r\n      run(true, withAnimation)\r\n   }, [run])\r\n\r\n   const exit = useCallback((withAnimation = true) => {\r\n      setOpen(false)\r\n      run(false, withAnimation)\r\n   }, [run])\r\n\r\n   const toggle = useCallback((withAnimation = true) => {\r\n      setOpen((prev) => {\r\n         const next = !prev\r\n         run(next, withAnimation)\r\n         return next\r\n      })\r\n   }, [run])\r\n\r\n   return {\r\n      isEntered: open,\r\n      status,\r\n      state: stateRef,\r\n      enter,\r\n      exit,\r\n      toggle,\r\n      isReady: readyRef.current\r\n   }\r\n}\r\n\r\nexport default useTransition"],"names":[],"mappings":";;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;;;;AAON;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}
+{"version":3,"file":"useTransition.js","sources":["../../src/hooks/useTransition.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback, useLayoutEffect } from \"react\"\nimport animate, { AnimateOptions } from \"../animate\"\n\nexport type UseTransitionStatus =\n   | \"entering\"\n   | \"entered\"\n   | \"exiting\"\n   | \"exited\"\n\nexport type UseTransitionProps<T extends Record<string, number>> = AnimateOptions<T> & {\n   initialStatus?: \"entered\" | \"exited\"\n   onEnter?: () => void\n   onEntered?: () => void\n   onExit?: () => void\n   onExited?: () => void\n}\n\nconst useTransition = <T extends Record<string, number>>(props: UseTransitionProps<T>) => {\n   const {\n      initialStatus = \"exited\",\n      onEnter,\n      onEntered,\n      onExit,\n      onExited,\n      ...options\n   } = props\n\n   const resolve = (val: T | (() => T)): T =>\n      typeof val === \"function\" ? (val as () => T)() : val\n\n   const [open, setOpen] = useState(initialStatus === \"entered\")\n   const [status, setStatus] = useState<UseTransitionStatus>(initialStatus)\n\n   const stateRef = useRef<T | null>(null)\n   const readyRef = useRef(false)\n\n   const animating = useRef<null | (() => void)>(null)\n\n   useLayoutEffect(() => {\n      const from = resolve(options.from)\n      const to = resolve(options.to)\n      stateRef.current = initialStatus === \"entered\" ? to : from\n      readyRef.current = true\n   }, [])\n\n   const run = useCallback(\n      (nextOpen: boolean, withAnimation = true) => {\n         if (!readyRef.current || !stateRef.current) return\n\n         animating.current?.()\n\n         const resolvedFrom = resolve(options.from)\n         const resolvedTo = resolve(options.to)\n         const from = stateRef.current\n         const to = nextOpen ? resolvedTo : resolvedFrom\n\n         if (nextOpen) {\n            setStatus(\"entering\")\n            onEnter?.()\n         } else {\n            setStatus(\"exiting\")\n            onExit?.()\n         }\n\n         if (!withAnimation) {\n            stateRef.current = to\n            options.onUpdate?.(to, 1)\n\n            if (nextOpen) {\n               setStatus(\"entered\")\n               onEntered?.()\n            } else {\n               setStatus(\"exited\")\n               onExited?.()\n            }\n\n            options.onDone?.(stateRef.current)\n            return\n         }\n\n         animating.current = animate({\n            ...options,\n            from,\n            to,\n            duration: options.duration ?? 400,\n            onUpdate: (value: T, progress: number) => {\n               stateRef.current = value\n               options.onUpdate?.(value, progress)\n            },\n            onDone: (value) => {\n               if (nextOpen) {\n                  setStatus(\"entered\")\n                  onEntered?.()\n               } else {\n                  setStatus(\"exited\")\n                  onExited?.()\n               }\n               options.onDone?.(value)\n            },\n         })\n      },\n      [options, onEnter, onEntered, onExit, onExited]\n   )\n\n   const enter = useCallback((withAnimation = true) => {\n      setOpen(true)\n      run(true, withAnimation)\n   }, [run])\n\n   const exit = useCallback((withAnimation = true) => {\n      setOpen(false)\n      run(false, withAnimation)\n   }, [run])\n\n   const toggle = useCallback((withAnimation = true) => {\n      setOpen((prev) => {\n         const next = !prev\n         run(next, withAnimation)\n         return next\n      })\n   }, [run])\n\n   return {\n      isEntered: open,\n      status,\n      state: stateRef,\n      enter,\n      exit,\n      toggle,\n      isReady: readyRef.current\n   }\n}\n\nexport default useTransition"],"names":[],"mappings":";;;;;AAkBA;;;AAaG;;AAGA;AACA;AAEA;;;;AAKG;AACA;;;;;;AAOG;;;AAIA;;;;AAKG;;;;AAGA;;;AAIA;;;;AAKG;;;;AAGA;;;;;AAON;AAGG;;AAGG;;AAEH;;;;AAIM;;;;AAGA;;AAEH;AACH;AAEN;;;AAMA;AACH;;;AAIG;AACH;;AAGG;AACG;AACA;AACA;AACH;AACH;;AAGG;;AAEA;;;;;;AAMN;;"}

package/hooks/useTransitionGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTransitionGroup.cjs","sources":["../../src/hooks/useTransitionGroup.ts"],"sourcesContent":["\"use client\"\r\nimport { useRef, useState, useCallback } from \"react\"\r\nimport animate from \"../animate\"\r\nimport { UseTransitionStatus } from \"./useTransition\"\r\n\r\nexport type UseTransitionGroupItem<T extends Record<string, number>> = {\r\n   key: string | number\r\n   from: T\r\n   to: T\r\n}\r\n\r\nexport type UseTransitionGroupProps<T extends Record<string, number>> = {\r\n   items: UseTransitionGroupItem<T>[]\r\n   duration?: number\r\n   stagger?: number // delay between items in ms\r\n   mountOnEnter?: boolean\r\n   unmountOnExit?: boolean\r\n   onUpdate?: (value: T, key: string | number, progress: number) => void\r\n   onEnter?: (key: string | number) => void\r\n   onEntered?: (key: string | number) => void\r\n   onExit?: (key: string | number) => void\r\n   onExited?: (key: string | number) => void\r\n}\r\n\r\n/**\r\n * useTransitionGroup - staggered animations for multiple items\r\n */\r\nfunction useTransitionGroup<T extends Record<string, number>>(\r\n   options: UseTransitionGroupProps<T>\r\n) {\r\n   // status of each item\r\n   const [statuses, setStatuses] = useState<\r\n      Record<string | number, UseTransitionStatus>\r\n   >(\r\n      () =>\r\n         Object.fromEntries(\r\n            options.items.map((item) => [\r\n               item.key,\r\n               options.mountOnEnter ? \"exited\" : \"entered\",\r\n            ])\r\n         )\r\n   )\r\n\r\n   // refs to cancel per-item animations\r\n   const animatingRefs = useRef<Record<string | number, (() => void) | null>>({})\r\n\r\n   // track mounted items (for mount/unmount)\r\n   const [mounted, setMounted] = useState<Record<string | number, boolean>>(\r\n      () =>\r\n         Object.fromEntries(\r\n            options.items.map((item) => [\r\n               item.key,\r\n               !options.mountOnEnter,\r\n            ])\r\n         )\r\n   )\r\n\r\n   // animate a single item\r\n   const animateItem = useCallback(\r\n      (item: UseTransitionGroupItem<T>, entering: boolean, delay = 0) => {\r\n         // cancel previous\r\n         animatingRefs.current[item.key]?.()\r\n\r\n         if (entering) setStatuses((s: any) => ({ ...s, [item.key]: \"entering\" }))\r\n         else setStatuses((s: any) => ({ ...s, [item.key]: \"exiting\" }))\r\n\r\n         if (entering && options.mountOnEnter) {\r\n            setMounted((m) => ({ ...m, [item.key]: true }))\r\n         }\r\n\r\n         // start animation after delay\r\n         const timeout = setTimeout(() => {\r\n            if (entering) options.onEnter?.(item.key)\r\n            else options.onExit?.(item.key)\r\n\r\n            animatingRefs.current[item.key] = animate({\r\n               from: entering ? item.from : item.to,\r\n               to: entering ? item.to : item.from,\r\n               duration: options.duration ?? 400,\r\n               onUpdate: (value, progress) =>\r\n                  options.onUpdate?.(value, item.key, progress),\r\n               onDone: () => {\r\n                  if (entering) {\r\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"entered\" }))\r\n                     options.onEntered?.(item.key)\r\n                  } else {\r\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"exited\" }))\r\n                     options.onExited?.(item.key)\r\n                     if (options.unmountOnExit) {\r\n                        setMounted((m) => ({ ...m, [item.key]: false }))\r\n                     }\r\n                  }\r\n               },\r\n            })\r\n         }, delay)\r\n\r\n         return () => clearTimeout(timeout)\r\n      },\r\n      [options]\r\n   )\r\n\r\n   // run staggered animation on array of items\r\n   const run = useCallback(\r\n      (entering: boolean) => {\r\n         options.items.forEach((item, index) => {\r\n            const delay = (options.stagger ?? 100) * index\r\n            const status = statuses[item.key]\r\n\r\n            // skip if already animating in same direction\r\n            if (entering && (status === \"entering\" || status === \"entered\")) return\r\n            if (!entering && (status === \"exiting\" || status === \"exited\")) return\r\n\r\n            animateItem(item, entering, delay)\r\n         })\r\n      },\r\n      [options.items, options.stagger, animateItem, statuses]\r\n   )\r\n\r\n   const enter = useCallback(() => run(true), [run])\r\n   const exit = useCallback(() => run(false), [run])\r\n   const toggle = useCallback(() => {\r\n      const anyEntered = Object.values(statuses).some(\r\n         (s) => s === \"entering\" || s === \"entered\"\r\n      )\r\n      run(!anyEntered)\r\n   }, [run, statuses])\r\n\r\n   return {\r\n      statuses,\r\n      mounted,\r\n      enter,\r\n      exit,\r\n      toggle,\r\n   }\r\n}\r\n\r\nexport default useTransitionGroup"],"names":[],"mappings":";;;;;;AAwBA;;AAEG;AACH;;;AAUe;;;;AAOZ;;;AAOY;;;;AAOZ;;;;AAKM;AAAc;;AACT;AAEL;AACG;;;AAIH;;AACG;;;;;AAIG;AACA;AACA;;;;;AAKM;;;;AAGA;;AAEA;AACG;;;;AAIX;;AAGJ;AACH;;AAKH;;;AAGS;;;;;;;AAOA;AACH;AACH;AAIH;AACA;AACA;;AAIG;AACH;;;;;;;;AASH;;"}
+{"version":3,"file":"useTransitionGroup.cjs","sources":["../../src/hooks/useTransitionGroup.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback } from \"react\"\nimport animate from \"../animate\"\nimport { UseTransitionStatus } from \"./useTransition\"\n\nexport type UseTransitionGroupItem<T extends Record<string, number>> = {\n   key: string | number\n   from: T\n   to: T\n}\n\nexport type UseTransitionGroupProps<T extends Record<string, number>> = {\n   items: UseTransitionGroupItem<T>[]\n   duration?: number\n   stagger?: number // delay between items in ms\n   mountOnEnter?: boolean\n   unmountOnExit?: boolean\n   onUpdate?: (value: T, key: string | number, progress: number) => void\n   onEnter?: (key: string | number) => void\n   onEntered?: (key: string | number) => void\n   onExit?: (key: string | number) => void\n   onExited?: (key: string | number) => void\n}\n\n/**\n * useTransitionGroup - staggered animations for multiple items\n */\nfunction useTransitionGroup<T extends Record<string, number>>(\n   options: UseTransitionGroupProps<T>\n) {\n   // status of each item\n   const [statuses, setStatuses] = useState<\n      Record<string | number, UseTransitionStatus>\n   >(\n      () =>\n         Object.fromEntries(\n            options.items.map((item) => [\n               item.key,\n               options.mountOnEnter ? \"exited\" : \"entered\",\n            ])\n         )\n   )\n\n   // refs to cancel per-item animations\n   const animatingRefs = useRef<Record<string | number, (() => void) | null>>({})\n\n   // track mounted items (for mount/unmount)\n   const [mounted, setMounted] = useState<Record<string | number, boolean>>(\n      () =>\n         Object.fromEntries(\n            options.items.map((item) => [\n               item.key,\n               !options.mountOnEnter,\n            ])\n         )\n   )\n\n   // animate a single item\n   const animateItem = useCallback(\n      (item: UseTransitionGroupItem<T>, entering: boolean, delay = 0) => {\n         // cancel previous\n         animatingRefs.current[item.key]?.()\n\n         if (entering) setStatuses((s: any) => ({ ...s, [item.key]: \"entering\" }))\n         else setStatuses((s: any) => ({ ...s, [item.key]: \"exiting\" }))\n\n         if (entering && options.mountOnEnter) {\n            setMounted((m) => ({ ...m, [item.key]: true }))\n         }\n\n         // start animation after delay\n         const timeout = setTimeout(() => {\n            if (entering) options.onEnter?.(item.key)\n            else options.onExit?.(item.key)\n\n            animatingRefs.current[item.key] = animate({\n               from: entering ? item.from : item.to,\n               to: entering ? item.to : item.from,\n               duration: options.duration ?? 400,\n               onUpdate: (value, progress) =>\n                  options.onUpdate?.(value, item.key, progress),\n               onDone: () => {\n                  if (entering) {\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"entered\" }))\n                     options.onEntered?.(item.key)\n                  } else {\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"exited\" }))\n                     options.onExited?.(item.key)\n                     if (options.unmountOnExit) {\n                        setMounted((m) => ({ ...m, [item.key]: false }))\n                     }\n                  }\n               },\n            })\n         }, delay)\n\n         return () => clearTimeout(timeout)\n      },\n      [options]\n   )\n\n   // run staggered animation on array of items\n   const run = useCallback(\n      (entering: boolean) => {\n         options.items.forEach((item, index) => {\n            const delay = (options.stagger ?? 100) * index\n            const status = statuses[item.key]\n\n            // skip if already animating in same direction\n            if (entering && (status === \"entering\" || status === \"entered\")) return\n            if (!entering && (status === \"exiting\" || status === \"exited\")) return\n\n            animateItem(item, entering, delay)\n         })\n      },\n      [options.items, options.stagger, animateItem, statuses]\n   )\n\n   const enter = useCallback(() => run(true), [run])\n   const exit = useCallback(() => run(false), [run])\n   const toggle = useCallback(() => {\n      const anyEntered = Object.values(statuses).some(\n         (s) => s === \"entering\" || s === \"entered\"\n      )\n      run(!anyEntered)\n   }, [run, statuses])\n\n   return {\n      statuses,\n      mounted,\n      enter,\n      exit,\n      toggle,\n   }\n}\n\nexport default useTransitionGroup"],"names":[],"mappings":";;;;;;AAwBA;;AAEG;AACH;;;AAUe;;;;AAOZ;;;AAOY;;;;AAOZ;;;;AAKM;AAAc;;AACT;AAEL;AACG;;;AAIH;;AACG;;;;;AAIG;AACA;AACA;;;;;AAKM;;;;AAGA;;AAEA;AACG;;;;AAIX;;AAGJ;AACH;;AAKH;;;AAGS;;;;;;;AAOA;AACH;AACH;AAIH;AACA;AACA;;AAIG;AACH;;;;;;;;AASH;;"}

package/hooks/useTransitionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTransitionGroup.js","sources":["../../src/hooks/useTransitionGroup.ts"],"sourcesContent":["\"use client\"\r\nimport { useRef, useState, useCallback } from \"react\"\r\nimport animate from \"../animate\"\r\nimport { UseTransitionStatus } from \"./useTransition\"\r\n\r\nexport type UseTransitionGroupItem<T extends Record<string, number>> = {\r\n   key: string | number\r\n   from: T\r\n   to: T\r\n}\r\n\r\nexport type UseTransitionGroupProps<T extends Record<string, number>> = {\r\n   items: UseTransitionGroupItem<T>[]\r\n   duration?: number\r\n   stagger?: number // delay between items in ms\r\n   mountOnEnter?: boolean\r\n   unmountOnExit?: boolean\r\n   onUpdate?: (value: T, key: string | number, progress: number) => void\r\n   onEnter?: (key: string | number) => void\r\n   onEntered?: (key: string | number) => void\r\n   onExit?: (key: string | number) => void\r\n   onExited?: (key: string | number) => void\r\n}\r\n\r\n/**\r\n * useTransitionGroup - staggered animations for multiple items\r\n */\r\nfunction useTransitionGroup<T extends Record<string, number>>(\r\n   options: UseTransitionGroupProps<T>\r\n) {\r\n   // status of each item\r\n   const [statuses, setStatuses] = useState<\r\n      Record<string | number, UseTransitionStatus>\r\n   >(\r\n      () =>\r\n         Object.fromEntries(\r\n            options.items.map((item) => [\r\n               item.key,\r\n               options.mountOnEnter ? \"exited\" : \"entered\",\r\n            ])\r\n         )\r\n   )\r\n\r\n   // refs to cancel per-item animations\r\n   const animatingRefs = useRef<Record<string | number, (() => void) | null>>({})\r\n\r\n   // track mounted items (for mount/unmount)\r\n   const [mounted, setMounted] = useState<Record<string | number, boolean>>(\r\n      () =>\r\n         Object.fromEntries(\r\n            options.items.map((item) => [\r\n               item.key,\r\n               !options.mountOnEnter,\r\n            ])\r\n         )\r\n   )\r\n\r\n   // animate a single item\r\n   const animateItem = useCallback(\r\n      (item: UseTransitionGroupItem<T>, entering: boolean, delay = 0) => {\r\n         // cancel previous\r\n         animatingRefs.current[item.key]?.()\r\n\r\n         if (entering) setStatuses((s: any) => ({ ...s, [item.key]: \"entering\" }))\r\n         else setStatuses((s: any) => ({ ...s, [item.key]: \"exiting\" }))\r\n\r\n         if (entering && options.mountOnEnter) {\r\n            setMounted((m) => ({ ...m, [item.key]: true }))\r\n         }\r\n\r\n         // start animation after delay\r\n         const timeout = setTimeout(() => {\r\n            if (entering) options.onEnter?.(item.key)\r\n            else options.onExit?.(item.key)\r\n\r\n            animatingRefs.current[item.key] = animate({\r\n               from: entering ? item.from : item.to,\r\n               to: entering ? item.to : item.from,\r\n               duration: options.duration ?? 400,\r\n               onUpdate: (value, progress) =>\r\n                  options.onUpdate?.(value, item.key, progress),\r\n               onDone: () => {\r\n                  if (entering) {\r\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"entered\" }))\r\n                     options.onEntered?.(item.key)\r\n                  } else {\r\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"exited\" }))\r\n                     options.onExited?.(item.key)\r\n                     if (options.unmountOnExit) {\r\n                        setMounted((m) => ({ ...m, [item.key]: false }))\r\n                     }\r\n                  }\r\n               },\r\n            })\r\n         }, delay)\r\n\r\n         return () => clearTimeout(timeout)\r\n      },\r\n      [options]\r\n   )\r\n\r\n   // run staggered animation on array of items\r\n   const run = useCallback(\r\n      (entering: boolean) => {\r\n         options.items.forEach((item, index) => {\r\n            const delay = (options.stagger ?? 100) * index\r\n            const status = statuses[item.key]\r\n\r\n            // skip if already animating in same direction\r\n            if (entering && (status === \"entering\" || status === \"entered\")) return\r\n            if (!entering && (status === \"exiting\" || status === \"exited\")) return\r\n\r\n            animateItem(item, entering, delay)\r\n         })\r\n      },\r\n      [options.items, options.stagger, animateItem, statuses]\r\n   )\r\n\r\n   const enter = useCallback(() => run(true), [run])\r\n   const exit = useCallback(() => run(false), [run])\r\n   const toggle = useCallback(() => {\r\n      const anyEntered = Object.values(statuses).some(\r\n         (s) => s === \"entering\" || s === \"entered\"\r\n      )\r\n      run(!anyEntered)\r\n   }, [run, statuses])\r\n\r\n   return {\r\n      statuses,\r\n      mounted,\r\n      enter,\r\n      exit,\r\n      toggle,\r\n   }\r\n}\r\n\r\nexport default useTransitionGroup"],"names":[],"mappings":";;;;AAwBA;;AAEG;AACH;;;AAUe;;;;AAOZ;;;AAOY;;;;AAOZ;;;;AAKM;AAAc;;AACT;AAEL;AACG;;;AAIH;;AACG;;;;;AAIG;AACA;AACA;;;;;AAKM;;;;AAGA;;AAEA;AACG;;;;AAIX;;AAGJ;AACH;;AAKH;;;AAGS;;;;;;;AAOA;AACH;AACH;AAIH;AACA;AACA;;AAIG;AACH;;;;;;;;AASH;;"}
+{"version":3,"file":"useTransitionGroup.js","sources":["../../src/hooks/useTransitionGroup.ts"],"sourcesContent":["\"use client\"\nimport { useRef, useState, useCallback } from \"react\"\nimport animate from \"../animate\"\nimport { UseTransitionStatus } from \"./useTransition\"\n\nexport type UseTransitionGroupItem<T extends Record<string, number>> = {\n   key: string | number\n   from: T\n   to: T\n}\n\nexport type UseTransitionGroupProps<T extends Record<string, number>> = {\n   items: UseTransitionGroupItem<T>[]\n   duration?: number\n   stagger?: number // delay between items in ms\n   mountOnEnter?: boolean\n   unmountOnExit?: boolean\n   onUpdate?: (value: T, key: string | number, progress: number) => void\n   onEnter?: (key: string | number) => void\n   onEntered?: (key: string | number) => void\n   onExit?: (key: string | number) => void\n   onExited?: (key: string | number) => void\n}\n\n/**\n * useTransitionGroup - staggered animations for multiple items\n */\nfunction useTransitionGroup<T extends Record<string, number>>(\n   options: UseTransitionGroupProps<T>\n) {\n   // status of each item\n   const [statuses, setStatuses] = useState<\n      Record<string | number, UseTransitionStatus>\n   >(\n      () =>\n         Object.fromEntries(\n            options.items.map((item) => [\n               item.key,\n               options.mountOnEnter ? \"exited\" : \"entered\",\n            ])\n         )\n   )\n\n   // refs to cancel per-item animations\n   const animatingRefs = useRef<Record<string | number, (() => void) | null>>({})\n\n   // track mounted items (for mount/unmount)\n   const [mounted, setMounted] = useState<Record<string | number, boolean>>(\n      () =>\n         Object.fromEntries(\n            options.items.map((item) => [\n               item.key,\n               !options.mountOnEnter,\n            ])\n         )\n   )\n\n   // animate a single item\n   const animateItem = useCallback(\n      (item: UseTransitionGroupItem<T>, entering: boolean, delay = 0) => {\n         // cancel previous\n         animatingRefs.current[item.key]?.()\n\n         if (entering) setStatuses((s: any) => ({ ...s, [item.key]: \"entering\" }))\n         else setStatuses((s: any) => ({ ...s, [item.key]: \"exiting\" }))\n\n         if (entering && options.mountOnEnter) {\n            setMounted((m) => ({ ...m, [item.key]: true }))\n         }\n\n         // start animation after delay\n         const timeout = setTimeout(() => {\n            if (entering) options.onEnter?.(item.key)\n            else options.onExit?.(item.key)\n\n            animatingRefs.current[item.key] = animate({\n               from: entering ? item.from : item.to,\n               to: entering ? item.to : item.from,\n               duration: options.duration ?? 400,\n               onUpdate: (value, progress) =>\n                  options.onUpdate?.(value, item.key, progress),\n               onDone: () => {\n                  if (entering) {\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"entered\" }))\n                     options.onEntered?.(item.key)\n                  } else {\n                     setStatuses((s: any) => ({ ...s, [item.key]: \"exited\" }))\n                     options.onExited?.(item.key)\n                     if (options.unmountOnExit) {\n                        setMounted((m) => ({ ...m, [item.key]: false }))\n                     }\n                  }\n               },\n            })\n         }, delay)\n\n         return () => clearTimeout(timeout)\n      },\n      [options]\n   )\n\n   // run staggered animation on array of items\n   const run = useCallback(\n      (entering: boolean) => {\n         options.items.forEach((item, index) => {\n            const delay = (options.stagger ?? 100) * index\n            const status = statuses[item.key]\n\n            // skip if already animating in same direction\n            if (entering && (status === \"entering\" || status === \"entered\")) return\n            if (!entering && (status === \"exiting\" || status === \"exited\")) return\n\n            animateItem(item, entering, delay)\n         })\n      },\n      [options.items, options.stagger, animateItem, statuses]\n   )\n\n   const enter = useCallback(() => run(true), [run])\n   const exit = useCallback(() => run(false), [run])\n   const toggle = useCallback(() => {\n      const anyEntered = Object.values(statuses).some(\n         (s) => s === \"entering\" || s === \"entered\"\n      )\n      run(!anyEntered)\n   }, [run, statuses])\n\n   return {\n      statuses,\n      mounted,\n      enter,\n      exit,\n      toggle,\n   }\n}\n\nexport default useTransitionGroup"],"names":[],"mappings":";;;;AAwBA;;AAEG;AACH;;;AAUe;;;;AAOZ;;;AAOY;;;;AAOZ;;;;AAKM;AAAc;;AACT;AAEL;AACG;;;AAIH;;AACG;;;;;AAIG;AACA;AACA;;;;;AAKM;;;;AAGA;;AAEA;AACG;;;;AAIX;;AAGJ;AACH;;AAKH;;;AAGS;;;;;;;AAOA;AACH;AACH;AAIH;AACA;AACA;;AAIG;AACH;;;;;;;;AASH;;"}

package/index.cjs

@@ -49,9 +49,6 @@ exports.Iframe = index$1;
 exports.animate = index$6.default;
 exports.useTransition = useTransition;
 exports.useTransitionGroup = useTransitionGroup;
-exports.adjustColor = index$7.adjustColor;
-exports.adjustTextContrast = index$7.adjustTextContrast;
-exports.alpha = index$7.alpha;
 exports.breakpoints = index$7.breakpoints;
 exports.css = index$7.css;
 exports.themeRootClass = index$8.themeRootClass;

package/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.d.ts

@@ -5,7 +5,7 @@ export { default as useBreakpoint } from './breakpoint/useBreakpoint.js';
 export { default as useBreakpointProps, useBreakpointPropsType } from './breakpoint/useBreakpointProps.js';
 export { default as useInterface } from './hooks/useInterface.js';
 export { default as useMergeRefs } from './hooks/useMergeRefs.js';
-export { default as Transition, TransitionProps, TransitionVariantTypes } from './Transition/index.js';
+export { default as Transition, TransitionProps, TransitionVariantCallback, TransitionVariantTypes } from './Transition/index.js';
 export { default as AppRoot, AppRootProps } from './AppRoot/index.js';
 export { default as Portal, PortalProps } from './Portal/index.js';
 export { Renderar } from './AppRoot/Renderar.js';
@@ -16,11 +16,11 @@ export { default as Iframe, IframeProps } from './Iframe/index.js';
 export { AnimateOptions, default as animate } from './animate/index.js';
 export { UseTransitionProps, UseTransitionStatus, default as useTransition } from './hooks/useTransition.js';
 export { UseTransitionGroupItem, UseTransitionGroupProps, default as useTransitionGroup } from './hooks/useTransitionGroup.js';
-export { adjustColor, adjustTextContrast, alpha, breakpoints, css } from './css/index.js';
+export { breakpoints, css } from './css/index.js';
 export { themeRootClass } from './theme/index.js';
 export { Aliases, BreakpointKeys, CSSBreakpointType, CSSOptionProps, CSSProps, CSSValueType, FN, GlobalCSS } from './css/types.js';
 export { CSSPropAsAttr, TagCSSProperties, TagComponentType, TagProps, TagPropsRoot } from './Tag/types.js';
-export { ColorsRefTypes, ObjectType, ThemeColorOption, ThemeOptionInput, ThemeOptions, ThemeOptionsColor, ThemeTypographyInputType, ThemeTypographyItem, ThemeTypographyItemInput, ThemeTypographyType, TypographyRefTypes } from './theme/types.js';
+export { BaseTypographyKeys, ColorsRefTypes, ObjectType, ThemeColorKeys, ThemeColorOption, ThemeInterface, ThemeMode, ThemeOptionInput, ThemeOptions, ThemeTypographyItem, TypographyRefTypes } from './theme/types.js';
 export { default as getValue } from './css/getValue.js';
 export { default as getProps } from './css/getProps.js';
 export { default as ThemeProvider, ThemeProviderProps } from './theme/ThemeProvider.js';

package/index.js

@@ -16,7 +16,7 @@ export { default as Iframe } from './Iframe/index.js';
 export { default as animate } from './animate/index.js';
 export { default as useTransition } from './hooks/useTransition.js';
 export { default as useTransitionGroup } from './hooks/useTransitionGroup.js';
-export { adjustColor, adjustTextContrast, alpha, breakpoints, css } from './css/index.js';
+export { breakpoints, css } from './css/index.js';
 export { themeRootClass } from './theme/index.js';
 export { default as getValue } from './css/getValue.js';
 export { default as getProps } from './css/getProps.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/core",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "Xanui Core Library",
   "private": false,
   "main": "./index.cjs",

package/readme.md

@@ -1,109 +1,109 @@
-# Xanui Core
-
-Xanui Core is a lightweight styling and theming toolkit for React. It bundles a constraint-based CSS generator, a TypeScript-friendly `<Tag>` primitive, responsive helpers, and an opinionated theme engine so that design tokens, animations, and layout logic stay consistent across your application.
-
-## Highlights
-
-- Build any element with `<Tag>` and the ergonomic `sx`/alias props while still passing native attributes.
-- Author design tokens once via `createTheme`, ship them with `ThemeProvider`, and switch them at runtime with `createThemeSwitcher`.
-- Drive responsive layouts using `BreakpointProvider`, `useBreakpoint`, and `useBreakpointProps` without bespoke media queries.
-- Compose micro-animations through `useAnimation`, ready-made `Transition` variants, and reusable CSS utilities.
-- Support SSR portals by rehydrating critical styles with `RenderServerStyles`.
-
-## Installation
-
-```bash
-npm install @xanui/core
-```
-
-## Quick Start
-
-```tsx
-import { ThemeProvider, Tag, createTheme, createThemeSwitcher } from '@xanui/core'
-
-// Register a custom theme once at startup
-createTheme('brand', {
-	colors: {
-		brand: { primary: '#7C3AED', secondary: '#5B21B6' },
-	},
-})
-
-const useThemeSwitcher = createThemeSwitcher('brand', ThemeSwitcherOption)
-
-export const App = () => {
-	const { name, change } = useThemeSwitcher()
-
-	return (
-		<ThemeProvider theme={name} isRootProvider>
-			<Tag
-				component="main"
-				px={24}
-				py={32}
-				bgcolor="background"
-				color="text.primary"
-				gap={24}
-			>
-				<Tag component="h1" fontSize="h2">
-					Xanui Core
-				</Tag>
-
-				<button onClick={() => change(name === 'brand' ? 'dark' : 'brand')}>
-					Toggle Theme
-				</button>
-			</Tag>
-		</ThemeProvider>
-	)
-}
-```
-
-## Core Concepts
-
-- **Design Tokens** – `createTheme` merges your overrides with defaults and exposes typed references like `brand.primary` or typography presets.
-- **Adaptive Layout** – Wrap your app with `BreakpointProvider` (automatically included by `ThemeProvider` when `isRootProvider` is `true`) to consume breakpoint helpers throughout the tree.
-- **Composable Styles** – `css`, `getValue`, and `getProps` transform alias props, breakpoints, and pseudo selectors into atomic class names. Use them directly for utilities such as scrollbars or keyframes.
-- **Animation Primitives** – `useAnimation` builds scoped keyframes on the fly; `Transition` controls mount/unmount sequences with variants such as `fade`, `slideDown`, or `collapseVertical`.
-
-## Server-Side Rendering
-
-When rendering on the server, collect the emitted styles:
-
-```tsx
-import RenderServerStyles from '@xanui/core/RenderServerStyles'
-
-export const Document = () => (
-	<html>
-		<head>
-			<RenderServerStyles />
-		</head>
-		<body>{/* app */}</body>
-	</html>
-)
-```
-
-## Documentation
-
-Detailed API docs (props tables, option summaries, and usage examples) live inside the `docs/` directory. Each API/component has its own `README.md` for fast reference:
-
-- `docs/tag/README.md`
-- `docs/theme-provider/README.md`
-- `docs/transition/README.md`
-- `docs/use-animation/README.md`
-- `docs/use-color-template/README.md`
-- `docs/use-interface/README.md`
-- `docs/use-breakpoint/README.md`
-- `docs/use-breakpoint-props/README.md`
-- `docs/use-scrollbar/README.md`
-- `docs/render-server-styles/README.md`
-- `docs/css/README.md`
-- `docs/create-theme/README.md`
-
-## Contributing
-
-1. Fork and clone the repo.
-2. Run `npm install`.
-3. Use `npm run build` to verify type safety.
-4. Submit a pull request that focuses on one improvement at a time.
-
----
-
-Need another integration example or a new preset? Open an issue so we can keep the primitives lean and discoverable.
+# Xanui Core
+
+Xanui Core is a lightweight styling and theming toolkit for React. It bundles a constraint-based CSS generator, a TypeScript-friendly `<Tag>` primitive, responsive helpers, and an opinionated theme engine so that design tokens, animations, and layout logic stay consistent across your application.
+
+## Highlights
+
+- Build any element with `<Tag>` and the ergonomic `sx`/alias props while still passing native attributes.
+- Author design tokens once via `createTheme`, ship them with `ThemeProvider`, and switch them at runtime with `createThemeSwitcher`.
+- Drive responsive layouts using `BreakpointProvider`, `useBreakpoint`, and `useBreakpointProps` without bespoke media queries.
+- Compose micro-animations through `useAnimation`, ready-made `Transition` variants, and reusable CSS utilities.
+- Support SSR portals by rehydrating critical styles with `RenderServerStyles`.
+
+## Installation
+
+```bash
+npm install @xanui/core
+```
+
+## Quick Start
+
+```tsx
+import { ThemeProvider, Tag, createTheme, createThemeSwitcher } from '@xanui/core'
+
+// Register a custom theme once at startup
+createTheme('brand', {
+	colors: {
+		brand: { primary: '#7C3AED', secondary: '#5B21B6' },
+	},
+})
+
+const useThemeSwitcher = createThemeSwitcher('brand', ThemeSwitcherOption)
+
+export const App = () => {
+	const { name, change } = useThemeSwitcher()
+
+	return (
+		<ThemeProvider theme={name} isRootProvider>
+			<Tag
+				component="main"
+				px={24}
+				py={32}
+				bgcolor="background"
+				color="surface.contrast"
+				gap={24}
+			>
+				<Tag component="h1" fontSize="h2">
+					Xanui Core
+				</Tag>
+
+				<button onClick={() => change(name === 'brand' ? 'dark' : 'brand')}>
+					Toggle Theme
+				</button>
+			</Tag>
+		</ThemeProvider>
+	)
+}
+```
+
+## Core Concepts
+
+- **Design Tokens** – `createTheme` merges your overrides with defaults and exposes typed references like `primary.main` or typography presets.
+- **Adaptive Layout** – Wrap your app with `BreakpointProvider` (automatically included by `ThemeProvider` when `isRootProvider` is `true`) to consume breakpoint helpers throughout the tree.
+- **Composable Styles** – `css`, `getValue`, and `getProps` transform alias props, breakpoints, and pseudo selectors into atomic class names. Use them directly for utilities such as scrollbars or keyframes.
+- **Animation Primitives** – `useAnimation` builds scoped keyframes on the fly; `Transition` controls mount/unmount sequences with variants such as `fade`, `slideDown`, or `collapseVertical`.
+
+## Server-Side Rendering
+
+When rendering on the server, collect the emitted styles:
+
+```tsx
+import RenderServerStyles from '@xanui/core/RenderServerStyles'
+
+export const Document = () => (
+	<html>
+		<head>
+			<RenderServerStyles />
+		</head>
+		<body>{/* app */}</body>
+	</html>
+)
+```
+
+## Documentation
+
+Detailed API docs (props tables, option summaries, and usage examples) live inside the `docs/` directory. Each API/component has its own `README.md` for fast reference:
+
+- `docs/tag/README.md`
+- `docs/theme-provider/README.md`
+- `docs/transition/README.md`
+- `docs/use-animation/README.md`
+- `docs/use-color-template/README.md`
+- `docs/use-interface/README.md`
+- `docs/use-breakpoint/README.md`
+- `docs/use-breakpoint-props/README.md`
+- `docs/use-scrollbar/README.md`
+- `docs/render-server-styles/README.md`
+- `docs/css/README.md`
+- `docs/create-theme/README.md`
+
+## Contributing
+
+1. Fork and clone the repo.
+2. Run `npm install`.
+3. Use `npm run build` to verify type safety.
+4. Submit a pull request that focuses on one improvement at a time.
+
+---
+
+Need another integration example or a new preset? Open an issue so we can keep the primitives lean and discoverable.