@shiflo/ui 0.1.0 → 0.1.2

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -1,3 +1,3 @@
 import { BottomSheetProps } from './BottomSheet.typing';
-declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, style, dragThreshold, ...props }: BottomSheetProps): import("react").JSX.Element;
+declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, style, dragThreshold, ...props }: BottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default BottomSheet;

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,4 +1,4 @@
-import { jsx as o, jsxs as H } from "react/jsx-runtime";
+import { jsx as o, jsxs as H } from "@emotion/react/jsx-runtime";
 import { useState as R, useRef as a, useImperativeHandle as S, useEffect as j } from "react";
 import n from "@emotion/styled";
 import { motion as D } from "motion/react";
@@ -99,7 +99,7 @@ function z({
           transition: {
             type: "spring",
             duration: i,
-            damping: 10
+            bounce: 0.2
           },
           style: g,
           ...y,

package/dist/components/BottomSheet/BottomSheet.typing.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { HTMLMotionProps } from 'motion/react';
 import { UtilityProps } from '../../typings/utility';
+import { HTMLMotionProps } from 'motion/react';
 export interface BottomSheetProps extends PropsWithChildren<HTMLMotionProps<"div"> & Pick<UtilityProps, "css">> {
     open?: boolean;
     onClose?: () => void;

package/dist/components/Box/Box.mjs

@@ -1,4 +1,4 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as c } from "@emotion/react/jsx-runtime";
 import m from "@emotion/styled";
 import a from "../../utils/getUtilityProps.mjs";
 import s from "../../utils/getValueByPath.mjs";

package/dist/components/Box/Box.typing.d.ts

@@ -1,7 +1,7 @@
 import { ElementType, ReactNode } from 'react';
+import { ShifloTheme } from '../../theme/typing';
 import { PolymorphicComponentProps } from '../../typings/component';
 import { RecursionPath, UtilityProps } from '../../typings/utility';
-import { ShifloTheme } from '../../theme/typing';
 export interface BaseBoxProps extends UtilityProps {
     backgroundColor?: RecursionPath<ShifloTheme["palette"]>;
     color?: RecursionPath<ShifloTheme["palette"]> | "inherit";

package/dist/components/Button/Button.d.ts

@@ -1,3 +1,3 @@
 import { ButtonProps } from './Button.typing';
-declare function Button({ ref, children, variant, size, color, startIcon, endIcon, ...props }: ButtonProps): import("react").JSX.Element;
+declare function Button({ ref, children, variant, size, color, startIcon, endIcon, ...props }: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/components/Button/Button.mjs

@@ -1,7 +1,7 @@
-import { jsxs as k } from "react/jsx-runtime";
-import f from "@emotion/styled";
-import { motion as v } from "motion/react";
-const m = f(v.button)`
+import { jsxs as k } from "@emotion/react/jsx-runtime";
+import v from "@emotion/styled";
+import { motion as f } from "motion/react";
+const m = v(f.button)`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9,11 +9,11 @@ const m = f(v.button)`
   font-weight: 500;
   transition: all 0.2s;
 
-  ${({ theme: t, variant: l, size: s, color: d }) => {
+  ${({ theme: t, variant: l, size: d, color: c }) => {
   const {
     mode: a,
     palette: { primary: e, secondary: r, neutral: o, gradient: p },
-    typography: { body1: c, body2: g, small1: h, small2: u },
+    typography: { body1: s, body2: g, small1: h, small2: u },
     spacing: n,
     radius: b
   } = t, i = {};
@@ -89,7 +89,7 @@ const m = f(v.button)`
       });
       break;
     default:
-      if (d === "secondary") {
+      if (c === "secondary") {
         Object.assign(i, {
           backgroundColor: r.main,
           color: a === "dark" ? o[900] : o[700],
@@ -134,16 +134,16 @@ const m = f(v.button)`
       });
       break;
   }
-  switch (s) {
+  switch (d) {
     case "large":
       Object.assign(i, {
         padding: `${n[300]} ${n[350]}`,
         borderRadius: b[300],
-        fontSize: c.fontSize,
-        lineHeight: c.lineHeight,
+        fontSize: s.fontSize,
+        lineHeight: s.lineHeight,
         "& svg": {
-          width: c.fontSize,
-          height: c.fontSize
+          width: s.fontSize,
+          height: s.fontSize
         }
       });
       break;
@@ -190,19 +190,19 @@ const m = f(v.button)`
 function C({
   ref: t,
   children: l,
-  variant: s = "filled",
-  size: d = "medium",
+  variant: d = "filled",
+  size: c = "medium",
   color: a = "primary",
   startIcon: e,
   endIcon: r,
   ...o
 }) {
-  return s === "text" ? /* @__PURE__ */ k(
+  return d === "text" ? /* @__PURE__ */ k(
     m,
     {
       ref: t,
       variant: "text",
-      size: d,
+      size: c,
       color: "secondary",
       layout: !0,
       whileHover: {
@@ -211,8 +211,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [
@@ -221,12 +221,12 @@ function C({
         r
       ]
     }
-  ) : s === "ghost" ? /* @__PURE__ */ k(
+  ) : d === "ghost" ? /* @__PURE__ */ k(
     m,
     {
       ref: t,
       variant: "ghost",
-      size: d,
+      size: c,
       color: "primary",
       layout: !0,
       whileHover: {
@@ -235,8 +235,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [
@@ -245,12 +245,12 @@ function C({
         r
       ]
     }
-  ) : s === "gradient" ? /* @__PURE__ */ k(
+  ) : d === "gradient" ? /* @__PURE__ */ k(
     m,
     {
       ref: t,
       variant: "gradient",
-      size: d,
+      size: c,
       color: "primary",
       layout: !0,
       whileHover: {
@@ -259,8 +259,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [
@@ -273,8 +273,8 @@ function C({
     m,
     {
       ref: t,
-      variant: s,
-      size: d,
+      variant: d,
+      size: c,
       color: a,
       layout: !0,
       whileHover: {
@@ -283,8 +283,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [

package/dist/components/Dialog/Dialog.d.ts

@@ -1,3 +1,3 @@
 import { DialogProps } from './Dialog.typing';
-declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, maxWidth, ...props }: DialogProps): import("react").JSX.Element;
+declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, maxWidth, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Dialog;

package/dist/components/Dialog/Dialog.mjs

@@ -1,9 +1,9 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useState as d, useRef as u, useEffect as h } from "react";
-import g from "@emotion/styled";
-import { motion as y } from "motion/react";
-import $ from "../Overlay/Overlay.mjs";
-const x = g(y.div)`
+import { jsx as m } from "@emotion/react/jsx-runtime";
+import { useState as p, useEffect as d } from "react";
+import u from "@emotion/styled";
+import { motion as h } from "motion/react";
+import g from "../Overlay/Overlay.mjs";
+const y = u(h.div)`
   width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
   max-width: ${({ maxWidth: e = "375px" }) => e};
   max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
@@ -17,60 +17,59 @@ const x = g(y.div)`
   }
 }) => e.background};
 `;
-function F({
+function O({
   open: e,
-  onClose: l,
-  children: n,
+  onClose: c,
+  children: l,
   transitionDuration: a = 0.2,
   onClick: o,
-  style: b,
-  maxWidth: c = "375px",
+  style: $,
+  maxWidth: n = "375px",
   ...s
 }) {
-  const [r, i] = d(!1), f = u(null), p = (t) => {
+  const [i, r] = p(!1), f = (t) => {
     t.stopPropagation(), typeof o == "function" && o(t);
   };
-  return h(() => {
+  return d(() => {
     let t;
     return e ? t = requestAnimationFrame(() => {
-      i(!0);
-    }) : i(!1), () => {
+      r(!0);
+    }) : r(!1), () => {
       t && cancelAnimationFrame(t);
     };
   }, [e]), /* @__PURE__ */ m(
-    $,
+    g,
     {
-      ref: f,
       open: e,
-      onClose: l,
+      onClose: c,
       transitionDuration: a,
       placement: "center-middle",
       children: /* @__PURE__ */ m(
-        x,
+        y,
         {
           transitionDuration: a,
-          maxWidth: c,
-          onClick: p,
+          maxWidth: n,
+          onClick: f,
           initial: {
             scale: 0.9,
             opacity: 0
           },
           animate: {
-            scale: r ? 1 : 0.9,
-            opacity: r ? 1 : 0
+            scale: i ? 1 : 0.9,
+            opacity: i ? 1 : 0
           },
           transition: {
             type: "spring",
             duration: a,
-            damping: 10
+            bounce: 0.2
           },
           ...s,
-          children: n
+          children: l
         }
       )
     }
   );
 }
 export {
-  F as default
+  O as default
 };

package/dist/components/FPSMonitor/FPSMonitor.d.ts

@@ -1,4 +1,4 @@
-import { FPSMetrics } from './FPSTMonitor.utils';
+import { FPSMetrics } from './FPSMonitor.utils';
 export interface FPSMonitorProps {
     trigger?: boolean;
     duration?: number;
@@ -7,5 +7,5 @@ export interface FPSMonitorProps {
     onComplete?: (metrics: FPSMetrics) => void;
     on60FPSAchieved?: (achieved: boolean) => void;
 }
-declare function FPSMonitor({ trigger, duration, updateInterval, threshold, onComplete, on60FPSAchieved }: FPSMonitorProps): import("react").JSX.Element;
+declare function FPSMonitor({ trigger, duration, updateInterval, threshold, onComplete, on60FPSAchieved }: FPSMonitorProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default FPSMonitor;

package/dist/components/FPSMonitor/FPSMonitor.mjs

@@ -1,9 +1,9 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { jsxs as t, jsx as r } from "@emotion/react/jsx-runtime";
 import { useState as P, useRef as k, useEffect as A } from "react";
 import { useTheme as E } from "@emotion/react";
 import { motion as u, AnimatePresence as C } from "motion/react";
 import s from "../Box/Box.mjs";
-import { FPSChecker as I } from "./FPSTMonitor.utils.mjs";
+import { FPSChecker as I } from "./FPSMonitor.utils.mjs";
 import e from "../Typography/Typography.mjs";
 function J({
   trigger: R = !1,

package/dist/components/Icon/Icon.d.ts

@@ -1,3 +1,3 @@
 import { IconProps } from './Icon.typing';
-declare function Icon({ ref, name, width, height, ...props }: IconProps): import("react").JSX.Element[] | null | undefined;
+declare function Icon({ ref, name, width, height, ...props }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element[] | null | undefined;
 export default Icon;

package/dist/components/Icon/Icon.mjs

@@ -1,4 +1,4 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as m } from "@emotion/react/jsx-runtime";
 import { Children as p, isValidElement as l } from "react";
 import { S as a } from "../../assets/icons/index.ts-Bfm0GTNS.js";
 import c from "@emotion/styled";

package/dist/components/Icon/Icon.typing.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
-import { RecursionPath } from '../../typings/utility';
 import { ShifloTheme } from '../../theme/typing';
+import { RecursionPath } from '../../typings/utility';
 import type * as Svgs from "../../assets/icons";
 export interface BaseIconProps {
     name: keyof typeof Svgs;

package/dist/components/Overlay/Overlay.mjs

@@ -1,15 +1,15 @@
-import { jsxs as x, jsx as f } from "react/jsx-runtime";
-import { useState as m, useRef as E, useImperativeHandle as I, useLayoutEffect as C, useEffect as w } from "react";
-import { createPortal as L } from "react-dom";
-import { useTheme as A } from "@emotion/react";
-import a from "@emotion/styled";
-import { motion as o } from "motion/react";
-const F = a(o.div)`
+import { jsxs as k, jsx as c } from "@emotion/react/jsx-runtime";
+import { useState as l, useEffect as j } from "react";
+import { createPortal as v } from "react-dom";
+import { useTheme as x } from "@emotion/react";
+import r from "@emotion/styled";
+import { motion as a } from "motion/react";
+const C = r(a.div)`
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
-`, R = a(o.div)`
+`, A = r(a.div)`
   position: fixed;
   top: 0;
   left: 0;
@@ -17,19 +17,19 @@ const F = a(o.div)`
   height: 100%;
   background-color: ${({
   theme: {
-    palette: { common: r }
+    palette: { common: e }
   }
-}) => r.overlay};
-`, S = a(o.div)`
+}) => e.overlay};
+`, w = r(a.div)`
   position: fixed;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 
-  ${({ placement: r }) => {
+  ${({ placement: e }) => {
   const t = {};
-  switch (r) {
+  switch (e) {
     case "top-left":
       Object.assign(t, {
         top: 0,
@@ -93,60 +93,56 @@ const F = a(o.div)`
   return t;
 }}
 `;
-function N({
-  children: r,
+function E({
+  children: e,
   open: t,
-  onClose: d,
-  transitionDuration: s = 0.2,
-  placement: p,
-  ref: u,
-  onClick: b,
-  hideOverlay: g,
-  ...y
+  onClose: m,
+  transitionDuration: n = 0.2,
+  placement: f,
+  ref: I,
+  onClick: p,
+  hideOverlay: d,
+  ...b
 }) {
   const {
-    palette: { common: h }
-  } = A(), [O, i] = m(!0), [v, c] = m(!1), n = E(null), k = (e) => {
-    d?.(), b?.(e);
+    palette: { common: u }
+  } = x(), [g, s] = l(!0), [h, i] = l(!1), y = (o) => {
+    m?.(), p?.(o);
+  }, O = () => {
+    t || s(!0);
   };
-  return I(u, () => n.current), C(() => {
-    let e;
-    return t ? (i(!1), e = requestAnimationFrame(() => {
-      c(!0);
-    })) : c(!1), () => {
-      e && cancelAnimationFrame(e);
+  return j(() => {
+    let o;
+    return t ? (s(!1), o = requestAnimationFrame(() => {
+      i(!0);
+    })) : i(!1), () => {
+      o && cancelAnimationFrame(o);
     };
-  }, [t, s]), w(() => {
-    const e = n.current, l = (j) => {
-      t || j.propertyName === "opacity" && i(!0);
-    };
-    return e?.addEventListener("transitionend", l), () => {
-      e?.removeEventListener("transitionend", l);
-    };
-  }, [t]), O ? null : L(
-    /* @__PURE__ */ x(F, { children: [
-      /* @__PURE__ */ f(
-        R,
+  }, [t, n]), g ? null : v(
+    /* @__PURE__ */ k(C, { children: [
+      /* @__PURE__ */ c(
+        A,
         {
-          ref: n,
           initial: { opacity: 0 },
           animate: {
-            opacity: v ? 1 : 0,
-            backgroundColor: g ? "rgba(0, 0, 0, 0)" : h.overlay
+            opacity: h ? 1 : 0,
+            backgroundColor: d ? "rgba(0, 0, 0, 0)" : u.overlay
           },
           transition: {
-            duration: s,
-            ease: t ? "easeIn" : "easeOut"
+            type: "spring",
+            duration: n,
+            bounce: 0.2
           },
-          onClick: k,
-          ...y
+          onAnimationComplete: O,
+          onClick: y,
+          ...b
         }
       ),
-      /* @__PURE__ */ f(S, { placement: p, children: r })
+      /* @__PURE__ */ c(w, { placement: f, children: e })
     ] }),
     document.body
   );
 }
 export {
-  N as default
+  E as default
 };

package/dist/components/Snackbar/Snackbar.mjs

@@ -1,9 +1,9 @@
-import { jsxs as E, jsx as c } from "react/jsx-runtime";
-import { useState as y, useRef as b, useImperativeHandle as z, useLayoutEffect as A, useEffect as g } from "react";
-import { createPortal as I } from "react-dom";
-import i from "@emotion/styled";
-import { motion as L } from "motion/react";
-const R = i(L.div)`
+import { jsxs as $, jsx as l } from "@emotion/react/jsx-runtime";
+import { useState as h, useRef as v, useEffect as x } from "react";
+import { createPortal as S } from "react-dom";
+import n from "@emotion/styled";
+import { motion as k } from "motion/react";
+const A = n(k.div)`
   position: fixed;
   left: 50%;
   bottom: ${({ theme: { spacing: e } }) => `calc(${e[800]} + var(--safe-area-inset-bottom, 0px))`};
@@ -21,9 +21,9 @@ const R = i(L.div)`
 }) => e[900]};
   border-radius: ${({ theme: { radius: e } }) => e[400]};
   z-index: 1;
-`, T = i.div`
+`, z = n.div`
   white-space: nowrap;
-`, j = i.div`
+`, j = n.div`
   flex-grow: 1;
   display: -webkit-box;
   overflow: hidden;
@@ -40,52 +40,49 @@ const R = i(L.div)`
   lineHeight: t.lineHeight,
   color: e.surface
 })}
-`, F = i.div`
+`, C = n.div`
   white-space: nowrap;
 `;
-function B({
+function E({
   children: e,
   open: t,
-  onClose: l,
-  transitionDuration: a = 0.2,
-  style: O,
-  ref: v,
+  onClose: c,
+  transitionDuration: r = 0.2,
+  style: F,
+  ref: I,
   startIcon: m,
-  action: f,
-  maxWidth: w = "375px",
-  autoHideDuration: d = 3e3,
+  action: s,
+  maxWidth: b = "375px",
+  autoHideDuration: f = 3e3,
   disableAutoHide: p,
-  ...$
+  ...w
 }) {
-  const [k, u] = y(!0), [r, h] = y(!1), o = b(null), s = b(null);
-  return z(v, () => o.current), A(() => {
-    let n;
-    return t ? (u(!1), n = requestAnimationFrame(() => {
-      h(!0);
-    })) : h(!1), () => {
-      n && cancelAnimationFrame(n);
+  const [g, d] = h(!0), [i, u] = h(!1), o = v(null);
+  x(() => {
+    let a;
+    return t ? (d(!1), a = requestAnimationFrame(() => {
+      u(!0);
+    })) : u(!1), () => {
+      a && cancelAnimationFrame(a);
     };
-  }, [t, a]), g(() => {
-    const n = o.current, x = (S) => {
-      t || S.propertyName === "opacity" && u(!0);
-    };
-    return n?.addEventListener("transitionend", x), () => {
-      n?.removeEventListener("transitionend", x);
-    };
-  }, [t]), g(() => {
-    if (!(p || !r))
-      return s.current = setTimeout(() => {
-        l?.();
-      }, d), () => {
-        s.current && clearTimeout(s.current);
+  }, [t, r]);
+  const y = () => {
+    t || d(!0);
+  };
+  return x(() => {
+    if (!(p || !i))
+      return o.current = setTimeout(() => {
+        c?.();
+      }, f), () => {
+        o.current && clearTimeout(o.current);
       };
-  }, [p, d, r, l]), k ? null : I(
-    /* @__PURE__ */ E(
-      R,
+  }, [p, f, i, c]), g ? null : S(
+    /* @__PURE__ */ $(
+      A,
       {
-        ref: o,
-        transitionDuration: a,
-        maxWidth: w,
+        transitionDuration: r,
+        maxWidth: b,
+        onAnimationComplete: y,
         initial: {
           x: "-50%",
           scale: 0.97,
@@ -93,19 +90,19 @@ function B({
         },
         animate: {
           x: "-50%",
-          scale: r ? 1 : 0.97,
-          opacity: r ? 1 : 0
+          scale: i ? 1 : 0.97,
+          opacity: i ? 1 : 0
         },
         transition: {
           type: "spring",
-          duration: a,
-          damping: 10
+          duration: r,
+          bounce: 0.2
         },
-        ...$,
+        ...w,
         children: [
-          m && /* @__PURE__ */ c(T, { children: m }),
-          /* @__PURE__ */ c(j, { children: e }),
-          f && /* @__PURE__ */ c(F, { children: f })
+          m && /* @__PURE__ */ l(z, { children: m }),
+          /* @__PURE__ */ l(j, { children: e }),
+          s && /* @__PURE__ */ l(C, { children: s })
         ]
       }
     ),
@@ -113,5 +110,5 @@ function B({
   );
 }
 export {
-  B as default
+  E as default
 };

package/dist/components/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
 import { SwitchProps } from './Switch.typing';
-declare function Switch({ checked, disabled, size, onChange, onClick, ...props }: SwitchProps): import("react").JSX.Element;
+declare function Switch({ checked, disabled, size, onChange, onClick, ...props }: SwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Switch;

package/dist/components/Switch/Switch.mjs

@@ -1,4 +1,4 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as n } from "@emotion/react/jsx-runtime";
 import s from "@emotion/styled";
 import { motion as l } from "motion/react";
 const d = s(l.button)`

package/dist/components/Tag/Tag.d.ts

@@ -1,3 +1,3 @@
 import { TagProps } from './Tag.typing';
-declare function Tag(props: TagProps): import("react").JSX.Element;
+declare function Tag(props: TagProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.mjs

@@ -1,4 +1,4 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as l } from "@emotion/react/jsx-runtime";
 import g from "@emotion/styled";
 import { motion as b } from "motion/react";
 const k = g(b.span)`

package/dist/components/Tag/Tag.typing.d.ts

@@ -1,4 +1,5 @@
+import { UtilityProps } from '../../typings/utility';
 import { HTMLMotionProps } from 'motion/react';
-export interface TagProps extends HTMLMotionProps<"span"> {
+export interface TagProps extends HTMLMotionProps<"span">, Pick<UtilityProps, "css"> {
     color?: "primary" | "warning" | "error" | "info" | "success";
 }

package/dist/components/TextField/TextField.d.ts

@@ -1,3 +1,3 @@
 import { TextFieldProps } from './TextField.typing';
-declare function TextField({ variant, size, fullWidth, disabled, startIcon, endIcon, onFocus, onBlur, ...props }: TextFieldProps): import("react").JSX.Element;
+declare function TextField({ variant, size, fullWidth, disabled, startIcon, endIcon, onFocus, onBlur, ...props }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default TextField;

package/dist/components/TextField/TextField.mjs

@@ -1,4 +1,4 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { jsxs as m, jsx as a } from "@emotion/react/jsx-runtime";
 import { useState as p } from "react";
 import l from "@emotion/styled";
 import { motion as c } from "motion/react";

package/dist/components/Typography/Typography.mjs

@@ -1,4 +1,4 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as c } from "@emotion/react/jsx-runtime";
 import f from "@emotion/styled";
 import { motion as y } from "motion/react";
 import d from "../../utils/getUtilityProps.mjs";

package/dist/components/Typography/Typography.typing.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode, ElementType } from 'react';
+import { ShifloTheme } from '../../theme/typing';
 import { PolymorphicComponentProps } from '../../typings/component';
 import { UtilityProps, RecursionPath } from '../../typings/utility';
-import { ShifloTheme } from '../../theme/typing';
 export interface BaseTypographyProps extends UtilityProps {
     variant?: keyof ShifloTheme["typography"];
     fontWeight?: 400 | 500 | 700;

package/dist/theme/GlobalStyle.d.ts

@@ -1,2 +1,2 @@
-declare function GlobalStyle(): import("react").JSX.Element;
+declare function GlobalStyle(): import("@emotion/react/jsx-runtime").JSX.Element;
 export default GlobalStyle;

package/dist/theme/GlobalStyle.mjs

@@ -1,4 +1,4 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as t } from "@emotion/react/jsx-runtime";
 import { useTheme as a, Global as r } from "@emotion/react";
 function l() {
   const {

package/dist/theme/ThemeProvider.d.ts

@@ -2,5 +2,5 @@ import { PropsWithChildren } from 'react';
 interface ThemeProviderProps {
     theme: "light" | "dark";
 }
-declare function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>): import("react").JSX.Element;
+declare function ThemeProvider({ children, theme }: PropsWithChildren<ThemeProviderProps>): import("@emotion/react/jsx-runtime").JSX.Element;
 export default ThemeProvider;

package/dist/theme/ThemeProvider.mjs

@@ -1,4 +1,4 @@
-import { jsxs as o, jsx as m } from "react/jsx-runtime";
+import { jsxs as o, jsx as m } from "@emotion/react/jsx-runtime";
 import { ThemeProvider as t } from "@emotion/react";
 import i from "./dark.mjs";
 import h from "./GlobalStyle.mjs";

package/dist/typings/utility.d.ts

@@ -1,6 +1,6 @@
+import { Interpolation } from '@emotion/serialize';
 import { default as radius } from '../theme/radius';
 import { default as spacing } from '../theme/spacing';
-import { Interpolation } from '@emotion/serialize';
 import { ShifloTheme } from '../theme/typing';
 import { Properties } from 'csstype';
 export type UtilityProps = Partial<Pick<Properties, "display" | "alignItems" | "justifyContent" | "flex" | "flexWrap" | "flexDirection" | "flexGrow" | "flexFlow" | "flexBasis" | "flexShrink" | "border" | "borderTop" | "borderBottom" | "borderRight" | "borderLeft"> & Record<"m" | "mt" | "mb" | "mr" | "ml" | "p" | "pt" | "pb" | "pl" | "pr" | "gap", keyof typeof spacing> & Record<"br" | "brtl" | "brtr" | "brml" | "brmr", keyof typeof radius>> & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "dist"
@@ -59,6 +59,7 @@
     "@storybook/addon-docs": "^9.1.7",
     "@storybook/addon-onboarding": "^9.1.7",
     "@storybook/react-vite": "^9.1.7",
+    "@types/node": "^24.5.2",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react-swc": "^4.1.0",