@dimasbaguspm/versaur 0.0.39 → 0.0.40

package/dist/assets/styles.css

@@ -87,6 +87,24 @@
   --color-cream-bold: #e2d9b8;
   --color-cream-soft: #f9f7f3;
 
+  /* Accent 1 (Lavender) */
+  --color-accent-1: #b69ad1;
+  --color-accent-1-light: #e8dcf5;
+  --color-accent-1-bold: #8a6ba8;
+  --color-accent-1-soft: #f7f3ff;
+
+  /* Accent 2 (Amber) */
+  --color-accent-2: #d4a942;
+  --color-accent-2-light: #ffeaa3;
+  --color-accent-2-bold: #a6822a;
+  --color-accent-2-soft: #fffbef;
+
+  /* Accent 3 (Rose) */
+  --color-accent-3: #d1869b;
+  --color-accent-3-light: #f5d4df;
+  --color-accent-3-bold: #a8647a;
+  --color-accent-3-soft: #fff6f8;
+
   /* Border and Accent */
   --color-border: #e0e0e0;
   --color-accent: #84a5c0;

package/dist/js/{bottom-sheet-B9Knzg2N.js → bottom-sheet-BjNMFNXp.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-C1ydvFGL.js";
+import { O as S, n as P, k as N, H as D } from "./image-rectangle-DGO9R_ox.js";
 import { XIcon as R } from "lucide-react";
 import "./snackbar-DH8jCh2V.js";
 function F() {

package/dist/js/{bottom-sheet-input-Ch9h_vZC.js → bottom-sheet-input-BnuL4Cci.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-C1ydvFGL.js";
+import { I as C } from "./image-rectangle-DGO9R_ox.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-B9Knzg2N.js";
+import { M as O, D as M, B as V } from "./bottom-sheet-BjNMFNXp.js";
 const te = v("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-Ch9h_vZC.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-BnuL4Cci.js";
 export {
   a as BottomSheetInput,
   n as CheckboxInput,

package/dist/js/{image-rectangle-C1ydvFGL.js → image-rectangle-DGO9R_ox.js}

@@ -792,6 +792,10 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         tertiary: "bg-tertiary-light text-tertiary",
         ghost: "bg-ghost-light text-ghost",
         neutral: "bg-neutral-light text-foreground border border-border",
+        // Accent variants
+        accent_1: "bg-accent-1-light text-accent-1",
+        accent_2: "bg-accent-2-light text-accent-2",
+        accent_3: "bg-accent-3-light text-accent-3",
         // Semantic variants
         success: "bg-success-light text-success",
         info: "bg-info-light text-info",
@@ -880,6 +884,10 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         tertiary: "",
         ghost: "",
         neutral: "",
+        // Accent colors
+        accent_1: "",
+        accent_2: "",
+        accent_3: "",
         // Semantic colors
         success: "",
         info: "",
@@ -905,17 +913,17 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
       {
         variant: "default",
         color: "primary",
-        className: "bg-primary-light/60 text-primary"
+        className: "bg-primary-light text-primary-bold"
       },
       {
         variant: "default",
         color: "secondary",
-        className: "bg-secondary-light/70 text-secondary"
+        className: "bg-secondary-light text-secondary-bold"
       },
       {
         variant: "default",
         color: "tertiary",
-        className: "bg-tertiary-light/50 text-tertiary"
+        className: "bg-tertiary-light text-tertiary-bold"
       },
       {
         variant: "default",
@@ -930,22 +938,37 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
       {
         variant: "default",
         color: "success",
-        className: "bg-success-light/40 text-success"
+        className: "bg-success-light/50 text-success-bold"
       },
       {
         variant: "default",
         color: "info",
-        className: "bg-info-light/50 text-info"
+        className: "bg-info-light/50 text-info-bold"
       },
       {
         variant: "default",
         color: "warning",
-        className: "bg-warning-light/50 text-warning"
+        className: "bg-warning-light/50 text-warning-bold"
       },
       {
         variant: "default",
         color: "danger",
-        className: "bg-danger-light/40 text-danger"
+        className: "bg-danger-light/40 text-danger-bold"
+      },
+      {
+        variant: "default",
+        color: "accent_1",
+        className: "bg-accent-1-light text-accent-1-bold"
+      },
+      {
+        variant: "default",
+        color: "accent_2",
+        className: "bg-accent-2-light text-accent-2-bold"
+      },
+      {
+        variant: "default",
+        color: "accent_3",
+        className: "bg-accent-3-light text-accent-3-bold"
       },
       // Outline variant color combinations
       {
@@ -993,6 +1016,21 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         color: "danger",
         className: "border-danger text-danger"
       },
+      {
+        variant: "outline",
+        color: "accent_1",
+        className: "border-accent-1 text-accent-1"
+      },
+      {
+        variant: "outline",
+        color: "accent_2",
+        className: "border-accent-2 text-accent-2"
+      },
+      {
+        variant: "outline",
+        color: "accent_3",
+        className: "border-accent-3 text-accent-3"
+      },
       // Icon-only size adjustments
       {
         iconOnly: !0,
@@ -1108,12 +1146,18 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        accent_1: "bg-accent-1 text-white hover:bg-accent-1/90 focus-visible:ring-accent-1-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        accent_2: "bg-accent-2 text-white hover:bg-accent-2/90 focus-visible:ring-accent-2-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        accent_3: "bg-accent-3 text-white hover:bg-accent-3/90 focus-visible:ring-accent-3-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
         neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white shadow-sm",
         // Outline variants
         "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-light focus-visible:ring-offset-white transition-all",
         "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary hover:text-white focus-visible:ring-secondary-light focus-visible:ring-offset-white transition-all",
         "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary hover:text-white focus-visible:ring-tertiary-light focus-visible:ring-offset-white transition-all",
+        "accent_1-outline": "border border-accent-1 text-accent-1 bg-white hover:bg-accent-1 hover:text-white focus-visible:ring-accent-1-light focus-visible:ring-offset-white transition-all",
+        "accent_2-outline": "border border-accent-2 text-accent-2 bg-white hover:bg-accent-2 hover:text-white focus-visible:ring-accent-2-light focus-visible:ring-offset-white transition-all",
+        "accent_3-outline": "border border-accent-3 text-accent-3 bg-white hover:bg-accent-3 hover:text-white focus-visible:ring-accent-3-light focus-visible:ring-offset-white transition-all",
         "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost hover:text-white focus-visible:ring-ghost-light focus-visible:ring-offset-white transition-all",
         "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-light focus-visible:ring-offset-white transition-all",
         // Ghost variants (subtle)
@@ -1121,6 +1165,9 @@ const AttributeListItem = forwardRef(function({ children: t, className: r, span:
         "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
         "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary/20 focus-visible:ring-tertiary focus-visible:ring-offset-white",
         "neutral-ghost": "text-foreground bg-white hover:bg-neutral/50 focus-visible:ring-foreground focus-visible:ring-offset-white",
+        "accent_1-ghost": "text-accent-1 bg-white hover:bg-accent-1/20 focus-visible:ring-accent-1 focus-visible:ring-offset-white",
+        "accent_2-ghost": "text-accent-2 bg-white hover:bg-accent-2/20 focus-visible:ring-accent-2 focus-visible:ring-offset-white",
+        "accent_3-ghost": "text-accent-3 bg-white hover:bg-accent-3/20 focus-visible:ring-accent-3 focus-visible:ring-offset-white",
         // Semantic variants
         success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         "success-outline": "border border-success text-success bg-white hover:bg-success hover:text-white focus-visible:ring-success-light focus-visible:ring-offset-white transition-all",
@@ -1254,7 +1301,7 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
     c.style.visibility = "hidden", c.style.position = "absolute", c.style.opacity = "0";
     const x = c.getBoundingClientRect();
     c.style.visibility = R, c.style.position = E, c.style.opacity = C;
-    const N = w.bottom - n.bottom - 8, I = n.top - w.top - 8, V = w.right - n.left - 8, B = n.right - w.left - 8;
+    const N = w.bottom - n.bottom - 8, I = n.top - w.top - 8, V = w.right - n.left - 8, k = n.right - w.left - 8;
     let p = i;
     if (i === "auto") {
       const b = [
@@ -1267,7 +1314,7 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
         },
         {
           name: "bottom-end",
-          fits: N >= x.height && B >= x.width,
+          fits: N >= x.height && k >= x.width,
           spaceUsed: N,
           priority: 2
         },
@@ -1279,14 +1326,14 @@ function useMenuPosition(e, t, r, i = "bottom-start", s) {
         },
         {
           name: "top-end",
-          fits: I >= x.height && B >= x.width,
+          fits: I >= x.height && k >= x.width,
           spaceUsed: I,
           priority: 4
         }
       ].filter((j) => j.fits);
       b.length > 0 ? p = b.sort(
-        (j, k) => j.priority - k.priority
-      )[0].name : N >= I ? p = V >= B ? "bottom-start" : "bottom-end" : p = V >= B ? "top-start" : "top-end";
+        (j, B) => j.priority - B.priority
+      )[0].name : N >= I ? p = V >= k ? "bottom-start" : "bottom-end" : p = V >= k ? "top-start" : "top-end";
     }
     const g = {};
     if (s)
@@ -2049,14 +2096,15 @@ const cardVariants = cva(
     actions: l,
     supplementaryInfo: a,
     bordered: u = !1,
-    className: c,
-    ...f
-  }, n) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "button",
+    as: c = "button",
+    className: f,
+    ...n
+  }, d) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    c,
     {
-      ref: n,
-      className: cn(cardVariants({ size: e, shape: t, bordered: u }), c),
-      ...f,
+      ref: d,
+      className: cn(cardVariants({ size: e, shape: t, bordered: u }), f),
+      ...n,
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start 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: [
@@ -2074,20 +2122,11 @@ const cardVariants = cva(
               ),
               l && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: l })
             ] }),
-            s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(l && "-mt-3"), 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: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Text,
-              {
-                as: "p",
-                fontSize: "sm",
-                color: "gray",
-                className: "min-w-0",
-                children: s
-              }
-            ) }) })
+            s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(l && "-mt-3"), 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 justify-between items-center gap-2", children: [
-            o && o,
-            a && typeof a == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: a }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: a })
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between items-center gap-2 flex-wrap ", children: [
+            o && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mr-auto flex-shrink-0 flex-wrap", children: o }),
+            a && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-auto flex-shrink-0", children: typeof a == "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "sm", color: "gray", children: a }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: a }) })
           ] })
         ] })
       ] })

