@shiflo/ui 0.1.6 → 0.2.0

package/dist/assets/icons/index.mjs

@@ -1,36 +1,44 @@
-import { S as a } from "./line/calendar-line.svg-DHsuXoUL.js";
+import { S as e } from "./line/calendar-line.svg-DHsuXoUL.js";
 import { S } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
-import { S as s } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
-import { S as d } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
-import { S as m } from "./solid/calendars-solid.svg-rClh_xBu.js";
+import { S as i } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
+import { S as t } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
+import { S as f } from "./solid/calendars-solid.svg-rClh_xBu.js";
 import { S as p } from "./solid/gear-solid.svg-C6vEx0Wx.js";
 import { S as n } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
-import { S as k } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
-import { S as c } from "./solid/plus-solid.svg-piiaS3kO.js";
-import { S as B } from "./solid/rotate-right-solid.svg-CYW200XH.js";
-import { S as G } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
+import { S as c } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as h } from "./solid/plus-solid.svg-piiaS3kO.js";
+import { S as L } from "./solid/rotate-right-solid.svg-CYW200XH.js";
+import { S as D } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
 import { S as P } from "./solid/check-solid.svg-C41sTTzR.js";
 import { S as T } from "./solid/trash-solid.svg-iJSf_6Y3.js";
 import { S as q } from "./solid/minus-solid.svg-BBiGvc-2.js";
-import { S as z } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
-import { S as M } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
-import { S as X } from "./solid/clock-desk-solid.svg-Dvm3Xip1.js";
+import { S as y } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
+import { S as A } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
+import { S as H } from "./solid/clock-desk-solid.svg-Dvm3Xip1.js";
+import { S as M } from "./solid/circle-check-solid.svg-D2Pv_oiO.js";
+import { S as X } from "./solid/arrow-left-solid.svg-C16XJbK9.js";
+import { S as j } from "./solid/circle-info-solid.svg-eMJtJJRm.js";
+import { S as F } from "./solid/circle-exclamation-solid.svg-CuZt_q4T.js";
 export {
-  z as BriefcaseBlankSolid,
+  X as ArrowLeftSolid,
+  y as BriefcaseBlankSolid,
   S as CalendarDaysSolid,
-  a as CalendarLine,
-  s as CalendarLinesSolid,
-  d as CalendarWeekSolid,
-  m as CalendarsSolid,
-  M as ChartSimpleHorizontalSolid,
+  e as CalendarLine,
+  i as CalendarLinesSolid,
+  t as CalendarWeekSolid,
+  f as CalendarsSolid,
+  A as ChartSimpleHorizontalSolid,
   P as CheckSolid,
-  X as ClockDeskSolid,
+  M as CircleCheckSolid,
+  F as CircleExclamationSolid,
+  j as CircleInfoSolid,
+  H as ClockDeskSolid,
   p as GearSolid,
   n as Grid2Solid,
   q as MinusSolid,
-  k as PenToSquareSolid,
-  c as PlusSolid,
-  B as RotateRightSolid,
+  c as PenToSquareSolid,
+  h as PlusSolid,
+  L as RotateRightSolid,
   T as TrashSolid,
-  G as XmarkSolid
+  D as XmarkSolid
 };

package/dist/assets/icons/index.ts-Cv-GsCPN.js

@@ -0,0 +1,48 @@
+import { S as o } from "./line/calendar-line.svg-DHsuXoUL.js";
+import { S } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
+import { S as i } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
+import { S as r } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
+import { S as l } from "./solid/calendars-solid.svg-rClh_xBu.js";
+import { S as a } from "./solid/gear-solid.svg-C6vEx0Wx.js";
+import { S as e } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
+import { S as d } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
+import { S as m } from "./solid/plus-solid.svg-piiaS3kO.js";
+import { S as t } from "./solid/rotate-right-solid.svg-CYW200XH.js";
+import { S as s } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
+import { S as n } from "./solid/check-solid.svg-C41sTTzR.js";
+import { S as f } from "./solid/trash-solid.svg-iJSf_6Y3.js";
+import { S as g } from "./solid/minus-solid.svg-BBiGvc-2.js";
+import { S as p } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
+import { S as C } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
+import { S as v } from "./solid/clock-desk-solid.svg-Dvm3Xip1.js";
+import { S as c } from "./solid/circle-check-solid.svg-D2Pv_oiO.js";
+import { S as k } from "./solid/arrow-left-solid.svg-C16XJbK9.js";
+import { S as h } from "./solid/circle-info-solid.svg-eMJtJJRm.js";
+import { S as u } from "./solid/circle-exclamation-solid.svg-CuZt_q4T.js";
+const W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ArrowLeftSolid: k,
+  BriefcaseBlankSolid: p,
+  CalendarDaysSolid: S,
+  CalendarLine: o,
+  CalendarLinesSolid: i,
+  CalendarWeekSolid: r,
+  CalendarsSolid: l,
+  ChartSimpleHorizontalSolid: C,
+  CheckSolid: n,
+  CircleCheckSolid: c,
+  CircleExclamationSolid: u,
+  CircleInfoSolid: h,
+  ClockDeskSolid: v,
+  GearSolid: a,
+  Grid2Solid: e,
+  MinusSolid: g,
+  PenToSquareSolid: d,
+  PlusSolid: m,
+  RotateRightSolid: t,
+  TrashSolid: f,
+  XmarkSolid: s
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  W as S
+};

