@dimasbaguspm/versaur 0.0.9 → 0.0.11

package/README.md

@@ -3,6 +3,7 @@
 A modern React UI library built with TypeScript and Tailwind CSS, featuring tree-shakable
 components
 
+
 ## Features
 
 - 🎨 **Tailwind CSS 4** - Modern styling with CSS-in-JS
@@ -33,9 +34,31 @@ import { Button, Input, Card } from '@dimasbaguspm/versaur'
 
 ```tsx
 // Import only what you need
-import { Button } from 'versaur/primitive'
+import { Button } from '@dimasbaguspm/versaur/primitive'
+```
+
+
+## ESLint: Enforce Sub-path Imports (FlatConfig)
+
+Versaur provides an ESLint rule to enforce sub-path imports for optimal tree-shaking
+
+**Setup:**
+
+1. In your FlatConfig file (e.g., `eslint.config.js`), import and spread the rule:
+
+```js
+// eslint.config.js
+import { versaurEnforceSubpathImport } from '@dimasbaguspm/versaur/enforce-subpath-import'
+
+export default [
+  ...versaurEnforceSubpathImport,
+  // ...other config
+]
 ```
 
+**What it does:**
+
+Warns when importing from `@dimasbaguspm/versaur` directly, and suggests using sub-path imports (e.g., `@dimasbaguspm/versaur/primitive`) for better tree-shaking
 
 ## License
 

package/dist/{calendar-DwRERSxq.js → js/calendar-De5dCVnE.js}

@@ -34,20 +34,20 @@ const calculatorRootVariants = cva(
       disabled: !1
     }
   }
-), CalculatorButton = forwardRef(({ variant: i = "default", className: e, ...t }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+), CalculatorButton = forwardRef(({ variant: r = "default", className: e, ...t }, l) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   "button",
   {
     ref: l,
     type: "button",
     className: cn(
-      calculatorButtonVariants({ variant: i, disabled: t.disabled }),
+      calculatorButtonVariants({ variant: r, disabled: t.disabled }),
       e
     ),
     ...t
   }
 ));
