@dimasbaguspm/versaur 0.0.15 → 0.0.17

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

@@ -0,0 +1,501 @@
+import { a as d, j as s, c as u } from "./index-C1uJQB34.js";
+import p, { createContext as y, useContext as k, forwardRef as m, useCallback as D, useEffect as v, useId as E, useRef as h } from "react";
+const j = y(null);
+function w() {
+  const t = k(j);
+  if (!t)
+    throw new Error(
+      "Drawer components must be used within a DrawerRoot component"
+    );
+  return t;
+}
+const N = d(
+  "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"
+    }
+  }
+), z = d("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"
+  }
+}), C = d("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 = d("flex-1 overflow-y-auto px-6 py-4", {
+  variants: {
+    variant: {
+      default: "bg-white",
+      glass: "bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), M = d("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
+  }
+}), R = p.forwardRef(({ className: t, ...e }, r) => {
+  const { isOpen: n, onClose: o } = w(), a = () => {
+    o();
+  };
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: r,
+      onClick: a,
+      className: u(
+        N({
+          state: n ? "open" : "closed"
+        }),
+        t
+      ),
+      ...e
+    }
+  );
+}), F = p.forwardRef(
+  ({ children: t, className: e, hasTab: r, ...n }, o) => {
+    const { variant: a } = w();
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: o,
+        className: u(
+          C({ variant: a, tab: !!r }),
+          e
+        ),
+        ...n,
+        children: t
+      }
+    );
+  }
+), I = m(
+  ({ children: t, className: e, ...r }, n) => /* @__PURE__ */ s.jsx("div", { ref: n, className: u("[&>div]:px-6", e), ...r, children: t })
+), L = p.forwardRef(
+  ({ children: t, className: e, ...r }, n) => {
+    const { variant: o } = w();
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: n,
+        className: u(S({ variant: o }), e),
+        ...r,
+        children: t
+      }
+    );
+  }
+), H = p.forwardRef(
+  ({ children: t, className: e, responsiveFlex: r = !0, ...n }, o) => {
+    const { variant: a } = w();
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: o,
+        className: u(
+          M({ variant: a, responsiveFlex: r }),
+          e
+        ),
+        ...n,
+        children: t
+      }
+    );
+  }
+), T = ({
+  children: t,
+  isOpen: e,
+  onClose: r,
+  position: n = "right",
+  size: o = "md",
+  variant: a = "default",
+  transitionType: i = "slide",
+  className: l,
+  ...b
+}) => {
+  const c = D(() => {
+    r(!1);
+  }, [r]), x = {
+    isOpen: e,
+    onClose: c,
+    position: n,
+    size: o,
+    variant: a,
+    transitionType: i
+  };
+  return v(() => {
+    const f = (B) => {
+      B.key === "Escape" && e && c();
+    };
+    return e && (document.addEventListener("keydown", f), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", f), document.body.style.overflow = "unset";
+    };
+  }, [e, c]), /* @__PURE__ */ s.jsx(j.Provider, { value: x, children: /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      className: u(
+        "fixed z-50 inset-0 pointer-events-none",
+        e && "pointer-events-auto"
+      ),
+      children: [
+        /* @__PURE__ */ s.jsx(R, {}),
+        /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            role: e ? "dialog" : void 0,
+            "aria-modal": e ? "true" : void 0,
+            className: u(
+              z({
+                position: n,
+                size: o,
+                variant: a,
+                transitionType: i
+              }),
+              i === "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"
+              ],
+              l
+            ),
+            ...b,
+            children: e && t
+          }
+        )
+      ]
+    }
+  ) });
+}, se = Object.assign(T, {
+  Header: F,
+  Tab: I,
+  Body: L,
+  Footer: H
+}), V = y(null), g = () => {
+  const t = k(V);
+  if (!t)
+    throw new Error("useMenuContext must be used within a Menu component");
+  return t;
+}, A = d(
+  "z-30 min-w-40 bg-background text-black rounded-lg border border-border",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border bg-transparent"
+      },
+      size: {
+        sm: "py-1.5 px-1",
+        md: "py-2 px-1"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), q = d(
+  "w-full text-left px-4 rounded-sm cursor-pointer transition-colors duration-150 select-none hover:bg-background-light outline-none border border-transparent focus-visible:border-primary-light disabled:opacity-50 disabled:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        sm: "text-sm py-1",
+        md: "text-base py-1"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), K = m(
+  ({ children: t, ...e }, r) => {
+    const { open: n, triggerRef: o } = g();
+    return /* @__PURE__ */ s.jsx(
+      "span",
+      {
+        ref: (a) => {
+          o.current = a, typeof r == "function" ? r(a) : r && (r.current = a);
+        },
+        "aria-haspopup": "menu",
+        "aria-expanded": n,
+        "aria-controls": "menu-content",
+        ...e,
+        children: t
+      }
+    );
+  }
+), P = m(
+  ({ children: t, className: e, ...r }, n) => {
+    const { open: o, contentRef: a, triggerRef: i, size: l } = g(), b = E();
+    let c = 0, x = 0;
+    if (i.current) {
+      const f = i.current.getBoundingClientRect();
+      c = f.bottom + window.scrollY + 4, x = f.left + window.scrollX;
+    }
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: (f) => {
+          a.current = f, typeof n == "function" ? n(f) : n && (n.current = f);
+        },
+        id: `menu-content-${b}`,
+        role: "menu",
+        tabIndex: -1,
+        "aria-hidden": !o,
+        className: u(
+          A({
+            size: l
+          }),
+          "absolute z-50 transition-opacity duration-150 ease-out",
+          o ? "opacity-100" : "opacity-0",
+          e
+        ),
+        style: {
+          minWidth: i.current?.offsetWidth,
+          top: c,
+          left: x
+        },
+        ...r,
+        children: o && t
+      }
+    );
+  }
+), W = m(
+  ({ children: t, disabled: e, className: r, ...n }, o) => {
+    const { size: a } = g();
+    return /* @__PURE__ */ s.jsx(
+      "button",
+      {
+        ref: o,
+        role: "menuitem",
+        tabIndex: 0,
+        disabled: e,
+        "aria-disabled": e,
+        className: u(
+          q({
+            size: a
+          }),
+          r
+        ),
+        ...n,
+        children: t
+      }
+    );
+  }
+);
+function _(t, e, r, n) {
+  v(() => {
+    if (!t) return;
+    function o(a) {
+      !e.current?.contains(a.target) && !r.current?.contains(a.target) && n();
+    }
+    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
+  }, [t, n, e, r]);
+}
+function U(t, e) {
+  v(() => {
+    if (t && e.current) {
+      const r = e.current.querySelectorAll('[role="menuitem"]');
+      r.length && r[0].focus();
+    }
+  }, [t, e]);
+}
+function X(t, e, r, n) {
+  v(() => {
+    if (!t || !e.current) return;
+    const o = e.current;
+    function a(i) {
+      const l = Array.from(
+        o.querySelectorAll('[role="menuitem"]')
+      ), b = document.activeElement, c = l.indexOf(b);
+      i.key === "ArrowDown" ? (i.preventDefault(), l.length && l[(c + 1) % l.length].focus()) : i.key === "ArrowUp" ? (i.preventDefault(), l.length && l[(c - 1 + l.length) % l.length].focus()) : i.key === "Home" ? (i.preventDefault(), l.length && l[0].focus()) : i.key === "End" ? (i.preventDefault(), l.length && l[l.length - 1].focus()) : i.key === "Escape" && (i.preventDefault(), n(), r.current?.focus());
+    }
+    return o.addEventListener("keydown", a), () => o.removeEventListener("keydown", a);
+  }, [t, n, e, r]);
+}
+const Y = ({
+  children: t,
+  isOpen: e,
+  onOutsideClick: r,
+  size: n = "md"
+}) => {
+  const o = h(null), a = h(null);
+  return _(e, a, o, r), U(e, a), X(e, a, o, r), /* @__PURE__ */ s.jsx(
+    V.Provider,
+    {
+      value: { open: e, triggerRef: o, contentRef: a, size: n },
+      children: t
+    }
+  );
+}, ie = Object.assign(Y, {
+  Trigger: K,
+  Content: P,
+  Item: W
+}), $ = d(
+  [
+    "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
+    }
+  }
+), G = d(
+  ["fixed inset-0 z-40 duration-300"],
+  {
+    variants: {
+      open: {
+        true: "backdrop-blur-md bg-foreground/30",
+        false: "pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      open: !1
+    }
+  }
+), J = d("px-4 pt-4 pb-2"), Q = d("px-4 py-2"), Z = d("px-4 pt-2 pb-4"), O = m(function({ className: e, ...r }, n) {
+  return /* @__PURE__ */ s.jsx(
+    "h2",
+    {
+      ref: n,
+      className: ["text-lg font-semibold text-foreground", e].filter(Boolean).join(" "),
+      ...r
+    }
+  );
+}), ee = m(({ className: t, ...e }, r) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    ref: r,
+    className: J({ className: t }),
+    ...e
+  }
+)), te = m(
+  ({ className: t, ...e }, r) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: r,
+      className: Q({ className: t }),
+      ...e
+    }
+  )
+), re = m(({ className: t, ...e }, r) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    ref: r,
+    className: Z({ className: t }),
+    ...e
+  }
+)), ne = m(
+  ({ isOpen: t, children: e, className: r, onClose: n, ...o }, a) => {
+    v(() => {
+      const l = (b) => {
+        b.key === "Escape" && t && n();
+      };
+      return t && (document.addEventListener("keydown", l), document.body.style.overflow = "hidden"), () => {
+        document.removeEventListener("keydown", l), document.body.style.overflow = "unset";
+      };
+    }, [t, n]);
+    const i = () => {
+      n?.();
+    };
+    return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+      /* @__PURE__ */ s.jsx(
+        "div",
+        {
+          className: G({ open: t }),
+          "aria-hidden": "true",
+          onClick: i
+        }
+      ),
+      /* @__PURE__ */ s.jsx(
+        "div",
+        {
+          ref: a,
+          className: u(
+            $({
+              open: t
+            }),
+            r
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          ...o,
+          children: e
+        }
+      )
+    ] });
+  }
+), le = Object.assign(ne, {
+  Header: ee,
+  Title: O,
+  Body: te,
+  Footer: re
+});
+export {
+  le as B,
+  se as D,
+  ie as M
+};