@dimasbaguspm/versaur 0.0.10 → 0.0.12

package/dist/{enforce-subpath-import.js → js/enforce-subpath-import.js}

@@ -7,6 +7,7 @@ const symbolToSubpath = {
   Button: 'primitive',
   ButtonFloat: 'primitive',
   ButtonIcon: 'primitive',
+  Anchor: 'primitive',
   Avatar: 'primitive',
   Badge: 'primitive',
   Brand: 'primitive',
@@ -65,28 +66,43 @@ const rules = {
     return {
       ImportDeclaration(node) {
         if (node.source.value === '@dimasbaguspm/versaur') {
-          const importSpecifiers = node.specifiers
-            .filter(s => s.type === 'ImportSpecifier')
-            .map(s => s.imported.name)
-          const known = importSpecifiers.find(name => symbolToSubpath[name])
-          const subpath = known ? symbolToSubpath[known] : null
+          const importSpecifiers = node.specifiers.filter(
+            s => s.type === 'ImportSpecifier'
+          )
+          // Group symbols by subpath
+          const subpathGroups = {}
+          importSpecifiers.forEach(s => {
+            const name = s.imported.name
+            const subpath = symbolToSubpath[name]
+            if (subpath) {
+              if (!subpathGroups[subpath]) subpathGroups[subpath] = []
+              subpathGroups[subpath].push(name)
+            }
+          })
+          // If no known symbol, fallback to generic message
+          const allKnown = Object.keys(subpathGroups).length > 0
           let message =
             'Use sub-path import for better tree-shaking (e.g., @dimasbaguspm/versaur/primitive)'
-          if (subpath) {
-            message = `Import { ${known} } from '@dimasbaguspm/versaur/${subpath}' instead.`
+          if (allKnown) {
+            message =
+              'Split imports by sub-path for optimal tree-shaking (e.g., import {A} from .../primitive, {B} from .../overlays)'
           }
           context.report({
             node,
             message,
-            suggest: subpath
+            suggest: allKnown
               ? [
                   {
-                    desc: `Change to import { ${known} } from '@dimasbaguspm/versaur/${subpath}'`,
+                    desc: 'Split imports by sub-path for all symbols',
                     fix(fixer) {
-                      return fixer.replaceText(
-                        node.source,
-                        `'@dimasbaguspm/versaur/${subpath}'`
-                      )
+                      // Build new import statements
+                      const newImports = Object.entries(subpathGroups)
+                        .map(
+                          ([subpath, names]) =>
+                            `import { ${names.join(', ')} } from '@dimasbaguspm/versaur/${subpath}';`
+                        )
+                        .join('\n')
+                      return fixer.replaceText(node, newImports)
                     },
                   },
                 ]

package/dist/{feedbacks → js/feedbacks}/index.js

@@ -1,4 +1,4 @@
-import { L as r, P as s, S as e } from "../skeleton-DwqjRsF-.js";
+import { L as r, P as s, S as e } from "../skeleton-BNZyaRjo.js";
 export {
   r as LoadingIndicator,
   s as ProgressIndicator,

package/dist/{form-layout-COQbtyW5.js → js/form-layout-BBDs1Y8m.js}

@@ -1,5 +1,5 @@
 import { c as i, j as o, a as l } from "./index-DOdDlCoL.js";
-import * as m from "react";
+import * as p from "react";
 import { forwardRef as n } from "react";
 const u = i(
   "w-full flex flex-wrap items-center px-4 py-3 gap-2 bg-white [&>[data-versaur-appbar-bottom]]:basis-full [&>[data-versaur-appbar-bottom]]:w-full",
@@ -57,7 +57,7 @@ const u = i(
     "div",
     {
       ref: t,
-      className: l("text-xs text-slate-400 truncate min-w-0", a),
+      className: l("text-xs text-ghost-400 truncate min-w-0", a),
       children: e
     }
   )
@@ -124,8 +124,8 @@ const u = i(
   {
     variants: {
       active: {
-        true: "font-semibold text-coral",
-        false: "text-slate"
+        true: "font-semibold text-primary",
+        false: "text-ghost"
       }
     },
     defaultVariants: {
@@ -174,8 +174,8 @@ const u = i(
   {
     variants: {
       active: {
-        true: "bg-coral/10 text-coral",
-        false: "hover:text-coral text-ghost"
+        true: "bg-primary/10 text-primary",
+        false: "hover:text-primary text-ghost"
       }
     },
     defaultVariants: {
@@ -219,18 +219,18 @@ const u = i(
   NavItem: O,
   Nav: C,
   Actions: I
-}), P = i("w-full bg-white mx-aut relative", {
+}), P = i("w-full mx-auto relative", {
   variants: {
     type: {
       desktop: "max-w-7xl px-6 py-10",
-      tablet: "max-w-3xl px-4 py-8",
-      mobile: "w-full px-2 py-4"
+      tablet: "max-w-3xl",
+      mobile: "w-full"
     }
   },
   defaultVariants: {
     type: "desktop"
   }
-}), Q = m.forwardRef(
+}), Q = p.forwardRef(
   function({ type: a = "desktop", className: t, children: s, ...r }, c) {
     return /* @__PURE__ */ o.jsx(
       "div",
@@ -276,13 +276,13 @@ const u = i(
   }
 ), $ = n(
   function({ span: a = 4, className: t, children: s, ...r }, c) {
-    const p = Math.min(12, Math.max(1, a));
+    const m = Math.min(12, Math.max(1, a));
     return /* @__PURE__ */ o.jsx(
       "div",
       {
         ref: c,
         className: l(
-          M({ span: `${p}` }),
+          M({ span: `${m}` }),
           t
         ),
         ...r,

package/dist/{forms → js/forms}/index.js

@@ -1,4 +1,4 @@
-import { C as e, a as n, b as p, D as s, R as u, c as i, S as I, d as c, g as S, j as h, i as l, h as r, e as T, T as g, f as m } from "../switch-input-DRNFMsqC.js";
+import { C as e, a as n, b as p, D as s, R as u, c as i, S as I, d as c, g as S, j as h, i as l, h as r, e as T, T as g, f as m } from "../switch-input-B-pwBWbi.js";
 export {
   e as CalculatorInput,
   n as CheckboxInput,

package/dist/{index.js → js/index.js}

@@ -1,11 +1,11 @@
-import { L as s, P as e, S as r } from "./skeleton-DwqjRsF-.js";
-import { A as n, B as p, F as u, P as c, T as i } from "./form-layout-COQbtyW5.js";
-import { C as I, a as m, b as T, D as B, R as S, c as x, S as d, d as b, g as f, j as g, i as h, h as C, e as k, T as A, f as P } from "./switch-input-DRNFMsqC.js";
+import { L as s, P as e, S as r } from "./skeleton-BNZyaRjo.js";
+import { A as n, B as p, F as u, P as c, T as i } from "./form-layout-BBDs1Y8m.js";
+import { C as I, a as m, b as T, D as B, R as S, c as x, S as d, d as b, g as f, j as g, i as h, h as C, e as k, T as A, f as P } from "./switch-input-B-pwBWbi.js";
 import { D as L } from "./drawer-Cn7sreJG.js";
-import { M, a as F } from "./menu--hEHXVZf.js";
-import { A as R, a as j, B as v, b as q, c as z, S as E, T as G, d as H } from "./tile-BinjKW_i.js";
-import { B as K, a as N, C as O, b as Q, I as U, T as V } from "./calendar-DwRERSxq.js";
-import { B as X, T as Y } from "./tabs-KyFmo5cA.js";
+import { M, a as F } from "./menu-Du409VIG.js";
+import { A as R, a as j, B as v, b as q, c as z, S as E, T as G, d as H } from "./tile-6SeBYc08.js";
+import { B as K, a as N, C as O, b as Q, I as U, T as V } from "./calendar-De5dCVnE.js";
+import { B as X, T as Y } from "./tabs-BbOkYchB.js";
 export {
   R as Alert,
   n as AppBar,

package/dist/{layouts → js/layouts}/index.js

@@ -1,4 +1,4 @@
-import { A as r, B as s, F as t, P as B, T as p } from "../form-layout-COQbtyW5.js";
+import { A as r, B as s, F as t, P as B, T as p } from "../form-layout-BBDs1Y8m.js";
 export {
   r as AppBar,
   s as BottomBar,

package/dist/{menu--hEHXVZf.js → js/menu-Du409VIG.js}

@@ -1,6 +1,6 @@
 import { j as u, a as x, c as y } from "./index-DOdDlCoL.js";
-import { forwardRef as f, useEffect as m, useRef as v, useState as M, createContext as j, useContext as k, useId as I } from "react";
-const z = f(
+import { forwardRef as m, useEffect as f, useRef as v, useState as M, createContext as j, useContext as k, useId as I } from "react";
+const z = m(
   ({ className: e, ...t }, n) => /* @__PURE__ */ u.jsx(
     "div",
     {
@@ -9,7 +9,7 @@ const z = f(
       ...t
     }
   )
-), D = f(
+), D = m(
   ({ className: e, ...t }, n) => /* @__PURE__ */ u.jsx(
     "div",
     {
@@ -18,9 +18,9 @@ const z = f(
       ...t
     }
   )
-), V = f(
+), V = m(
   ({ className: e, ...t }, n) => /* @__PURE__ */ u.jsx("div", { ref: n, className: x("px-6 py-2", e), ...t })
-), A = f(
+), A = m(
   ({ onOverlayClick: e, ...t }, n) => /* @__PURE__ */ u.jsx(
     "div",
     {
@@ -75,7 +75,7 @@ const z = f(
   }
 );
 function R(e, t) {
-  m(() => {
+  f(() => {
     if (t && e.current) {
       const n = e.current.querySelectorAll(
         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
@@ -85,7 +85,7 @@ function R(e, t) {
   }, [t, e]);
 }
 function F(e, t) {
-  m(() => {
+  f(() => {
     if (!e) return;
     const n = (o) => {
       o.key === "Escape" && t();
@@ -104,7 +104,7 @@ const L = 200, T = ({
   ...s
 }) => {
   const d = v(null), c = v(null), [p, l] = M(e), [h, b] = M(!1);
-  return m(() => {
+  return f(() => {
     if (e)
       l(!0), b(!1), d.current = document.activeElement;
     else if (p) {
@@ -167,7 +167,7 @@ const L = 200, T = ({
     }
   }
 ), q = y(
-  "w-full text-left px-4 rounded-md cursor-pointer transition-colors duration-150 font-medium select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coral/70 hover:bg-slate-100 active:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed",
+  "w-full text-left px-4 rounded-md cursor-pointer transition-colors duration-150 font-medium select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 hover:bg-ghost-100 active:bg-ghost-200 disabled:opacity-50 disabled:cursor-not-allowed",
   {
     variants: {
       variant: {
@@ -184,7 +184,7 @@ const L = 200, T = ({
       size: "md"
     }
   }
-), B = f(
+), B = m(
   ({ children: e, ...t }, n) => {
     const { open: o, triggerRef: r } = w();
     return /* @__PURE__ */ u.jsx(
@@ -201,7 +201,7 @@ const L = 200, T = ({
       }
     );
   }
-), H = f(
+), H = m(
   ({ children: e, className: t, ...n }, o) => {
     const { open: r, contentRef: a, triggerRef: i, size: s } = w(), d = I();
     let c = 0, p = 0;
@@ -237,7 +237,7 @@ const L = 200, T = ({
       }
     );
   }
-), K = f(
+), K = m(
   ({ children: e, disabled: t, className: n, ...o }, r) => {
     const { size: a } = w();
     return /* @__PURE__ */ u.jsx(
@@ -261,7 +261,7 @@ const L = 200, T = ({
   }
 );
 function $(e, t, n, o) {
-  m(() => {
+  f(() => {
     if (!e) return;
     function r(a) {
       !t.current?.contains(a.target) && !n.current?.contains(a.target) && o();
@@ -270,7 +270,7 @@ function $(e, t, n, o) {
   }, [e, o, t, n]);
 }
 function U(e, t) {
-  m(() => {
+  f(() => {
     if (e && t.current) {
       const n = t.current.querySelectorAll('[role="menuitem"]');
       n.length && n[0].focus();
@@ -278,7 +278,7 @@ function U(e, t) {
   }, [e, t]);
 }
 function W(e, t, n, o) {
-  m(() => {
+  f(() => {
     if (!e || !t.current) return;
     const r = t.current;
     function a(i) {

package/dist/js/navigation/index.js

@@ -0,0 +1,5 @@
+import { B as s, T as b } from "../tabs-BbOkYchB.js";
+export {
+  s as Breadcrumbs,
+  b as Tabs
+};

package/dist/{overlays → js/overlays}/index.js

@@ -1,5 +1,5 @@
 import { D as o } from "../drawer-Cn7sreJG.js";
-import { M as s, a as M } from "../menu--hEHXVZf.js";
+import { M as s, a as M } from "../menu-Du409VIG.js";
 export {
   o as Drawer,
   s as Menu,

package/dist/{primitive → js/primitive}/index.js

@@ -1,5 +1,5 @@
-import { A as t, a as o, B as r, b as e, c as n, S as l, T as B, d as c } from "../tile-BinjKW_i.js";
-import { B as b, a as d, C as u, b as x, I as A, T as C } from "../calendar-DwRERSxq.js";
+import { A as t, a as o, B as r, b as e, c as n, S as l, T as B, d as c } from "../tile-6SeBYc08.js";
+import { B as b, a as d, C as u, b as x, I as A, T as C } from "../calendar-De5dCVnE.js";
 export {
   t as Alert,
   o as Avatar,

package/dist/{skeleton-DwqjRsF-.js → js/skeleton-BNZyaRjo.js}

@@ -11,10 +11,10 @@ const p = l(
         lg: "w-8 h-8 border-4"
       },
       color: {
-        primary: "border-coral border-t-transparent ",
-        secondary: "border-sage border-t-transparent",
-        tertiary: "border-mist border-t-transparent",
-        ghost: "border-slate border-t-transparent",
+        primary: "border-primary border-t-transparent ",
+        secondary: "border-secondary border-t-transparent",
+        tertiary: "border-tertiary border-t-transparent",
+        ghost: "border-ghost border-t-transparent",
         neutral: "border-neutral border-t-transparent",
         success: "border-success border-t-transparent",
         info: "border-info border-t-transparent",
@@ -30,10 +30,10 @@ const p = l(
 ), h = l("relative w-full h-1 overflow-hidden rounded", {
   variants: {
     color: {
-      primary: "bg-coral",
-      secondary: "bg-sage",
-      tertiary: "bg-mist",
-      ghost: "bg-slate",
+      primary: "bg-primary",
+      secondary: "bg-secondary",
+      tertiary: "bg-tertiary",
+      ghost: "bg-ghost",
       neutral: "bg-neutral",
       success: "bg-success",
       info: "bg-info",
@@ -50,16 +50,16 @@ const p = l(
     color: "primary",
     size: "md"
   }
-}), w = (a) => {
+}), y = (a) => {
   switch (a) {
     case "primary":
-      return "bg-coral";
+      return "bg-primary";
     case "secondary":
-      return "bg-sage";
+      return "bg-secondary";
     case "tertiary":
-      return "bg-mist";
+      return "bg-tertiary";
     case "ghost":
-      return "bg-slate";
+      return "bg-ghost";
     case "neutral":
       return "bg-neutral";
     case "success":
@@ -71,9 +71,9 @@ const p = l(
     case "danger":
       return "bg-danger";
     default:
-      return "bg-coral";
+      return "bg-primary";
   }
-}, v = u.forwardRef(
+}, w = u.forwardRef(
   ({
     color: a = "primary",
     size: e = "md",
@@ -90,7 +90,7 @@ const p = l(
       ...s
     }
   )
-), y = u.forwardRef(
+), v = u.forwardRef(
   ({
     color: a = "primary",
     size: e = "md",
@@ -124,7 +124,7 @@ const p = l(
           {
             className: d(
               "absolute left-0 top-0 h-full w-1/3 animate-loading-bar rounded-full",
-              w(a)
+              y(a)
             ),
             "aria-hidden": "true"
           }
@@ -141,7 +141,7 @@ const p = l(
     className: s,
     ...t
   }, i) => a === "bar" ? /* @__PURE__ */ o.jsx(
-    y,
+    v,
     {
       ref: i,
       color: n,
@@ -151,7 +151,7 @@ const p = l(
       ...t
     }
   ) : /* @__PURE__ */ o.jsx(
-    v,
+    w,
     {
       ref: i,
       color: n,

package/dist/{styles.css → js/styles.css}

@@ -1,4 +1,3 @@
-
 @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
 @import 'tailwindcss';
 
@@ -16,51 +15,79 @@
 }
 
 /* Versaur Design System - Spenicle Color Palette */
+
 @theme {
-  /* Font Families */
   --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
 
-  /* Core Colors */
-  --color-coral: #e07a5f;
-  --color-coral-soft: #fff8f6;
-  --color-sage: #81b29a;
-  --color-sage-soft: #f6fffa;
-  --color-mist: #84a5c0;
-  --color-mist-soft: #f5faff;
-  --color-slate: #3d405b;
-  --color-slate-soft: #e3e4ea;
-  --color-cream: #f4f1de;
-  --color-cream-soft: #fefdfb;
-  --color-light-gray: #f8f9fa;
-  --color-light-gray-soft: #fcfcfd;
-
-  /* Semantic Colors */
+  /* Primary (Coral) */
+  --color-primary: #e07a5f;
+  --color-primary-light: #ffd9cb;
+  --color-primary-bold: #a95a3a;
+  --color-primary-soft: #fff8f6;
+
+  /* Secondary (Sage) */
+  --color-secondary: #81b29a;
+  --color-secondary-light: #d9ffe6;
+  --color-secondary-bold: #56806b;
+  --color-secondary-soft: #f6fffa;
+
+  /* Tertiary (Mist) */
+  --color-tertiary: #84a5c0;
+  --color-tertiary-light: #d8ebff;
+  --color-tertiary-bold: #5a7a99;
+  --color-tertiary-soft: #f5faff;
+
+  /* Ghost (Slate) */
+  --color-ghost: #3d405b;
+  --color-ghost-light: #b6b8db;
+  --color-ghost-bold: #23243a;
+  --color-ghost-soft: #e3e4ea;
+
+  /* Neutral (Light Gray) */
+  --color-neutral: #e9ecef;
+  --color-neutral-light: #f4f6f8;
+  --color-neutral-bold: #b0b3b8;
+  --color-neutral-soft: #f8f9fa;
+
+  /* Success */
   --color-success: #6db285;
+  --color-success-light: #c8ffdd;
+  --color-success-bold: #417a5a;
   --color-success-soft: #f4fff9;
+
+  /* Info */
   --color-info: #6b8fad;
+  --color-info-light: #b9e1ff;
+  --color-info-bold: #3c5a7a;
   --color-info-soft: #f0f8ff;
+
+  /* Warning */
   --color-warning: #e08a47;
-  --color-warning-soft: #fff9f2;
+  --color-warning-light: #ffdab5;
+  --color-warning-bold: #b86a2c;
+  --color-warning-soft: #fff1e4;
+
+  /* Danger */
   --color-danger: #e06650;
-  --color-danger-soft: #fff5f4;
+  --color-danger-light: #ffbfb3;
+  --color-danger-bold: #b83c2a;
+  --color-danger-soft: #ffeeeb;
 
   /* Background and Foreground */
-  --color-background: #ffffff; /* White */
-  --color-foreground: #2d3748; /* Darker Slate */
-
-  /* Button/Component Variants */
-  --color-primary: #e07a5f; /* Coral */
-  --color-primary-soft: #fff8f6; /* Soft Coral */
-  --color-secondary: #81b29a; /* Sage */
-  --color-secondary-soft: #f6fffa; /* Soft Sage */
-  --color-tertiary: #84a5c0; /* Mist */
-  --color-tertiary-soft: #f5faff; /* Soft Mist */
-  --color-ghost: #3d405b; /* Slate */
-  --color-ghost-soft: #e3e4ea; /* Soft Slate */
-  --color-neutral: #e9ecef; /* Light Gray */
-  --color-neutral-soft: #f8f9fa; /* Soft Light Gray */
-
-  /* Utility Colors */
+  --color-background: #ffffff;
+  --color-background-light: #f8f9fa;
+  --color-background-bold: #e9ecef;
+  --color-foreground: #2d3748;
+  --color-foreground-light: #6b7280;
+  --color-foreground-bold: #1a202c;
+
+  /* Cream */
+  --color-cream: #f4f1de;
+  --color-cream-light: #f9f7f3;
+  --color-cream-bold: #e2d9b8;
+  --color-cream-soft: #f9f7f3;
+
+  /* Border and Accent */
   --color-border: #e0e0e0;
   --color-accent: #84a5c0;
 }
@@ -108,7 +135,6 @@ Our palette follows these harmonious relationships:
   animation: loading-bar 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
 
-
 @keyframes spin-perfect {
   100% {
     transform: rotate(360deg);
@@ -131,4 +157,3 @@ Our palette follows these harmonious relationships:
 .animate-fab-in {
   animation: fab-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
 }
-