package/dist/js/index.js

@@ -1,11 +1,11 @@
 import { L as e, 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, e as I, P as c, c as S, d as m, S as B, T as g } from "./top-bar-CKFu3xrL.js";
-import { B as b, C as T, b as x, a as h, D as f, k as C, E as M, M as P, P as A, R as k, d as F, c as D, S as L, e as H, j as R, i as w, h as G, f as j, T as q, g as v } from "./bottom-sheet-input-Ch9h_vZC.js";
-import { B as E, D as N, M as z } from "./bottom-sheet-B9Knzg2N.js";
-import { A as K, a as O, b as Q, c as U, d as V, e as W, B as X, s as Y, f as Z, g as _, j as $, k as aa, h as ta, i as ea, C as sa, l as ra, F as oa, H as na, m as ua, I as pa, p as ia, r as la, q as Ia, M as ca, N as Sa, T as ma, n as Ba, o as ga } from "./image-rectangle-C1ydvFGL.js";
-import { T as ba } from "./tooltip-CvOzRRkS.js";
+import { A as n, a as u, B as p, b as i, F as l, e as I, P as c, c as S, d as m, S as B, T as g } from "./top-bar-D8P4uwtN.js";
+import { B as b, C as T, b as x, a as h, D as f, k as C, E as M, M as P, P as A, R as k, d as F, c as D, S as L, e as H, j as R, i as w, h as G, f as j, T as q, g as v } from "./bottom-sheet-input-BnuL4Cci.js";
+import { B as E, D as N, M as z } from "./bottom-sheet-BjNMFNXp.js";
+import { A as K, a as O, b as Q, c as U, d as V, e as W, B as X, s as Y, f as Z, g as _, j as $, k as aa, h as ta, i as ea, C as sa, l as ra, F as oa, H as na, m as ua, I as pa, p as ia, r as la, q as Ia, M as ca, N as Sa, T as ma, n as Ba, o as ga } from "./image-rectangle-DGO9R_ox.js";
+import { T as ba } from "./tooltip-uCpYAX_O.js";
 import { S as xa } from "./snackbar-DH8jCh2V.js";
