@dimasbaguspm/versaur 0.0.12 → 0.0.13

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

@@ -0,0 +1,281 @@
+import { a as l, j as o } from "./index-Dmu_fHni.js";
+import f, { createContext as g, useContext as k, forwardRef as b, useCallback as j, useEffect as x } from "react";
+import { c as d } from "./cn-BKwT3erk.js";
+import { b as B, a as V, B as D, c as E, d as R } from "./bottom-sheet.atoms-DFMOaMsU.js";
+const h = g(null);
+function u() {
+  const t = k(h);
+  if (!t)
+    throw new Error(
+      "Drawer components must be used within a DrawerRoot component"
+    );
+  return t;
+}
+const C = l(
+  "fixed inset-0 z-50 transition-opacity duration-300 bg-black/30 backdrop-blur-md",
+  {
+    variants: {
+      state: {
+        open: "opacity-100",
+        closed: "opacity-0 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      state: "closed"
+    }
+  }
+), N = l("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-gray-200",
+      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"
+  }
+}), F = l("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
+  }
+}), S = l("flex-1 overflow-y-auto px-6 py-4", {
+  variants: {
+    variant: {
+      default: "bg-white",
+      glass: "bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), H = l("flex-shrink-0 px-6 py-4 border-t", {
+  variants: {
+    variant: {
+      default: "bg-white border-gray-200",
+      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
+  }
+}), z = f.forwardRef(({ className: t, ...e }, r) => {
+  const { isOpen: a, onClose: n } = u(), s = () => {
+    n();
+  };
+  return /* @__PURE__ */ o.jsx(
+    "div",
+    {
+      ref: r,
+      onClick: s,
+      className: d(
+        C({
+          state: a ? "open" : "closed"
+        }),
+        t
+      ),
+      ...e
+    }
+  );
+}), L = f.forwardRef(
+  ({ children: t, className: e, hasTab: r, ...a }, n) => {
+    const { variant: s } = u();
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: n,
+        className: d(
+          F({ variant: s, tab: !!r }),
+          e
+        ),
+        ...a,
+        children: t
+      }
+    );
+  }
+), T = b(
+  ({ children: t, className: e, ...r }, a) => /* @__PURE__ */ o.jsx("div", { ref: a, className: d("[&>div]:px-6", e), ...r, children: t })
+), _ = f.forwardRef(
+  ({ children: t, className: e, ...r }, a) => {
+    const { variant: n } = u();
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: a,
+        className: d(S({ variant: n }), e),
+        ...r,
+        children: t
+      }
+    );
+  }
+), I = f.forwardRef(
+  ({ children: t, className: e, responsiveFlex: r = !0, ...a }, n) => {
+    const { variant: s } = u();
+    return /* @__PURE__ */ o.jsx(
+      "div",
+      {
+        ref: n,
+        className: d(
+          H({ variant: s, responsiveFlex: r }),
+          e
+        ),
+        ...a,
+        children: t
+      }
+    );
+  }
+), P = ({
+  children: t,
+  isOpen: e,
+  onClose: r,
+  position: a = "right",
+  size: n = "md",
+  variant: s = "default",
+  transitionType: i = "slide",
+  className: c,
+  ...m
+}) => {
+  const w = j(() => {
+    r(!1);
+  }, [r]), p = {
+    isOpen: e,
+    onClose: w,
+    position: a,
+    size: n,
+    variant: s,
+    transitionType: i
+  };
+  return x(() => {
+    const v = (y) => {
+      y.key === "Escape" && e && w();
+    };
+    return e && (document.addEventListener("keydown", v), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", v), document.body.style.overflow = "unset";
+    };
+  }, [e, w]), /* @__PURE__ */ o.jsx(h.Provider, { value: p, children: /* @__PURE__ */ o.jsxs(
+    "div",
+    {
+      className: d(
+        "fixed z-50 inset-0 pointer-events-none",
+        e && "pointer-events-auto"
+      ),
+      children: [
+        /* @__PURE__ */ o.jsx(z, {}),
+        /* @__PURE__ */ o.jsx(
+          "div",
+          {
+            role: e ? "dialog" : void 0,
+            "aria-modal": e ? "true" : void 0,
+            className: d(
+              N({
+                position: a,
+                size: n,
+                variant: s,
+                transitionType: i
+              }),
+              i === "slide" ? [
+                !e && a === "left" && "-translate-x-full",
+                !e && a === "right" && "translate-x-full"
+              ] : [
+                "left-0 right-0 top-0 bottom-0",
+                e ? "opacity-100" : "opacity-0 pointer-events-none"
+              ],
+              c
+            ),
+            ...m,
+            children: e && t
+          }
+        )
+      ]
+    }
+  ) });
+}, M = Object.assign(P, {
+  Header: L,
+  Tab: T,
+  Body: _,
+  Footer: I
+}), q = b(
+  ({ isOpen: t, children: e, className: r, onClose: a, ...n }, s) => {
+    x(() => {
+      const c = (m) => {
+        m.key === "Escape" && t && a();
+      };
+      return t && (document.addEventListener("keydown", c), document.body.style.overflow = "hidden"), () => {
+        document.removeEventListener("keydown", c), document.body.style.overflow = "unset";
+      };
+    }, [t, a]);
+    const i = () => {
+      a?.();
+    };
+    return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      /* @__PURE__ */ o.jsx(
+        "div",
+        {
+          className: B({ open: t }),
+          "aria-hidden": "true",
+          onClick: i
+        }
+      ),
+      /* @__PURE__ */ o.jsx(
+        "div",
+        {
+          ref: s,
+          className: d(
+            V({
+              open: t
+            }),
+            r
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          ...n,
+          children: e
+        }
+      )
+    ] });
+  }
+), Q = Object.assign(q, {
+  Header: R,
+  Title: (await import("./bottom-sheet.atoms-DFMOaMsU.js").then((t) => t.e)).BottomSheetTitle,
+  Body: E,
+  Footer: D
+});
+export {
+  Q as B,
+  M as D
+};

