@dimasbaguspm/versaur 0.0.19 → 0.0.20

package/dist/js/bottom-sheet-DbtyWwsy.js

@@ -0,0 +1,493 @@
+import { c as i, j as o, a as l } from "./index-DOdDlCoL.js";
+import m, { createContext as w, useContext as h, forwardRef as d, useRef as N, useEffect as R, useCallback as k } from "react";
+import C from "react-dom";
+const g = w(null);
+function D() {
+  const t = h(g);
+  if (!t)
+    throw new Error(
+      "Modal components must be used within a ModalRoot component"
+    );
+  return t;
+}
+const E = i(
+  "fixed inset-0 z-60 transition-opacity duration-300 bg-foreground/30 backdrop-blur-md flex items-center justify-center transition-opacity duration-200 ease-in-out",
+  {
+    variants: {
+      placement: {
+        top: "items-start",
+        center: "items-center"
+      }
+    },
+    defaultVariants: {
+      placement: "center"
+    }
+  }
+), F = i(
+  [
+    "z-61 bg-white rounded-lg shadow-xl fixed",
+    "flex flex-col",
+    "outline-none",
+    "mx-4",
+    "transition-all duration-200 ease-in-out "
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-[20rem] max-w-sm",
+        // 20rem, 320px
+        md: "w-[28rem] max-w-md",
+        // 28rem, 448px
+        lg: "w-[36rem] max-w-lg",
+        // 36rem, 576px
+        "fit-content": "w-fit max-w-full"
+        // Fit content, no max width
+      },
+      placement: {
+        top: "top-8 left-1/2 -translate-x-1/2",
+        center: "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+      },
+      isOpen: {
+        true: "opacity-100 scale-100",
+        false: "opacity-0 scale-95 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      placement: "center",
+      isOpen: !1
+    }
+  }
+), M = d(
+  ({ className: t, ...a }, e) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: e,
+      className: l("px-6 pt-6 pb-2 text-lg font-semibold", t),
+      ...a
+    }
+  )
+), S = d(
+  ({ className: t, ...a }, e) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: e,
+      className: l("px-6 py-4  flex justify-end gap-2", t),
+      ...a
+    }
+  )
+), z = d(
+  ({ className: t, ...a }, e) => /* @__PURE__ */ o.jsx("div", { ref: e, className: l("px-6 py-2", t), ...a })
+), H = d(
+  (t, a) => {
+    const { isOpen: e, placement: r, onClose: n } = D();
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: a,
+        role: "presentation",
+        tabIndex: -1,
+        "aria-modal": "true",
+        onClick: n,
+        className: l(
+          E({ placement: r }),
+          e ? "opacity-100" : "opacity-0 pointer-events-none"
+        ),
+        ...t
+      }
+    );
+  }
+);
+function p(t, a, e) {
+  const r = N(null);
+  return R(() => {
+    const n = (s) => {
+      s.key === "Escape" && t && r.current && r.current.contains(document.activeElement) && !e && a();
+    };
+    return t && (document.addEventListener("keydown", n), document.body.style.overflow = "hidden", r.current?.focus()), () => {
+      document.removeEventListener("keydown", n), document.body.style.overflow = "unset";
+    };
+  }, [t, a, e, r]), r;
+}
+const b = ({
+  container: t,
+  children: a
+}) => {
+  if (typeof window > "u" || typeof document > "u")
+    return /* @__PURE__ */ o.jsx(o.Fragment, { children: a });
+  const e = t ?? document.body;
+  return e ? C.createPortal(a, e) : /* @__PURE__ */ o.jsx(o.Fragment, { children: a });
+}, I = ({
+  isOpen: t,
+  onClose: a,
+  size: e = "md",
+  placement: r = "center",
+  children: n,
+  container: s,
+  ...u
+}) => {
+  const c = {
+    isOpen: t,
+    onClose: a,
+    size: e,
+    placement: r
+  }, f = p(t, a);
+  return /* @__PURE__ */ o.jsx(b, { container: s, children: /* @__PURE__ */ o.jsx(g.Provider, { value: c, children: /* @__PURE__ */ o.jsxs(
+    "div",
+    {
+      className: l(
+        "fixed z-50 inset-0 pointer-events-none",
+        t && "pointer-events-auto"
+      ),
+      children: [
+        /* @__PURE__ */ o.jsx(H, {}),
+        /* @__PURE__ */ o.jsx(
+          "div",
+          {
+            ref: f,
+            className: l(F({ size: e, placement: r, isOpen: t })),
+            role: "dialog",
+            tabIndex: -1,
+            "aria-hidden": !t,
+            ...u,
+            children: n
+          }
+        )
+      ]
+    }
+  ) }) });
+}, ie = Object.assign(I, {
+  Header: M,
+  Body: z,
+  Footer: S
+}), y = w(null);
+function x() {
+  const t = h(y);
+  if (!t)
+    throw new Error(
+      "Drawer components must be used within a DrawerRoot component"
+    );
+  return t;
+}
+const T = i(
+  "fixed inset-0 z-50 transition-opacity duration-300 bg-foreground/30 backdrop-blur-md",
+  {
+    variants: {
+      state: {
+        open: "opacity-100",
+        closed: "opacity-0 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      state: "closed"
+    }
+  }
+), P = i("fixed z-50 shadow-xl flex flex-col", {
+  variants: {
+    position: {
+      left: "left-0 top-0 bottom-0 border-r",
+      right: "right-0 top-0 bottom-0 border-l"
+    },
+    size: {
+      sm: "w-80",
+      md: "w-96",
+      lg: "w-[28rem]",
+      xl: "w-[32rem]",
+      "3/4": "w-[75vw]",
+      full: "w-full"
+    },
+    variant: {
+      default: "bg-white border-border",
+      glass: "bg-white/10 backdrop-blur-lg border-white/20"
+    },
+    transitionType: {
+      slide: "transition-transform duration-300 ease-in-out",
+      fade: "transition-opacity duration-300 ease-in-out"
+    }
+  },
+  defaultVariants: {
+    position: "right",
+    size: "md",
+    variant: "default",
+    transitionType: "slide"
+  }
+}), L = i("flex-shrink-0 px-6", {
+  variants: {
+    variant: {
+      default: "bg-white",
+      glass: "bg-transparent "
+    },
+    tab: {
+      true: "pt-4 pb-2",
+      false: "border-b border-border py-4 "
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    tab: !1
+  }
+}), _ = i("flex-1 overflow-y-auto px-6 py-4", {
+  variants: {
+    variant: {
+      default: "bg-white",
+      glass: "bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), q = i("flex-shrink-0 px-6 py-4 border-t", {
+  variants: {
+    variant: {
+      default: "bg-white border-border",
+      glass: "bg-transparent border-white/10"
+    },
+    responsiveFlex: {
+      true: "flex flex-row gap-3 sm:justify-end [&>*]:sm:flex-grow-0 [&>*]:flex-grow",
+      false: "flex gap-2"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    responsiveFlex: !0
+  }
+}), A = m.forwardRef(({ className: t, ...a }, e) => {
+  const { isOpen: r, onClose: n } = x(), s = () => {
+    n();
+  };
+  return /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: e,
+      onClick: s,
+      className: l(
+        T({
+          state: r ? "open" : "closed"
+        }),
+        t
+      ),
+      ...a
+    }
+  );
+}), G = m.forwardRef(
+  ({ children: t, className: a, hasTab: e, ...r }, n) => {
+    const { variant: s } = x();
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: n,
+        className: l(
+          L({ variant: s, tab: !!e }),
+          a
+        ),
+        ...r,
+        children: t
+      }
+    );
+  }
+), J = d(
+  ({ children: t, className: a, ...e }, r) => /* @__PURE__ */ o.jsx("div", { ref: r, className: l("[&>div]:px-6", a), ...e, children: t })
+), K = m.forwardRef(
+  ({ children: t, className: a, ...e }, r) => {
+    const { variant: n } = x();
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: r,
+        className: l(_({ variant: n }), a),
+        ...e,
+        children: t
+      }
+    );
+  }
+), Q = m.forwardRef(
+  ({ children: t, className: a, responsiveFlex: e = !0, ...r }, n) => {
+    const { variant: s } = x();
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: n,
+        className: l(
+          q({ variant: s, responsiveFlex: e }),
+          a
+        ),
+        ...r,
+        children: t
+      }
+    );
+  }
+), U = ({
+  container: t,
+  children: a,
+  isOpen: e,
+  onClose: r,
+  position: n = "right",
+  size: s = "md",
+  variant: u = "default",
+  transitionType: c = "slide",
+  className: f,
+  ...j
+}) => {
+  const v = k(() => {
+    r(!1);
+  }, [r]), V = {
+    isOpen: e,
+    onClose: v,
+    position: n,
+    size: s,
+    variant: u,
+    transitionType: c
+  }, B = p(e, v);
+  return /* @__PURE__ */ o.jsx(b, { container: t, children: /* @__PURE__ */ o.jsx(y.Provider, { value: V, children: /* @__PURE__ */ o.jsxs(
+    "div",
+    {
+      className: l(
+        "fixed z-50 inset-0 pointer-events-none",
+        e && "pointer-events-auto"
+      ),
+      children: [
+        /* @__PURE__ */ o.jsx(A, {}),
+        /* @__PURE__ */ o.jsx(
+          "div",
+          {
+            ref: B,
+            tabIndex: -1,
+            role: e ? "dialog" : void 0,
+            "aria-modal": e ? "true" : void 0,
+            className: l(
+              P({
+                position: n,
+                size: s,
+                variant: u,
+                transitionType: c
+              }),
+              c === "slide" ? [
+                !e && n === "left" && "-translate-x-full",
+                !e && n === "right" && "translate-x-full"
+              ] : [
+                "left-0 right-0 top-0 bottom-0",
+                e ? "opacity-100" : "opacity-0 pointer-events-none"
+              ],
+              f
+            ),
+            ...j,
+            children: e && a
+          }
+        )
+      ]
+    }
+  ) }) });
+}, de = Object.assign(U, {
+  Header: G,
+  Tab: J,
+  Body: K,
+  Footer: Q
+}), W = i(
+  [
+    "fixed left-0 bottom-0 z-40 w-full max-h-[90dvh] bg-background rounded-t-xl shadow-lg border-t border-border rounded-lg",
+    "transition-transform duration-300 ease-in-out will-change-transform"
+  ],
+  {
+    variants: {
+      open: {
+        true: "translate-y-0",
+        false: "translate-y-full"
+      }
+    },
+    defaultVariants: {
+      open: !1
+    }
+  }
+), X = i(
+  ["fixed inset-0 z-40 duration-300"],
+  {
+    variants: {
+      open: {
+        true: "backdrop-blur-md bg-foreground/30",
+        false: "pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      open: !1
+    }
+  }
+), Y = i("px-4 pt-4 pb-2"), Z = i("px-4 py-2"), $ = i("px-4 pt-2 pb-4"), O = d(function({ className: a, ...e }, r) {
+  return /* @__PURE__ */ o.jsx(
+    "h2",
+    {
+      ref: r,
+      className: ["text-lg font-semibold text-foreground", a].filter(Boolean).join(" "),
+      ...e
+    }
+  );
+}), ee = d(({ className: t, ...a }, e) => /* @__PURE__ */ o.jsx(
+  "div",
+  {
+    ref: e,
+    className: Y({ className: t }),
+    ...a
+  }
+)), te = d(
+  ({ className: t, ...a }, e) => /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: e,
+      className: Z({ className: t }),
+      ...a
+    }
+  )
+), ae = d(({ className: t, ...a }, e) => /* @__PURE__ */ o.jsx(
+  "div",
+  {
+    ref: e,
+    className: $({ className: t }),
+    ...a
+  }
+)), oe = (...t) => (a) => {
+  t.forEach((e) => {
+    typeof e == "function" ? e(a) : e && "current" in e && (e.current = a);
+  });
+}, re = d(
+  ({ isOpen: t, children: a, className: e, onClose: r, container: n, ...s }, u) => {
+    const c = p(t, r), f = () => {
+      r?.();
+    };
+    return /* @__PURE__ */ o.jsxs(b, { container: n, children: [
+      /* @__PURE__ */ o.jsx(
+        "div",
+        {
+          className: X({ open: t }),
+          "aria-hidden": "true",
+          onClick: f
+        }
+      ),
+      /* @__PURE__ */ o.jsx(
+        "div",
+        {
+          ref: oe(u, c),
+          className: l(
+            W({
+              open: t
+            }),
+            e
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          ...s,
+          children: a
+        }
+      )
+    ] });
+  }
+), ce = Object.assign(re, {
+  Header: ee,
+  Title: O,
+  Body: te,
+  Footer: ae
+});
+export {
+  ce as B,
+  de as D,
+  ie as M
+};