@dimasbaguspm/versaur 0.0.41 → 0.0.43

package/dist/js/{bottom-sheet-Da41OlDM.js → bottom-sheet-COYI-CL2.js}

@@ -1,6 +1,6 @@
 import { c as f, j as r, a as l } from "./index-DOdDlCoL.js";
 import j, { useState as p, useEffect as x, createContext as V, useContext as B, forwardRef as u, useRef as z, useMemo as M } from "react";
-import { O as S, n as P, k as N, H as D } from "./image-rectangle-S0pOfTm5.js";
+import { O as S, n as P, k as N, H as D } from "./image-rectangle-en-PQWib.js";
 import { XIcon as R } from "lucide-react";
 import "./snackbar-DH8jCh2V.js";
 function F() {

package/dist/js/{bottom-sheet-input-BB3FZtpr.js → bottom-sheet-input-BmkctBPw.js}

@@ -1,9 +1,9 @@
 import { c as v, j as e, a as m } from "./index-DOdDlCoL.js";
 import x, { createContext as N, useContext as z, useId as F, forwardRef as j, useRef as B, useState as R, useEffect as U, useMemo as E } from "react";
-import { I as C } from "./image-rectangle-S0pOfTm5.js";
+import { I as C } from "./image-rectangle-en-PQWib.js";
 import { Calendar as X, SearchIcon as Y, Clock as Z, Banknote as ee, MailIcon as re, Check as P } from "lucide-react";
 import "./snackbar-DH8jCh2V.js";
-import { M as O, D as M, B as V } from "./bottom-sheet-Da41OlDM.js";
+import { M as O, D as M, B as V } from "./bottom-sheet-COYI-CL2.js";
 const te = v("space-y-2", {
   variants: {
     direction: {
@@ -172,7 +172,7 @@ const nr = Object.assign(H, {
     );
   return r;
 }, ie = v(
-  "inline-flex items-center bg-white font-regular transition-colors duration-200 cursor-pointer border border-border",
+  "inline-flex items-center bg-white transition-colors duration-200 cursor-pointer border border-border",
   {
     variants: {
       variant: {
@@ -215,9 +215,9 @@ const nr = Object.assign(H, {
         rounded: "rounded-lg"
       },
       size: {
-        sm: "h-7 px-3 text-sm",
-        md: "h-9 px-4 text-base",
-        lg: "h-10 px-5 text-lg"
+        sm: "h-7 px-3 text-sm min-w-[2.25rem]",
+        md: "h-9 px-4 text-sm min-w-[2.5rem]",
+        lg: "h-10 px-8 text-lg min-w-[2.75rem]"
       }
     },
     defaultVariants: {
@@ -312,7 +312,7 @@ const nr = Object.assign(H, {
     );
   return r;
 }, ue = v(
-  "inline-flex items-center bg-white font-regular transition-colors duration-200 cursor-pointer border border-border",
+  "inline-flex items-center bg-white transition-colors duration-200 cursor-pointer border border-border",
   {
     variants: {
       variant: {
@@ -359,9 +359,9 @@ const nr = Object.assign(H, {
         rounded: "rounded-lg"
       },
       size: {
-        sm: "px-3 py-1 text-xs min-h-[32px]",
-        md: "px-4 py-2 text-sm min-h-[40px]",
-        lg: "px-5 py-2.5 text-base min-h-[48px]"
+        sm: "h-7 px-3 text-sm min-w-[2.25rem]",
+        md: "h-9 px-4 text-sm min-w-[2.5rem]",
+        lg: "h-10 px-8 text-lg min-w-[2.75rem]"
       }
     }
   }

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-BB3FZtpr.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-BmkctBPw.js";
 export {
   a as BottomSheetInput,
   n as CheckboxInput,

package/dist/js/{image-rectangle-S0pOfTm5.js → image-rectangle-en-PQWib.js}

@@ -146,8 +146,8 @@ const AccordionContext = createContext(
     isCapitalize: i = !1,
     hasMargin: s = !1,
     align: o = "left",
-    italic: l = !1,
-    clamp: a = "none",
+    italic: a = !1,
+    clamp: l = "none",
     ellipsis: u = !1,
     className: c,
     children: f,
@@ -165,8 +165,8 @@ const AccordionContext = createContext(
             isCapitalize: i,
             hasMargin: s,
             align: o,
-            italic: l,
-            clamp: a,
+            italic: a,
+            clamp: l,
             ellipsis: u,
             level: e
           }),
@@ -209,11 +209,11 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     size: "md",
     color: "primary"
   }
-}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: i = "md", className: s, ...o }, l) {
+}), Icon = React__default.forwardRef(function({ as: t, color: r = "primary", size: i = "md", className: s, ...o }, a) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     t,
     {
-      ref: l,
+      ref: a,
       className: iconVariants({ color: r, size: i, className: s }),
       ...o
     }
@@ -261,8 +261,8 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     isDefaultOpen: i = !1,
     disabled: s = !1,
     hasMargin: o,
-    className: l,
-    children: a,
+    className: a,
+    children: l,
     ...u
   }, c) {
     const [f, n] = useState(i), d = () => {
@@ -278,7 +278,7 @@ const iconVariants = cva("inline-flex items-center justify-center", {
         ref: c,
         className: cn(
           accordionVariants({ disabled: s }),
-          l,
+          a,
           o && "mb-4"
         ),
         ...u,
@@ -307,7 +307,7 @@ const iconVariants = cva("inline-flex items-center justify-center", {
                 "overflow-hidden transition-all duration-300",
                 f ? "max-h-screen opacity-100" : "max-h-0 opacity-0"
               ),
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 pt-2", children: a })
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 pt-2", children: l })
             }
           )
         ]
@@ -463,10 +463,10 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     className: i,
     children: s,
     ...o
-  }, l) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      ref: l,
+      ref: a,
       role: "alert",
       className: cn(alertVariants({ variant: e, color: t }), i),
       ...o,
@@ -543,16 +543,16 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     fontSize: i = "base",
     fontWeight: s = "medium",
     quiet: o = !1,
-    ...l
-  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ...a
+  }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "a",
     {
-      ref: a,
+      ref: l,
       className: cn(
         anchorVariants({ color: r, fontSize: i, fontWeight: s, quiet: o }),
         t
       ),
-      ...l,
+      ...a,
       children: e
     }
   )
@@ -633,8 +633,8 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     isCapitalize: i = !1,
     align: s = "left",
     italic: o = !1,
-    clamp: l = "none",
-    ellipsis: a = !1,
+    clamp: a = "none",
+    ellipsis: l = !1,
     fontSize: u,
     fontWeight: c,
     className: f,
@@ -663,8 +663,8 @@ const iconVariants = cva("inline-flex items-center justify-center", {
             isCapitalize: i,
             align: s,
             italic: o,
-            clamp: l,
-            ellipsis: a,
+            clamp: a,
+            ellipsis: l,
             // @ts-expect-error - `as` is not a valid variant
             as: y
           }),
@@ -678,11 +678,11 @@ const iconVariants = cva("inline-flex items-center justify-center", {
     );
   }
 ), Attribute = forwardRef(
-  function({ title: t, children: r, className: i, hasMargin: s, ...o }, l) {
+  function({ title: t, children: r, className: i, hasMargin: s, ...o }, a) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        ref: l,
+        ref: a,
         className: cn("space-y-1", i, s && "mb-4"),
         ...o,
         children: [
@@ -763,17 +763,17 @@ function getGridCols(e = 4) {
       return "grid-cols-4";
   }
 }
-const AttributeListItem = forwardRef(function({ children: t, className: r, span: i = 1, title: s, ...o }, l) {
-  const a = getColSpan(i);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: l, className: cn(a, r), ...o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: s, children: t }) });
+const AttributeListItem = forwardRef(function({ children: t, className: r, span: i = 1, title: s, ...o }, a) {
+  const l = getColSpan(i);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: a, className: cn(l, r), ...o, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: s, children: t }) });
 }), AttributeListRoot = forwardRef(
   function({ children: t, className: r, columns: i = 4, ...s }, o) {
-    const l = getGridCols(i);
+    const a = getGridCols(i);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "ul",
       {
         ref: o,
-        className: cn("grid gap-4", l, r),
+        className: cn("grid gap-4", a, r),
         ...s,
         children: t
       }
@@ -831,10 +831,10 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     className: i,
     children: s,
     ...o
-  }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
-      ref: l,
+      ref: a,
       className: cn(avatarVariants({ variant: e, size: t, shape: r }), i),
       ...o,
       children: s
@@ -842,17 +842,17 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
   )
 ), AvatarImage = forwardRef(
   ({ src: e, alt: t, className: r, onError: i, ...s }, o) => {
-    const [l, a] = useState(!1);
+    const [a, l] = useState(!1);
     useEffect(() => {
-      a(!1);
+      l(!1);
     }, [e]);
     const u = useCallback(
       (c) => {
-        a(!0), i?.(c);
+        l(!0), i?.(c);
       },
       [i]
     );
-    return l ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+    return a ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "img",
       {
         ref: o,
@@ -1064,11 +1064,11 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: i = "md",
     iconLeft: s,
     iconRight: o,
-    className: l,
-    children: a,
+    className: a,
+    children: l,
     ...u
   }, c) => {
-    const d = !(a != null && a !== "") && !!(s || o);
+    const d = !(l != null && l !== "") && !!(s || o);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "span",
       {
@@ -1081,7 +1081,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
             size: i,
             iconOnly: d
           }),
-          l
+          a
         ),
         ...u,
         children: d ? (
@@ -1091,7 +1091,7 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
           // Normal mode: display icon(s) and text
           /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             s,
-            a,
+            l,
             o
           ] })
         )
