@shiflo/ui 0.0.11 → 0.0.13

package/dist/assets/icons/index.mjs

@@ -1,18 +1,24 @@
 import { S as a } from "./line/calendar-line.svg-DHsuXoUL.js";
 import { S } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
-import { S as l } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
+import { S as s } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
 import { S as i } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
 import { S as m } from "./solid/calendars-solid.svg-rClh_xBu.js";
-import { S as p } from "./solid/gear-solid.svg-C6vEx0Wx.js";
-import { S as x } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
-import { S as G } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as t } from "./solid/gear-solid.svg-C6vEx0Wx.js";
+import { S as n } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
+import { S as C } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as L } from "./solid/plus-large-solid.svg-CdPjcQXo.js";
+import { S as G } from "./solid/plus-solid.svg-piiaS3kO.js";
+import { S as k } from "./solid/square-plus-solid.svg-SHmhFLCy.js";
 export {
   S as CalendarDaysSolid,
   a as CalendarLine,
-  l as CalendarLinesSolid,
+  s as CalendarLinesSolid,
   i as CalendarWeekSolid,
   m as CalendarsSolid,
-  p as GearSolid,
-  x as Grid2Solid,
-  G as PenToSquareSolid
+  t as GearSolid,
+  n as Grid2Solid,
+  C as PenToSquareSolid,
+  L as PlusLargeSolid,
+  G as PlusSolid,
+  k as SquarePlusSolid
 };

package/dist/assets/icons/index.ts-CS7JEbxh.js

@@ -0,0 +1,28 @@
+import { S as o } from "./line/calendar-line.svg-DHsuXoUL.js";
+import { S } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
+import { S as r } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
+import { S as a } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
+import { S as l } from "./solid/calendars-solid.svg-rClh_xBu.js";
+import { S as e } from "./solid/gear-solid.svg-C6vEx0Wx.js";
+import { S as i } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
+import { S as d } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as s } from "./solid/plus-large-solid.svg-CdPjcQXo.js";
+import { S as m } from "./solid/plus-solid.svg-piiaS3kO.js";
+import { S as n } from "./solid/square-plus-solid.svg-SHmhFLCy.js";
+const G = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  CalendarDaysSolid: S,
+  CalendarLine: o,
+  CalendarLinesSolid: r,
+  CalendarWeekSolid: a,
+  CalendarsSolid: l,
+  GearSolid: e,
+  Grid2Solid: i,
+  PenToSquareSolid: d,
+  PlusLargeSolid: s,
+  PlusSolid: m,
+  SquarePlusSolid: n
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  G as S
+};

package/dist/assets/icons/solid/index.d.ts

@@ -5,3 +5,6 @@ export { default as CalendarsSolid } from './calendars-solid.svg';
 export { default as GearSolid } from './gear-solid.svg';
 export { default as Grid2Solid } from './grid-2-solid.svg';
 export { default as PenToSquareSolid } from './pen-to-square-solid.svg';
+export { default as PlusLargeSolid } from './plus-large-solid.svg';
+export { default as PlusSolid } from './plus-solid.svg';
+export { default as SquarePlusSolid } from './square-plus-solid.svg';

package/dist/assets/icons/solid/index.mjs

@@ -1,16 +1,22 @@
 import { S as a } from "./calendar-days-solid.svg-CIj8vf6t.js";
 import { S } from "./calendar-lines-solid.svg-D2qG_E7t.js";
-import { S as l } from "./calendar-week-solid.svg-CVmrJtif.js";
+import { S as s } from "./calendar-week-solid.svg-CVmrJtif.js";
 import { S as i } from "./calendars-solid.svg-rClh_xBu.js";
 import { S as m } from "./gear-solid.svg-C6vEx0Wx.js";
 import { S as t } from "./grid-2-solid.svg-BRtzwK6Y.js";
 import { S as n } from "./pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as C } from "./plus-large-solid.svg-CdPjcQXo.js";