package/dist/js/bottom-sheet.atoms-DFMOaMsU.js

@@ -0,0 +1,78 @@
+import { a, j as r } from "./index-Dmu_fHni.js";
+import { forwardRef as s } from "react";
+const h = a(
+  [
+    "fixed left-0 bottom-0 z-50 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 = a(
+  ["fixed inset-0 z-40 duration-300"],
+  {
+    variants: {
+      open: {
+        true: "backdrop-blur-md bg-foreground/30",
+        false: "pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      open: !1
+    }
+  }
+), l = a("px-4 pt-4 pb-2"), d = a("px-4 py-2"), i = a("px-4 pt-2 pb-4"), m = s(function({ className: t, ...o }, n) {
+  return /* @__PURE__ */ r.jsx(
+    "h2",
+    {
+      ref: n,
+      className: ["text-lg font-semibold text-foreground", t].filter(Boolean).join(" "),
+      ...o
+    }
+  );
+}), f = s(({ className: e, ...t }, o) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    ref: o,
+    className: l({ className: e }),
+    ...t
+  }
+)), c = s(
+  ({ className: e, ...t }, o) => /* @__PURE__ */ r.jsx(
+    "div",
+    {
+      ref: o,
+      className: d({ className: e }),
+      ...t
+    }
+  )
+), b = s(({ className: e, ...t }, o) => /* @__PURE__ */ r.jsx(
+  "div",
+  {
+    ref: o,
+    className: i({ className: e }),
+    ...t
+  }
+)), S = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  BottomSheetBody: c,
+  BottomSheetFooter: b,
+  BottomSheetHeader: f,
+  BottomSheetTitle: m
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  b as B,
+  h as a,
+  x as b,
+  c,
+  f as d,
+  S as e
+};