@xanui/core 1.2.71 → 1.3.0

package/index.cjs

@@ -2,7 +2,6 @@
 
 var index$2 = require('./Tag/index.cjs');
 var useTagProps = require('./Tag/useTagProps.cjs');
-var useAnimation = require('./hooks/useAnimation.cjs');
 var useColorTemplate = require('./hooks/useColorTemplate.cjs');
 var useBreakpoint = require('./breakpoint/useBreakpoint.cjs');
 var useBreakpointProps = require('./breakpoint/useBreakpointProps.cjs');
@@ -16,11 +15,15 @@ var index$4 = require('./Document/index.cjs');
 var AppRootProvider = require('./AppRoot/AppRootProvider.cjs');
 var CSSCacheProvider = require('./css/CSSCacheProvider.cjs');
 var index$1 = require('./Iframe/index.cjs');
-var index$6 = require('./css/index.cjs');
-var index$7 = require('./theme/index.cjs');
+var index$6 = require('./animate/index.cjs');
+var useTransition = require('./hooks/useTransition.cjs');
+var useTransitionGroup = require('./hooks/useTransitionGroup.cjs');
+var index$7 = require('./css/index.cjs');
+var index$8 = require('./theme/index.cjs');
 var getValue = require('./css/getValue.cjs');
 var getProps = require('./css/getProps.cjs');
 var ThemeProvider = require('./theme/ThemeProvider.cjs');
+var easing = require('./animate/easing.cjs');
 var core = require('./theme/core.cjs');
 var ThemeDefaultOptions = require('./theme/ThemeDefaultOptions.cjs');
 
@@ -28,8 +31,6 @@ var ThemeDefaultOptions = require('./theme/ThemeDefaultOptions.cjs');
 
 exports.Tag = index$2;
 exports.useTagProps = useTagProps;
-exports.animationEases = useAnimation.animationEases;
-exports.useAnimation = useAnimation.default;
 exports.useColorTemplate = useColorTemplate;
 exports.useBreakpoint = useBreakpoint;
 exports.useBreakpointProps = useBreakpointProps;
@@ -45,15 +46,19 @@ exports.getCSSCache = CSSCacheProvider.getCSSCache;
 exports.useCSSCache = CSSCacheProvider.useCSSCache;
 exports.useCSSCacheId = CSSCacheProvider.useCSSCacheId;
 exports.Iframe = index$1;
-exports.adjustColor = index$6.adjustColor;
-exports.adjustTextContrast = index$6.adjustTextContrast;
-exports.alpha = index$6.alpha;
-exports.breakpoints = index$6.breakpoints;
-exports.css = index$6.css;
-exports.themeRootClass = index$7.themeRootClass;
+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;
 exports.getValue = getValue;
 exports.getProps = getProps;
 exports.ThemeProvider = ThemeProvider;
+exports.Easing = easing;
 exports.createTheme = core.createTheme;
 exports.useTheme = core.useTheme;
 exports.darkThemeOptions = ThemeDefaultOptions.darkThemeOptions;

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

@@ -1,12 +1,11 @@
 export { default as Tag } from './Tag/index.js';
 export { default as useTagProps } from './Tag/useTagProps.js';
-export { UseAnimationProps, animationEases, default as useAnimation } from './hooks/useAnimation.js';
 export { UseColorTemplateColor, UseColorTemplateType, default as useColorTemplate } from './hooks/useColorTemplate.js';
 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, TransitionState, TransitionVariant, TransitionVariantTypes } from './Transition/index.js';