-import { B as fa, T as Ca } from "./tabs-38zAflsT.js";
+import { B as fa, T as Ca } from "./tabs-lPDgArjA.js";
 import { S as Pa, u as Aa } from "./use-snackbars-CKi6BQDT.js";
 export {
   K as Accordion,

package/dist/js/layouts/index.js

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

package/dist/js/navigation/index.js

@@ -1,4 +1,4 @@
-import { B as s, T as b } from "../tabs-38zAflsT.js";
+import { B as s, T as b } from "../tabs-lPDgArjA.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-B9Knzg2N.js";
-import { M as m } from "../image-rectangle-C1ydvFGL.js";
-import { T as M } from "../tooltip-CvOzRRkS.js";
+import { B as a, D as e, M as t } from "../bottom-sheet-BjNMFNXp.js";
+import { M as m } from "../image-rectangle-DGO9R_ox.js";
+import { T as M } from "../tooltip-uCpYAX_O.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-C1ydvFGL.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-DGO9R_ox.js";
 import { S as N } from "../snackbar-DH8jCh2V.js";
 export {
   t as Accordion,

package/dist/js/{tabs-38zAflsT.js → tabs-lPDgArjA.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-C1ydvFGL.js";
+import { I as w } from "./image-rectangle-DGO9R_ox.js";
 import "./snackbar-DH8jCh2V.js";
 import { ChevronRight as T } from "lucide-react";
 const j = d(

package/dist/js/{tooltip-CvOzRRkS.js → tooltip-uCpYAX_O.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-C1ydvFGL.js";
+import { n as y } from "./image-rectangle-DGO9R_ox.js";
 function P(e = "auto") {
   const n = m(null), [a, t] = d("bottom");
   return h(() => {

package/dist/js/{top-bar-CKFu3xrL.js → top-bar-D8P4uwtN.js}

@@ -1,7 +1,7 @@
 import { c as i, j as r, 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-C1ydvFGL.js";
+import { n as f } from "./image-rectangle-DGO9R_ox.js";
 import "./snackbar-DH8jCh2V.js";
 const h = i(
   "w-full flex flex-wrap items-center pt-3 mb-3 gap-2 bg-white [&>[data-versaur-appbar-bottom]]:basis-full [&>[data-versaur-appbar-bottom]]:w-full [&:has([data-versaur-appbar-bottom])>[data-versaur-appbar-leading]]:pl-4 [&:has([data-versaur-appbar-bottom])>[data-versaur-appbar-trailing]]:pr-4 [&:not(:has([data-versaur-appbar-bottom]))]:px-4",

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

@@ -11,7 +11,7 @@ export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
      * Core variants: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
      * Semantic variants: success, info, warning, danger
      */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'accent_1' | 'accent_2' | 'accent_3';
     /**
      * Size of the avatar
      * xs: 24px, sm: 32px, md: 40px, lg: 48px, xl: 64px

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

@@ -32,7 +32,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
      * Core colors: primary (coral), secondary (sage), tertiary (mist), ghost (slate), neutral (light gray)
      * Semantic colors: success, info, warning, danger
      */
-    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger';
+    color?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'accent_1' | 'accent_2' | 'accent_3';
     /**
      * Icon element to display on the left side of the badge
      * When no children are provided and an icon is present, badge automatically becomes icon-only

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

@@ -14,7 +14,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * Semantic variants: success, info, warning, danger
      * Each variant supports outline and ghost forms for flexible design expression
      */
-    variant?: 'primary' | 'primary-outline' | 'primary-ghost' | 'secondary' | 'secondary-outline' | 'secondary-ghost' | 'tertiary' | 'tertiary-outline' | 'tertiary-ghost' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'neutral-ghost' | 'success' | 'success-outline' | 'success-ghost' | 'info' | 'info-outline' | 'info-ghost' | 'warning' | 'warning-outline' | 'warning-ghost' | 'danger' | 'danger-outline' | 'danger-ghost' | 'outline' | 'destructive';
+    variant?: 'primary' | 'primary-outline' | 'primary-ghost' | 'secondary' | 'secondary-outline' | 'secondary-ghost' | 'tertiary' | 'tertiary-outline' | 'tertiary-ghost' | 'accent_1' | 'accent_1-outline' | 'accent_1-ghost' | 'accent_2' | 'accent_2-outline' | 'accent_2-ghost' | 'accent_3' | 'accent_3-outline' | 'accent_3-ghost' | 'ghost' | 'ghost-outline' | 'neutral' | 'neutral-outline' | 'neutral-ghost' | 'success' | 'success-outline' | 'success-ghost' | 'info' | 'info-outline' | 'info-ghost' | 'warning' | 'warning-outline' | 'warning-ghost' | 'danger' | 'danger-outline' | 'danger-ghost' | 'outline' | 'destructive';
     /**
      * Size of the button
      * sm: 36px height, compact for space-constrained interfaces

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

@@ -1,5 +1,5 @@
 import { CardProps } from './types';
-export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLButtonElement>> & {
+export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
     List: import('react').ForwardRefExoticComponent<import('./types').CardListProps & import('react').RefAttributes<HTMLUListElement>>;
     ListItem: import('react').ForwardRefExoticComponent<import('./types').CardListItemProps & import('react').RefAttributes<HTMLLIElement>>;
 };

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

@@ -45,6 +45,11 @@ export interface CardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
      * @default false
      */
     bordered?: boolean;
+    /**
+     * Is the card a button or a div?
+     * @default 'button'
+     */
+    as?: 'button' | 'div';
 }
 export type CardListProps = {
     children: ReactNode;

package/package.json

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