+import { S as q } from "./plus-solid.svg-piiaS3kO.js";
+import { S as L } from "./square-plus-solid.svg-SHmhFLCy.js";
 export {
   a as CalendarDaysSolid,
   S as CalendarLinesSolid,
-  l as CalendarWeekSolid,
+  s as CalendarWeekSolid,
   i as CalendarsSolid,
   m as GearSolid,
   t as Grid2Solid,
-  n as PenToSquareSolid
+  n as PenToSquareSolid,
+  C as PlusLargeSolid,
+  q as PlusSolid,
+  L as SquarePlusSolid
 };

package/dist/assets/icons/solid/plus-large-solid.svg-CdPjcQXo.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 25, viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_271_18)" }, /* @__PURE__ */ e.createElement("path", { d: "M13.5 2C13.5 1.17031 12.8297 0.5 12 0.5C11.1703 0.5 10.5 1.17031 10.5 2V11H1.5C0.670312 11 0 11.6703 0 12.5C0 13.3297 0.670312 14 1.5 14H10.5V23C10.5 23.8297 11.1703 24.5 12 24.5C12.8297 24.5 13.5 23.8297 13.5 23V14H22.5C23.3297 14 24 13.3297 24 12.5C24 11.6703 23.3297 11 22.5 11H13.5V2Z", fill: "currentColor" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_271_18" }, /* @__PURE__ */ e.createElement("rect", { width: 24, height: 24, fill: "currentColor", transform: "translate(0 0.5)" }))));
+export {
+  l as S
+};

package/dist/assets/icons/solid/plus-solid.svg-piiaS3kO.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 27, viewBox: "0 0 24 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M13.7143 4.21875C13.7143 3.28535 12.9482 2.53125 12 2.53125C11.0518 2.53125 10.2857 3.28535 10.2857 4.21875V11.8125H2.57146C1.62325 11.8125 0.857178 12.5666 0.857178 13.5C0.857178 14.4334 1.62325 15.1875 2.57146 15.1875H10.2857V22.7812C10.2857 23.7146 11.0518 24.4688 12 24.4688C12.9482 24.4688 13.7143 23.7146 13.7143 22.7812V15.1875H21.4286C22.3768 15.1875 23.1429 14.4334 23.1429 13.5C23.1429 12.5666 22.3768 11.8125 21.4286 11.8125H13.7143V4.21875Z", fill: "currentColor" }));
+export {
+  l as S
+};

package/dist/assets/icons/solid/square-plus-solid.svg-SHmhFLCy.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const C = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 27, viewBox: "0 0 24 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M3.42857 1.6875C1.5375 1.6875 0 3.20098 0 5.0625V21.9375C0 23.799 1.5375 25.3125 3.42857 25.3125H20.5714C22.4625 25.3125 24 23.799 24 21.9375V5.0625C24 3.20098 22.4625 1.6875 20.5714 1.6875H3.42857ZM10.7143 18.1406V14.7656H7.28571C6.57321 14.7656 6 14.2014 6 13.5C6 12.7986 6.57321 12.2344 7.28571 12.2344H10.7143V8.85938C10.7143 8.15801 11.2875 7.59375 12 7.59375C12.7125 7.59375 13.2857 8.15801 13.2857 8.85938V12.2344H16.7143C17.4268 12.2344 18 12.7986 18 13.5C18 14.2014 17.4268 14.7656 16.7143 14.7656H13.2857V18.1406C13.2857 18.842 12.7125 19.4062 12 19.4062C11.2875 19.4062 10.7143 18.842 10.7143 18.1406Z", fill: "currentColor" }));
+export {
+  C as S
+};

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

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

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,8 +1,8 @@
-import { jsx as y, jsxs as P } from "react/jsx-runtime";
-import { useState as V, useRef as o, useImperativeHandle as z, useEffect as S } from "react";
+import { jsx as y, jsxs as V } from "react/jsx-runtime";
+import { useState as z, useRef as o, useImperativeHandle as G, useEffect as S } from "react";
 import b from "basic-styled";