package/dist/assets/icons/solid/arrow-left-solid.svg-C16XJbK9.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const r = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z" }));
+export {
+  r as S
+};

package/dist/assets/icons/solid/circle-check-solid.svg-D2Pv_oiO.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const c = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" }));
+export {
+  c as S
+};

package/dist/assets/icons/solid/circle-exclamation-solid.svg-CuZt_q4T.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...t }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" }));
+export {
+  l as S
+};

package/dist/assets/icons/solid/circle-info-solid.svg-eMJtJJRm.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...l }, /* @__PURE__ */ e.createElement("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" }));
+export {
+  t as S
+};

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

@@ -14,3 +14,7 @@ export { default as MinusSolid } from './minus-solid.svg';
 export { default as BriefcaseBlankSolid } from './briefcase-blank-solid.svg';
 export { default as ChartSimpleHorizontalSolid } from './chart-simple-horizontal-solid.svg';
 export { default as ClockDeskSolid } from './clock-desk-solid.svg';
+export { default as CircleCheckSolid } from './circle-check-solid.svg';
+export { default as ArrowLeftSolid } from './arrow-left-solid.svg';
+export { default as CircleInfoSolid } from './circle-info-solid.svg';
+export { default as CircleExclamationSolid } from './circle-exclamation-solid.svg';

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

@@ -1,34 +1,42 @@
-import { S as a } from "./calendar-days-solid.svg-CIj8vf6t.js";
-import { S as e } from "./calendar-lines-solid.svg-D2qG_E7t.js";
-import { S as s } from "./calendar-week-solid.svg-CVmrJtif.js";
-import { S as d } from "./calendars-solid.svg-rClh_xBu.js";
-import { S as m } from "./gear-solid.svg-C6vEx0Wx.js";
+import { S } from "./calendar-days-solid.svg-CIj8vf6t.js";
+import { S as a } from "./calendar-lines-solid.svg-D2qG_E7t.js";
+import { S as i } from "./calendar-week-solid.svg-CVmrJtif.js";
+import { S as t } from "./calendars-solid.svg-rClh_xBu.js";
+import { S as f } from "./gear-solid.svg-C6vEx0Wx.js";
 import { S as p } from "./grid-2-solid.svg-BRtzwK6Y.js";
 import { S as n } from "./pen-to-square-solid.svg-DUdNcuTM.js";
-import { S as k } from "./plus-solid.svg-piiaS3kO.js";
-import { S as c } from "./rotate-right-solid.svg-CYW200XH.js";
+import { S as c } from "./plus-solid.svg-piiaS3kO.js";
+import { S as h } from "./rotate-right-solid.svg-CYW200XH.js";
 import { S as B } from "./xmark-solid.svg-Ce8xHlZn.js";
 import { S as G } from "./check-solid.svg-C41sTTzR.js";
