@shiflo/ui 0.0.9 → 0.0.10

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

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

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -0,0 +1,123 @@
+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 b from "basic-styled";
+import G from "../Overlay/Overlay.mjs";
+const J = b.div`
+  width: 100%;
+  max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
+  overflow-y: auto;
+  margin: ${({ theme: { spacing: t } }) => t[400]};
+  border-radius: ${({ theme: { radius: t } }) => t[150]};
+  background-color: ${({
+  theme: {
+    palette: { common: t }
+  }
+}) => t.background};
+  transition:
+    transform ${({ transitionDuration: t }) => `${t}ms`}
+      ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
+    background-color 0.2s;
+`, K = b.div`
+  position: sticky;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: grab;
+  padding: ${({ theme: { spacing: t } }) => t[100]};
+  background-color: ${({
+  theme: {
+    palette: { common: t }
+  }
+}) => t.background};
+  transition: background-color 0.2s;
+`, N = b.div`
+  width: 24px;
+  height: 4px;
+  border-radius: ${({ theme: { radius: t } }) => t[100]};
+  background-color: ${({
+  theme: {
+    palette: { border: t }
+  }
+}) => t.main};
+  transition: background-color 0.2s;
+`;
+function _({
+  open: t,
+  onClose: c,
+  children: T,
+  transitionDuration: s = 200,
+  onClick: L,
+  ref: j,
+  hideDragHandleBar: F,
+  style: I,
+  ...O
+}) {
+  const [$, 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), A = o(0.25);
+  z(j, () => l.current);
+  const W = (r) => {
+    r.stopPropagation(), typeof L == "function" && L(r);
+  };
+  return S(() => {
+    let r;
+    return t ? r = requestAnimationFrame(() => {
+      h(!0);
+    }) : h(!1), () => {
+      r && cancelAnimationFrame(r);
+    };
+  }, [t]), S(() => {
+    const r = l.current, n = R.current, k = (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")));
+    }, w = (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;
+      if (M > 0) {
+        const q = f.current;
+        g.current = (e - q) / 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 * A.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"));
+    }, x = (e) => k(e.clientY), H = (e) => w(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => w(e.touches[0].clientY);
+    return r == null || r.addEventListener("mousedown", x), 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", x), 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);
+    };
+  }, [$, c, s]), /* @__PURE__ */ y(
+    G,
+    {
+      ref: R,
+      open: t,
+      onClose: c,
+      transitionDuration: s,
+      placement: "center-bottom",
+      children: /* @__PURE__ */ P(
+        J,
+        {
+          ref: l,
+          ease: t ? "in" : "out",
+          transitionDuration: s,
+          onClick: W,
+          ...O,
+          style: {
+            transform: `translate3d(0, ${$ ? "0" : "200%"}, 0)`,
+            ...I
+          },
+          children: [
+            !F && /* @__PURE__ */ y(K, { ref: i, children: /* @__PURE__ */ y(N, {}) }),
+            T
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  _ as default
+};

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

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

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

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

package/dist/components/BottomSheet/index.mjs

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

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

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

package/dist/components/Overlay/Overlay.mjs

@@ -0,0 +1,143 @@
+import { jsxs as x, jsx as o } from "react/jsx-runtime";
+import { useState as f, useEffect as g } from "react";
+import { createPortal as b } from "react-dom";
+import a from "basic-styled";
+const j = a.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`, h = a.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${({
+  theme: {
+    palette: { common: t }
+  }
+}) => t.overlay};
+  transition:
+    opacity ${({ transitionDuration: t }) => `${t}ms`}
+      ${({ ease: t }) => t === "in" ? "ease-in" : "ease-out"},
+    background-color 0.2s;
+`, O = a.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  ${({ placement: t }) => {
+  const e = {};
+  switch (t) {
+    case "top-left":
+      Object.assign(e, {
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "flex-start"
+      });
+      break;
+    case "top-right":
+      Object.assign(e, {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "flex-start"
+      });
+      break;
+    case "bottom-left":
+      Object.assign(e, {
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "flex-end"
+      });
+      break;
+    case "bottom-right":
+      Object.assign(e, {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "flex-end"
+      });
+      break;
+    case "center-top":
+      Object.assign(e, {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "flex-start"
+      });
+      break;
+    case "center-bottom":
+      Object.assign(e, {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "flex-end"
+      });
+      break;
+    case "center-middle":
+      Object.assign(e, {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      });
+      break;
+    case "center-left":
+      Object.assign(e, {
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center"
+      });
+      break;
+    case "center-right":
+      Object.assign(e, {
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center"
+      });
+      break;
+  }
+  return e;
+}}
+`;
+function $({
+  children: t,
+  open: e,
+  onClose: c,
+  transitionDuration: s = 200,
+  placement: d,
+  style: m,
+  ...u
+}) {
+  const [y, l] = f(!0), [p, r] = f(!1);
+  return g(() => {
+    let n, i;
+    return e ? (l(!1), n = requestAnimationFrame(() => {
+      r(!0);
+    })) : (r(!1), i = setTimeout(() => {
+      l(!0);
+    }, s)), () => {
+      n && cancelAnimationFrame(n), i && clearTimeout(i);
+    };
+  }, [e, s]), y ? null : b(
+    /* @__PURE__ */ x(j, { onClick: c, children: [
+      /* @__PURE__ */ o(
+        h,
+        {
+          transitionDuration: s,
+          ease: e ? "in" : "out",
+          style: {
+            opacity: p ? 1 : 0,
+            ...m
+          },
+          ...u
+        }
+      ),
+      /* @__PURE__ */ o(O, { placement: d, children: t })
+    ] }),
+    document.body
+  );
+}
+export {
+  $ as default
+};

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

@@ -0,0 +1,7 @@
+import { ComponentPropsWithRef } from 'react';
+export interface OverlayProps extends ComponentPropsWithRef<"div"> {
+    open?: boolean;
+    onClose: () => void;
+    transitionDuration?: number;
+    placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-top" | "center-bottom" | "center-middle" | "center-left" | "center-right";
+}

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

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

package/dist/components/Overlay/index.mjs

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

package/dist/theme/dark.mjs

@@ -1,7 +1,7 @@
 import a from "./radius.mjs";
 import r from "./spacing.mjs";
 import i from "./typography.mjs";
-const t = {
+const g = {
   mode: "dark",
   palette: {
     primary: {
@@ -63,7 +63,8 @@ const t = {
     },
     common: {
       background: "#22252A",
-      surface: "#30333A"
+      surface: "#30333A",
+      overlay: "rgba(0, 0, 0, 0.7)"
     },
     text: {
       primary: "#EAECEF",
@@ -81,5 +82,5 @@ const t = {
   radius: a
 };
 export {
-  t as default
+  g as default
 };

package/dist/theme/light.mjs

@@ -1,6 +1,6 @@
 import a from "./radius.mjs";
-import F from "./spacing.mjs";
-import r from "./typography.mjs";
+import r from "./spacing.mjs";
+import F from "./typography.mjs";
 const C = {
   mode: "light",
   palette: {
@@ -63,7 +63,8 @@ const C = {
     },
     common: {
       background: "#FFFFFF",
-      surface: "#FFFFFF"
+      surface: "#FFFFFF",
+      overlay: "rgba(0, 0, 0, 0.5)"
     },
     text: {
       primary: "#212529",
@@ -76,8 +77,8 @@ const C = {
       dark: "#6C757D"
     }
   },
-  typography: r,
-  spacing: F,
+  typography: F,
+  spacing: r,
   radius: a
 };
 export {

package/dist/theme/typing.d.ts

@@ -65,6 +65,7 @@ declare module "basic-styled" {
             common: {
                 background: string;
                 surface: string;
+                overlay: string;
             };
             text: {
                 primary: string;

package/package.json

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