@shiflo/ui 0.0.14 → 0.0.15

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, hideOverlay, style, ...props }: BottomSheetProps): import("react").JSX.Element;
+declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, style, ...props }: BottomSheetProps): import("react").JSX.Element;
 export default BottomSheet;

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,9 +1,10 @@
-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 { jsx as y, jsxs as z } from "react/jsx-runtime";
+import { useState as G, useRef as o, useImperativeHandle as J, useEffect as S } from "react";
 import b from "basic-styled";
-import J from "../Overlay/Overlay.mjs";
-const K = b.div`
-  width: 100%;
+import K from "../Overlay/Overlay.mjs";
+const N = b.div`
+  width: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
+  max-width: ${({ maxWidth: t = "375px" }) => t};
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   overflow-y: auto;
   margin: ${({ theme: { spacing: t } }) => t[400]};
@@ -18,7 +19,7 @@ const K = b.div`
     transform ${({ transitionDuration: t }) => `${t}ms`}
       ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
     background-color 0.2s;
-`, N = b.div`
+`, Q = b.div`
   position: sticky;
   top: 0;
   left: 0;
@@ -33,7 +34,7 @@ const K = b.div`
   }
 }) => t.background};
   transition: background-color 0.2s;
-`, Q = b.div`
+`, U = b.div`
   width: 24px;
   height: 4px;
   border-radius: ${({ theme: { radius: t } }) => t[100]};
@@ -44,78 +45,81 @@ const K = b.div`
 }) => t.main};
   transition: background-color 0.2s;
 `;