-import G from "../Overlay/Overlay.mjs";
-const J = b.div`
+import J from "../Overlay/Overlay.mjs";
+const K = b.div`
   width: 100%;
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   overflow-y: auto;
@@ -18,7 +18,7 @@ const J = b.div`
     transform ${({ transitionDuration: t }) => `${t}ms`}
       ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
     background-color 0.2s;
-`, K = b.div`
+`, N = b.div`
   position: sticky;
   top: 0;
   left: 0;
@@ -33,7 +33,7 @@ const J = b.div`
   }
 }) => t.background};
   transition: background-color 0.2s;
-`, N = b.div`
+`, Q = b.div`
   width: 24px;
   height: 4px;
   border-radius: ${({ theme: { radius: t } }) => t[100]};
@@ -44,7 +44,7 @@ const J = b.div`
 }) => t.main};
   transition: background-color 0.2s;
 `;
-function _({
+function C({
   open: t,
   onClose: c,
   children: T,
@@ -52,12 +52,13 @@ function _({
   onClick: $,
   ref: j,
   hideDragHandleBar: I,
-  style: O,
-  ...A
+  hideOverlay: O,
+  style: A,
+  ...F
 }) {
-  const [L, h] = V(!1), l = o(null), R = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), g = o(0), p = o(0), F = o(0.25);
-  z(j, () => l.current);
-  const W = (r) => {
+  const [L, h] = z(!1), l = o(null), k = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), g = o(0), p = o(0), W = o(0.25);
+  G(j, () => l.current);
+  const q = (r) => {
     r.stopPropagation(), typeof $ == "function" && $(r);
   };
   return S(() => {
@@ -68,7 +69,7 @@ function _({
       r && cancelAnimationFrame(r);
     };
   }, [t]), S(() => {
-    const r = l.current, n = R.current, k = (e) => {
+    const r = l.current, n = k.current, R = (e) => {
       r && (r.scrollTop > 0 || (d.current = !0, v.current = e, f.current = e, m.current = r.offsetHeight, p.current = Date.now(), r.style.transition = "none", r.style.cursor = "grabbing", n && (n.style.transition = "none"), i.current && (i.current.style.cursor = "grabbing")));
     }, x = (e) => {
       if (!r || !d.current) return;
@@ -77,41 +78,44 @@ function _({
       f.current = e;
       const D = Date.now(), M = D - p.current;
       if (M > 0) {
-        const q = f.current;
-        g.current = (e - q) / M, p.current = D;
+        const P = f.current;
+        g.current = (e - P) / M, p.current = D;
       }
       n && (n.style.opacity = `${Math.max(0, 1 - u / (m.current * 2))}`), r.style.transform = `translate3d(0, ${u}px, 0)`;
     }, a = () => {
       if (!r || !d.current) return;
       d.current = !1, r.style.cursor = "default", i.current && (i.current.style.cursor = "grab");
-      const e = f.current - v.current, u = m.current * F.current;
+      const e = f.current - v.current, u = m.current * W.current;
       r.style.transition = `transform ${s}ms ease-out`, n && (n.style.transition = `opacity ${s}ms ease-out`), e > u || g.current > 0.5 && g.current > 0 ? (r.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), c == null || c()) : (r.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
-    }, w = (e) => k(e.clientY), H = (e) => x(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => x(e.touches[0].clientY);
+    }, w = (e) => R(e.clientY), H = (e) => x(e.clientY), Y = (e) => R(e.touches[0].clientY), B = (e) => x(e.touches[0].clientY);
     return r == null || r.addEventListener("mousedown", w), r == null || r.addEventListener("mousemove", H), r == null || r.addEventListener("mouseup", a), r == null || r.addEventListener("mouseleave", a), r == null || r.addEventListener("touchstart", Y), r == null || r.addEventListener("touchmove", B), r == null || r.addEventListener("touchend", a), r == null || r.addEventListener("touchcancel", a), () => {
       r == null || r.removeEventListener("mousedown", w), r == null || r.removeEventListener("mousemove", H), r == null || r.removeEventListener("mouseup", a), r == null || r.removeEventListener("mouseleave", a), r == null || r.removeEventListener("touchstart", Y), r == null || r.removeEventListener("touchmove", B), r == null || r.removeEventListener("touchend", a), r == null || r.removeEventListener("touchcancel", a);
     };
   }, [L, c, s]), /* @__PURE__ */ y(
-    G,
+    J,
     {
-      ref: R,
+      ref: k,
       open: t,
       onClose: c,
       transitionDuration: s,
       placement: "center-bottom",
-      children: /* @__PURE__ */ P(
-        J,
+      css: O ? {
+        backgroundColor: "transparent !important"
+      } : void 0,
+      children: /* @__PURE__ */ V(
+        K,
         {
           ref: l,
           ease: t ? "in" : "out",
           transitionDuration: s,
-          onClick: W,
-          ...A,
+          onClick: q,
+          ...F,
           style: {
             transform: `translate3d(0, ${L ? "0" : "200%"}, 0)`,
-            ...O
+            ...A
           },
           children: [
-            !I && /* @__PURE__ */ y(K, { ref: i, children: /* @__PURE__ */ y(N, {}) }),
+            !I && /* @__PURE__ */ y(N, { ref: i, children: /* @__PURE__ */ y(Q, {}) }),
             T
           ]
         }
@@ -120,5 +124,5 @@ function _({
   );
 }
 export {
-  _ as default
+  C as default
 };

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

@@ -4,4 +4,5 @@ export interface BottomSheetProps extends ComponentPropsWithRef<"div"> {
     onClose?: () => void;
     transitionDuration?: number;
     hideDragHandleBar?: boolean;
+    hideOverlay?: boolean;
 }

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

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

package/dist/components/Dialog/Dialog.mjs

@@ -0,0 +1,71 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as d, useRef as $, useEffect as p } from "react";
+import h from "basic-styled";
+import g from "../Overlay/Overlay.mjs";
+const y = h.div`
+  width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
+  max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
+  overflow-y: auto;
+  margin: ${({ theme: { spacing: e } }) => e[400]};
+  margin-bottom: ${({ theme: { spacing: e } }) => `calc(${e[400]} + var(--safe-area-inset-bottom, 0px))`};
+  border-radius: ${({ theme: { radius: e } }) => e[150]};
+  background-color: ${({
+  theme: {
+    palette: { common: e }
+  }
+}) => e.background};
+  transition:
+    transform ${({ transitionDuration: e }) => `${e}ms`}
+      ${({ ease: e }) => e === "in" ? "ease-out" : "ease-in"},
+    opacity ${({ transitionDuration: e }) => `${e}ms`}
+      ${({ ease: e }) => e === "in" ? "ease-out" : "ease-in"},
+    background-color 0.2s;
+`;
+function O({
+  open: e,
+  onClose: n,
+  children: m,
+  transitionDuration: a = 200,
+  onClick: o,
+  style: l,
+  ...c
+}) {
+  const [r, i] = d(!1), f = $(null), u = (t) => {
+    t.stopPropagation(), typeof o == "function" && o(t);
+  };
+  return p(() => {
+    let t;
+    return e ? t = requestAnimationFrame(() => {
+      i(!0);
+    }) : i(!1), () => {
+      t && cancelAnimationFrame(t);
+    };
+  }, [e]), /* @__PURE__ */ s(
+    g,
+    {
+      ref: f,
+      open: e,
+      onClose: n,
+      transitionDuration: a,
+      placement: "center-middle",
+      children: /* @__PURE__ */ s(
+        y,
+        {
+          ease: e ? "in" : "out",
+          transitionDuration: a,
+          onClick: u,
+          ...c,
+          style: {
+            transform: `scale(${r ? 1 : 0.9})`,
+            opacity: r ? 1 : 0,
+            ...l
+          },
+          children: m
+        }
+      )
+    }
+  );
+}
+export {
+  O as default
+};

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

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef } from 'react';
+export interface DialogProps extends ComponentPropsWithRef<"div"> {
+    open?: boolean;
+    onClose?: () => void;
+    transitionDuration?: number;
+}

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

@@ -0,0 +1,4 @@
+import { default as Dialog } from './Dialog';
+import { DialogProps } from './Dialog.typing';
+export type { DialogProps };
+export default Dialog;

package/dist/components/Dialog/index.mjs

@@ -0,0 +1,4 @@
+import a from "./Dialog.mjs";
+export {
+  a as default
+};

package/dist/components/Icon/Icon.mjs

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { Children as p, isValidElement as l } from "react";
-import { S as a } from "../../assets/icons/index.ts-BL4wFg6B.js";
+import { S as a } from "../../assets/icons/index.ts-CS7JEbxh.js";
 import c from "basic-styled";
 import d from "../../utils/getValueByPath.mjs";
 const f = c.svg`
@@ -9,11 +9,11 @@ const f = c.svg`
     height 0.2s,
     color 0.2s;
 
-  width: ${({ width: t }) => t || "24px"};
-  height: ${({ height: t }) => t || "24px"};
+  width: ${({ width: t }) => `${t || 24}px`};
+  height: ${({ height: t }) => `${t || 24}px`};
   color: ${({ theme: { palette: t }, color: r }) => d(t, r || "") || "inherit"};
 `;
-function v({ ref: t, name: r, width: e = 24, height: n = 24, ...s }) {
+function S({ ref: t, name: r, width: e = 24, height: n = 24, ...s }) {
   const h = a[r];
   return p.map(h(), (i) => {
     if (!l(i))
@@ -26,5 +26,5 @@ function v({ ref: t, name: r, width: e = 24, height: n = 24, ...s }) {
   });
 }
 export {
-  v as default
+  S as default
 };

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

@@ -5,5 +5,7 @@ import type * as Svgs from "../../assets/icons";
 export interface BaseIconProps extends Pick<UtilityProps, "css"> {
     name: keyof typeof Svgs;
     color?: RecursionPath<BasicTheme["palette"]> | "inherit";
+    width?: number;
+    height?: number;
 }
-export type IconProps = BaseIconProps & Omit<ComponentPropsWithRef<"svg">, "children">;
+export type IconProps = BaseIconProps & Omit<ComponentPropsWithRef<"svg">, "children" | "width" | "height">;

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

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
-export interface OverlayProps extends ComponentPropsWithRef<"div"> {
+import { UtilityProps } from '../../typings/utility';
+export interface OverlayProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,3 @@
+import { SnackbarProps } from './Snackbar.typing';
+declare function Snackbar({ children, open, onClose, transitionDuration, style, ref, startIcon, action, autoHideDuration, disableAutoHide, ...props }: SnackbarProps): import('react').ReactPortal | null;
+export default Snackbar;

package/dist/components/Snackbar/Snackbar.mjs

@@ -0,0 +1,111 @@
+import { jsxs as z, jsx as c } from "react/jsx-runtime";
+import { useState as x, useRef as y, useImperativeHandle as A, useLayoutEffect as I, useEffect as v } from "react";
+import { createPortal as L } from "react-dom";
+import a from "basic-styled";
+const R = a.div`
+  position: fixed;
+  bottom: ${({ theme: { spacing: e } }) => `calc(${e[800]} + var(--safe-area-inset-bottom, 0px))`};
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing: e } }) => e[400]};
+  width: 100%;
+  max-width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
+  min-height: 56px;
+  padding: ${({ theme: { spacing: e } }) => e[400]};
+  background-color: ${({
+  theme: {
+    palette: { neutral: e }
+  }
+}) => e[900]};
+  border-radius: ${({ theme: { radius: e } }) => e[400]};
+  z-index: 1;
+
+  transition:
+    opacity ${({ transitionDuration: e }) => `${e}ms`}
+      ${({ ease: e }) => e === "in" ? "ease-in" : "ease-out"},
+    transform ${({ transitionDuration: e }) => `${e}ms`},
+    background-color 0.2s;
+`, T = a.div`
+  white-space: nowrap;
+`, j = a.div`
+  flex-grow: 1;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+  ${({
+  theme: {
+    palette: { common: e },
+    typography: { body2: r }
+  }
+}) => ({
+  fontSize: r.fontSize,
+  lineHeight: r.lineHeight,
+  color: e.surface
+})}
+`, E = a.div`
+  white-space: nowrap;
+`;
+function H({
+  children: e,
+  open: r,
+  onClose: n,
+  transitionDuration: l = 200,
+  style: w,
+  ref: g,
+  startIcon: f,
+  action: m,
+  autoHideDuration: d = 3e3,
+  disableAutoHide: u,
+  ...b
+}) {
+  const [S, p] = x(!0), [i, h] = x(!1), s = y(null), o = y(null);
+  return A(g, () => s.current), I(() => {
+    let t;
+    return r ? (p(!1), t = requestAnimationFrame(() => {
+      h(!0);
+    })) : h(!1), () => {
+      t && cancelAnimationFrame(t);
+    };
+  }, [r, l]), v(() => {
+    const t = s.current, $ = (k) => {
+      r || k.propertyName === "opacity" && p(!0);
+    };
+    return t == null || t.addEventListener("transitionend", $), () => {
+      t == null || t.removeEventListener("transitionend", $);
+    };
+  }, [r]), v(() => {
+    if (!(u || !i))
+      return o.current = setTimeout(() => {
+        n == null || n();
+      }, d), () => {
+        o.current && clearTimeout(o.current);
+      };
+  }, [u, d, i, n]), S ? null : L(
+    /* @__PURE__ */ z(
+      R,
+      {
+        ref: s,
+        transitionDuration: l,
+        ease: r ? "in" : "out",
+        style: {
+          opacity: i ? 1 : 0,
+          transform: i ? "translate3d(-50%, 0, 0) scale(1)" : "translate3d(-50%, 0, 0) scale(0.97)",
+          ...w
+        },
+        ...b,
+        children: [
+          f && /* @__PURE__ */ c(T, { children: f }),
+          /* @__PURE__ */ c(j, { children: e }),
+          m && /* @__PURE__ */ c(E, { children: m })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  H as default
+};

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

@@ -0,0 +1,11 @@
+import { ReactNode, ComponentPropsWithRef } from 'react';
+import { UtilityProps } from '../../typings/utility';
+export interface SnackbarProps extends ComponentPropsWithRef<"div">, UtilityProps {
+    open?: boolean;
+    onClose?: () => void;
+    transitionDuration?: number;
+    startIcon?: ReactNode;
+    action?: ReactNode;
+    autoHideDuration?: number;
+    disableAutoHide?: boolean;
+}

package/dist/components/Snackbar/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Snackbar } from './Snackbar';
+import { SnackbarProps } from './Snackbar.typing';
+export type { SnackbarProps };
+export default Snackbar;

package/dist/components/Snackbar/index.mjs

@@ -0,0 +1,4 @@
+import r from "./Snackbar.mjs";
+export {
+  r as default
+};

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

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

package/dist/components/Switch/Switch.mjs

@@ -0,0 +1,102 @@
+import { jsx as n } from "react/jsx-runtime";
+import l from "basic-styled";
+const c = l.button`
+  position: relative;
+  border-radius: 9999px;
+  transition:
+    width 0.2s,
+    height 0.2s,
+    background-color 0.2s;
+  cursor: pointer;
+
+  ${({ theme: { palette: t }, checked: r, disabled: o, size: i }) => {
+  const e = {};
+  switch (i) {
+    case "small":
+      Object.assign(e, {
+        width: "40px",
+        height: "24px",
+        "&::after": {
+          width: "16px",
+          height: "16px"
+        }
+      });
+      break;
+    case "large":
+      Object.assign(e, {
+        width: "56px",
+        height: "32px",
+        "&::after": {
+          width: "24px",
+          height: "24px"
+        }
+      });
+      break;
+    default:
+      Object.assign(e, {
+        width: "48px",
+        height: "28px",
+        "&::after": {
+          width: "20px",
+          height: "20px"
+        }
+      });
+      break;
+  }
+  return r ? Object.assign(e, {
+    backgroundColor: t.primary.main
+  }) : Object.assign(e, {
+    backgroundColor: t.neutral[300]
+  }), o && Object.assign(e, {
+    backgroundColor: t.neutral[200]
+  }), e;
+}};
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    background-color: ${({
+  theme: {
+    palette: { common: t }
+  }
+}) => t.background};
+    border-radius: 50%;
+    transition:
+      width 0.2s,
+      height 0.2s,
+      background-color 0.2s,
+      transform 0.2s ${({ ease: t }) => t === "in" ? "ease-in" : "ease-out"};
+    transform: ${({ theme: { spacing: t }, checked: r }) => r ? `translate3d(calc(100% + ${t[100]}), -50%, 0)` : `translate3d(${t[100]}, -50%, 0)`};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+function f({
+  checked: t = !1,
+  disabled: r = !1,
+  size: o = "medium",
+  onChange: i,
+  onClick: e,
+  ...s
+}) {
+  return /* @__PURE__ */ n(
+    c,
+    {
+      size: o,
+      checked: t,
+      disabled: r,
+      ease: t ? "in" : "out",
+      onClick: (a) => {
+        !r && typeof i == "function" && i(a, !t), typeof e == "function" && e(a);
+      },
+      ...s
+    }
+  );
+}
+export {
+  f as default
+};

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

@@ -0,0 +1,8 @@
+import { ComponentPropsWithRef, MouseEvent } from 'react';
+import { UtilityProps } from '../../typings/utility';
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"button">, "onChange">, Pick<UtilityProps, "css"> {
+    checked?: boolean;
+    disabled?: boolean;
+    size?: "small" | "medium" | "large";
+    onChange?: (event: MouseEvent<HTMLButtonElement>, checked: boolean) => void;
+}

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

@@ -0,0 +1,4 @@
+import { default as Switch } from './Switch';
+import { SwitchProps } from './Switch.typing';
+export type { SwitchProps };
+export default Switch;

package/dist/components/Switch/index.mjs

@@ -0,0 +1,4 @@
+import o from "./Switch.mjs";
+export {
+  o as default
+};

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

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

package/dist/components/TextField/TextField.mjs

@@ -0,0 +1,191 @@
+import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { useState as m } from "react";
+import s from "basic-styled";
+const b = s.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing: e } }) => e[200]};
+  border: 1px solid transparent;
+  border-radius: ${({ theme: { radius: e } }) => e[200]};
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    padding 0.2s,
+    font-size 0.2s,
+    font-weight 0.2s,
+    color 0.2s;
+  background-color: ${({
+  theme: {
+    palette: { common: e }
+  }
+}) => e.background};
+  overflow: hidden;
+
+  ${({
+  theme: {
+    palette: { border: e, secondary: n }
+  },
+  variant: o
+}) => {
+  const t = {};
+  switch (o) {
+    case "outlined":
+      Object.assign(t, {
+        borderColor: e.main
+      });
+      break;
+    default:
+      Object.assign(t, {
+        backgroundColor: n.main,
+        borderColor: "transparent"
+      });
+      break;
+  }
+  return t;
+}};
+
+  ${({
+  theme: {
+    spacing: e,
+    typography: { small1: n, body2: o, body1: t }
+  },
+  size: r
+}) => {
+  const i = {};
+  switch (r) {
+    case "small":
+      Object.assign(i, {
+        padding: `${e[100]} ${e[150]}`,
+        fontSize: n.fontSize,
+        lineHeight: n.lineHeight,
+        "& svg": {
+          width: n.fontSize,
+          height: n.fontSize
+        }
+      });
+      break;
+    case "large":
+      Object.assign(i, {
+        padding: `${e[300]} ${e[350]}`,
+        fontSize: t.fontSize,
+        lineHeight: t.lineHeight,
+        "& svg": {
+          width: t.fontSize,
+          height: t.fontSize
+        }
+      });
+      break;
+    default:
+      Object.assign(i, {
+        padding: `${e[200]} ${e[250]}`,
+        fontSize: o.fontSize,
+        lineHeight: o.lineHeight,
+        "& svg": {
+          width: o.fontSize,
+          height: o.fontSize
+        }
+      });
+      break;
+  }
+  return i;
+}};
+
+  ${({
+  theme: {
+    palette: { primary: e }
+  },
+  variant: n,
+  focused: o
+}) => {
+  const t = {};
+  return n === "outlined" && o && Object.assign(t, {
+    borderColor: e.main,
+    "& svg": {
+      color: e.main
+    }
+  }), t;
+}};
+
+  ${({ fullWidth: e }) => e ? {
+  width: "100%",
+  maxWidth: "100%",
+  flexGrow: 1
+} : {
+  width: "fit-content"
+}};
+
+  ${({
+  theme: {
+    palette: { neutral: e }
+  },
+  disabled: n
+}) => n ? {
+  backgroundColor: e[200],
+  color: e[500],
+  cursor: "not-allowed"
+} : {}};
+`, w = s.input`
+  flex-grow: 1;
+  border: none;
+  outline: none;
+  background-color: transparent;
+
+  &::placeholder {
+    color: ${({
+  theme: {
+    palette: { neutral: e }
+  }
+}) => e[500]};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`, S = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+`, $ = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+`;
+function H({
+  variant: e = "outlined",
+  size: n = "medium",
+  fullWidth: o,
+  disabled: t,
+  startIcon: r,
+  endIcon: i,
+  css: f,
+  onFocus: l,
+  onBlur: a,
+  ...g
+}) {
+  const [u, h] = m(!1);
+  return /* @__PURE__ */ p(
+    b,
+    {
+      variant: e,
+      size: n,
+      focused: u,
+      fullWidth: o,
+      disabled: t,
+      css: f,
+      children: [
+        r && /* @__PURE__ */ c(S, { children: r }),
+        /* @__PURE__ */ c(w, { ...g, onFocus: (d) => {
+          h(!0), l == null || l(d);
+        }, onBlur: (d) => {
+          h(!1), a == null || a(d);
+        }, disabled: t }),
+        i && /* @__PURE__ */ c($, { children: i })
+      ]
+    }
+  );
+}
+export {
+  H as default
+};

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

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { UtilityProps } from '../../typings/utility';
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<"input">, "children" | "size">, Pick<UtilityProps, "css"> {
+    variant?: "contained" | "outlined";
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    fullWidth?: boolean;
+    size?: "small" | "medium" | "large";
+}

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

@@ -0,0 +1,4 @@
+import { default as TextField } from './TextField';
+import { TextFieldProps } from './TextField.typing';
+export type { TextFieldProps };
+export default TextField;

package/dist/components/TextField/index.mjs

@@ -0,0 +1,4 @@
+import t from "./TextField.mjs";
+export {
+  t as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "files": [
     "dist"

package/dist/assets/icons/index.ts-BL4wFg6B.js

@@ -1,22 +0,0 @@
-import { S as o } from "./line/calendar-line.svg-DHsuXoUL.js";
-import { S as r } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
-import { S as a } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
-import { S } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
-import { S as e } from "./solid/calendars-solid.svg-rClh_xBu.js";
-import { S as i } from "./solid/gear-solid.svg-C6vEx0Wx.js";
-import { S as l } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
-import { S as d } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
-const C = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  CalendarDaysSolid: r,
-  CalendarLine: o,
-  CalendarLinesSolid: a,
-  CalendarWeekSolid: S,
-  CalendarsSolid: e,
-  GearSolid: i,
-  Grid2Solid: l,
-  PenToSquareSolid: d
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  C as S
-};