@magiclabs/ui-components 1.9.0 → 1.9.1
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),h=require("../../hooks/useDisplayState.js"),u=require("react");const s="cubic-bezier(0.33, 1.33, 0.23, 1)",
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),h=require("../../hooks/useDisplayState.js"),u=require("react");const s="cubic-bezier(0.33, 1.33, 0.23, 1)",d={type:"fade",duration:300,timingFunction:s},D=l=>{const{show:n=!0,children:o,type:i,duration:a,timingFunction:t,asChild:c}={...d,...l},{displayed:F,onShow:m,onHide:r}=h.useDisplayState({animate:!0,show:n,onHidden:()=>{},onShown:()=>{}});return F?c?e.jsx(e.Fragment,{children:u.Children.map(o,T=>u.cloneElement(T,{style:{animationFillMode:"both",...n?{animationName:`${i}In`,animationDuration:`${a}ms`,animationTimingFunction:t}:{animationName:`${i}Out`,animationDuration:`${a}ms`,animationTimingFunction:t}},onAnimationEnd:n?m:r}))}):e.jsx("div",{style:{animationFillMode:"both",...n?{animationName:`${i}In`,animationDuration:`${a}ms`,animationTimingFunction:t}:{animationName:`${i}Out`,animationDuration:`${a}ms`,animationTimingFunction:t}},onAnimationEnd:n?m:r,children:o}):null};exports.DEFAULT=d,exports.DEFAULT_TIMING_FUNCTION=s,exports.default=D;
|
|
2
2
|
//# sourceMappingURL=animate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate.js","sources":["../../../../src/components/utils/animate.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { Children, cloneElement, type FC, type PropsWithChildren, type ReactElement } from 'react';\n\ntype Props = PropsWithChildren<{ show?: boolean } & AnimateProps>;\n\ntype AnimationType = 'fade' | 'slide' | 'scale';\n\nexport type AnimateProps = Partial<{\n type: AnimationType;\n duration: number;\n timingFunction: string;\n delay: number;\n asChild?: boolean;\n}>;\n\nexport const DEFAULT_TIMING_FUNCTION = 'cubic-bezier(0.33, 1.33, 0.23, 1)';\n\nexport const DEFAULT = {\n type: 'fade',\n duration: 300,\n timingFunction: DEFAULT_TIMING_FUNCTION,\n} as const;\n\nconst Animate: FC<Props> = props => {\n const { show = true, children, type, duration, timingFunction, asChild } = { ...DEFAULT, ...props };\n const { displayed, onShow, onHide } = useDisplayState({\n animate: true,\n show,\n onHidden: () => {},\n onShown: () => {},\n });\n\n if (!displayed) {\n return null;\n }\n\n if (asChild) {\n return (\n <>\n {Children.map(children, child => {\n return cloneElement(child as ReactElement, {\n style: {\n ...(show\n ? {\n animationName: `${type}In`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }\n : {\n animationName: `${type}Out`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }),\n },\n onAnimationEnd: show ? onShow : onHide,\n });\n })}\n </>\n );\n }\n\n return (\n <div\n style={{\n ...(show\n ? {\n animationName: `${type}In`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }\n : {\n animationName: `${type}Out`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }),\n }}\n onAnimationEnd={show ? onShow : onHide}\n >\n {children}\n </div>\n );\n};\n\nexport default Animate;\n"],"names":["DEFAULT_TIMING_FUNCTION","DEFAULT","Animate","props","show","children","type","duration","timingFunction","asChild","displayed","onShow","onHide","useDisplayState","_jsx","_Fragment","Children","child","cloneElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"animate.js","sources":["../../../../src/components/utils/animate.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { Children, cloneElement, type FC, type PropsWithChildren, type ReactElement } from 'react';\n\ntype Props = PropsWithChildren<{ show?: boolean } & AnimateProps>;\n\ntype AnimationType = 'fade' | 'slide' | 'scale';\n\nexport type AnimateProps = Partial<{\n type: AnimationType;\n duration: number;\n timingFunction: string;\n delay: number;\n asChild?: boolean;\n}>;\n\nexport const DEFAULT_TIMING_FUNCTION = 'cubic-bezier(0.33, 1.33, 0.23, 1)';\n\nexport const DEFAULT = {\n type: 'fade',\n duration: 300,\n timingFunction: DEFAULT_TIMING_FUNCTION,\n} as const;\n\nconst Animate: FC<Props> = props => {\n const { show = true, children, type, duration, timingFunction, asChild } = { ...DEFAULT, ...props };\n const { displayed, onShow, onHide } = useDisplayState({\n animate: true,\n show,\n onHidden: () => {},\n onShown: () => {},\n });\n\n if (!displayed) {\n return null;\n }\n\n if (asChild) {\n return (\n <>\n {Children.map(children, child => {\n return cloneElement(child as ReactElement, {\n style: {\n animationFillMode: 'both',\n ...(show\n ? {\n animationName: `${type}In`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }\n : {\n animationName: `${type}Out`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }),\n },\n onAnimationEnd: show ? onShow : onHide,\n });\n })}\n </>\n );\n }\n\n return (\n <div\n style={{\n animationFillMode: 'both',\n ...(show\n ? {\n animationName: `${type}In`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }\n : {\n animationName: `${type}Out`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }),\n }}\n onAnimationEnd={show ? onShow : onHide}\n >\n {children}\n </div>\n );\n};\n\nexport default Animate;\n"],"names":["DEFAULT_TIMING_FUNCTION","DEFAULT","Animate","props","show","children","type","duration","timingFunction","asChild","displayed","onShow","onHide","useDisplayState","_jsx","_Fragment","Children","child","cloneElement"],"mappings":"sKAea,MAAAA,EAA0B,oCAE1BC,EAAU,CACrB,KAAM,OACN,SAAU,IACV,eAAgBD,GAGZE,EAAqBC,GAAQ,CACjC,KAAM,CAAE,KAAAC,EAAO,GAAM,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAU,eAAAC,EAAgB,QAAAC,CAAS,EAAG,CAAE,GAAGR,EAAS,GAAGE,CAAK,EAC3F,CAAE,UAAAO,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAAA,gBAAgB,CACpD,QAAS,GACT,KAAAT,EACA,SAAU,IAAK,CACf,EAAA,QAAS,IAAK,CAAA,CACf,CAAA,EAED,OAAKM,EAIDD,EAEAK,EAAAA,IACGC,EAAAA,SAAA,CAAA,SAAAC,WAAS,IAAIX,EAAUY,GACfC,EAAAA,aAAaD,EAAuB,CACzC,MAAO,CACL,kBAAmB,OACnB,GAAIb,EACA,CACE,cAAe,GAAGE,CAAI,KACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,CAC1B,EACD,CACE,cAAe,GAAGF,CAAI,MACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,EAEhC,EACD,eAAgBJ,EAAOO,EAASC,CACjC,CAAA,CACF,CACA,CAAA,EAKLE,EAAAA,IACE,MAAA,CAAA,MAAO,CACL,kBAAmB,OACnB,GAAIV,EACA,CACE,cAAe,GAAGE,CAAI,KACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,CAC1B,EACD,CACE,cAAe,GAAGF,CAAI,MACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,EAEhC,EACD,eAAgBJ,EAAOO,EAASC,EAAM,SAErCP,CAAQ,CAAA,EA/CJ,IAkDX"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as r,Fragment as
|
|
1
|
+
import{jsx as r,Fragment as h}from"react/jsx-runtime";import{useDisplayState as p}from"../../hooks/useDisplayState.js";import{Children as g,cloneElement as T}from"react";const d="cubic-bezier(0.33, 1.33, 0.23, 1)",u={type:"fade",duration:300,timingFunction:d},$=l=>{const{show:n=!0,children:a,type:i,duration:o,timingFunction:t,asChild:s}={...u,...l},{displayed:c,onShow:m,onHide:e}=p({animate:!0,show:n,onHidden:()=>{},onShown:()=>{}});return c?s?r(h,{children:g.map(a,F=>T(F,{style:{animationFillMode:"both",...n?{animationName:`${i}In`,animationDuration:`${o}ms`,animationTimingFunction:t}:{animationName:`${i}Out`,animationDuration:`${o}ms`,animationTimingFunction:t}},onAnimationEnd:n?m:e}))}):r("div",{style:{animationFillMode:"both",...n?{animationName:`${i}In`,animationDuration:`${o}ms`,animationTimingFunction:t}:{animationName:`${i}Out`,animationDuration:`${o}ms`,animationTimingFunction:t}},onAnimationEnd:n?m:e,children:a}):null};export{u as DEFAULT,d as DEFAULT_TIMING_FUNCTION,$ as default};
|
|
2
2
|
//# sourceMappingURL=animate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate.js","sources":["../../../../src/components/utils/animate.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { Children, cloneElement, type FC, type PropsWithChildren, type ReactElement } from 'react';\n\ntype Props = PropsWithChildren<{ show?: boolean } & AnimateProps>;\n\ntype AnimationType = 'fade' | 'slide' | 'scale';\n\nexport type AnimateProps = Partial<{\n type: AnimationType;\n duration: number;\n timingFunction: string;\n delay: number;\n asChild?: boolean;\n}>;\n\nexport const DEFAULT_TIMING_FUNCTION = 'cubic-bezier(0.33, 1.33, 0.23, 1)';\n\nexport const DEFAULT = {\n type: 'fade',\n duration: 300,\n timingFunction: DEFAULT_TIMING_FUNCTION,\n} as const;\n\nconst Animate: FC<Props> = props => {\n const { show = true, children, type, duration, timingFunction, asChild } = { ...DEFAULT, ...props };\n const { displayed, onShow, onHide } = useDisplayState({\n animate: true,\n show,\n onHidden: () => {},\n onShown: () => {},\n });\n\n if (!displayed) {\n return null;\n }\n\n if (asChild) {\n return (\n <>\n {Children.map(children, child => {\n return cloneElement(child as ReactElement, {\n style: {\n ...(show\n ? {\n animationName: `${type}In`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }\n : {\n animationName: `${type}Out`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }),\n },\n onAnimationEnd: show ? onShow : onHide,\n });\n })}\n </>\n );\n }\n\n return (\n <div\n style={{\n ...(show\n ? {\n animationName: `${type}In`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }\n : {\n animationName: `${type}Out`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }),\n }}\n onAnimationEnd={show ? onShow : onHide}\n >\n {children}\n </div>\n );\n};\n\nexport default Animate;\n"],"names":["DEFAULT_TIMING_FUNCTION","DEFAULT","Animate","props","show","children","type","duration","timingFunction","asChild","displayed","onShow","onHide","useDisplayState","_jsx","_Fragment","Children","child","cloneElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"animate.js","sources":["../../../../src/components/utils/animate.tsx"],"sourcesContent":["import { useDisplayState } from '@hooks/useDisplayState';\nimport { Children, cloneElement, type FC, type PropsWithChildren, type ReactElement } from 'react';\n\ntype Props = PropsWithChildren<{ show?: boolean } & AnimateProps>;\n\ntype AnimationType = 'fade' | 'slide' | 'scale';\n\nexport type AnimateProps = Partial<{\n type: AnimationType;\n duration: number;\n timingFunction: string;\n delay: number;\n asChild?: boolean;\n}>;\n\nexport const DEFAULT_TIMING_FUNCTION = 'cubic-bezier(0.33, 1.33, 0.23, 1)';\n\nexport const DEFAULT = {\n type: 'fade',\n duration: 300,\n timingFunction: DEFAULT_TIMING_FUNCTION,\n} as const;\n\nconst Animate: FC<Props> = props => {\n const { show = true, children, type, duration, timingFunction, asChild } = { ...DEFAULT, ...props };\n const { displayed, onShow, onHide } = useDisplayState({\n animate: true,\n show,\n onHidden: () => {},\n onShown: () => {},\n });\n\n if (!displayed) {\n return null;\n }\n\n if (asChild) {\n return (\n <>\n {Children.map(children, child => {\n return cloneElement(child as ReactElement, {\n style: {\n animationFillMode: 'both',\n ...(show\n ? {\n animationName: `${type}In`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }\n : {\n animationName: `${type}Out`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }),\n },\n onAnimationEnd: show ? onShow : onHide,\n });\n })}\n </>\n );\n }\n\n return (\n <div\n style={{\n animationFillMode: 'both',\n ...(show\n ? {\n animationName: `${type}In`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }\n : {\n animationName: `${type}Out`,\n animationDuration: `${duration}ms`,\n animationTimingFunction: timingFunction,\n }),\n }}\n onAnimationEnd={show ? onShow : onHide}\n >\n {children}\n </div>\n );\n};\n\nexport default Animate;\n"],"names":["DEFAULT_TIMING_FUNCTION","DEFAULT","Animate","props","show","children","type","duration","timingFunction","asChild","displayed","onShow","onHide","useDisplayState","_jsx","_Fragment","Children","child","cloneElement"],"mappings":"0KAea,MAAAA,EAA0B,oCAE1BC,EAAU,CACrB,KAAM,OACN,SAAU,IACV,eAAgBD,GAGZE,EAAqBC,GAAQ,CACjC,KAAM,CAAE,KAAAC,EAAO,GAAM,SAAAC,EAAU,KAAAC,EAAM,SAAAC,EAAU,eAAAC,EAAgB,QAAAC,CAAS,EAAG,CAAE,GAAGR,EAAS,GAAGE,CAAK,EAC3F,CAAE,UAAAO,EAAW,OAAAC,EAAQ,OAAAC,CAAM,EAAKC,EAAgB,CACpD,QAAS,GACT,KAAAT,EACA,SAAU,IAAK,CACf,EAAA,QAAS,IAAK,CAAA,CACf,CAAA,EAED,OAAKM,EAIDD,EAEAK,EACGC,EAAA,CAAA,SAAAC,EAAS,IAAIX,EAAUY,GACfC,EAAaD,EAAuB,CACzC,MAAO,CACL,kBAAmB,OACnB,GAAIb,EACA,CACE,cAAe,GAAGE,CAAI,KACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,CAC1B,EACD,CACE,cAAe,GAAGF,CAAI,MACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,EAEhC,EACD,eAAgBJ,EAAOO,EAASC,CACjC,CAAA,CACF,CACA,CAAA,EAKLE,EACE,MAAA,CAAA,MAAO,CACL,kBAAmB,OACnB,GAAIV,EACA,CACE,cAAe,GAAGE,CAAI,KACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,CAC1B,EACD,CACE,cAAe,GAAGF,CAAI,MACtB,kBAAmB,GAAGC,CAAQ,KAC9B,wBAAyBC,EAEhC,EACD,eAAgBJ,EAAOO,EAASC,EAAM,SAErCP,CAAQ,CAAA,EA/CJ,IAkDX"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../../../../src/components/utils/animate.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAEnG,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAAC,CAAC;AAElE,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,eAAO,MAAM,uBAAuB,sCAAsC,CAAC;AAE3E,eAAO,MAAM,OAAO;;;;CAIV,CAAC;AAEX,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../../../../src/components/utils/animate.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAEnG,KAAK,KAAK,GAAG,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,YAAY,CAAC,CAAC;AAElE,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,eAAO,MAAM,uBAAuB,sCAAsC,CAAC;AAE3E,eAAO,MAAM,OAAO;;;;CAIV,CAAC;AAEX,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,KAAK,CA4DtB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|