-function C({
+function E({
   open: t,
   onClose: c,
   children: T,
   transitionDuration: s = 200,
+  maxWidth: j = "375px",
   onClick: $,
-  ref: j,
-  hideDragHandleBar: I,
-  hideOverlay: O,
-  style: A,
-  ...F
+  ref: I,
+  hideDragHandleBar: O,
+  hideOverlay: A,
+  style: F,
+  ...W
 }) {
-  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) => {
+  const [h, L] = G(!1), l = o(null), x = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), p = o(0), g = o(0), q = o(0.25);
+  J(I, () => l.current);
+  const P = (r) => {
     r.stopPropagation(), typeof $ == "function" && $(r);
   };
   return S(() => {
     let r;
     return t ? r = requestAnimationFrame(() => {
-      h(!0);
-    }) : h(!1), () => {
+      L(!0);
+    }) : L(!1), () => {
       r && cancelAnimationFrame(r);
     };
   }, [t]), S(() => {
-    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) => {
+    const r = l.current, n = x.current, k = (e) => {
+      r && (r.scrollTop > 0 || (d.current = !0, v.current = e, f.current = e, m.current = r.offsetHeight, g.current = Date.now(), r.style.transition = "none", r.style.cursor = "grabbing", n && (n.style.transition = "none"), i.current && (i.current.style.cursor = "grabbing")));
+    }, R = (e) => {
       if (!r || !d.current) return;
       const u = e - v.current;
       if (u < 0) return;
       f.current = e;
-      const D = Date.now(), M = D - p.current;
+      const D = Date.now(), M = D - g.current;
       if (M > 0) {
-        const P = f.current;
-        g.current = (e - P) / M, p.current = D;
+        const V = f.current;
+        p.current = (e - V) / M, g.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 * 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) => R(e.clientY), H = (e) => x(e.clientY), Y = (e) => R(e.touches[0].clientY), B = (e) => x(e.touches[0].clientY);
+      const e = f.current - v.current, u = m.current * q.current;
+      r.style.transition = `transform ${s}ms ease-out`, n && (n.style.transition = `opacity ${s}ms ease-out`), e > u || p.current > 0.5 && p.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) => R(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => R(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(
-    J,
+  }, [h, c, s]), /* @__PURE__ */ y(
+    K,
     {
-      ref: k,
+      ref: x,
       open: t,
       onClose: c,
       transitionDuration: s,
       placement: "center-bottom",
-      css: O ? {
+      css: A ? {
+        pointerEvents: "none",
         backgroundColor: "transparent !important"
       } : void 0,
-      children: /* @__PURE__ */ V(
-        K,
+      children: /* @__PURE__ */ z(
+        N,
         {
           ref: l,
           ease: t ? "in" : "out",
           transitionDuration: s,
-          onClick: q,
-          ...F,
+          maxWidth: j,
+          onClick: P,
+          ...W,
           style: {
-            transform: `translate3d(0, ${L ? "0" : "200%"}, 0)`,
-            ...A
+            transform: `translate3d(0, ${h ? "0" : "200%"}, 0)`,
+            ...F
           },
           children: [
-            !I && /* @__PURE__ */ y(N, { ref: i, children: /* @__PURE__ */ y(Q, {}) }),
+            !O && /* @__PURE__ */ y(Q, { ref: i, children: /* @__PURE__ */ y(U, {}) }),
             T
           ]
         }
@@ -124,5 +128,5 @@ function C({
   );
 }
 export {
-  C as default
+  E as default
 };

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

@@ -4,6 +4,7 @@ export interface BottomSheetProps extends ComponentPropsWithRef<"div">, Pick<Uti
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;
+    maxWidth?: string;
     hideDragHandleBar?: boolean;
     hideOverlay?: boolean;
 }

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, ...props }: DialogProps): import("react").JSX.Element;
+declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, maxWidth, ...props }: DialogProps): import("react").JSX.Element;
 export default Dialog;

package/dist/components/Dialog/Dialog.mjs

@@ -1,9 +1,10 @@
 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`
+import { useState as $, useRef as p, useEffect as h } from "react";
+import g from "basic-styled";
+import y from "../Overlay/Overlay.mjs";
+const x = g.div`
   width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
+  max-width: ${({ maxWidth: e = "375px" }) => e};
   max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
   overflow-y: auto;
   margin: ${({ theme: { spacing: e } }) => e[400]};
@@ -28,12 +29,13 @@ function O({
   transitionDuration: a = 200,
   onClick: o,
   style: l,
-  ...c
+  maxWidth: c = "375px",
+  ...f
 }) {
-  const [r, i] = d(!1), f = $(null), u = (t) => {
+  const [r, i] = $(!1), u = p(null), d = (t) => {
     t.stopPropagation(), typeof o == "function" && o(t);
   };
-  return p(() => {
+  return h(() => {
     let t;
     return e ? t = requestAnimationFrame(() => {
       i(!0);
@@ -41,20 +43,21 @@ function O({
       t && cancelAnimationFrame(t);
     };
   }, [e]), /* @__PURE__ */ s(
-    g,
+    y,
     {
-      ref: f,
+      ref: u,
       open: e,
       onClose: n,
       transitionDuration: a,
       placement: "center-middle",
       children: /* @__PURE__ */ s(
-        y,
+        x,
         {
           ease: e ? "in" : "out",
           transitionDuration: a,
-          onClick: u,
-          ...c,
+          maxWidth: c,
+          onClick: d,
+          ...f,
           style: {
             transform: `scale(${r ? 1 : 0.9})`,
             opacity: r ? 1 : 0,

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

@@ -4,4 +4,5 @@ export interface DialogProps extends ComponentPropsWithRef<"div">, Pick<UtilityP
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;
+    maxWidth?: string;
 }

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

@@ -1,3 +1,3 @@
 import { OverlayProps } from './Overlay.typing';
-declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, ...props }: OverlayProps): import('react').ReactPortal | null;
+declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, onClick, ...props }: OverlayProps): import('react').ReactPortal | null;
 export default Overlay;

package/dist/components/Overlay/Overlay.mjs

@@ -1,15 +1,12 @@
-import { jsxs as j, jsx as f } from "react/jsx-runtime";
-import { useState as c, useRef as h, useImperativeHandle as O, useLayoutEffect as I, useEffect as k } from "react";
-import { createPortal as C } from "react-dom";
+import { jsxs as v, jsx as l } from "react/jsx-runtime";
+import { useState as m, useRef as k, useImperativeHandle as x, useLayoutEffect as $, useEffect as I } from "react";
+import { createPortal as w } from "react-dom";
 import i from "basic-styled";
-const v = i.div`
+const L = i.div`
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-`, $ = i.div`
+`, z = i.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -17,135 +14,137 @@ const v = i.div`
   height: 100%;
   background-color: ${({
   theme: {
-    palette: { common: n }
+    palette: { common: r }
   }
-}) => n.overlay};
+}) => r.overlay};
   transition:
-    opacity ${({ transitionDuration: n }) => `${n}ms`}
-      ${({ ease: n }) => n === "in" ? "ease-in" : "ease-out"},
+    opacity ${({ transitionDuration: r }) => `${r}ms`}
+      ${({ ease: r }) => r === "in" ? "ease-in" : "ease-out"},
     background-color 0.2s;
-`, w = i.div`
+  z-index: 1;
+`, A = i.div`
   position: fixed;
-  top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
 
-  ${({ placement: n }) => {
-  const e = {};
-  switch (n) {
+  ${({ placement: r }) => {
+  const t = {};
+  switch (r) {
     case "top-left":
-      Object.assign(e, {
-        display: "flex",
-        justifyContent: "flex-start",
-        alignItems: "flex-start"
+      Object.assign(t, {
+        top: 0,
+        left: 0
       });
       break;
     case "top-right":
-      Object.assign(e, {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "flex-start"
+      Object.assign(t, {
+        top: 0,
+        right: 0
       });
       break;
     case "bottom-left":
-      Object.assign(e, {
-        display: "flex",
-        justifyContent: "flex-start",
-        alignItems: "flex-end"
+      Object.assign(t, {
+        bottom: 0,
+        left: 0
       });
       break;
     case "bottom-right":
-      Object.assign(e, {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "flex-end"
+      Object.assign(t, {
+        bottom: 0,
+        right: 0
       });
       break;
     case "center-top":
-      Object.assign(e, {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "flex-start"
+      Object.assign(t, {
+        top: 0,
+        left: "50%",
+        transform: "translate3d(-50%, 0, 0)"
       });
       break;
     case "center-bottom":
-      Object.assign(e, {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "flex-end"
+      Object.assign(t, {
+        bottom: 0,
+        left: "50%",
+        transform: "translate3d(-50%, 0, 0)"
       });
       break;
     case "center-middle":
-      Object.assign(e, {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
+      Object.assign(t, {
+        top: "50%",
+        left: "50%",
+        transform: "translate3d(-50%, -50%, 0)"
       });
       break;
     case "center-left":
-      Object.assign(e, {
-        display: "flex",
-        justifyContent: "flex-start",
-        alignItems: "center"
+      Object.assign(t, {
+        top: "50%",
+        left: 0,
+        transform: "translate3d(0, -50%, 0)"
       });
       break;
     case "center-right":
-      Object.assign(e, {
-        display: "flex",
-        justifyContent: "flex-end",
-        alignItems: "center"
+      Object.assign(t, {
+        top: "50%",
+        right: 0,
+        transform: "translate3d(0, -50%, 0)"
       });
       break;
   }
-  return e;
+  return t;
 }}
 `;
-function R({
-  children: n,
-  open: e,
-  onClose: d,
-  transitionDuration: a = 200,
+function U({
+  children: r,
+  open: t,
+  onClose: s,
+  transitionDuration: o = 200,
   placement: u,
-  style: y,
-  ref: m,
-  ...p
+  style: b,
+  ref: p,
+  onClick: a,
+  ...g
 }) {
-  const [x, r] = c(!0), [g, l] = c(!1), s = h(null);
-  return O(m, () => s.current), I(() => {
-    let t;
-    return e ? (r(!1), t = requestAnimationFrame(() => {
-      l(!0);
-    })) : l(!1), () => {
-      t && cancelAnimationFrame(t);
+  const [h, c] = m(!0), [y, f] = m(!1), n = k(null), O = (e) => {
+    s == null || s(), a == null || a(e);
+  };
+  return x(p, () => n.current), $(() => {
+    let e;
+    return t ? (c(!1), e = requestAnimationFrame(() => {
+      f(!0);
+    })) : f(!1), () => {
+      e && cancelAnimationFrame(e);
     };
-  }, [e, a]), k(() => {
-    const t = s.current, o = (b) => {
-      e || b.propertyName === "opacity" && r(!0);
+  }, [t, o]), I(() => {
+    const e = n.current, d = (j) => {
+      t || j.propertyName === "opacity" && c(!0);
     };
-    return t == null || t.addEventListener("transitionend", o), () => {
-      t == null || t.removeEventListener("transitionend", o);
+    return e == null || e.addEventListener("transitionend", d), () => {
+      e == null || e.removeEventListener("transitionend", d);
     };
-  }, [e]), x ? null : C(
-    /* @__PURE__ */ j(v, { onClick: d, children: [
-      /* @__PURE__ */ f(
-        $,
+  }, [t]), h ? null : w(
+    /* @__PURE__ */ v(L, { children: [
+      /* @__PURE__ */ l(
+        z,
         {
-          ref: s,
-          transitionDuration: a,
-          ease: e ? "in" : "out",
+          ref: n,
+          transitionDuration: o,
+          ease: t ? "in" : "out",
+          onClick: O,
           style: {
-            opacity: g ? 1 : 0,
-            ...y
+            opacity: y ? 1 : 0,
+            ...b
           },
-          ...p
+          ...g
         }
       ),
-      /* @__PURE__ */ f(w, { placement: u, children: n })
+      /* @__PURE__ */ l(A, { placement: u, children: r })
     ] }),
     document.body
   );
 }
 export {
-  R as default
+  U as default
 };

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

@@ -5,4 +5,5 @@ export interface OverlayProps extends ComponentPropsWithRef<"div">, Pick<Utility
     onClose?: () => void;
     transitionDuration?: number;
     placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-top" | "center-bottom" | "center-middle" | "center-left" | "center-right";
+    hideOverlay?: boolean;
 }

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

@@ -1,3 +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;
+declare function Snackbar({ children, open, onClose, transitionDuration, style, ref, startIcon, action, maxWidth, autoHideDuration, disableAutoHide, ...props }: SnackbarProps): import('react').ReactPortal | null;
 export default Snackbar;

package/dist/components/Snackbar/Snackbar.mjs

@@ -1,16 +1,16 @@
-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 { jsxs as A, jsx as c } from "react/jsx-runtime";
+import { useState as $, useRef as y, useImperativeHandle as I, useLayoutEffect as L, useEffect as v } from "react";
+import { createPortal as R } from "react-dom";
 import a from "basic-styled";
-const R = a.div`
+const T = 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]});
+  width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
+  max-width: ${({ maxWidth: e = "375px" }) => e};
   min-height: 56px;
   padding: ${({ theme: { spacing: e } }) => e[400]};
   background-color: ${({
@@ -26,9 +26,9 @@ const R = a.div`
       ${({ 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`
+  white-space: nowrap;
+`, E = a.div`
   flex-grow: 1;
   display: -webkit-box;
   overflow: hidden;
@@ -45,10 +45,10 @@ const R = a.div`
   lineHeight: r.lineHeight,
   color: e.surface
 })}
-`, E = a.div`
+`, F = a.div`
   white-space: nowrap;
 `;
-function H({
+function N({
   children: e,
   open: r,
   onClose: n,
@@ -57,12 +57,13 @@ function H({
   ref: g,
   startIcon: f,
   action: m,
+  maxWidth: b = "375px",
   autoHideDuration: d = 3e3,
   disableAutoHide: u,
-  ...b
+  ...S
 }) {
-  const [S, p] = x(!0), [i, h] = x(!1), s = y(null), o = y(null);
-  return A(g, () => s.current), I(() => {
+  const [k, p] = $(!0), [i, h] = $(!1), s = y(null), o = y(null);
+  return I(g, () => s.current), L(() => {
     let t;
     return r ? (p(!1), t = requestAnimationFrame(() => {
       h(!0);
@@ -70,11 +71,11 @@ function H({
       t && cancelAnimationFrame(t);
     };
   }, [r, l]), v(() => {
-    const t = s.current, $ = (k) => {
-      r || k.propertyName === "opacity" && p(!0);
+    const t = s.current, x = (z) => {
+      r || z.propertyName === "opacity" && p(!0);
     };
-    return t == null || t.addEventListener("transitionend", $), () => {
-      t == null || t.removeEventListener("transitionend", $);
+    return t == null || t.addEventListener("transitionend", x), () => {
+      t == null || t.removeEventListener("transitionend", x);
     };
   }, [r]), v(() => {
     if (!(u || !i))
@@ -83,23 +84,24 @@ function H({
       }, d), () => {
         o.current && clearTimeout(o.current);
       };
-  }, [u, d, i, n]), S ? null : L(
-    /* @__PURE__ */ z(
-      R,
+  }, [u, d, i, n]), k ? null : R(
+    /* @__PURE__ */ A(
+      T,
       {
         ref: s,
         transitionDuration: l,
         ease: r ? "in" : "out",
+        maxWidth: b,
         style: {
           opacity: i ? 1 : 0,
           transform: i ? "translate3d(-50%, 0, 0) scale(1)" : "translate3d(-50%, 0, 0) scale(0.97)",
           ...w
         },
-        ...b,
+        ...S,
         children: [
-          f && /* @__PURE__ */ c(T, { children: f }),
-          /* @__PURE__ */ c(j, { children: e }),
-          m && /* @__PURE__ */ c(E, { children: m })
+          f && /* @__PURE__ */ c(j, { children: f }),
+          /* @__PURE__ */ c(E, { children: e }),
+          m && /* @__PURE__ */ c(F, { children: m })
         ]
       }
     ),
@@ -107,5 +109,5 @@ function H({
   );
 }
 export {
-  H as default
+  N as default
 };

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

@@ -6,6 +6,7 @@ export interface SnackbarProps extends ComponentPropsWithRef<"div">, UtilityProp
     transitionDuration?: number;
     startIcon?: ReactNode;
     action?: ReactNode;
+    maxWidth?: string;
     autoHideDuration?: number;
     disableAutoHide?: boolean;
 }

package/package.json

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