-function getIconColorFromVariant(i = "primary") {
-  const e = i.split("-");
+function getIconColorFromVariant(r = "primary") {
+  const e = r.split("-");
   if (e.length === 1)
     switch (e[0]) {
       case "ghost":
@@ -57,6 +57,7 @@ function getIconColorFromVariant(i = "primary") {
       default:
         return "neutral";
     }
+  if (e?.[1] === "outline") return "inherit";
   switch (e[0]) {
     case "primary":
       return "primary";
@@ -86,35 +87,35 @@ const buttonIconVariants = cva(
     variants: {
       variant: {
         // Core variants using Versaur color system
-        primary: "bg-coral text-white hover:bg-coral/90 focus-visible:ring-coral-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-sage text-white hover:bg-sage/90 focus-visible:ring-sage-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-mist text-white hover:bg-mist/90 focus-visible:ring-mist-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-slate-soft focus-visible:ring-slate-soft focus-visible:ring-offset-white",
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
         neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft focus-visible:ring-offset-white shadow-sm",
         // Outline variants
-        "primary-outline": "border border-coral text-coral bg-white hover:bg-coral hover:text-white focus-visible:ring-coral-soft focus-visible:ring-offset-white transition-all",
-        "secondary-outline": "border border-sage text-sage bg-white hover:bg-sage hover:text-white focus-visible:ring-sage-soft focus-visible:ring-offset-white transition-all",
-        "tertiary-outline": "border border-mist text-mist bg-white hover:bg-mist hover:text-white focus-visible:ring-mist-soft focus-visible:ring-offset-white transition-all",
-        "ghost-outline": "border border-slate text-slate bg-white hover:bg-slate hover:text-white focus-visible:ring-slate-soft focus-visible:ring-offset-white transition-all",
+        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-soft 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-soft 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-soft 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-soft 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-soft focus-visible:ring-offset-white transition-all",
         // Ghost variants (subtle)
-        "primary-ghost": "text-coral bg-white hover:bg-coral-soft focus-visible:ring-coral-soft focus-visible:ring-offset-white",
-        "secondary-ghost": "text-sage bg-white hover:bg-sage-soft focus-visible:ring-sage-soft focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-mist bg-white hover:bg-mist-soft focus-visible:ring-mist-soft focus-visible:ring-offset-white",
-        "neutral-ghost": "text-foreground bg-white hover:bg-neutral/70 focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
+        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
+        "neutral-ghost": "text-foreground bg-white hover:bg-neutral-light 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-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success-soft focus-visible:ring-success-soft focus-visible:ring-offset-white",
+        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
         info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-soft focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info-soft focus-visible:ring-info-soft focus-visible:ring-offset-white",
+        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
         warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-soft focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning-soft focus-visible:ring-warning-soft focus-visible:ring-offset-white",
+        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
         danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-soft focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger-soft focus-visible:ring-danger-soft focus-visible:ring-offset-white",
+        "danger-ghost": "text-danger bg-white hover:bg-danger-light focus-visible:ring-danger-light focus-visible:ring-offset-white",
         // Utility variants
         outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
         destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
@@ -156,20 +157,21 @@ const buttonIconVariants = cva(
       success: "text-success",
       info: "text-info",
       warning: "text-warning",
-      danger: "text-danger"
+      danger: "text-danger",
+      inherit: ""
     }
   },
   defaultVariants: {
     size: "md",
     color: "primary"
   }
-}), Icon = React__default.forwardRef(function({ as: e, color: t = "primary", size: l = "md", className: f, ...s }, c) {
+}), Icon = React__default.forwardRef(function({ as: e, color: t = "primary", size: l = "md", className: c, ...i }, f) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     e,
     {
-      ref: c,
-      className: iconVariants({ color: t, size: l, className: f }),
-      ...s
+      ref: f,
+      className: iconVariants({ color: t, size: l, className: c }),
+      ...i
     }
   );
 }), ButtonIcon = React__default.forwardRef(
@@ -177,11 +179,11 @@ const buttonIconVariants = cva(
     className: e,
     variant: t = "primary",
     size: l = "md",
-    shape: f = "rounded",
-    disabled: s = !1,
-    as: c,
-    "aria-label": o,
-    ...u
+    shape: c = "rounded",
+    disabled: i = !1,
+    as: f,
+    "aria-label": s,
+    ...g
   }, h) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
@@ -192,19 +194,19 @@ const buttonIconVariants = cva(
           buttonIconVariants({
             variant: t,
             size: l,
-            shape: f
+            shape: c
           }),
           e
         ),
-        disabled: s,
-        "aria-disabled": s,
-        "aria-label": o,
-        inert: s ? !0 : void 0,
-        ...u,
+        disabled: i,
+        "aria-disabled": i,
+        "aria-label": s,
+        inert: i ? !0 : void 0,
+        ...g,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Icon,
           {
-            as: c,
+            as: f,
             size: l,
             color: getIconColorFromVariant(t)
           }
@@ -231,39 +233,39 @@ function useCalculator({
       return "";
     }
   }, []), handleButton = useCallback(
-    (i) => {
+    (r) => {
       if (!disabled)
-        if (i === "C")
+        if (r === "C")
           setInput("");
-        else if (i === "⌫")
+        else if (r === "⌫")
           setInput((e) => e.slice(0, -1));
-        else if (i === "=") {
+        else if (r === "=") {
           const e = evaluate(input);
           setInput(e);
         } else
-          setInput((e) => e + i);
+          setInput((e) => e + r);
     },
     [disabled, input, evaluate]
   );
   useEffect(() => {
     if (onChange) {
-      const i = evaluate(input);
-      onChange(i);
+      const r = evaluate(input);
+      onChange(r);
     }
   }, [evaluate, input, onChange]), useEffect(() => {
     if (disabled) return;
-    const i = (e) => {
+    const r = (e) => {
       if (document.activeElement !== inputRef.current && document.activeElement?.tagName !== "BODY")
         return;
       const t = e.key;
       t === "Enter" || t === "=" ? (handleButton("="), e.preventDefault()) : t === "Backspace" ? (handleButton("⌫"), e.preventDefault()) : t === "Escape" || t === "C" || t === "c" ? (handleButton("C"), e.preventDefault()) : (/^[0-9]$/.test(t) || ["/", "*", "-", "+", "."].includes(t)) && (handleButton(t), e.preventDefault());
     };
-    return window.addEventListener("keydown", i), () => window.removeEventListener("keydown", i);
+    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
   }, [handleButton, disabled]), useEffect(() => {
     disabled || inputRef.current?.focus();
   }, [disabled]);
-  const handleInput = (i) => {
-    const e = i.target.value.replace(/[^\d+\-*/.]/g, "");
+  const handleInput = (r) => {
+    const e = r.target.value.replace(/[^\d+\-*/.]/g, "");
     setInput(e);
   };
   return {
@@ -280,58 +282,58 @@ const BUTTONS = [
   ["0", ".", "=", "+"]
 ], Calculator = forwardRef(
   ({
-    initialValue: i = "",
+    initialValue: r = "",
     onChange: e,
     disabled: t,
     className: l,
-    "aria-label": f
-  }, s) => {
-    const { input: c, inputRef: o, handleButton: u, handleInput: h } = useCalculator({
-      initialValue: i,
+    "aria-label": c
+  }, i) => {
+    const { input: f, inputRef: s, handleButton: g, handleInput: h } = useCalculator({
+      initialValue: r,
       disabled: t,
       onChange: e
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "div",
       {
-        ref: s,
+        ref: i,
         className: cn(calculatorRootVariants({ disabled: t }), l),
-        "aria-label": f || "Calculator",
+        "aria-label": c || "Calculator",
         role: "region",
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
             {
-              ref: o,
+              ref: s,
               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: c,
+              value: f,
               onChange: h,
               disabled: t,
               inputMode: "decimal",
               "aria-label": "Calculator input"
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((b, v) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: b.map((g) => g === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 mb-3", children: BUTTONS.map((b, v) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex w-full", children: b.map((u) => u === "⌫" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
             ButtonIcon,
             {
               as: X,
               variant: "danger-ghost",
               "aria-label": "Backspace",
               size: "md",
-              onClick: () => u("⌫"),
+              onClick: () => g("⌫"),
               disabled: t
             },
             "backspace"
           ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             CalculatorButton,
             {
-              variant: g === "=" ? "action" : g === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(g) ? "operator" : "default",
-              onClick: () => u(g),
+              variant: u === "=" ? "action" : u === "C" ? "danger" : ["/", "*", "-", "+", "/"].includes(u) ? "operator" : "default",
+              onClick: () => g(u),
               disabled: t,
-              "aria-label": g,
-              children: g
+              "aria-label": u,
+              children: u
             },
-            g
+            u
           )) }, v)) })
         ]
       }
@@ -345,35 +347,35 @@ const buttonVariants = cva(
     variants: {
       variant: {
         // Core variants using Versaur color system
-        primary: "bg-coral text-white hover:bg-coral/90 focus-visible:ring-coral-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        secondary: "bg-sage text-white hover:bg-sage/90 focus-visible:ring-sage-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        tertiary: "bg-mist text-white hover:bg-mist/90 focus-visible:ring-mist-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
-        ghost: "bg-white text-foreground hover:bg-slate-soft focus-visible:ring-slate-soft focus-visible:ring-offset-white",
+        primary: "bg-primary text-white hover:bg-primary/90 focus-visible:ring-primary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        secondary: "bg-secondary text-white hover:bg-secondary/90 focus-visible:ring-secondary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        tertiary: "bg-tertiary text-white hover:bg-tertiary/90 focus-visible:ring-tertiary-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
+        ghost: "bg-white text-foreground hover:bg-ghost-soft focus-visible:ring-ghost-soft focus-visible:ring-offset-white",
         neutral: "bg-neutral text-foreground border border-border hover:bg-neutral/80 focus-visible:ring-foreground-soft focus-visible:ring-offset-white shadow-sm",
         // Outline variants
-        "primary-outline": "border border-coral text-coral bg-white hover:bg-coral hover:text-white focus-visible:ring-coral-soft focus-visible:ring-offset-white transition-all",
-        "secondary-outline": "border border-sage text-sage bg-white hover:bg-sage hover:text-white focus-visible:ring-sage-soft focus-visible:ring-offset-white transition-all",
-        "tertiary-outline": "border border-mist text-mist bg-white hover:bg-mist hover:text-white focus-visible:ring-mist-soft focus-visible:ring-offset-white transition-all",
-        "ghost-outline": "border border-slate text-slate bg-white hover:bg-slate hover:text-white focus-visible:ring-slate-soft focus-visible:ring-offset-white transition-all",
+        "primary-outline": "border border-primary text-primary bg-white hover:bg-primary hover:text-white focus-visible:ring-primary-soft 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-soft 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-soft 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-soft 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-soft focus-visible:ring-offset-white transition-all",
         // Ghost variants (subtle)
-        "primary-ghost": "text-coral bg-white hover:bg-coral-soft focus-visible:ring-coral-soft focus-visible:ring-offset-white",
-        "secondary-ghost": "text-sage bg-white hover:bg-sage-soft focus-visible:ring-sage-soft focus-visible:ring-offset-white",
-        "tertiary-ghost": "text-mist bg-white hover:bg-mist-soft focus-visible:ring-mist-soft focus-visible:ring-offset-white",
+        "primary-ghost": "text-primary bg-white hover:bg-primary-light focus-visible:ring-primary-light focus-visible:ring-offset-white",
+        "secondary-ghost": "text-secondary bg-white hover:bg-secondary-light focus-visible:ring-secondary-light focus-visible:ring-offset-white",
+        "tertiary-ghost": "text-tertiary bg-white hover:bg-tertiary-light focus-visible:ring-tertiary-light focus-visible:ring-offset-white",
         "neutral-ghost": "text-foreground bg-white hover:bg-neutral/70 focus-visible:ring-foreground-soft focus-visible:ring-offset-white",
         // Semantic variants
         success: "bg-success text-white hover:bg-success/90 focus-visible:ring-success-soft 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-soft focus-visible:ring-offset-white transition-all",
-        "success-ghost": "text-success bg-white hover:bg-success-soft focus-visible:ring-success-soft focus-visible:ring-offset-white",
+        "success-ghost": "text-success bg-white hover:bg-success-light focus-visible:ring-success-light focus-visible:ring-offset-white",
         info: "bg-info text-white hover:bg-info/90 focus-visible:ring-info-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         "info-outline": "border border-info text-info bg-white hover:bg-info hover:text-white focus-visible:ring-info-soft focus-visible:ring-offset-white transition-all",
-        "info-ghost": "text-info bg-white hover:bg-info-soft focus-visible:ring-info-soft focus-visible:ring-offset-white",
+        "info-ghost": "text-info bg-white hover:bg-info-light focus-visible:ring-info-light focus-visible:ring-offset-white",
         warning: "bg-warning text-white hover:bg-warning/90 focus-visible:ring-warning-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         "warning-outline": "border border-warning text-warning bg-white hover:bg-warning hover:text-white focus-visible:ring-warning-soft focus-visible:ring-offset-white transition-all",
-        "warning-ghost": "text-warning bg-white hover:bg-warning-soft focus-visible:ring-warning-soft focus-visible:ring-offset-white",
+        "warning-ghost": "text-warning bg-white hover:bg-warning-light focus-visible:ring-warning-light focus-visible:ring-offset-white",
         danger: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md",
         "danger-outline": "border border-danger text-danger bg-white hover:bg-danger hover:text-white focus-visible:ring-danger-soft focus-visible:ring-offset-white transition-all",
-        "danger-ghost": "text-danger bg-white hover:bg-danger-soft focus-visible:ring-danger-soft focus-visible:ring-offset-white",
+        "danger-ghost": "text-danger bg-white hover:bg-danger-light focus-visible:ring-danger-light focus-visible:ring-offset-white",
         // Utility variants
         outline: "border border-border text-foreground bg-white hover:bg-accent-soft focus-visible:ring-accent-soft focus-visible:ring-offset-white transition-all",
         destructive: "bg-danger text-white hover:bg-danger/90 focus-visible:ring-danger-soft focus-visible:ring-offset-white shadow-sm hover:shadow-md"
@@ -390,26 +392,26 @@ const buttonVariants = cva(
     }
   }
 ), Button = React__default.forwardRef(
-  function i({
+  function r({
     className: e,
     variant: t = "primary",
     size: l = "md",
-    disabled: f = !1,
-    type: s = "button",
-    children: c,
-    ...o
-  }, u) {
+    disabled: c = !1,
+    type: i = "button",
+    children: f,
+    ...s
+  }, g) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "button",
       {
-        ref: u,
-        type: s,
+        ref: g,
+        type: i,
         className: cn(buttonVariants({ variant: t, size: l }), e),
-        disabled: f,
-        "aria-disabled": f,
-        inert: f ? !0 : void 0,
-        ...o,
-        children: c
+        disabled: c,
+        "aria-disabled": c,
+        inert: c ? !0 : void 0,
+        ...s,
+        children: f
       }
     );
   }
@@ -424,7 +426,11 @@ const buttonVariants = cva(
       success: "text-success",
       info: "text-info",
       warning: "text-warning",
-      danger: "text-danger"
+      danger: "text-danger",
+      inherit: "",
+      gray: "text-gray-500",
+      black: "text-black",
+      white: "text-white"
     },
     hasUnderline: {
       true: "underline",
@@ -480,19 +486,19 @@ const buttonVariants = cva(
   }
 }), Text = forwardRef(
   ({
-    as: i = "span",
+    as: r = "span",
     color: e = "ghost",
     hasUnderline: t = !1,
     isCapitalize: l = !1,
-    align: f = "left",
-    italic: s = !1,
-    clamp: c = "none",
-    ellipsis: o = !1,
-    fontSize: u,
+    align: c = "left",
+    italic: i = !1,
+    clamp: f = "none",
+    ellipsis: s = !1,
+    fontSize: g,
     fontWeight: h,
     className: b,
     children: v,
-    ...g
+    ...u
   }, y) => {
     const a = [
       "h1",
@@ -504,9 +510,9 @@ const buttonVariants = cva(
       "p",
       "span",
       "label"
-    ].includes(i) ? i : "span", w = u ? `text-${u}` : "", m = h ? `font-${h}` : "";
+    ].includes(r) ? r : "span", w = g ? `text-${g}` : "", m = h ? `font-${h}` : "";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      i,
+      r,
       {
         ref: y,
         className: cn(
@@ -514,10 +520,10 @@ const buttonVariants = cva(
             color: e,
             hasUnderline: t,
             isCapitalize: l,
-            align: f,
-            italic: s,
-            clamp: c,
-            ellipsis: o,
+            align: c,
+            italic: i,
+            clamp: f,
+            ellipsis: s,
             // @ts-expect-error - `as` is not a valid variant
             as: a
           }),
@@ -525,22 +531,22 @@ const buttonVariants = cva(
           m,
           b
         ),
-        ...g,
+        ...u,
         children: v
       }
     );
   }
 ), CalendarRoot = ({
-  value: i,
+  value: r,
   onChange: e,
   className: t,
   ...l
 }) => {
-  const f = /* @__PURE__ */ new Date(), [s, c] = useState(f.getMonth()), [o, u] = useState(f.getFullYear()), h = (n, a) => new Date(n, a + 1, 0).getDate(), b = (n, a) => new Date(n, a, 1).getDay(), v = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-4 pt-4 pb-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "base", fontWeight: "semibold", children: i ? i.toLocaleDateString(void 0, {
+  const c = /* @__PURE__ */ new Date(), [i, f] = useState(c.getMonth()), [s, g] = useState(c.getFullYear()), h = (n, a) => new Date(n, a + 1, 0).getDate(), b = (n, a) => new Date(n, a, 1).getDay(), v = () => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-4 pt-4 pb-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "base", fontWeight: "semibold", className: "ml-2", children: r ? r.toLocaleDateString(void 0, {
       year: "numeric",
       month: "long"
-    }) : `${o} ${new Date(o, s).toLocaleString(void 0, { month: "long" })}` }),
+    }) : `${s} ${new Date(s, i).toLocaleString(void 0, { month: "long" })}` }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ButtonIcon,
@@ -550,8 +556,8 @@ const buttonVariants = cva(
           size: "sm",
           "aria-label": "Previous month",
           onClick: () => {
-            const n = s === 0 ? 11 : s - 1, a = s === 0 ? o - 1 : o;
-            c(n), u(a), e?.(new Date(a, n, 1));
+            const n = i === 0 ? 11 : i - 1, a = i === 0 ? s - 1 : s;
+            f(n), g(a), e?.(new Date(a, n, 1));
           }
         }
       ),
@@ -563,75 +569,81 @@ const buttonVariants = cva(
           size: "sm",
           "aria-label": "Next month",
           onClick: () => {
-            const n = s === 11 ? 0 : s + 1, a = s === 11 ? o + 1 : o;
-            c(n), u(a), e?.(new Date(a, n, 1));
+            const n = i === 11 ? 0 : i + 1, a = i === 11 ? s + 1 : s;
+            f(n), g(a), e?.(new Date(a, n, 1));
           }
         }
       )
     ] })