+export { default as Transition, TransitionProps, 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';
@@ -14,6 +13,9 @@ export { useDocument } from './Document/index.js';
 export { useAppRootElement } from './AppRoot/AppRootProvider.js';
 export { getCSSCache, useCSSCache, useCSSCacheId } from './css/CSSCacheProvider.js';
 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 { themeRootClass } from './theme/index.js';
 export { Aliases, BreakpointKeys, CSSBreakpointType, CSSOptionProps, CSSProps, CSSValueType, FN, GlobalCSS } from './css/types.js';
@@ -22,5 +24,6 @@ export { ColorsRefTypes, ObjectType, ThemeColorOption, ThemeOptionInput, ThemeOp
 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';
+export { default as Easing } from './animate/easing.js';
 export { createTheme, useTheme } from './theme/core.js';
 export { darkThemeOptions, lightThemeOptions } from './theme/ThemeDefaultOptions.js';

package/index.js

@@ -1,6 +1,5 @@
 export { default as Tag } from './Tag/index.js';
 export { default as useTagProps } from './Tag/useTagProps.js';
-export { animationEases, default as useAnimation } from './hooks/useAnimation.js';
 export { default as useColorTemplate } from './hooks/useColorTemplate.js';
 export { default as useBreakpoint } from './breakpoint/useBreakpoint.js';
 export { default as useBreakpointProps } from './breakpoint/useBreakpointProps.js';
@@ -14,11 +13,15 @@ export { useDocument } from './Document/index.js';
 export { useAppRootElement } from './AppRoot/AppRootProvider.js';
 export { getCSSCache, useCSSCache, useCSSCacheId } from './css/CSSCacheProvider.js';
 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 { themeRootClass } from './theme/index.js';
 export { default as getValue } from './css/getValue.js';
 export { default as getProps } from './css/getProps.js';
 export { default as ThemeProvider } from './theme/ThemeProvider.js';
+export { default as Easing } from './animate/easing.js';
 export { createTheme, useTheme } from './theme/core.js';
 export { darkThemeOptions, lightThemeOptions } from './theme/ThemeDefaultOptions.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

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

package/hooks/useAnimation.cjs

@@ -1,44 +0,0 @@
-"use client";
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var index$1 = require('../css/index.cjs');
-var React = require('react');
-var index = require('../Document/index.cjs');
-var CSSCacheProvider = require('../css/CSSCacheProvider.cjs');
-
-const animationEases = {
-    standard: "cubic-bezier(0.4, 0, 0.2, 1)",
-    fast: "cubic-bezier(0.2, 0, 0, 1)",
-    smooth: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-    linear: "cubic-bezier(0, 0, 1, 1)",
-    bounce: "cubic-bezier(0.34, 1.50, 0.64, 1)",
-};
-const useAnimation = ({ from, to, delay, ease, duration }) => {
-    let _delay = delay || 0;
-    let _duration = duration || 600;
-    let _ease = ease || "standard";
-    const id = "anim" + React.useId().replace(/:/g, "");
-    const doc = index.useDocument();
-    const cacheId = CSSCacheProvider.useCSSCacheId();
-    const anim = index$1.css({
-        animationName: id,
-        animationDelay: _delay + "ms",
-        animationDuration: _duration + "ms",
-        animationTimingFunction: animationEases[_ease] || animationEases.standard,
-        [`@keyframes ${id}`]: {
-            from: from,
-            to: to
-        }
-    }, {
-        container: doc === null || doc === void 0 ? void 0 : doc.document,
-        cacheId,
-        injectStyle: typeof window !== 'undefined'
-    });
-    return anim.classname;
-};
-
-exports.animationEases = animationEases;
-exports.default = useAnimation;
-//# sourceMappingURL=useAnimation.cjs.map

package/hooks/useAnimation.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAnimation.cjs","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["\"use client\";\nimport { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\n\nexport const animationEases = {\n    standard: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    fast: \"cubic-bezier(0.2, 0, 0, 1)\",\n    smooth: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\n    bounce: \"cubic-bezier(0.34, 1.50, 0.64, 1)\",\n};\n\nexport interface UseAnimationProps {\n    delay?: number;\n    duration?: number;\n    from: CSSProps;\n    to: CSSProps;\n    ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n    let _delay = delay || 0;\n    let _duration = duration || 600;\n    let _ease = ease || \"standard\"\n    const id = \"anim\" + useId().replace(/:/g, \"\")\n    const doc = useDocument()\n    const cacheId = useCSSCacheId()\n\n    const anim = css({\n        animationName: id,\n        animationDelay: _delay + \"ms\",\n        animationDuration: _duration + \"ms\",\n        animationTimingFunction: animationEases[_ease] || animationEases.standard,\n        [`@keyframes ${id}`]: {\n            from: from as any,\n            to: to as any\n        }\n    }, {\n        container: doc?.document,\n        cacheId,\n        injectStyle: typeof window !== 'undefined'\n    })\n    return anim.classname\n}\n\nexport default useAnimation"],"names":[],"mappings":";;;;;;;;;;AAOO;AACH;AACA;AACA;AACA;AACA;;AAWJ;AACI;AACA;AACA;AACA;AACA;AACA;;AAGI;;;;AAIA;AACI;AACA;AACH;;AAED;;AAEA;AACH;;AAEL;;;"}

package/hooks/useAnimation.d.ts

@@ -1,20 +0,0 @@
-import { CSSProps } from '../css/types.js';
-
-declare const animationEases: {
-    standard: string;
-    fast: string;
-    smooth: string;
-    linear: string;
-    bounce: string;
-};
-interface UseAnimationProps {
-    delay?: number;
-    duration?: number;
-    from: CSSProps;
-    to: CSSProps;
-    ease?: keyof typeof animationEases;
-}
-declare const useAnimation: ({ from, to, delay, ease, duration }: UseAnimationProps) => string;
-
-export { animationEases, useAnimation as default };
-export type { UseAnimationProps };

package/hooks/useAnimation.js

@@ -1,39 +0,0 @@
-"use client";
-import { css } from '../css/index.js';
-import { useId } from 'react';
-import { useDocument } from '../Document/index.js';
-import { useCSSCacheId } from '../css/CSSCacheProvider.js';
-
-const animationEases = {
-    standard: "cubic-bezier(0.4, 0, 0.2, 1)",
-    fast: "cubic-bezier(0.2, 0, 0, 1)",
-    smooth: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
-    linear: "cubic-bezier(0, 0, 1, 1)",
-    bounce: "cubic-bezier(0.34, 1.50, 0.64, 1)",
-};
-const useAnimation = ({ from, to, delay, ease, duration }) => {
-    let _delay = delay || 0;
-    let _duration = duration || 600;
-    let _ease = ease || "standard";
-    const id = "anim" + useId().replace(/:/g, "");
-    const doc = useDocument();
-    const cacheId = useCSSCacheId();
-    const anim = css({
-        animationName: id,
-        animationDelay: _delay + "ms",
-        animationDuration: _duration + "ms",
-        animationTimingFunction: animationEases[_ease] || animationEases.standard,
-        [`@keyframes ${id}`]: {
-            from: from,
-            to: to
-        }
-    }, {
-        container: doc === null || doc === void 0 ? void 0 : doc.document,
-        cacheId,
-        injectStyle: typeof window !== 'undefined'
-    });
-    return anim.classname;
-};
-
-export { animationEases, useAnimation as default };
-//# sourceMappingURL=useAnimation.js.map

package/hooks/useAnimation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAnimation.js","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["\"use client\";\nimport { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\nimport { useDocument } from '../Document';\nimport { useCSSCacheId } from '../css/CSSCacheProvider';\n\nexport const animationEases = {\n    standard: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    fast: \"cubic-bezier(0.2, 0, 0, 1)\",\n    smooth: \"cubic-bezier(0.25, 0.46, 0.45, 0.94)\",\n    linear: \"cubic-bezier(0, 0, 1, 1)\",\n    bounce: \"cubic-bezier(0.34, 1.50, 0.64, 1)\",\n};\n\nexport interface UseAnimationProps {\n    delay?: number;\n    duration?: number;\n    from: CSSProps;\n    to: CSSProps;\n    ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n    let _delay = delay || 0;\n    let _duration = duration || 600;\n    let _ease = ease || \"standard\"\n    const id = \"anim\" + useId().replace(/:/g, \"\")\n    const doc = useDocument()\n    const cacheId = useCSSCacheId()\n\n    const anim = css({\n        animationName: id,\n        animationDelay: _delay + \"ms\",\n        animationDuration: _duration + \"ms\",\n        animationTimingFunction: animationEases[_ease] || animationEases.standard,\n        [`@keyframes ${id}`]: {\n            from: from as any,\n            to: to as any\n        }\n    }, {\n        container: doc?.document,\n        cacheId,\n        injectStyle: typeof window !== 'undefined'\n    })\n    return anim.classname\n}\n\nexport default useAnimation"],"names":[],"mappings":";;;;;;AAOO;AACH;AACA;AACA;AACA;AACA;;AAWJ;AACI;AACA;AACA;AACA;AACA;AACA;;AAGI;;;;AAIA;AACI;AACA;AACH;;AAED;;AAEA;AACH;;AAEL;;"}