@dimasbaguspm/versaur 0.0.16 → 0.0.18

package/dist/{js → assets}/styles.css

@@ -154,6 +154,43 @@ Our palette follows these harmonious relationships:
     transform: scale(1) translateY(0);
   }
 }
+
 .animate-fab-in {
   animation: fab-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+@keyframes snackbar-fade-in-out {
+  0% {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  90% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+}
+.snackbar-animate-fade-in-out {
+  animation: snackbar-fade-in-out 4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes snackbar-slide-in-left {
+  0% {
+    opacity: 0;
+    transform: translateX(-32px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+.snackbar-animate-slide-in-left {
+  animation: snackbar-slide-in-left 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+}

package/dist/js/bottom-sheet-BRv-oJL-.js

@@ -0,0 +1,646 @@
+import { c as d, j as s, a as u } from "./index-DOdDlCoL.js";
+import y, { createContext as E, useContext as D, forwardRef as f, useCallback as M, useEffect as b, useId as z, useRef as w, useState as V } from "react";
+const N = E(null);
+function g() {
+  const t = D(N);
+  if (!t)
+    throw new Error(
+      "Drawer components must be used within a DrawerRoot component"
+    );
+  return t;
+}
+const R = 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"
+    }
+  }
+), S = 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
+  }
+}), F = d("flex-1 overflow-y-auto px-6 py-4", {
+  variants: {
+    variant: {
+      default: "bg-white",
+      glass: "bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), I = 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
+  }
+}), T = y.forwardRef(({ className: t, ...e }, n) => {
+  const { isOpen: r, onClose: o } = g(), a = () => {
+    o();
+  };
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: n,
+      onClick: a,
+      className: u(
+        R({
+          state: r ? "open" : "closed"
+        }),
+        t
+      ),
+      ...e
+    }
+  );
+}), L = y.forwardRef(
+  ({ children: t, className: e, hasTab: n, ...r }, o) => {
+    const { variant: a } = g();
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: o,
+        className: u(
+          C({ variant: a, tab: !!n }),
+          e
+        ),
+        ...r,
+        children: t
+      }
+    );
+  }
+), A = f(
+  ({ children: t, className: e, ...n }, r) => /* @__PURE__ */ s.jsx("div", { ref: r, className: u("[&>div]:px-6", e), ...n, children: t })
+), H = y.forwardRef(
+  ({ children: t, className: e, ...n }, r) => {
+    const { variant: o } = g();
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: r,
+        className: u(F({ variant: o }), e),
+        ...n,
+        children: t
+      }
+    );
+  }
+), q = y.forwardRef(
+  ({ children: t, className: e, responsiveFlex: n = !0, ...r }, o) => {
+    const { variant: a } = g();
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: o,
+        className: u(
+          I({ variant: a, responsiveFlex: n }),
+          e
+        ),
+        ...r,
+        children: t
+      }
+    );
+  }
+), K = ({
+  children: t,
+  isOpen: e,
+  onClose: n,
+  position: r = "right",
+  size: o = "md",
+  variant: a = "default",
+  transitionType: i = "slide",
+  className: l,
+  ...x
+}) => {
+  const c = M(() => {
+    n(!1);
+  }, [n]), v = {
+    isOpen: e,
+    onClose: c,
+    position: r,
+    size: o,
+    variant: a,
+    transitionType: i
+  };
+  return b(() => {
+    const m = (p) => {
+      p.key === "Escape" && e && c();
+    };
+    return e && (document.addEventListener("keydown", m), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", m), document.body.style.overflow = "unset";
+    };
+  }, [e, c]), /* @__PURE__ */ s.jsx(N.Provider, { value: v, children: /* @__PURE__ */ s.jsxs(
+    "div",
+    {
+      className: u(
+        "fixed z-50 inset-0 pointer-events-none",
+        e && "pointer-events-auto"
+      ),
+      children: [
+        /* @__PURE__ */ s.jsx(T, {}),
+        /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            role: e ? "dialog" : void 0,
+            "aria-modal": e ? "true" : void 0,
+            className: u(
+              S({
+                position: r,
+                size: o,
+                variant: a,
+                transitionType: i
+              }),
+              i === "slide" ? [
+                !e && r === "left" && "-translate-x-full",
+                !e && r === "right" && "translate-x-full"
+              ] : [
+                "left-0 right-0 top-0 bottom-0",
+                e ? "opacity-100" : "opacity-0 pointer-events-none"
+              ],
+              l
+            ),
+            ...x,
+            children: e && t
+          }
+        )
+      ]
+    }
+  ) });
+}, ye = Object.assign(K, {
+  Header: L,
+  Tab: A,
+  Body: H,
+  Footer: q
+}), B = E(null), k = () => {
+  const t = D(B);
+  if (!t)
+    throw new Error("useMenuContext must be used within a Menu component");
+  return t;
+}, _ = 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"
+    }
+  }
+), $ = 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"
+    }
+  }
+), P = f(
+  ({ children: t, ...e }, n) => {
+    const { open: r, triggerRef: o } = k();
+    return /* @__PURE__ */ s.jsx(
+      "span",
+      {
+        ref: (a) => {
+          o.current = a, typeof n == "function" ? n(a) : n && (n.current = a);
+        },
+        "aria-haspopup": "menu",
+        "aria-expanded": r,
+        "aria-controls": "menu-content",
+        ...e,
+        children: t
+      }
+    );
+  }
+), U = f(
+  ({ children: t, className: e, ...n }, r) => {
+    const { open: o, contentRef: a, triggerRef: i, size: l } = k(), x = z();
+    let c = 0, v = 0;
+    if (i.current) {
+      const m = i.current.getBoundingClientRect();
+      c = m.bottom + window.scrollY + 4, v = m.left + window.scrollX;
+    }
+    return /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        ref: (m) => {
+          a.current = m, typeof r == "function" ? r(m) : r && (r.current = m);
+        },
+        id: `menu-content-${x}`,
+        role: "menu",
+        tabIndex: -1,
+        "aria-hidden": !o,
+        className: u(
+          _({
+            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: v
+        },
+        ...n,
+        children: o && t
+      }
+    );
+  }
+), W = f(
+  ({ children: t, disabled: e, className: n, ...r }, o) => {
+    const { size: a } = k();
+    return /* @__PURE__ */ s.jsx(
+      "button",
+      {
+        ref: o,
+        role: "menuitem",
+        tabIndex: 0,
+        disabled: e,
+        "aria-disabled": e,
+        className: u(
+          $({
+            size: a
+          }),
+          n
+        ),
+        ...r,
+        children: t
+      }
+    );
+  }
+);
+function X(t, e, n, r) {
+  b(() => {
+    if (!t) return;
+    function o(a) {
+      !e.current?.contains(a.target) && !n.current?.contains(a.target) && r();
+    }
+    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
+  }, [t, r, e, n]);
+}
+function Y(t, e) {
+  b(() => {
+    if (t && e.current) {
+      const n = e.current.querySelectorAll('[role="menuitem"]');
+      n.length && n[0].focus();
+    }
+  }, [t, e]);
+}
+function G(t, e, n, r) {
+  b(() => {
+    if (!t || !e.current) return;
+    const o = e.current;
+    function a(i) {
+      const l = Array.from(
+        o.querySelectorAll('[role="menuitem"]')
+      ), x = document.activeElement, c = l.indexOf(x);
+      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(), r(), n.current?.focus());
+    }
+    return o.addEventListener("keydown", a), () => o.removeEventListener("keydown", a);
+  }, [t, r, e, n]);
+}
+const J = ({
+  children: t,
+  isOpen: e,
+  onOutsideClick: n,
+  size: r = "md"
+}) => {
+  const o = w(null), a = w(null);
+  return X(e, a, o, n), Y(e, a), G(e, a, o, n), /* @__PURE__ */ s.jsx(
+    B.Provider,
+    {
+      value: { open: e, triggerRef: o, contentRef: a, size: r },
+      children: t
+    }
+  );
+}, ge = Object.assign(J, {
+  Trigger: P,
+  Content: U,
+  Item: W
+}), Q = f(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: n,
+      className: u("px-6 pt-6 pb-2 text-lg font-semibold", t),
+      ...e
+    }
+  )
+), Z = f(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: n,
+      className: u("px-6 py-4  flex justify-end gap-2", t),
+      ...e
+    }
+  )
+), O = f(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx("div", { ref: n, className: u("px-6 py-2", t), ...e })
+), ee = f(
+  ({ onOverlayClick: t, ...e }, n) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: n,
+      role: "presentation",
+      tabIndex: -1,
+      "aria-modal": "true",
+      onClick: t,
+      ...e
+    }
+  )
+), te = d(
+  "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"
+    }
+  }
+), ne = d(
+  [
+    "bg-white rounded-lg shadow-xl relative",
+    "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: "mt-4",
+        center: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      placement: "center"
+    }
+  }
+);
+function re(t, e) {
+  b(() => {
+    if (e && t.current) {
+      const n = t.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      n.length && n[0].focus();
+    }
+  }, [e, t]);
+}
+function oe(t, e) {
+  b(() => {
+    if (!t) return;
+    const n = (r) => {
+      r.key === "Escape" && e();
+    };
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [t, e]);
+}
+const ae = 200, se = ({
+  isOpen: t,
+  onOpenChange: e,
+  size: n = "md",
+  placement: r = "center",
+  children: o,
+  disableOverlayClose: a,
+  disableEscClose: i,
+  ...l
+}) => {
+  const x = w(null), c = w(null), [v, m] = V(t), [p, h] = V(!1);
+  return b(() => {
+    if (t)
+      m(!0), h(!1), x.current = document.activeElement;
+    else if (v) {
+      h(!0);
+      const j = setTimeout(() => {
+        m(!1), h(!1), x.current && x.current.focus();
+      }, ae);
+      return () => clearTimeout(j);
+    }
+  }, [t]), oe(t && !i, () => {
+    e && e(!1);
+  }), re(c, t), /* @__PURE__ */ s.jsx(
+    ee,
+    {
+      ref: c,
+      className: `${te({ placement: r })} transition-opacity duration-200 ease-in-out ` + (t && !p ? "opacity-100" : "opacity-0 pointer-events-none"),
+      onOverlayClick: (j) => {
+        j.target === c.current && !a && e && e(!1);
+      },
+      placement: r,
+      children: /* @__PURE__ */ s.jsx(
+        "div",
+        {
+          className: `${ne({ size: n, placement: r })} transition-all duration-200 ease-in-out ` + (t && !p ? "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"),
+          role: "dialog",
+          ...l,
+          tabIndex: 0,
+          "aria-hidden": !t,
+          children: o
+        }
+      )
+    }
+  );
+}, he = Object.assign(se, {
+  Header: Q,
+  Body: O,
+  Footer: Z
+}), ie = 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
+    }
+  }
+), le = d(
+  ["fixed inset-0 z-40 duration-300"],
+  {
+    variants: {
+      open: {
+        true: "backdrop-blur-md bg-foreground/30",
+        false: "pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      open: !1
+    }
+  }
+), de = d("px-4 pt-4 pb-2"), ce = d("px-4 py-2"), ue = d("px-4 pt-2 pb-4"), fe = f(function({ className: e, ...n }, r) {
+  return /* @__PURE__ */ s.jsx(
+    "h2",
+    {
+      ref: r,
+      className: ["text-lg font-semibold text-foreground", e].filter(Boolean).join(" "),
+      ...n
+    }
+  );
+}), me = f(({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    ref: n,
+    className: de({ className: t }),
+    ...e
+  }
+)), xe = f(
+  ({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: n,
+      className: ce({ className: t }),
+      ...e
+    }
+  )
+), be = f(({ className: t, ...e }, n) => /* @__PURE__ */ s.jsx(
+  "div",
+  {
+    ref: n,
+    className: ue({ className: t }),
+    ...e
+  }
+)), ve = f(
+  ({ isOpen: t, children: e, className: n, onClose: r, ...o }, a) => {
+    b(() => {
+      const l = (x) => {
+        x.key === "Escape" && t && r();
+      };
+      return t && (document.addEventListener("keydown", l), document.body.style.overflow = "hidden"), () => {
+        document.removeEventListener("keydown", l), document.body.style.overflow = "unset";
+      };
+    }, [t, r]);
+    const i = () => {
+      r?.();
+    };
+    return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
+      /* @__PURE__ */ s.jsx(
+        "div",
+        {
+          className: le({ open: t }),
+          "aria-hidden": "true",
+          onClick: i
+        }
+      ),
+      /* @__PURE__ */ s.jsx(
+        "div",
+        {
+          ref: a,
+          className: u(
+            ie({
+              open: t
+            }),
+            n
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          ...o,
+          children: e
+        }
+      )
+    ] });
+  }
+), je = Object.assign(ve, {
+  Header: me,
+  Title: fe,
+  Body: xe,
+  Footer: be
+});
+export {
+  je as B,
+  ye as D,
+  ge as M,
+  he as a
+};