-  ] }), g = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 px-4 text-slate-500 mb-1", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((n) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "xs", color: "ghost", align: "center", children: n }, n)) }), y = () => {
-    const n = [], a = b(o, s), w = h(o, s), m = h(o, s - 1 < 0 ? 11 : s - 1);
-    for (let r = 0; r < a; r++) {
-      const d = m - a + r + 1;
+  ] }), u = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 px-4 text-ghost-500 mb-3", children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((n) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { fontSize: "xs", color: "ghost", align: "center", children: n }, n)) }), y = () => {
+    const n = [], a = b(s, i), w = h(s, i), m = h(s, i - 1 < 0 ? 11 : i - 1);
+    for (let o = 0; o < a; o++) {
+      const d = m - a + o + 1;
       n.push(
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ButtonIcon,
           {
-            as: () => d,
+            as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: d }),
             size: "sm",
             "aria-label": "Previous month day",
             variant: "ghost",
-            className: "text-slate-300",
             onClick: () => {
-              const x = s === 0 ? 11 : s - 1, p = s === 0 ? o - 1 : o, R = m - a + r + 1;
-              e?.(new Date(p, x, R)), c(x), u(p);
+              const x = i === 0 ? 11 : i - 1, p = i === 0 ? s - 1 : s, R = m - a + o + 1;
+              e?.(new Date(p, x, R)), f(x), g(p);
             }
           },
