@dimasbaguspm/versaur 0.0.20 → 0.0.22

package/README.md

@@ -1,7 +1,21 @@
+
 # Versaur UI
 
-A modern React UI library built with TypeScript and Tailwind CSS, featuring tree-shakable
-components
+<p align="left">
+  <a href="https://www.npmjs.com/package/@dimasbaguspm/versaur" target="_blank" rel="noopener noreferrer">
+    <img src="https://img.shields.io/npm/v/%40dimasbaguspm%2Fversaur?style=flat-square&color=%23e07a5f" alt="NPM Version" />
+  </a>
+  <a href="https://www.npmjs.com/package/@dimasbaguspm/versaur" target="_blank" rel="noopener noreferrer">
+    <img src="https://img.shields.io/npm/dy/%40dimasbaguspm%2Fversaur?style=flat-square&color=%2381b29a" alt="NPM Downloads" />
+  </a>
+  <a href="https://www.npmjs.com/package/@dimasbaguspm/versaur" target="_blank" rel="noopener noreferrer">
+    <img src="https://img.shields.io/npm/last-update/%40dimasbaguspm%2Fversaur?style=flat-square&color=%2384a5c0" alt="NPM Last Update" />
+  </a>
+</p>
+
+A modern React UI library built with TypeScript and Tailwind CSS, featuring tree-shakable components
+
+Website: [versaur.dimasbaguspm.com](https://versaur.dimasbaguspm.com)
 
 
 ## Features
@@ -19,7 +33,9 @@ components
 ## Installation
 
 ```bash
-yarn install @dimasbaguspm/versaur
+npm install @dimasbaguspm/versaur
+yarn add @dimasbaguspm/versaur
+bun add @dimasbaguspm/versaur
 ```
 
 ## Usage
@@ -27,13 +43,13 @@ yarn install @dimasbaguspm/versaur
 ### Import all components
 
 ```tsx
-import { Button, Input, Card } from '@dimasbaguspm/versaur'
+import { Button, Input, Drawer } from '@dimasbaguspm/versaur'
 ```
 
 ### Tree-shakable imports
 
 ```tsx
-// Import only what you need
+// import only what you need
 import { Button } from '@dimasbaguspm/versaur/primitive'
 ```
 
@@ -47,7 +63,7 @@ Versaur provides an ESLint rule to enforce sub-path imports for optimal tree-sha
 1. In your FlatConfig file (e.g., `eslint.config.js`), import and spread the rule:
 
 ```js
-// eslint.config.js
+// eslint.config.{js|ts}
 import { versaurEnforceSubpathImport } from '@dimasbaguspm/versaur/enforce-subpath-import'
 
 export default [

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

@@ -0,0 +1,573 @@
+import { c, j as n, a as d } from "./index-DOdDlCoL.js";
+import y, { useState as b, useEffect as h, createContext as S, useContext as R, forwardRef as w, useRef as C, useCallback as T, useMemo as H } from "react";
+import z from "react-dom";
+function D() {
+  if (typeof window > "u") return !1;
+  const e = window.navigator.userAgent, o = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    e
+  ), t = /iPad|Android(?=.*Mobile)|Tablet/i.test(e), r = "ontouchstart" in window || navigator.maxTouchPoints > 0, a = window.innerWidth <= 1024;
+  return o || t || r && a;
+}
+function k() {
+  return typeof window < "u" && "navigator" in window && "virtualKeyboard" in navigator;
+}
+function F() {
+  const [e, o] = b(!1), [t, r] = b(0), [a, s] = b(0), [i, m] = b(!1), [p, x] = b(!1);
+  return h(() => {
+    if (!D()) {
+      m(!1);
+      return;
+    }
+    m(!0), x(k());
+  }, []), h(() => {
+    if (!i || !k())
+      return;
+    const u = navigator.virtualKeyboard, l = () => {
+      const { boundingRect: f } = u, v = f?.height || 0, g = f?.width || 0;
+      o(v > 0), r(v), s(g);
+    };
+    return l(), u.addEventListener("geometrychange", l), () => {
+      u.removeEventListener(
+        "geometrychange",
+        l
+      );
+    };
+  }, [i]), h(() => {
+    if (!i || k())
+      return;
+    const u = window.innerHeight;
+    let l;
+    const f = () => {
+      clearTimeout(l), l = setTimeout(() => {
+        const v = window.visualViewport?.height ?? window.innerHeight, g = u - v, V = g > 150;
+        o(V), r(V ? g : 0), s(V ? window.innerWidth : 0);
+      }, 100);
+    };
+    return "visualViewport" in window && window.visualViewport ? (window.visualViewport.addEventListener("resize", f), () => {
+      clearTimeout(l), window.visualViewport?.removeEventListener(
+        "resize",
+        f
+      );
+    }) : (window.addEventListener("resize", f), () => {
+      clearTimeout(l), window.removeEventListener("resize", f);
+    });
+  }, [i]), h(() => {
+    i || (o(!1), r(0), s(0));
+  }, [i]), {
+    isOpen: e,
+    height: t,
+    width: a,
+    isSupported: i,
+    usingNativeAPI: p
+  };
+}
+const E = S(null);
+function I() {
+  const e = R(E);
+  if (!e)
+    throw new Error(
+      "Modal components must be used within a ModalRoot component"
+    );
+  return e;
+}
+const P = c(
+  "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"
+    }
+  }
+), L = c(
+  [
+    "absolute z-61 bg-white rounded-lg shadow-xl",
+    "flex flex-col",
+    "outline-none",
+    "transition-all duration-200 ease-in-out"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-[20rem] max-w-[90%]",
+        // 20rem, 320px
+        md: "w-[28rem] max-w-[90%]",
+        // 28rem, 448px
+        lg: "w-[36rem] max-w-[90%]",
+        // 36rem, 576px
+        "fit-content": "w-fit max-w-[90%]"
+        // 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
+    }
+  }
+), A = w(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      ref: t,
+      className: d("px-6 pt-6 pb-2 text-lg font-semibold", e),
+      ...o
+    }
+  )
+), K = w(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      ref: t,
+      className: d("px-6 py-4  flex justify-end gap-2", e),
+      ...o
+    }
+  )
+), W = w(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx("div", { ref: t, className: d("px-6 py-2", e), ...o })
+), O = w(
+  (e, o) => {
+    const { isOpen: t, placement: r, onClose: a } = I();
+    return /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        ref: o,
+        role: "presentation",
+        tabIndex: -1,
+        "aria-modal": "true",
+        onClick: a,
+        className: d(
+          P({ placement: r }),
+          t ? "opacity-100" : "opacity-0 pointer-events-none"
+        ),
+        ...e
+      }
+    );
+  }
+);
+function B(e, o, t) {
+  const r = C(null);
+  return h(() => {
+    r.current && r.current.focus();
+  }, []), h(() => {
+    const a = (s) => {
+      s.key === "Escape" && e && r.current && r.current.contains(document.activeElement) && !t && o();
+    };
+    return e && (document.addEventListener("keydown", a), document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", a), document.body.style.overflow = "unset";
+    };
+  }, [e, o, t, r]), r;
+}
+const N = ({
+  container: e,
+  children: o
+}) => {
+  if (typeof window > "u" || typeof document > "u")
+    return /* @__PURE__ */ n.jsx(n.Fragment, { children: o });
+  const t = e ?? document.body;
+  return t ? z.createPortal(o, t) : /* @__PURE__ */ n.jsx(n.Fragment, { children: o });
+}, _ = ({
+  isOpen: e,
+  onClose: o,
+  size: t = "md",
+  placement: r = "center",
+  children: a,
+  container: s,
+  ...i
+}) => {
+  const m = {
+    isOpen: e,
+    onClose: o,
+    size: t,
+    placement: r
+  }, p = B(e, o);
+  return /* @__PURE__ */ n.jsx(N, { container: s, children: /* @__PURE__ */ n.jsx(E.Provider, { value: m, children: /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      className: d(
+        "fixed z-50 inset-0 pointer-events-none",
+        e && "pointer-events-auto"
+      ),
+      children: [
+        /* @__PURE__ */ n.jsx(O, {}),
+        /* @__PURE__ */ n.jsx(
+          "div",
+          {
+            ref: p,
+            className: d(L({ size: t, placement: r, isOpen: e })),
+            role: "dialog",
+            tabIndex: -1,
+            "aria-hidden": !e,
+            ...i,
+            children: a
+          }
+        )
+      ]
+    }
+  ) }) });
+}, he = Object.assign(_, {
+  Header: A,
+  Body: W,
+  Footer: K
+}), M = S(null);
+function j() {
+  const e = R(M);
+  if (!e)
+    throw new Error(
+      "Drawer components must be used within a DrawerRoot component"
+    );
+  return e;
+}
+const $ = c(
+  "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"
+    }
+  }
+), G = c("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"
+  }
+}), U = c("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
+  }
+}), q = c("flex-1 overflow-y-auto px-6 py-4", {
+  variants: {
+    variant: {
+      default: "bg-white",
+      glass: "bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), J = c("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
+  }
+}), Q = y.forwardRef(({ className: e, ...o }, t) => {
+  const { isOpen: r, onClose: a } = j(), s = () => {
+    a();
+  };
+  return /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      ref: t,
+      onClick: s,
+      className: d(
+        $({
+          state: r ? "open" : "closed"
+        }),
+        e
+      ),
+      ...o
+    }
+  );
+}), X = y.forwardRef(
+  ({ children: e, className: o, hasTab: t, ...r }, a) => {
+    const { variant: s } = j();
+    return /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        ref: a,
+        className: d(
+          U({ variant: s, tab: !!t }),
+          o
+        ),
+        ...r,
+        children: e
+      }
+    );
+  }
+), Y = w(
+  ({ children: e, className: o, ...t }, r) => /* @__PURE__ */ n.jsx("div", { ref: r, className: d("[&>div]:px-6", o), ...t, children: e })
+), Z = y.forwardRef(
+  ({ children: e, className: o, ...t }, r) => {
+    const { variant: a } = j();
+    return /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        ref: r,
+        className: d(q({ variant: a }), o),
+        ...t,
+        children: e
+      }
+    );
+  }
+), ee = y.forwardRef(
+  ({ children: e, className: o, responsiveFlex: t = !0, ...r }, a) => {
+    const { variant: s } = j();
+    return /* @__PURE__ */ n.jsx(
+      "div",
+      {
+        ref: a,
+        className: d(
+          J({ variant: s, responsiveFlex: t }),
+          o
+        ),
+        ...r,
+        children: e
+      }
+    );
+  }
+), te = ({
+  container: e,
+  children: o,
+  isOpen: t,
+  onClose: r,
+  position: a = "right",
+  size: s = "md",
+  variant: i = "default",
+  transitionType: m = "slide",
+  className: p,
+  ...x
+}) => {
+  const u = T(() => {
+    r(!1);
+  }, [r]), l = {
+    isOpen: t,
+    onClose: u,
+    position: a,
+    size: s,
+    variant: i,
+    transitionType: m
+  }, f = B(t, u);
+  return /* @__PURE__ */ n.jsx(N, { container: e, children: /* @__PURE__ */ n.jsx(M.Provider, { value: l, children: /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      className: d(
+        "fixed z-50 inset-0 pointer-events-none",
+        t && "pointer-events-auto"
+      ),
+      children: [
+        /* @__PURE__ */ n.jsx(Q, {}),
+        /* @__PURE__ */ n.jsx(
+          "div",
+          {
+            ref: f,
+            tabIndex: -1,
+            role: t ? "dialog" : void 0,
+            "aria-modal": t ? "true" : void 0,
+            className: d(
+              G({
+                position: a,
+                size: s,
+                variant: i,
+                transitionType: m
+              }),
+              m === "slide" ? [
+                !t && a === "left" && "-translate-x-full",
+                !t && a === "right" && "translate-x-full"
+              ] : [
+                "left-0 right-0 top-0 bottom-0",
+                t ? "opacity-100" : "opacity-0 pointer-events-none"
+              ],
+              p
+            ),
+            ...x,
+            children: t && o
+          }
+        )
+      ]
+    }
+  ) }) });
+}, be = Object.assign(te, {
+  Header: X,
+  Tab: Y,
+  Body: Z,
+  Footer: ee
+}), oe = c(
+  [
+    "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",
+    "overflow-hidden"
+    // Ensure content doesn't overflow when keyboard adjusts height
+  ],
+  {
+    variants: {
+      open: {
+        true: "translate-y-0",
+        false: "translate-y-full"
+      }
+    },
+    defaultVariants: {
+      open: !1
+    }
+  }
+), re = c(
+  ["fixed inset-0 z-40 duration-300"],
+  {
+    variants: {
+      open: {
+        true: "backdrop-blur-md bg-foreground/30",
+        false: "pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      open: !1
+    }
+  }
+), ne = c("px-4 pt-4 pb-2 flex-shrink-0"), ae = c([
+  "px-4 py-2 flex-1 overflow-y-auto",
+  "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border"
+]), se = c("px-4 pt-2 pb-4 flex-shrink-0"), ie = w(function({ className: o, ...t }, r) {
+  return /* @__PURE__ */ n.jsx(
+    "h2",
+    {
+      ref: r,
+      className: ["text-lg font-semibold text-foreground", o].filter(Boolean).join(" "),
+      ...t
+    }
+  );
+}), de = w(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+  "div",
+  {
+    ref: t,
+    className: ne({ className: e }),
+    ...o
+  }
+)), le = w(
+  ({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+    "div",
+    {
+      ref: t,
+      className: ae({ className: e }),
+      ...o
+    }
+  )
+), ce = w(({ className: e, ...o }, t) => /* @__PURE__ */ n.jsx(
+  "div",
+  {
+    ref: t,
+    className: se({ className: e }),
+    ...o
+  }
+)), ue = (...e) => (o) => {
+  e.forEach((t) => {
+    typeof t == "function" ? t(o) : t && "current" in t && (t.current = o);
+  });
+}, fe = w(
+  ({ isOpen: e, children: o, className: t, onClose: r, container: a, ...s }, i) => {
+    const m = B(e, r), {
+      isOpen: p,
+      height: x,
+      isSupported: u
+    } = F(), l = H(() => !e || !u || !p ? {} : {
+      // Adjust bottom position to sit above the virtual keyboard
+      bottom: `${x}px`,
+      // Reduce max height to account for keyboard
+      maxHeight: `calc(90dvh - ${x}px)`,
+      // Ensure smooth transition
+      transition: "bottom 0.2s ease-in-out, max-height 0.2s ease-in-out"
+    }, [e, u, p, x]), f = () => {
+      r?.();
+    };
+    return /* @__PURE__ */ n.jsxs(N, { container: a, children: [
+      /* @__PURE__ */ n.jsx(
+        "div",
+        {
+          className: re({ open: e }),
+          "aria-hidden": "true",
+          onClick: f
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        "div",
+        {
+          ref: ue(i, m),
+          className: d(
+            oe({
+              open: e
+            }),
+            "flex flex-col",
+            // Add flex layout for proper header/body/footer arrangement
+            t
+          ),
+          style: l,
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          ...s,
+          children: o
+        }
+      )
+    ] });
+  }
+), ve = Object.assign(fe, {
+  Header: de,
+  Title: ie,
+  Body: le,
+  Footer: ce
+});
+export {
+  ve as B,
+  be as D,
+  he as M
+};

package/dist/js/{bottom-sheet-input-C7cYfBaK.js → bottom-sheet-input-nVi11sIJ.js}

@@ -1,10 +1,10 @@
 import { c as j, j as e, a as p } from "./index-DOdDlCoL.js";
 import x, { createContext as S, useContext as V, useRef as $, forwardRef as I, useState as O, useId as D, useEffect as X, useMemo as P } from "react";
 import { Check as F, Calendar as Y, SearchIcon as Z, Clock as ee, Banknote as re, MailIcon as te } from "lucide-react";
-import { I as z } from "./image-rectangle-DH7v2xvp.js";
+import { I as z } from "./image-rectangle-C6cgL8R9.js";
 import "./snackbar-DH8jCh2V.js";
 import "./text-CRsIInRA.js";
-import { M, D as E, B as R } from "./bottom-sheet-DbtyWwsy.js";
+import { M, D as E, B as R } from "./bottom-sheet-CCDa5VGo.js";
 const oe = j("space-y-2", {
   variants: {
     direction: {

package/dist/js/forms/index.js

@@ -1,4 +1,4 @@
-import { B as a, C as n, b as p, a as u, D as s, k as I, E as i, M as l, P as S, R as c, d as r, c as g, S as h, e as o, j as m, i as M, h as b, f as k, T as x, g as C } from "../bottom-sheet-input-C7cYfBaK.js";
+import { B as a, C as n, b as p, a as u, D as s, k as I, E as i, M as l, P as S, R as c, d as r, c as g, S as h, e as o, j as m, i as M, h as b, f as k, T as x, g as C } from "../bottom-sheet-input-nVi11sIJ.js";
 export {
   a as BottomSheetInput,
   n as CheckboxInput,