-import { S as R } from "./trash-solid.svg-iJSf_6Y3.js";
-import { S as g } from "./minus-solid.svg-BBiGvc-2.js";
-import { S as y } from "./briefcase-blank-solid.svg-6ppQL_Z4.js";
-import { S as H } from "./chart-simple-horizontal-solid.svg-znTJSeQj.js";
-import { S as M } from "./clock-desk-solid.svg-Dvm3Xip1.js";
+import { S as P } from "./trash-solid.svg-iJSf_6Y3.js";
+import { S as T } from "./minus-solid.svg-BBiGvc-2.js";
+import { S as q } from "./briefcase-blank-solid.svg-6ppQL_Z4.js";
+import { S as y } from "./chart-simple-horizontal-solid.svg-znTJSeQj.js";
+import { S as A } from "./clock-desk-solid.svg-Dvm3Xip1.js";
+import { S as H } from "./circle-check-solid.svg-D2Pv_oiO.js";
+import { S as M } from "./arrow-left-solid.svg-C16XJbK9.js";
+import { S as X } from "./circle-info-solid.svg-eMJtJJRm.js";
+import { S as j } from "./circle-exclamation-solid.svg-CuZt_q4T.js";
 export {
-  y as BriefcaseBlankSolid,
-  a as CalendarDaysSolid,
-  e as CalendarLinesSolid,
-  s as CalendarWeekSolid,
-  d as CalendarsSolid,
-  H as ChartSimpleHorizontalSolid,
+  M as ArrowLeftSolid,
+  q as BriefcaseBlankSolid,
+  S as CalendarDaysSolid,
+  a as CalendarLinesSolid,
+  i as CalendarWeekSolid,
+  t as CalendarsSolid,
+  y as ChartSimpleHorizontalSolid,
   G as CheckSolid,
-  M as ClockDeskSolid,
-  m as GearSolid,
+  H as CircleCheckSolid,
+  j as CircleExclamationSolid,
+  X as CircleInfoSolid,
+  A as ClockDeskSolid,
+  f as GearSolid,
   p as Grid2Solid,
-  g as MinusSolid,
+  T as MinusSolid,
   n as PenToSquareSolid,
-  k as PlusSolid,
-  c as RotateRightSolid,
-  R as TrashSolid,
+  c as PlusSolid,
+  h as RotateRightSolid,
+  P as TrashSolid,
   B as XmarkSolid
 };

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

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

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,22 +1,25 @@
-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 D from "../Overlay/Overlay.mjs";
-import n from "@emotion/styled";
-import { motion as I } from "motion/react";
-const O = n(I.div)`
+import { jsx as g, jsxs as V } from "@emotion/react/jsx-runtime";
+import { useState as z, useRef as o, useImperativeHandle as C, useEffect as M } from "react";
+import y from "@emotion/styled";
+import G from "../Overlay/Overlay.mjs";
+const J = y.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]};
   margin-bottom: ${({ theme: { spacing: t } }) => `calc(${t[400]} + var(--safe-area-inset-bottom, 0px))`};
-  border-radius: ${({ theme: { radius: t } }) => t[150]};
+  border-radius: ${({ theme: { radius: t } }) => t[350]};
   background-color: ${({
   theme: {
     palette: { common: t }
   }
 }) => t.background};
-`, A = n.div`
+  transition:
+    transform ${({ transitionDuration: t }) => `${t}ms`}
+      ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
+    background-color 0.2s;
+`, K = y.div`
   position: sticky;
   top: 0;
   left: 0;
@@ -30,8 +33,8 @@ const O = n(I.div)`
     palette: { common: t }
   }
 }) => t.background};
-  transition: background-color 0.3s;
-`, F = n.div`
+  transition: background-color 0.2s;
+`, N = y.div`
   width: 24px;
   height: 4px;
   border-radius: ${({ theme: { radius: t } }) => t[100]};
@@ -40,71 +43,84 @@ const O = n(I.div)`
     palette: { border: t }
   }
 }) => t.main};
-  transition: background-color 0.3s;
+  transition: background-color 0.2s;
 `;