@@ -1203,8 +1203,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
     size: i = "md",
     disabled: s = !1,
     type: o = "button",
-    children: l,
-    ...a
+    children: a,
+    ...l
   }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
@@ -1215,8 +1215,8 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         disabled: s,
         "aria-disabled": s,
         inert: s ? !0 : void 0,
-        ...a,
-        children: l
+        ...l,
+        children: a
       }
     );
   }
@@ -1278,20 +1278,20 @@ function isTriggerVisible(e, t) {
   return !0;
 }
 function useMenuPosition(e, t, r, i = "bottom-start", s) {
-  const [o, l] = useState({ isReady: !1 }), a = useCallback(() => {
+  const [o, a] = useState({ isReady: !1 }), l = useCallback(() => {
     if (!e || !t.current) {
-      l({ isReady: !1 });
+      a({ isReady: !1 });
       return;
     }
     if (!r.current) {
       const v = setTimeout(() => {
-        l({ isReady: !1 });
+        a({ isReady: !1 });
       }, 0);
       return () => clearTimeout(v);
     }
     const u = t.current, c = r.current, f = getScrollableAncestors(u);
     if (!isTriggerVisible(u, f)) {
-      l({ isReady: !1 });
+      a({ isReady: !1 });
       return;
     }
     const n = u.getBoundingClientRect(), d = window.innerWidth, h = window.innerHeight;
@@ -1413,17 +1413,17 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
         p.endsWith("start") ? g.left = (g.left || 0) - j : g.right = (g.right || 0) + j;
       }
     }
-    g.isReady = !0, l(g);
+    g.isReady = !0, a(g);
   }, [e, i, t, r, s]);
   return useEffect(() => {
-    a();
-  }, [a]), useEffect(() => {
+    l();
+  }, [l]), useEffect(() => {
     if (!e || !t.current) return;
     const u = t.current, c = getScrollableAncestors(u);
     let f = !1;
     const n = () => {
       f || (requestAnimationFrame(() => {
-        a(), f = !1;
+        l(), f = !1;
       }), f = !0);
     };
     return c.forEach((d) => {
@@ -1433,7 +1433,7 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
         d === document.documentElement ? (window.removeEventListener("scroll", n), window.removeEventListener("resize", n)) : d.removeEventListener("scroll", n);
       });
     };
-  }, [e, a, t]), o;
+  }, [e, l, t]), o;
 }
 const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider, useMenuProvider = () => {
   const e = useContext(MenuContext);
@@ -1444,8 +1444,8 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
   ({ children: e }, t) => /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: t, className: "flex flex-col gap-1", children: e })
 ), MenuItem = forwardRef(
   ({ children: e, disabled: t, onClick: r, active: i, ...s }, o) => {
-    const { preserve: l, onClose: a } = useMenuProvider(), u = (c) => {
-      r?.(c), l || a();
+    const { preserve: a, onClose: l } = useMenuProvider(), u = (c) => {
+      r?.(c), a || l();
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: o, ...s, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Button,
@@ -1476,8 +1476,8 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
   content: i,
   children: s,
   placement: o = "auto",
-  container: l,
-  preserve: a
+  container: a,
+  preserve: l
 }) => {
   const u = useRef(null), c = useRef(null), f = useId();
   useMenuOutsideClick(e, c, u, t);
@@ -1486,7 +1486,7 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
     u,
     c,
     o,
-    l || null
+    a || null
   ), d = {
     ...n,
     position: n.position || "absolute",
@@ -1507,7 +1507,7 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     MenuProvider,
     {
-      value: { onClose: t, preserve: !!a },
+      value: { onClose: t, preserve: !!l },
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-fit", children: [
         cloneElement(s, {
           // @ts-expect-error: ref is valid for button or forwardRef components
@@ -1548,8 +1548,8 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
       onOpenChange: i,
       onClick: s,
       placement: o,
-      container: l,
-      preserve: a,
+      container: a,
+      preserve: l,
       label: u,
       ...c
     } = e ?? {}, [f, n] = useState(!1);
@@ -1567,8 +1567,8 @@ const MenuContext = createContext(void 0), MenuProvider = MenuContext.Provider,
         isOpen: f,
         onOutsideClick: d,
         placement: o,
-        container: l,
-        preserve: a,
+        container: a,
+        preserve: l,
         content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: r }),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { ref: t, onClick: h, ...c, children: u })
       }
@@ -1672,8 +1672,8 @@ const buttonIconVariants = cva(
     size: i = "md",
     shape: s = "rounded",
     disabled: o = !1,
-    as: l,
-    "aria-label": a,
+    as: a,
+    "aria-label": l,
     ...u
   }, c) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1691,13 +1691,13 @@ const buttonIconVariants = cva(
         ),
         disabled: o,
         "aria-disabled": o,
