@dimasbaguspm/versaur 0.0.28 → 0.0.29

package/dist/js/{bottom-sheet-tOKkkgJA.js → bottom-sheet-BKd7WCCS.js}

@@ -1,7 +1,7 @@
 import { c as u, j as n, a as l } from "./index-DOdDlCoL.js";
 import j, { useState as v, useEffect as x, createContext as S, useContext as T, forwardRef as f, useRef as M, useMemo as z } from "react";
 import { XIcon as E } from "lucide-react";
-import { i as H, f as D } from "./image-rectangle-C1zMt0DR.js";
+import { k as H, h as D } from "./image-rectangle-CF656HIm.js";
 import "./snackbar-DH8jCh2V.js";
 import I from "react-dom";
 function P() {

package/dist/js/{bottom-sheet-input-BIbHW5ME.js → bottom-sheet-input-DrbGhcXv.js}

@@ -1,9 +1,9 @@
 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-C1zMt0DR.js";
+import { I as z } from "./image-rectangle-CF656HIm.js";
 import "./snackbar-DH8jCh2V.js";
-import { M, D as E, B as R } from "./bottom-sheet-tOKkkgJA.js";
+import { M, D as E, B as R } from "./bottom-sheet-BKd7WCCS.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-BIbHW5ME.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-DrbGhcXv.js";
 export {
   a as BottomSheetInput,
   n as CheckboxInput,

package/dist/js/{image-rectangle-C1zMt0DR.js → image-rectangle-CF656HIm.js}

@@ -241,7 +241,224 @@ const alertVariants = cva(
       children: e
     }
   )
-), avatarVariants = cva(
+), textVariants = cva("", {
+  variants: {
+    color: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      tertiary: "text-tertiary",
+      ghost: "text-ghost",
+      neutral: "text-ghost",
+      success: "text-success",
+      info: "text-info",
+      warning: "text-warning",
+      danger: "text-danger",
+      inherit: "",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white"
+    },
+    hasUnderline: {
+      true: "underline",
+      false: ""
+    },
+    isCapitalize: {
+      true: "capitalize",
+      false: ""
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+      justify: "text-justify"
+    },
+    italic: {
+      true: "italic",
+      false: ""
+    },
+    clamp: {
+      1: "line-clamp-1",
+      2: "line-clamp-2",
+      3: "line-clamp-3",
+      4: "line-clamp-4",
+      5: "line-clamp-5",
+      none: ""
+    },
+    ellipsis: {
+      true: "truncate",
+      false: ""
+    },
+    as: {
+      h1: "font-bold text-4xl leading-loose",
+      h2: "font-semibold text-3xl leading-relaxed",
+      h3: "font-medium text-2xl leading-relaxed",
+      h4: "font-bold text-xl leading-normal",
+      h5: "font-semibold text-lg leading-normal",
+      h6: "font-medium text-base leading-normal",
+      p: "font-normal text-base leading-normal",
+      span: "font-normal text-base leading-normal",
+      label: "font-normal text-xs leading-normal"
+    }
+  },
+  defaultVariants: {
+    color: "neutral",
+    hasUnderline: !1,
+    isCapitalize: !1,
+    align: "left",
+    italic: !1,
+    clamp: "none",
+    ellipsis: !1,
+    as: "span"
+  }
+}), Text = forwardRef(
+  ({
+    as: e = "span",
+    color: t = "ghost",
+    hasUnderline: r = !1,
+    isCapitalize: s = !1,
+    align: i = "left",
+    italic: n = !1,
+    clamp: o = "none",
+    ellipsis: a = !1,
+    fontSize: l,
+    fontWeight: c,
+    className: x,
+    children: h,
+    ...d
+  }, p) => {
+    const f = [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "p",
+      "span",
+      "label"
+    ].includes(e) ? e : "span", v = l ? `text-${l}` : "", w = c ? `font-${c}` : "";
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      e,
+      {
+        ref: p,
+        className: cn(
+          textVariants({
+            color: t,
+            hasUnderline: r,
+            isCapitalize: s,
+            align: i,
+            italic: n,
+            clamp: o,
+            ellipsis: a,
+            // @ts-expect-error - `as` is not a valid variant
+            as: f
+          }),
+          v,
+          w,
+          x
+        ),
+        ...d,
+        children: h
+      }
+    );
+  }
+), Attribute = forwardRef(
+  function({ title: t, children: r, className: s, ...i }, n) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: n, className: cn("space-y-1", s), ...i, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Text,
+        {
+          as: "h4",
+          fontSize: "sm",
+          fontWeight: "normal",
+          color: "gray",
+          className: "leading-none",
+          children: t
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", fontSize: "base", fontWeight: "normal", children: r })
+    ] });
+  }
+);
+function getColSpan$1(e = 1) {
+  switch (e) {
+    case 1:
+      return "col-span-1";
+    case 2:
+      return "col-span-2";
+    case 3:
+      return "col-span-3";
+    case 4:
+      return "col-span-4";
+    case 5:
+      return "col-span-5";
+    case 6:
+      return "col-span-6";
+    case 7:
+      return "col-span-7";
+    case 8:
+      return "col-span-8";
+    case 9:
+      return "col-span-9";
+    case 10:
+      return "col-span-10";
+    case 11:
+      return "col-span-11";
+    case 12:
+      return "col-span-12";
+    default:
+      return "col-span-1";
+  }
+}
+function getGridCols(e = 4) {
+  switch (e) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return "grid-cols-2";
+    case 3:
+      return "grid-cols-3";
+    case 4:
+      return "grid-cols-4";
+    case 5:
+      return "grid-cols-5";
+    case 6:
+      return "grid-cols-6";
+    case 7:
+      return "grid-cols-7";
+    case 8:
+      return "grid-cols-8";
+    case 9:
+      return "grid-cols-9";
+    case 10:
+      return "grid-cols-10";
+    case 11:
+      return "grid-cols-11";
+    case 12:
+      return "grid-cols-12";
+    default:
+      return "grid-cols-4";
+  }
+}
+const AttributeListItem = forwardRef(function({ children: t, className: r, span: s = 1, title: i, ...n }, o) {
+  const a = getColSpan$1(s);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ref: o, className: cn(a, r), ...n, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Attribute, { title: i, children: t }) });
+}), AttributeListRoot = forwardRef(
+  function({ children: t, className: r, columns: s = 4, ...i }, n) {
+    const o = getGridCols(s);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "ul",
+      {
+        ref: n,
+        className: cn("grid gap-4", o, r),
+        ...i,
+        children: t
+      }
+    );
+  }
+), AttributeList = Object.assign(AttributeListRoot, {
+  Item: AttributeListItem
+}), avatarVariants = cva(
   "inline-flex items-center justify-center font-medium text-white overflow-hidden transition-all duration-200 select-none relative",
   {
     variants: {
@@ -348,7 +565,7 @@ const alertVariants = cva(
       },
       shape: {
         rounded: "rounded-full",
-        square: "rounded-md"
+        square: "rounded-xs"
       },
       size: {
         sm: "text-xs px-1 py-0.25 h-3",
@@ -365,47 +582,47 @@ const alertVariants = cva(
       {
         variant: "default",
         color: "primary",
-        className: "bg-primary-light text-primary"
+        className: "bg-primary-light/60 text-primary"
       },
       {
         variant: "default",
         color: "secondary",
-        className: "bg-secondary-light text-secondary"
+        className: "bg-secondary-light/70 text-secondary"
       },
       {
         variant: "default",
         color: "tertiary",
-        className: "bg-tertiary-light text-tertiary"
+        className: "bg-tertiary-light/50 text-tertiary"
       },
       {
         variant: "default",
         color: "ghost",
-        className: "bg-ghost-light text-ghost"
+        className: "bg-ghost/05 text-ghost"
       },
       {
         variant: "default",
         color: "neutral",
-        className: "bg-neutral text-foreground"
+        className: "bg-neutral-light text-foreground"
       },
       {
         variant: "default",
         color: "success",
-        className: "bg-success-light text-success"
+        className: "bg-success-light/40 text-success"
       },
       {
         variant: "default",
         color: "info",
-        className: "bg-info-light text-info"
+        className: "bg-info-light/50 text-info"
       },
       {
         variant: "default",
         color: "warning",
-        className: "bg-warning-light text-warning"
+        className: "bg-warning-light/50 text-warning"
       },
       {
         variant: "default",
         color: "danger",
-        className: "bg-danger-light text-danger"
+        className: "bg-danger-light/40 text-danger"
       },
       // Outline variant color combinations
       {
@@ -520,9 +737,7 @@ const alertVariants = cva(
       }
     );
   }
-);
-Badge.displayName = "Badge";
-const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgSpenicleRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgSpenicleCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), brandSizeClass = cva("", {
+), SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgSpenicleRounded = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("rect", { width: 32, height: 32, rx: 8, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), SvgSpenicleCircle = (e) => /* @__PURE__ */ React.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ React.createElement("title", null, "Spenicle"), /* @__PURE__ */ React.createElement("circle", { cx: 16, cy: 16, r: 16, fill: "#e07a5f" }), /* @__PURE__ */ React.createElement("g", { transform: "translate(16, 16) scale(0.625) translate(-12, -12)" }, /* @__PURE__ */ React.createElement("path", { d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z", fill: "white" }))), brandSizeClass = cva("", {
   variants: {
     size: {
       xs: "h-6 w-6",
@@ -577,7 +792,7 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
         "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",
         "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-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-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)
         "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
         "secondary-ghost": "text-secondary bg-white hover:bg-secondary/20 focus-visible:ring-secondary focus-visible:ring-offset-white",
@@ -670,7 +885,7 @@ const SvgSpenicleSquare = (e) => /* @__PURE__ */ React.createElement("svg", { wi
         "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",
         "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-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-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",
         "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
         "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",
@@ -815,7 +1030,7 @@ const buttonIconVariants = cva(
         "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",
         "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-neutral text-foreground bg-white hover:bg-neutral hover:text-foreground focus-visible:ring-foreground-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",
         "primary-ghost": "text-primary bg-white hover:bg-primary/20 focus-visible:ring-primary focus-visible:ring-offset-white",
         "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",
@@ -1103,128 +1318,7 @@ const BUTTONS = [
   }
 );
 Calculator.displayName = "Calculator";
-const textVariants = cva("", {
-  variants: {
-    color: {
-      primary: "text-primary",
-      secondary: "text-secondary",
-      tertiary: "text-tertiary",
-      ghost: "text-ghost",
-      neutral: "text-ghost",
-      success: "text-success",
-      info: "text-info",
-      warning: "text-warning",
-      danger: "text-danger",
-      inherit: "",
-      gray: "text-gray-500",
-      black: "text-black",
-      white: "text-white"
-    },
-    hasUnderline: {
-      true: "underline",
-      false: ""
-    },
-    isCapitalize: {
-      true: "capitalize",
-      false: ""
-    },
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right",
-      justify: "text-justify"
-    },
-    italic: {
-      true: "italic",
-      false: ""
-    },
-    clamp: {
-      1: "line-clamp-1",
-      2: "line-clamp-2",
-      3: "line-clamp-3",
-      4: "line-clamp-4",
-      5: "line-clamp-5",
-      none: ""
-    },
-    ellipsis: {
-      true: "truncate",
-      false: ""
-    },
-    as: {
-      h1: "font-bold text-4xl leading-loose",
-      h2: "font-semibold text-3xl leading-relaxed",
-      h3: "font-medium text-2xl leading-relaxed",
-      h4: "font-bold text-xl leading-normal",
-      h5: "font-semibold text-lg leading-normal",
-      h6: "font-medium text-base leading-normal",
-      p: "font-normal text-base leading-normal",
-      span: "font-normal text-base leading-normal",
-      label: "font-normal text-xs leading-normal"
-    }
-  },
-  defaultVariants: {
-    color: "neutral",
-    hasUnderline: !1,
-    isCapitalize: !1,
-    align: "left",
-    italic: !1,
-    clamp: "none",
-    ellipsis: !1,
-    as: "span"
-  }
-}), Text = forwardRef(
-  ({
-    as: e = "span",
-    color: t = "ghost",
-    hasUnderline: r = !1,
-    isCapitalize: s = !1,
-    align: i = "left",
-    italic: n = !1,
-    clamp: o = "none",
-    ellipsis: a = !1,
-    fontSize: l,
-    fontWeight: c,
-    className: x,
-    children: h,
-    ...d
-  }, p) => {
-    const f = [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6",
-      "p",
-      "span",
-      "label"
-    ].includes(e) ? e : "span", v = l ? `text-${l}` : "", w = c ? `font-${c}` : "";
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      e,
-      {
-        ref: p,
-        className: cn(
-          textVariants({
-            color: t,
-            hasUnderline: r,
-            isCapitalize: s,
-            align: i,
-            italic: n,
-            clamp: o,
-            ellipsis: a,
-            // @ts-expect-error - `as` is not a valid variant
-            as: f
-          }),
-          v,
-          w,
-          x
-        ),
-        ...d,
-        children: h
-      }
-    );
-  }
-), CalendarContext = createContext(null);
+const CalendarContext = createContext(null);
 function useCalendarContext() {
   const e = useContext(CalendarContext);
   if (!e)
@@ -1591,25 +1685,25 @@ const CalendarRoot = ({
     variants: {
       variant: {
         // Core variants using Versaur color system
-        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-light focus-visible:ring-offset-white shadow-sm",
-        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-light focus-visible:ring-offset-white shadow-sm",
-        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-light focus-visible:ring-offset-white shadow-sm",
-        ghost: "bg-ghost-soft text-foreground hover:bg-ghost-light focus-visible:ring-ghost-light focus-visible:ring-offset-white",
+        primary: "bg-primary-light text-primary hover:bg-primary-soft focus-visible:ring-primary-light focus-visible:ring-offset-white",
+        secondary: "bg-secondary-light text-secondary hover:bg-secondary-soft focus-visible:ring-secondary-light focus-visible:ring-offset-white",
+        tertiary: "bg-tertiary-light text-tertiary hover:bg-tertiary-soft focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
         neutral: "bg-neutral text-foreground hover:bg-neutral/80 focus-visible:ring-foreground-light focus-visible:ring-offset-white",
         // Outline variants
         "primary-outline": "border border-primary text-primary bg-white hover:bg-primary-soft focus-visible:ring-primary-light focus-visible:ring-offset-white",
         "secondary-outline": "border border-secondary text-secondary bg-white hover:bg-secondary-soft focus-visible:ring-secondary-light focus-visible:ring-offset-white",
         "tertiary-outline": "border border-tertiary text-tertiary bg-white hover:bg-tertiary-soft focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
         "ghost-outline": "border border-ghost text-ghost bg-white hover:bg-ghost-soft focus-visible:ring-ghost-light focus-visible:ring-offset-white",
-        "neutral-outline": "border border-neutral text-foreground bg-white hover:bg-neutral/20 focus-visible:ring-foreground-light focus-visible:ring-offset-white",
+        "neutral-outline": "border border-border text-foreground bg-white hover:bg-neutral focus-visible:ring-foreground-light 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",
+        success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-light focus-visible:ring-offset-white",
         "success-outline": "border border-success text-success bg-white hover:bg-success-soft focus-visible:ring-success-light focus-visible:ring-offset-white",
-        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white shadow-sm",
+        info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-light focus-visible:ring-offset-white",
         "info-outline": "border border-info text-info bg-white hover:bg-info-soft focus-visible:ring-info-light focus-visible:ring-offset-white",
-        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white shadow-sm",
+        warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-light focus-visible:ring-offset-white",
         "warning-outline": "border border-warning text-warning bg-white hover:bg-warning-soft focus-visible:ring-warning-light focus-visible:ring-offset-white",
-        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white shadow-sm",
+        danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-light focus-visible:ring-offset-white",
         "danger-outline": "border border-danger text-danger bg-white hover:bg-danger-soft focus-visible:ring-danger-light focus-visible:ring-offset-white"
       },
       size: {
@@ -1655,9 +1749,9 @@ const CalendarRoot = ({
   {
     variants: {
       spacing: {
-        sm: "py-8",
-        md: "py-12",
-        lg: "py-16"
+        sm: "py-8 px-4",
+        md: "py-12 px-6",
+        lg: "py-16 px-8"
       },
       hasGrayBackground: {
         true: "bg-neutral-soft",
@@ -1671,10 +1765,6 @@ const CalendarRoot = ({
   }
 ), noResultsHeaderVariants = cva(
   "flex flex-row items-center gap-3 mb-2"
-), noResultsTitleVariants = cva(
-  "text-lg font-semibold text-foreground"
-), noResultsSubtitleVariants = cva(
-  "text-foreground-light mb-6 max-w-md"
 ), NoResults = React__default.forwardRef(
   function e({ icon: t, title: r, subtitle: s, action: i, className: n, hasGrayBackground: o, ...a }, l) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -1688,9 +1778,9 @@ const CalendarRoot = ({
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("header", { className: noResultsHeaderVariants(), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: t, size: "lg", color: "ghost", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h2", className: noResultsTitleVariants(), children: r })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "h2", fontSize: "lg", children: r })
           ] }),
-          s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", className: noResultsSubtitleVariants(), children: s }),
+          s && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "p", align: "center", color: "gray", className: "mb-4", children: s }),
           i && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { role: "group", "aria-label": "Available actions", children: i })
         ]
       }
@@ -2148,17 +2238,19 @@ export {
   NoResults as N,
   Table as T,
   Anchor as a,
-  Avatar as b,
-  Brand as c,
-  Button as d,
-  ButtonFloat as e,
-  ButtonIcon as f,
-  Calendar as g,
-  Card as h,
-  Text as i,
-  Tile as j,
-  ImageCircle as k,
-  ImageSquare as l,
-  ImageRectangle as m,
-  BaseImage as n
+  Attribute as b,
+  AttributeList as c,
+  Avatar as d,
+  Brand as e,
+  Button as f,
+  ButtonFloat as g,
+  ButtonIcon as h,
+  Calendar as i,
+  Card as j,
+  Text as k,
+  Tile as l,
+  ImageCircle as m,
+  ImageSquare as n,
+  ImageRectangle as o,
+  BaseImage as p
 };

package/dist/js/index.js

@@ -1,58 +1,60 @@
-import { L as s, P as t, S as r } from "./skeleton-BNZyaRjo.js";
-import { A as n, a as p, B as u, 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-BqLv8_hy.js";
-import { B as T, C as x, b, a as h, D as C, k as f, E as P, M as k, P as M, R as A, d as D, c as F, S as L, e as R, j as w, i as G, h as j, f as v, T as y, g as E } from "./bottom-sheet-input-BIbHW5ME.js";
-import { B as q, D as H, M as z } from "./bottom-sheet-tOKkkgJA.js";
-import { M as K, T as O } from "./tooltip-C_riAXZP.js";
-import { A as U, a as V, b as W, B as X, n as Y, c as Z, d as _, e as $, f as aa, C as ea, g as sa, h as ta, D as ra, F as oa, I as na, k as pa, m as ua, l as ia, N as la, T as Ia, i as ca, j as Sa } from "./image-rectangle-C1zMt0DR.js";
-import { S as Ba } from "./snackbar-DH8jCh2V.js";
-import { B as da, T as Ta } from "./tabs-CtPlBMP4.js";
-import { S as ba, u as ha } from "./use-snackbars-B0MaRlg1.js";
+import { L as t, P as s, S as r } from "./skeleton-BNZyaRjo.js";
+import { A as n, a as p, B as u, 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-B4SZ2YZC.js";
+import { B as b, C as T, b as x, a as h, D as C, k as f, E as P, M as k, P as A, R as M, d as D, c as F, S as L, e as R, j as w, i as G, h as j, f as v, T as y, g as E } from "./bottom-sheet-input-DrbGhcXv.js";
+import { B as q, D as H, M as z } from "./bottom-sheet-BKd7WCCS.js";
+import { M as K, T as O } from "./tooltip-D1-q8Ars.js";
+import { A as U, a as V, b as W, c as X, d as Y, B as Z, p as _, e as $, f as aa, g as ea, h as ta, C as sa, i as ra, j as oa, D as na, F as pa, I as ua, m as ia, o as la, n as Ia, N as ca, T as Sa, k as ma, l as Ba } from "./image-rectangle-CF656HIm.js";
+import { S as da } from "./snackbar-DH8jCh2V.js";
+import { B as Ta, T as xa } from "./tabs-DoiqKzR9.js";
+import { S as Ca, u as fa } from "./use-snackbars-B0MaRlg1.js";
 export {
   U as Alert,
   V as Anchor,
   n as AppBar,
-  W as Avatar,
-  X as Badge,
+  W as Attribute,
+  X as AttributeList,
+  Y as Avatar,
+  Z as Badge,
   p as BadgeGroup,
-  Y as BaseImage,
+  _ as BaseImage,
   u as BottomBar,
   q as BottomSheet,
-  T as BottomSheetInput,
-  Z as Brand,
-  da as Breadcrumbs,
-  _ as Button,
-  $ as ButtonFloat,
+  b as BottomSheetInput,
+  $ as Brand,
+  Ta as Breadcrumbs,
+  aa as Button,
+  ea as ButtonFloat,
   i as ButtonGroup,
-  aa as ButtonIcon,
-  ea as Calculator,
-  sa as Calendar,
-  ta as Card,
-  x as CheckboxInput,
-  b as ChipMultipleInput,
+  ta as ButtonIcon,
+  sa as Calculator,
+  ra as Calendar,
+  oa as Card,
+  T as CheckboxInput,
+  x as ChipMultipleInput,
   h as ChipSingleInput,
   C as DateSinglePickerInput,
-  ra as DescriptionList,
+  na as DescriptionList,
   H as Drawer,
   f as DrawerInput,
   P as EmailInput,
-  oa as FilterChip,
+  pa as FilterChip,
   l as FilterChipGroup,
   I as FormLayout,
-  na as Icon,
-  pa as ImageCircle,
-  ua as ImageRectangle,
-  ia as ImageSquare,
-  s as LoadingIndicator,
+  ua as Icon,
+  ia as ImageCircle,
+  la as ImageRectangle,
+  Ia as ImageSquare,
+  t as LoadingIndicator,
   K as Menu,
   z as Modal,
   k as ModalInput,
-  la as NoResults,
+  ca as NoResults,
   c as PageContent,
   S as PageHeader,
   m as PageLayout,
-  M as PriceInput,
-  t as ProgressIndicator,
-  A as RadioInput,
+  A as PriceInput,
+  s as ProgressIndicator,
+  M as RadioInput,
   D as SearchInput,
   F as SegmentMultipleInput,
   L as SegmentSingleInput,
@@ -61,17 +63,17 @@ export {
   G as SelectableSingleInput,
   B as SideBar,
   r as Skeleton,
-  Ba as Snackbar,
-  ba as SnackbarsProvider,
+  da as Snackbar,
+  Ca as SnackbarsProvider,
   j as SwitchInput,
-  Ia as Table,
-  Ta as Tabs,
-  ca as Text,
+  Sa as Table,
+  xa as Tabs,
+  ma as Text,
   v as TextAreaInput,
   y as TextInput,
-  Sa as Tile,
+  Ba as Tile,
   E as TimePickerInput,
   O as Tooltip,
   g as TopBar,
-  ha as useSnackbars
+  fa as useSnackbars
 };

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-BqLv8_hy.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-B4SZ2YZC.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-CtPlBMP4.js";
+import { B as s, T as b } from "../tabs-DoiqKzR9.js";
 export {
   s as Breadcrumbs,
   b as Tabs

package/dist/js/overlays/index.js

@@ -1,5 +1,5 @@
-import { B as e, D as r, M as t } from "../bottom-sheet-tOKkkgJA.js";
-import { M, T as m } from "../tooltip-C_riAXZP.js";
+import { B as e, D as r, M as t } from "../bottom-sheet-BKd7WCCS.js";
+import { M, T as m } from "../tooltip-D1-q8Ars.js";
 export {
   e as BottomSheet,
   r as Drawer,

package/dist/js/primitive/index.js

@@ -1,27 +1,29 @@
-import { A as e, a as t, b as r, B as o, n as l, c as n, d as c, e as i, f as g, C as m, g as B, h as I, D as u, F as C, I as d, k as p, m as A, l as T, N as b, T as f, i as h, j as x } from "../image-rectangle-C1zMt0DR.js";
-import { S } from "../snackbar-DH8jCh2V.js";
+import { A as t, a as e, b as r, c as o, d as l, B as n, p as i, e as c, f as u, g, h as m, C as B, i as I, j as A, D as C, F as b, I as d, m as p, o as T, n as f, N as h, T as x, k as F, l as S } from "../image-rectangle-CF656HIm.js";
+import { S as D } from "../snackbar-DH8jCh2V.js";
 export {
-  e as Alert,
-  t as Anchor,
-  r as Avatar,
-  o as Badge,
-  l as BaseImage,
-  n as Brand,
-  c as Button,
-  i as ButtonFloat,
-  g as ButtonIcon,
-  m as Calculator,
-  B as Calendar,
-  I as Card,
-  u as DescriptionList,
-  C as FilterChip,
+  t as Alert,
+  e as Anchor,
+  r as Attribute,
+  o as AttributeList,
+  l as Avatar,
+  n as Badge,
+  i as BaseImage,
+  c as Brand,
+  u as Button,
+  g as ButtonFloat,
+  m as ButtonIcon,
+  B as Calculator,
+  I as Calendar,
+  A as Card,
+  C as DescriptionList,
+  b as FilterChip,
   d as Icon,
   p as ImageCircle,
-  A as ImageRectangle,
-  T as ImageSquare,
-  b as NoResults,
-  S as Snackbar,
-  f as Table,
-  h as Text,
-  x as Tile
+  T as ImageRectangle,
+  f as ImageSquare,
+  h as NoResults,
+  D as Snackbar,
+  x as Table,
+  F as Text,
+  S as Tile
 };

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

package/dist/js/{tooltip-C_riAXZP.js → tooltip-D1-q8Ars.js}

@@ -1,6 +1,6 @@
 import { c as h, j as u, a as b } from "./index-DOdDlCoL.js";
 import { useEffect as m, useRef as c, useId as v, cloneElement as x, useState as g } from "react";
-import { i as j } from "./image-rectangle-C1zMt0DR.js";
+import { k as j } from "./image-rectangle-CF656HIm.js";
 const I = h(
   "absolute z-30 min-w-40 bg-background rounded-lg border border-border transition-all duration-200 ease-out will-change-transform",
   {
@@ -23,8 +23,8 @@ const I = h(
 function E(t, e, r, o) {
   m(() => {
     if (!t) return;
-    function n(i) {
-      !e.current?.contains(i.target) && !r.current?.contains(i.target) && o();
+    function n(s) {
+      !e.current?.contains(s.target) && !r.current?.contains(s.target) && o();
     }
     return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
   }, [t, o, e, r]);
@@ -44,20 +44,20 @@ const F = ({
   content: o,
   children: n
 }) => {
-  const i = c(null), a = c(null), s = v();
-  return E(t, a, i, e), M(t, a), /* @__PURE__ */ u.jsxs("div", { className: "relative w-fit", children: [
+  const s = c(null), a = c(null), i = v();
+  return E(t, a, s, e), M(t, a), /* @__PURE__ */ u.jsxs("div", { className: "relative w-fit", children: [
     x(n, {
       // @ts-expect-error: ref is valid for button or forwardRef components
-      ref: i,
+      ref: s,
       "aria-haspopup": "menu",
       "aria-expanded": t,
-      "aria-controls": s,
+      "aria-controls": i,
       tabIndex: 0
     }),
     /* @__PURE__ */ u.jsx(
       "div",
       {
-        id: s,
+        id: i,
         ref: a,
         className: b(I({ size: r, open: t })),
         role: "menu",
@@ -74,13 +74,13 @@ function z(t = "auto") {
       o(t === "auto" ? "bottom" : t);
       return;
     }
-    const n = e.current.getBoundingClientRect(), i = window.innerWidth, a = window.innerHeight, s = {
+    const n = e.current.getBoundingClientRect(), s = window.innerWidth, a = window.innerHeight, i = {
       top: n.top,
       bottom: a - n.bottom,
       left: n.left,
-      right: i - n.right
+      right: s - n.right
     };
-    s.bottom > 64 ? o("bottom") : s.top > 64 ? o("top") : s.right > 128 ? o("right") : o("left");
+    i.bottom > 64 ? o("bottom") : i.top > 64 ? o("top") : i.right > 128 ? o("right") : o("left");
   }, [t, e]), { position: r, ref: e };
 }
 const P = h(
@@ -105,9 +105,9 @@ const P = h(
   position: r = "auto",
   popoverClassName: o,
   delay: n,
-  ...i
+  ...s
 }) => {
-  const a = v(), [s, d] = g(!1), l = c(null), p = () => {
+  const a = v(), [i, d] = g(!1), l = c(null), p = () => {
     n ? l.current = setTimeout(() => d(!0), n) : d(!0);
   }, f = () => {
     l.current && clearTimeout(l.current), d(!1);
@@ -122,7 +122,7 @@ const P = h(
     onFocus: p,
     onMouseLeave: f,
     onBlur: f,
-    ...i
+    ...s
   }, { ref: y, position: T } = z(r);
   return /* @__PURE__ */ u.jsxs("div", { className: "relative w-fit", ref: y, children: [
     x(t, w),
@@ -133,10 +133,10 @@ const P = h(
         className: b(
           P({ position: T }),
           o,
-          !s && "opacity-0 pointer-events-none"
+          !i && "opacity-0 pointer-events-none"
         ),
         role: "tooltip",
-        "aria-hidden": !s,
+        "aria-hidden": !i,
         children: /* @__PURE__ */ u.jsx(j, { as: "p", fontSize: "xs", fontWeight: "normal", color: "black", children: e })
       }
     )

package/dist/js/{top-bar-BqLv8_hy.js → top-bar-B4SZ2YZC.js}

@@ -1,7 +1,7 @@
 import { c as i, j as r, a as l } from "./index-DOdDlCoL.js";
 import * as b from "react";
 import { forwardRef as o } from "react";
-import { i as u } from "./image-rectangle-C1zMt0DR.js";
+import { k as u } from "./image-rectangle-CF656HIm.js";
 import "./snackbar-DH8jCh2V.js";
 const j = 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",
@@ -374,7 +374,7 @@ const j = i(
       children: t
     }
   )
-), I = i("w-full mt-4"), k = i(
+), k = i("w-full mt-4"), I = i(
   "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 px-4 sm:px-6 mb-4"
 ), F = i("mb-4 px-4 sm:px-6"), O = i(
   "flex-1 min-w-0 flex flex-col gap-2 w-full sm:w-auto"
@@ -387,7 +387,7 @@ const j = i(
     "div",
     {
       ref: s,
-      className: l(k(), a),
+      className: l(I(), a),
       "data-versaur-page-header-top": !0,
       ...e,
       children: t
@@ -476,7 +476,7 @@ const j = i(
       "header",
       {
         ref: f,
-        className: l(I(), a),
+        className: l(k(), a),
         role: "banner",
         ...d,
         children: [

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

@@ -0,0 +1,10 @@
+import { AttributeProps } from './types';
+/**
+ * Attribute component for Versaur UI
+ *
+ * A simple component that displays a title and content in a structured format.
+ *
+ * Usage:
+ * <Attribute title="Name">John Doe</Attribute>
+ */
+export declare const Attribute: import('react').ForwardRefExoticComponent<AttributeProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/primitive/attribute/index.d.ts

@@ -0,0 +1,2 @@
+export { Attribute } from './attribute';
+export type { AttributeProps } from './types';

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

@@ -0,0 +1,14 @@
+import { ReactNode, HTMLAttributes } from 'react';
+/**
+ * Props for the Attribute component
+ */
+export interface AttributeProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The attribute title (displayed as h4)
+     */
+    title: string;
+    /**
+     * The attribute content (displayed as p)
+     */
+    children: ReactNode;
+}

package/dist/types/primitive/attribute-list/attribute.atoms.d.ts

@@ -0,0 +1,5 @@
+import { AttributeListItemProps } from './types';
+/**
+ * AttributeList.Item atom
+ */
+export declare const AttributeListItem: import('react').ForwardRefExoticComponent<AttributeListItemProps & import('react').RefAttributes<HTMLLIElement>>;

package/dist/types/primitive/attribute-list/attribute.d.ts

@@ -0,0 +1,4 @@
+import { AttributeListProps } from './types';
+export declare const AttributeList: import('react').ForwardRefExoticComponent<AttributeListProps & import('react').RefAttributes<HTMLUListElement>> & {
+    Item: import('react').ForwardRefExoticComponent<import('./types').AttributeListItemProps & import('react').RefAttributes<HTMLLIElement>>;
+};

package/dist/types/primitive/attribute-list/index.d.ts

@@ -0,0 +1,2 @@
+export { AttributeList } from './attribute';
+export type { AttributeListProps, AttributeListItemProps } from './types';

package/dist/types/primitive/attribute-list/types.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { AttributeProps } from '../attribute/types';
+/**
+ * Props for the AttributeList root component
+ */
+export interface AttributeListProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * Number of grid columns (default: 4)
+     */
+    columns?: number;
+    /**
+     * Children should be AttributeList.Item elements
+     */
+    children: ReactNode;
+}
+/**
+ * Props for AttributeList.Item
+ */
+export interface AttributeListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title' | 'children'>, Pick<AttributeProps, 'title' | 'children'> {
+    /**
+     * Number of grid columns to span (default: 1)
+     */
+    span?: number;
+}

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

@@ -1,5 +1,7 @@
 export * from './alert';
 export * from './anchor';
+export * from './attribute';
+export * from './attribute-list';
 export * from './avatar';
 export * from './badge';
 export * from './brand';

package/dist/utils/enforce-subpath-import.js

@@ -47,6 +47,8 @@ const symbolToSubpath = {
   "Tooltip": "overlays",
   "Alert": "primitive",
   "Anchor": "primitive",
+  "Attribute": "primitive",
+  "AttributeList": "primitive",
   "Avatar": "primitive",
   "Badge": "primitive",
   "Brand": "primitive",

package/package.json

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