-function z({
+function _({
   open: t,
-  onClose: r,
-  children: m,
-  transitionDuration: i = 0.3,
-  maxWidth: d = "375px",
-  onClick: c,
-  ref: f,
-  hideDragHandleBar: p,
-  hideOverlay: u,
-  style: g,
-  dragThreshold: h = 100,
-  ...y
+  onClose: d,
+  children: S,
+  transitionDuration: a = 200,
+  maxWidth: T = "375px",
+  onClick: b,
+  ref: j,
+  hideDragHandleBar: I,
+  hideOverlay: O,
+  style: A,
+  ...F
 }) {
-  const [b, s] = R(!1), l = a(null), $ = a(null), x = a(null);
-  S(f, () => l.current);
-  const v = (e) => {
-    e.stopPropagation(), typeof c == "function" && c(e);
-  }, k = (e, B) => {
-    const { offset: w, velocity: E } = B;
-    (w.y > h || E.y > 500) && typeof r == "function" && r();
+  const [E, $] = z(!1), m = o(null), L = o(null), c = o(null), u = o(!1), f = o(0), l = o(0), h = o(0), v = o(0), p = o(0), W = o(0.25);
+  C(j, () => m.current);
+  const q = (e) => {
+    e.stopPropagation(), typeof b == "function" && b(e);
   };
-  return j(() => {
+  return M(() => {
     let e;
     return t ? e = requestAnimationFrame(() => {
-      s(!0);
-    }) : s(!1), () => {
+      $(!0);
+    }) : $(!1), () => {
       e && cancelAnimationFrame(e);
     };
-  }, [t]), /* @__PURE__ */ o(
-    D,
+  }, [t]), M(() => {
+    const e = m.current, n = L.current, x = (r) => {
+      e && (e.scrollTop > 0 || (u.current = !0, f.current = r, l.current = r, h.current = e.offsetHeight, p.current = Date.now(), e.style.transition = "none", e.style.cursor = "grabbing", n && (n.style.transition = "none"), c.current && (c.current.style.cursor = "grabbing")));
+    }, k = (r) => {
+      if (!e || !u.current) return;
+      const i = r - f.current;
+      if (i < 0) return;
+      l.current = r;
+      const B = Date.now(), D = B - p.current;
+      if (D > 0) {
+        const P = l.current;
+        v.current = (r - P) / D, p.current = B;
+      }
+      n && (n.style.opacity = `${Math.max(0, 1 - i / (h.current * 2))}`), e.style.transform = `translate3d(0, ${i}px, 0)`;
+    }, s = () => {
+      if (!e || !u.current) return;
+      u.current = !1, e.style.cursor = "default", c.current && (c.current.style.cursor = "grab");
+      const r = l.current - f.current, i = h.current * W.current;
+      e.style.transition = `transform ${a}ms ease-out`, n && (n.style.transition = `opacity ${a}ms ease-out`), r > i || v.current > 0.5 && v.current > 0 ? (e.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), d?.()) : (e.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
+    }, R = (r) => x(r.clientY), w = (r) => k(r.clientY), H = (r) => x(r.touches[0].clientY), Y = (r) => k(r.touches[0].clientY);
+    return e?.addEventListener("mousedown", R), e?.addEventListener("mousemove", w), e?.addEventListener("mouseup", s), e?.addEventListener("mouseleave", s), e?.addEventListener("touchstart", H), e?.addEventListener("touchmove", Y), e?.addEventListener("touchend", s), e?.addEventListener("touchcancel", s), () => {
+      e?.removeEventListener("mousedown", R), e?.removeEventListener("mousemove", w), e?.removeEventListener("mouseup", s), e?.removeEventListener("mouseleave", s), e?.removeEventListener("touchstart", H), e?.removeEventListener("touchmove", Y), e?.removeEventListener("touchend", s), e?.removeEventListener("touchcancel", s);
+    };
+  }, [E, d, a]), /* @__PURE__ */ g(
+    G,
     {
-      ref: $,
+      ref: L,
       open: t,
-      onClose: r,
-      transitionDuration: i,
+      onClose: d,
+      transitionDuration: a,
       placement: "center-bottom",
-      hideOverlay: u,
-      children: /* @__PURE__ */ H(
-        O,
+      css: O ? {
+        pointerEvents: "none",
+        backgroundColor: "transparent !important"
+      } : void 0,
+      children: /* @__PURE__ */ V(
+        J,
         {
-          ref: l,
-          drag: "y",
-          dragConstraints: { top: 0, bottom: 0 },
-          dragElastic: { top: 0, bottom: 0.3 },
-          dragMomentum: !1,
-          onDragEnd: k,
-          maxWidth: d,
-          onClick: v,
-          initial: { y: "200%" },
-          animate: {
-            y: b ? 0 : "200%"
-          },
-          transition: {
-            type: "spring",
-            duration: i,
-            bounce: 0.2
+          ref: m,
+          ease: t ? "in" : "out",
+          transitionDuration: a,
+          maxWidth: T,
+          onClick: q,
+          ...F,
+          style: {
+            transform: `translate3d(0, ${E ? "0" : "200%"}, 0)`,
+            ...A
           },
-          style: g,
-          ...y,
           children: [
-            !p && /* @__PURE__ */ o(A, { ref: x, children: /* @__PURE__ */ o(F, {}) }),
-            m
+            !I && /* @__PURE__ */ g(K, { ref: c, children: /* @__PURE__ */ g(N, {}) }),
+            S
           ]
         }
       )
@@ -112,5 +128,5 @@ function z({
   );
 }
 export {
-  z as default
+  _ as default
 };

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

@@ -1,12 +1,10 @@
-import { PropsWithChildren } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import { UtilityProps } from '../../typings/utility';
-import { HTMLMotionProps } from 'motion/react';
-export interface BottomSheetProps extends PropsWithChildren<HTMLMotionProps<"div"> & Pick<UtilityProps, "css">> {
+export interface BottomSheetProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;
     maxWidth?: string;
     hideDragHandleBar?: boolean;
     hideOverlay?: boolean;
-    dragThreshold?: number;
 }