-        "aria-label": a,
+        "aria-label": l,
         inert: o ? !0 : void 0,
         ...u,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
           {
-            as: l,
+            as: a,
             size: "sm",
             color: getIconColorFromVariant(r)
           }
@@ -1712,8 +1712,8 @@ const buttonIconVariants = cva(
       children: i,
       onOpenChange: s,
       onClick: o,
-      placement: l,
-      container: a,
+      placement: a,
+      container: l,
       preserve: u,
       ...c
     } = e ?? {}, [f, n] = useState(!1);
@@ -1730,8 +1730,8 @@ const buttonIconVariants = cva(
       {
         isOpen: f,
         onOutsideClick: d,
-        placement: l,
-        container: a,
+        placement: a,
+        container: l,
         preserve: u,
         content: /* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { children: i }),
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { ref: t, as: r, onClick: h, ...c })
@@ -1808,7 +1808,7 @@ const buttonIconVariants = cva(
   }
 );
 function useFloatingPosition(e, t = "1rem") {
-  const r = useRef(null), [i, s] = useState({}), [o, l] = useState("fixed bottom-4 right-4"), a = useCallback(() => {
+  const r = useRef(null), [i, s] = useState({}), [o, a] = useState("fixed bottom-4 right-4"), l = useCallback(() => {
     const c = r.current;
     if (!c) return;
     const n = c.getBoundingClientRect().height > window.innerHeight;
@@ -1822,21 +1822,21 @@ function useFloatingPosition(e, t = "1rem") {
       position: "fixed",
       bottom: t,
       zIndex: 50
-    }, h = `fixed bottom-4 ${e}-4`), s(d), l(h);
+    }, h = `fixed bottom-4 ${e}-4`), s(d), a(h);
   }, [e, t]);
   return useEffect(() => {
-    a();
+    l();
     const c = r.current;
-    return c && c.addEventListener("scroll", a), window.addEventListener("resize", a), () => {
-      c && c.removeEventListener("scroll", a), window.removeEventListener("resize", a);
+    return c && c.addEventListener("scroll", l), window.addEventListener("resize", l), () => {
+      c && c.removeEventListener("scroll", l), window.removeEventListener("resize", l);
     };
-  }, [a]), useEffect(() => {
-    r.current && a();
-  }, [e, t, a]), [useCallback(
+  }, [l]), useEffect(() => {
+    r.current && l();
+  }, [e, t, l]), [useCallback(
     (c) => {
-      r.current = c, c && a();
+      r.current = c, c && l();
     },
-    [a]
+    [l]
   ), i, o];
 }
 const ButtonFloat = forwardRef(
@@ -1846,8 +1846,8 @@ const ButtonFloat = forwardRef(
     size: i = "md",
     side: s = "right",
     offset: o = "1rem",
-    ...l
-  }, a) {
+    ...a
+  }, l) {
     const [u, c, f] = useFloatingPosition(
       s,
       o
@@ -1857,8 +1857,8 @@ const ButtonFloat = forwardRef(
     }, []), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: u, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: a,
-        type: l.type || "button",
+        ref: l,
+        type: a.type || "button",
         className: cn(
           buttonFloatVariants({ variant: r, size: i }),
           f,
@@ -1866,7 +1866,7 @@ const ButtonFloat = forwardRef(
           t
         ),
         style: c,
-        ...l
+        ...a
       }
     ) });
   }
@@ -1988,7 +1988,7 @@ const BUTTONS = [
     className: i,
     "aria-label": s
   }, o) => {
-    const { input: l, inputRef: a, handleButton: u, handleInput: c } = useCalculator({
+    const { input: a, inputRef: l, handleButton: u, handleInput: c } = useCalculator({
       initialValue: e,
       disabled: r,
       onChange: t
@@ -2004,9 +2004,9 @@ const BUTTONS = [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
-              ref: a,
+              ref: l,
               className: "w-full mb-3 px-3 py-2 rounded border border-[var(--color-neutral)] bg-[var(--color-neutral-soft)] text-right text-xl font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]",
-              value: l,
+              value: a,
               onChange: c,
               disabled: r,
               inputMode: "decimal",
@@ -2042,7 +2042,7 @@ const BUTTONS = [
 );
 Calculator.displayName = "Calculator";
 const cardVariants = cva(
-  "flex justify-between transition-colors duration-200 cursor-pointer w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50",
+  "flex justify-between transition-colors duration-200 w-full",
   {
     variants: {
       size: {
@@ -2060,12 +2060,17 @@ const cardVariants = cva(
       bordered: {
         true: "border border-border",
         false: ""
+      },
+      as: {
+        button: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-light hover:bg-gray-50 cursor-pointer",
+        div: ""
       }
     },
     defaultVariants: {
       size: "md",
       shape: "rounded",
-      bordered: !1
+      bordered: !1,
+      as: "button"
     }
   }
 ), CardList = forwardRef(
@@ -2082,7 +2087,7 @@ const cardVariants = cva(
     "li",
     {
       ref: t,
-      className: "flex items-center min-w-0 flex-shrink-0 after:content-[''] after:inline-block after:mx-1.5 sm:after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden after:flex-shrink-0",
+      className: "flex items-center min-w-0 flex-shrink-0 after:content-[''] after:inline-block after:mx-1.5 @sm/card:after:mx-2 after:w-1 after:h-1 after:rounded-full after:bg-ghost last:after:hidden after:flex-shrink-0",
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "gray", ellipsis: !0, clamp: 1, children: e })
     }
   )
@@ -2094,46 +2099,47 @@ const cardVariants = cva(
     title: i,
     subtitle: s,
     badge: o,
-    actions: l,
     supplementaryInfo: a,
-    bordered: u = !1,
-    as: c = "button",
-    className: f,
-    ...n
-  }, d) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    c,
+    bordered: l = !1,
+    as: u = "button",
+    className: c,
+    ...f
+  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    u,
     {
-      ref: d,
-      className: cn(cardVariants({ size: e, shape: t, bordered: u }), f),
-      ...n,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 sm:gap-4 w-full", children: [
+      ref: n,
+      className: cn(
+        cardVariants({ size: e, shape: t, bordered: l, as: u }),
+        c,
+        "@container/card"
+      ),
+      ...f,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-3 @sm/card:gap-4 w-full", children: [
         r && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: r }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-full min-w-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                Text,
-                {
-                  as: "h3",
-                  fontSize: "base",
-                  fontWeight: "semibold",
-                  className: "break-words leading-tight",
-                  children: i
-                }
-              ),
-              s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: typeof s == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: s }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 overflow-hidden", children: s }) })
-            ] }),
-            l && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 ml-2 -mt-1", children: l })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:justify-between sm:items-center", children: [
-            o && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 order-1 sm:order-none overflow-hidden", children: o }),
-            a && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 order-2 sm:order-none sm:ml-auto", children: typeof a == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Text,
+              {
+                as: "h3",
+                fontSize: "base",
+                fontWeight: "semibold",
+                className: "break-words leading-tight",
+                children: i
+              }
+            ),
+            s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1", children: typeof s == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: s }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 overflow-hidden", children: s }) })
+          ] }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 @sm/card:flex-row @sm/card:justify-between @sm/card:items-center", children: [
+            o && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "order-1 @sm/card:order-none overflow-hidden", children: o }),
+            a && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 order-2 @sm/card:order-none @sm/card:ml-auto", children: typeof a == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               Text,
               {
                 as: "p",
                 fontSize: "sm",
                 color: "gray",
                 className: "truncate",
+                align: "right",
                 children: a
               }
             ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "overflow-hidden", children: a }) })
@@ -2190,19 +2196,19 @@ const cardVariants = cva(
     size: i = "md",
     disabled: s = !1,
     children: o,
-    ...l
-  }, a) {
+    ...a
+  }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
-        ref: a,
+        ref: l,
         type: "button",
         className: cn(filterChipVariants({ variant: r, size: i }), t),
         disabled: s,
         "aria-disabled": s,
         "aria-label": `${o}, removable`,
         inert: s ? !0 : void 0,
-        ...l,
+        ...a,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-shrink-0", children: o }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: XIcon, color: "inherit", size: i === "lg" ? "md" : "sm" })
@@ -2251,15 +2257,15 @@ const cardVariants = cva(
 ), noResultsHeaderVariants = cva(
   "flex flex-row items-center gap-3 mb-2"
 ), NoResults = React__default.forwardRef(
-  function e({ icon: t, title: r, subtitle: i, action: s, className: o, hasGrayBackground: l, ...a }, u) {
+  function e({ icon: t, title: r, subtitle: i, action: s, className: o, hasGrayBackground: a, ...l }, u) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "section",
       {
         ref: u,
-        className: cn(noResultsVariants({ hasGrayBackground: l }), o),
+        className: cn(noResultsVariants({ hasGrayBackground: a }), o),
         role: "status",
         "aria-label": "No results found",
-        ...a,
+        ...l,
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: noResultsHeaderVariants(), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: t, size: "lg", color: "ghost", "aria-hidden": "true" }),
@@ -2404,14 +2410,14 @@ const getTableColumnClass = (e) => {
     );
   }
 ), TableColumn = forwardRef(
-  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...o }, l) => {
-    const a = e === "th" ? "columnheader" : "cell";
+  ({ as: e = "td", span: t, align: r = "left", children: i, className: s, ...o }, a) => {
+    const l = e === "th" ? "columnheader" : "cell";
     let u = "text-left";
     return r === "center" ? u = "text-center" : r === "right" && (u = "text-right"), /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        ref: l,
-        role: a,
+        ref: a,
+        role: l,
         className: cn(
           "px-4 py-2",
           "[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border",
@@ -2522,9 +2528,9 @@ const getTableColumnClass = (e) => {
   )
 );
 function useImage({ src: e }) {
-  const [t, r] = useState(!1), [i, s] = useState(!1), o = useRef(!1), l = () => {
+  const [t, r] = useState(!1), [i, s] = useState(!1), o = useRef(!1), a = () => {
     r(!0);
-  }, a = () => {
+  }, l = () => {
     s(!0);
   };
   return useEffect(() => {
@@ -2540,8 +2546,8 @@ function useImage({ src: e }) {
   }, [e]), {
     loaded: t,
     errored: i,
-    handleLoad: l,
-    handleError: a
+    handleLoad: a,
+    handleError: l
   };
 }
 const imageVariants = cva("block object-cover", {
@@ -2619,12 +2625,12 @@ function BaseImageFallback({
   className: i,
   style: s,
   shape: o,
-  size: l
+  size: a
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: imageAtomVariants({ shape: o, size: l, className: i }),
+      className: imageAtomVariants({ shape: o, size: a, className: i }),
       style: { width: t, height: r, ...s },
       "aria-label": e,
       role: "img",
@@ -2650,8 +2656,8 @@ const BaseImage = forwardRef(
     onError: i,
     width: s,
     height: o,
-    loading: l = "lazy",
-    position: a = "cover",
+    loading: a = "lazy",
+    position: l = "cover",
     size: u = "auto",
     shape: c,
     className: f,
@@ -2683,10 +2689,10 @@ const BaseImage = forwardRef(
         alt: t,
         width: R,
         height: E,
-        loading: l,
+        loading: a,
         className: cn(
           imageVariants({
-            position: a,
+            position: l,
             size: u,
             shape: c
           }),

package/dist/js/index.js

@@ -1,11 +1,11 @@
 import { L as t, P as s, S as r } from "./skeleton-BNZyaRjo.js";
-import { A as n, a as u, B as p, b as i, F as l, f as I, P as c, c as S, d as m, e as B, S as g, T as d } from "./top-bar-DYbS1NgD.js";
-import { B as T, C as x, b as f, a as h, D as P, k as C, E as M, M as A, P as k, R as F, d as L, c as D, S as H, e as R, j as w, i as G, h as j, f as q, T as v, g as y } from "./bottom-sheet-input-BB3FZtpr.js";
-import { B as N, D as z, M as J } from "./bottom-sheet-Da41OlDM.js";
-import { A as O, a as Q, b as U, c as V, d as W, e as X, B as Y, s as Z, f as _, g as $, j as aa, k as ea, h as ta, i as sa, C as ra, l as oa, F as na, H as ua, m as pa, I as ia, p as la, r as Ia, q as ca, M as Sa, N as ma, T as Ba, n as ga, o as da } from "./image-rectangle-S0pOfTm5.js";
-import { T as Ta } from "./tooltip-VV9T0wn6.js";
+import { A as n, a as u, B as p, b as i, F as l, f as I, P as c, c as S, d as m, e as B, S as g, T as d } from "./top-bar-CyrMtg_S.js";
+import { B as T, C as x, b as f, a as h, D as P, k as C, E as M, M as A, P as k, R as F, d as L, c as D, S as H, e as R, j as w, i as G, h as j, f as q, T as v, g as y } from "./bottom-sheet-input-BmkctBPw.js";
+import { B as N, D as z, M as J } from "./bottom-sheet-COYI-CL2.js";
+import { A as O, a as Q, b as U, c as V, d as W, e as X, B as Y, s as Z, f as _, g as $, j as aa, k as ea, h as ta, i as sa, C as ra, l as oa, F as na, H as ua, m as pa, I as ia, p as la, r as Ia, q as ca, M as Sa, N as ma, T as Ba, n as ga, o as da } from "./image-rectangle-en-PQWib.js";
+import { T as Ta } from "./tooltip-bAUJtxZh.js";
 import { S as fa } from "./snackbar-DH8jCh2V.js";
-import { B as Pa, T as Ca } from "./tabs-C8iGcy7x.js";
+import { B as Pa, T as Ca } from "./tabs-Cacli_Rq.js";
 import { S as Aa, u as ka } from "./use-snackbars-Cou8L41F.js";
 export {
   O as Accordion,

package/dist/js/layouts/index.js

@@ -1,4 +1,4 @@
-import { A as e, a as r, B as s, b as t, F as p, f as B, P as u, c as d, d as g, e as P, S as i, T as m } from "../top-bar-DYbS1NgD.js";
+import { A as e, a as r, B as s, b as t, F as p, f as B, P as u, c as d, d as g, e as P, S as i, T as m } from "../top-bar-CyrMtg_S.js";
 export {
   e as AppBar,
   r as BadgeGroup,

package/dist/js/navigation/index.js

@@ -1,4 +1,4 @@
-import { B as s, T as b } from "../tabs-C8iGcy7x.js";
+import { B as s, T as b } from "../tabs-Cacli_Rq.js";
 export {
   s as Breadcrumbs,
   b as Tabs

package/dist/js/overlays/index.js

@@ -1,6 +1,6 @@
-import { B as a, D as e, M as t } from "../bottom-sheet-Da41OlDM.js";
-import { M as m } from "../image-rectangle-S0pOfTm5.js";
-import { T as M } from "../tooltip-VV9T0wn6.js";
+import { B as a, D as e, M as t } from "../bottom-sheet-COYI-CL2.js";
+import { M as m } from "../image-rectangle-en-PQWib.js";
+import { T as M } from "../tooltip-bAUJtxZh.js";
 export {
   a as BottomSheet,
   e as Drawer,

package/dist/js/primitive/index.js

@@ -1,4 +1,4 @@
-import { A as t, a as e, b as o, c as r, d as n, e as u, B as c, s as l, f as i, g as B, j as g, k as I, h as m, i as A, C as d, l as b, F as C, H as p, m as T, I as f, p as h, r as x, q as F, N as H, T as S, n as k, o as q } from "../image-rectangle-S0pOfTm5.js";
+import { A as t, a as e, b as o, c as r, d as n, e as u, B as c, s as l, f as i, g as B, j as g, k as I, h as m, i as A, C as d, l as b, F as C, H as p, m as T, I as f, p as h, r as x, q as F, N as H, T as S, n as k, o as q } from "../image-rectangle-en-PQWib.js";
 import { S as N } from "../snackbar-DH8jCh2V.js";
 export {
   t as Accordion,

package/dist/js/{tabs-C8iGcy7x.js → tabs-Cacli_Rq.js}

@@ -1,6 +1,6 @@
 import { c as d, j as s, a as u } from "./index-DOdDlCoL.js";
 import { forwardRef as f, createContext as x, useContext as g, useState as p, useLayoutEffect as y, useRef as h } from "react";
-import { I as w } from "./image-rectangle-S0pOfTm5.js";
+import { I as w } from "./image-rectangle-en-PQWib.js";
 import "./snackbar-DH8jCh2V.js";
 import { ChevronRight as T } from "lucide-react";
 const j = d(

package/dist/js/{tooltip-VV9T0wn6.js → tooltip-bAUJtxZh.js}

@@ -1,6 +1,6 @@
 import { c as v, j as c, a as w } from "./index-DOdDlCoL.js";
 import { useRef as m, useState as d, useEffect as h, useId as T, cloneElement as j } from "react";
-import { n as y } from "./image-rectangle-S0pOfTm5.js";
+import { n as y } from "./image-rectangle-en-PQWib.js";
 function P(e = "auto") {
   const n = m(null), [a, t] = d("bottom");
   return h(() => {

package/dist/js/{top-bar-DYbS1NgD.js → top-bar-CyrMtg_S.js}

@@ -1,7 +1,7 @@
 import { c as i, j as s, a as l } from "./index-DOdDlCoL.js";
 import * as v from "react";
 import { forwardRef as o } from "react";
-import { n as f } from "./image-rectangle-S0pOfTm5.js";
+import { n as f } from "./image-rectangle-en-PQWib.js";
 import "./snackbar-DH8jCh2V.js";
 import { L as h } from "./skeleton-BNZyaRjo.js";
 const j = i(
@@ -196,7 +196,7 @@ const j = i(
   }
 ), Ha = Object.assign(A, {
   Item: P
-}), C = i("flex", {
+}), C = i("flex flex-wrap items-center", {
   variants: {
     orientation: {
       horizontal: "flex-row",
@@ -259,7 +259,7 @@ const j = i(
       }
     );
   }
-), R = i("flex", {
+), R = i("flex flex-wrap items-center", {
   variants: {
     orientation: {
       horizontal: "flex-row",
@@ -395,7 +395,7 @@ const j = i(
       children: t
     }
   )
-), k = i("w-full mt-4"), F = i(
+), k = i("w-full pt-4 md:pt-10"), F = i(
   "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 px-4 sm:px-6 mb-4"
 ), O = i("mb-4 px-4 sm:px-6"), W = i(
   "flex-1 min-w-0 flex flex-col gap-2 w-full sm:w-auto"
@@ -502,7 +502,7 @@ const j = i(
     tabs: u,
     ...m
   }, x) => {
-    const b = u;
+    const g = u;
     return /* @__PURE__ */ s.jsxs(
       "header",
       {
@@ -523,7 +523,7 @@ const j = i(
             ] }),
             p && /* @__PURE__ */ s.jsx(Y, { children: p })
           ] }),