-          "prev-" + r
+          "prev-" + o
         )
       );
     }
-    for (let r = 1; r <= w; r++) {
-      const d = i && i.getFullYear() === o && i.getMonth() === s && i.getDate() === r;
+    for (let o = 1; o <= w; o++) {
+      const d = r && r.getFullYear() === s && r.getMonth() === i && r.getDate() === o;
       n.push(
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ButtonIcon,
           {
-            as: () => r,
+            as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Text,
+              {
+                as: "span",
+                fontSize: "sm",
+                color: d ? "inherit" : "ghost",
+                children: o
+              }
+            ),
             variant: d ? "primary" : "ghost",
             size: "sm",
-            "aria-label": `Select ${o}-${s + 1}-${r}`,
+            "aria-label": `Select ${s}-${i + 1}-${o}`,
             "aria-current": d ? "date" : void 0,
-            onClick: () => e?.(new Date(o, s, r))
+            onClick: () => e?.(new Date(s, i, o))
           },
-          r
+          o
         )
       );
     }
     const j = a + w;
-    for (let r = 0; r < (j % 7 === 0 ? 0 : 7 - j % 7); r++)
+    for (let o = 0; o < (j % 7 === 0 ? 0 : 7 - j % 7); o++)
       n.push(
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ButtonIcon,
           {
-            as: () => r + 1,
+            as: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "sm", color: "tertiary", children: o + 1 }),
             size: "sm",
             "aria-label": "Next month day",
             variant: "ghost",
-            className: "text-slate-300",
             onClick: () => {
-              const d = s === 11 ? 0 : s + 1, x = s === 11 ? o + 1 : o, p = r + 1;
-              e?.(new Date(x, d, p)), c(d), u(x);
+              const d = i === 11 ? 0 : i + 1, x = i === 11 ? s + 1 : s, p = o + 1;
+              e?.(new Date(x, d, p)), f(d), g(x);
             }
           },
-          "next-" + r
+          "next-" + o
         )
       );
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 px-4 pb-4", children: n });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("select-none", t), ...l, children: [
     v(),
-    g(),
+    u(),
     y()
   ] });
 }, Calendar = Object.assign(CalendarRoot, {});