-          b && /* @__PURE__ */ s.jsx(_, { children: u }),
+          g && /* @__PURE__ */ s.jsx(_, { children: u }),
           t
         ]
       }
@@ -577,10 +577,15 @@ const j = i(
           "min-h-32",
           "py-8"
         ]
+      },
+      fullscreen: {
+        true: ["fixed", "inset-0", "z-100", "bg-background"],
+        false: []
       }
     },
     defaultVariants: {
-      minimal: !1
+      minimal: !1,
+      fullscreen: !1
     }
   }
 ), sa = i([
@@ -595,17 +600,18 @@ const j = i(
     color: r = "primary",
     ariaLabel: n = "Loading page",
     message: c,
-    minimal: p = !1,
-    className: d,
-    children: u,
-    ...m
-  }, x) {
+    fullscreen: p = !1,
+    minimal: d = !1,
+    className: u,
+    children: m,
+    ...x
+  }, g) {
     return /* @__PURE__ */ s.jsxs(
       "div",
       {
-        ref: x,
-        className: l(ta({ minimal: p }), d),
-        ...m,
+        ref: g,
+        className: l(ta({ minimal: d, fullscreen: p }), u),
+        ...x,
         children: [
           /* @__PURE__ */ s.jsx("div", { className: "max-w-xs w-full flex justify-center", children: /* @__PURE__ */ s.jsx(
             h,
@@ -617,7 +623,7 @@ const j = i(
             }
           ) }),
           c && /* @__PURE__ */ s.jsx("p", { className: sa(), "aria-live": "polite", children: c }),
-          u
+          m
         ]
       }
     );
@@ -672,7 +678,7 @@ const j = i(
   }
 ), ka = Object.assign(oa, {
   Column: ia
-}), g = i(
+}), b = i(
   "flex items-center gap-2 px-4 py-2 rounded-md hover:text-primary focus:outline-none transition-colors",
   {
     variants: {
@@ -700,7 +706,7 @@ const j = i(
         {
           ref: a,
           href: n,
-          className: g({
+          className: b({
             disabled: !!t["aria-disabled"],
             active: p
           }),
@@ -720,7 +726,7 @@ const j = i(
           type: "button",
           onClick: c,
           className: l(
-            g({ disabled: !!m.disabled, active: p }),
+            b({ disabled: !!m.disabled, active: p }),
             "w-full text-left"
           ),
           ...m,
@@ -764,7 +770,7 @@ const j = i(
   Item: la,
   Group: ca
 }), da = i(
-  "w-full flex items-center px-6 py-4 mb-6 border-b border-border shadow-xs bg-white",
+  "w-full flex items-center px-6 py-4 border-b border-border shadow-xs bg-white",
   {
     variants: {},
     defaultVariants: {}
@@ -782,11 +788,11 @@ const j = i(
       active: !1
     }
   }
-), xa = i("flex items-center gap-2 ml-4"), ga = i("flex items-center gap-2 mr-4"), va = o(
+), xa = i("flex items-center gap-2 ml-4"), ga = i("flex items-center gap-2 mr-4"), ba = o(
   function({ children: a, className: e, ...r }, n) {
     return /* @__PURE__ */ s.jsx("nav", { ref: n, className: xa({ className: e }), ...r, children: a });
   }
-), ba = o(
+), va = o(
   function({ children: a, className: e, ...r }, n) {
     return /* @__PURE__ */ s.jsx("div", { ref: n, className: ga({ className: e }), ...r, children: a });
   }
@@ -817,8 +823,8 @@ const j = i(
   Leading: ha,
   Trailing: ja,
   NavItem: ya,
-  Nav: va,
-  Actions: ba
+  Nav: ba,
+  Actions: va
 });
 export {
   La as A,

package/dist/types/layouts/page-loader/types.d.ts

@@ -33,4 +33,8 @@ export interface PageLoaderProps extends HTMLAttributes<HTMLDivElement> {
      * Whether to use a minimal height (useful for inline loading states)
      */
     minimal?: boolean;
+    /**
+     * Whether to cover the entire viewport
+     */
+    fullscreen?: boolean;
 }

package/dist/types/primitive/card/types.d.ts

@@ -31,10 +31,6 @@ export interface CardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
      * Badge element to display in the header area
      */
     badge?: ReactNode;
-    /**
-     * Action elements to display in the right top area
-     */
-    actions?: ReactNode;
     /**
      * Supplementary information to display on the bottom-right side
      * Usually used for amounts, status, or additional info

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimasbaguspm/versaur",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "description": "React UI library with Tailwind CSS",
   "author": "Dimas Bagus Prayogo Mukti<dimas.bagus.pm@gmail.com>",
   "license": "MIT",