@xex/ui 0.1.0 → 0.2.0

package/dist/{chunk-3M3PAPT3.js → chunk-DBZZKHSF.js}

@@ -29,10 +29,10 @@ import clsx2 from "clsx";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var variants = {
   primary: "bg-brand-600 hover:bg-brand-700 text-white shadow-sm",
-  secondary: "bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 shadow-sm",
+  secondary: "bg-surface border border-gray-300 text-gray-700 hover:bg-gray-50 shadow-sm",
   ghost: "bg-transparent text-gray-600 hover:bg-gray-100",
   danger: "bg-red-600 hover:bg-red-700 text-white shadow-sm",
-  outline: "border border-brand-500 text-brand-700 hover:bg-brand-50 bg-transparent"
+  outline: "border border-brand-500 text-accent hover:bg-accent-soft bg-transparent"
 };
 var sizes2 = {
   xs: "px-2 py-1 text-xs rounded-md gap-1",

package/dist/font-picker.js

@@ -2,7 +2,7 @@ import {
   Button,
   LoadingDots,
   useTheme
-} from "./chunk-3M3PAPT3.js";
+} from "./chunk-DBZZKHSF.js";
 
 // src/font-picker/FontPicker.tsx
 import { useEffect as useEffect2, useId, useLayoutEffect, useMemo, useRef, useState as useState2 } from "react";
@@ -193,16 +193,16 @@ function FontPicker() {
                     openList();
                   }
                 },
-                className: "flex w-full cursor-default items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2 text-left text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
+                className: "flex w-full cursor-default items-center justify-between rounded-lg border border-gray-300 bg-surface px-3 py-2 text-left text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
                 children: [
                   /* @__PURE__ */ jsx("span", { className: "truncate", style: { fontFamily: fontStack(font) }, children: font.family }),
-                  /* @__PURE__ */ jsx(ChevronUpDownIcon, { className: "h-5 w-5 shrink-0 text-gray-400" })
+                  /* @__PURE__ */ jsx(ChevronUpDownIcon, { className: "h-5 w-5 shrink-0 text-gray-500" })
                 ]
               }
             ),
-            open && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 z-40 mt-1 rounded-xl border border-gray-200 bg-white p-2 shadow-xl", children: [
+            open && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 z-40 mt-1 rounded-xl border border-gray-200 bg-surface p-2 shadow-xl", children: [
               /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" }),
+                /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -217,7 +217,7 @@ function FontPicker() {
                     "aria-label": "Search fonts",
                     "aria-activedescendant": matches[active] ? optId(active) : void 0,
                     placeholder: "Search Google Fonts\u2026",
-                    className: "w-full rounded-lg border border-gray-300 bg-white py-1.5 pl-8 pr-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
+                    className: "w-full rounded-lg border border-gray-300 bg-surface py-1.5 pl-8 pr-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400"
                   }
                 )
               ] }),
@@ -239,7 +239,7 @@ function FontPicker() {
                   "Loading fonts ",
                   /* @__PURE__ */ jsx(LoadingDots, {})
                 ] }),
-                catalog.status === "error" && /* @__PURE__ */ jsxs("li", { className: "px-3 py-2 text-sm text-red-600", children: [
+                catalog.status === "error" && /* @__PURE__ */ jsxs("li", { className: "px-3 py-2 text-sm text-danger-ink", children: [
                   "Couldn\u2019t load the font list.",
                   " ",
                   /* @__PURE__ */ jsx("button", { type: "button", className: "font-medium underline", onClick: catalog.retry, children: "Retry" })
@@ -254,19 +254,19 @@ function FontPicker() {
                     className: clsx(
                       "flex w-full cursor-default items-center justify-between rounded-md px-3 py-1.5 text-left text-sm text-gray-800",
                       i === active && "bg-gray-100 ring-2 ring-inset ring-brand-300",
-                      f.family === font.family && "bg-brand-50 font-medium"
+                      f.family === font.family && "bg-accent-soft font-medium"
                     ),
                     children: [
                       /* @__PURE__ */ jsx("span", { style: { fontFamily: fontStack(f) }, children: f.family }),
-                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-xs text-gray-400", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-xs text-gray-500", children: [
                         f.category,
-                        f.family === font.family && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 text-brand-600" })
+                        f.family === font.family && /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4 text-accent" })
                       ] })
                     ]
                   }
                 ) }, f.family)),
                 catalog.status === "ready" && matches.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-sm text-gray-500", children: "No fonts match." }),
-                visible < matches.length && /* @__PURE__ */ jsxs("li", { className: "px-3 py-2 text-xs text-gray-400", children: [
+                visible < matches.length && /* @__PURE__ */ jsxs("li", { className: "px-3 py-2 text-xs text-gray-500", children: [
                   "Showing ",
                   visible,
                   " of ",
@@ -282,7 +282,7 @@ function FontPicker() {
         /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
           "Selected: ",
           /* @__PURE__ */ jsx("span", { className: "font-semibold text-gray-900", children: font.family }),
-          font.stack ? "" : /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+          font.stack ? "" : /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
             " \xB7 ",
             font.category
           ] })

package/dist/index.d.ts

@@ -137,7 +137,7 @@ interface DataTableColumn<T> {
     sortable?: boolean;
     /** Adds a multi-select dropdown listing this column's distinct values (OR within a column, AND across columns). Default: false. */
     filter?: boolean;
-    /** Placeholder for that dropdown, e.g. "All roles". */
+    /** Placeholder for that dropdown, e.g. "All roles". Defaults to "Any <header>". */
     filterLabel?: string;
     align?: 'left' | 'right';
     /** Default width as a relative weight (a column with 2 starts twice as wide as one with 1). Default: 1. */

package/dist/index.js

@@ -4,18 +4,18 @@ import {
   Spinner,
   ThemeProvider,
   useTheme
-} from "./chunk-3M3PAPT3.js";
+} from "./chunk-DBZZKHSF.js";
 
 // src/components/Badge.tsx
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var variants = {
-  default: { pill: "bg-brand-100 text-brand-700", dot: "bg-brand-500" },
-  success: { pill: "bg-emerald-100 text-emerald-700", dot: "bg-emerald-500" },
-  warning: { pill: "bg-amber-100 text-amber-700", dot: "bg-amber-500" },
-  danger: { pill: "bg-red-100 text-red-700", dot: "bg-red-500" },
-  info: { pill: "bg-sky-100 text-sky-700", dot: "bg-sky-500" },
-  purple: { pill: "bg-purple-100 text-purple-700", dot: "bg-purple-500" },
+  default: { pill: "bg-accent-softer text-accent", dot: "bg-brand-500" },
+  success: { pill: "bg-success-soft text-success-ink", dot: "bg-success" },
+  warning: { pill: "bg-warning-soft text-warning-ink", dot: "bg-warning" },
+  danger: { pill: "bg-danger-soft text-danger-ink", dot: "bg-danger" },
+  info: { pill: "bg-info-soft text-info-ink", dot: "bg-info" },
+  purple: { pill: "bg-purple-soft text-purple-ink", dot: "bg-purple" },
   gray: { pill: "bg-gray-100 text-gray-700", dot: "bg-gray-500" }
 };
 function Badge({ variant = "default", dot = false, className, children }) {
@@ -128,7 +128,7 @@ function Modal({ open, onClose, title, footer, size = "md", ariaLabel, children
         "aria-label": title ? void 0 : ariaLabel,
         tabIndex: -1,
         onKeyDown: trapTab,
-        className: clsx2("relative flex max-h-[90vh] w-full flex-col rounded-2xl bg-white shadow-2xl focus:outline-none", sizes[size]),
+        className: clsx2("relative flex max-h-[90vh] w-full flex-col rounded-2xl bg-surface shadow-2xl focus:outline-none", sizes[size]),
         children: [
           title && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-b border-gray-100 px-6 py-4", children: [
             /* @__PURE__ */ jsx2("h2", { id: titleId, className: "text-lg font-semibold text-gray-900", children: title }),
@@ -138,7 +138,7 @@ function Modal({ open, onClose, title, footer, size = "md", ariaLabel, children
                 type: "button",
                 onClick: onClose,
                 "aria-label": "Close",
-                className: "rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+                className: "rounded-lg p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
                 children: /* @__PURE__ */ jsx2(XMarkIcon, { className: "h-5 w-5" })
               }
             )
@@ -165,11 +165,11 @@ function ConfirmDialog({
   onCancel
 }) {
   return /* @__PURE__ */ jsxs3(Modal, { open, onClose: onCancel, size: "lg", ariaLabel: title, children: [
-    /* @__PURE__ */ jsxs3("div", { role: "alert", className: "flex items-start gap-3 rounded-xl border border-red-200 bg-red-50 p-4", children: [
-      /* @__PURE__ */ jsx3(ExclamationTriangleIcon, { className: "mt-0.5 h-6 w-6 shrink-0 text-red-600" }),
+    /* @__PURE__ */ jsxs3("div", { role: "alert", className: "flex items-start gap-3 rounded-xl border border-danger-line bg-danger-soft p-4", children: [
+      /* @__PURE__ */ jsx3(ExclamationTriangleIcon, { className: "mt-0.5 h-6 w-6 shrink-0 text-danger-ink" }),
       /* @__PURE__ */ jsxs3("div", { children: [
-        /* @__PURE__ */ jsx3("p", { className: "font-bold text-red-800", children: title }),
-        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-red-700", children: message })
+        /* @__PURE__ */ jsx3("p", { className: "font-bold text-danger-ink", children: title }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-danger-ink", children: message })
       ] })
     ] }),
     /* @__PURE__ */ jsxs3("div", { className: "mt-5 flex justify-end gap-2", children: [
@@ -197,10 +197,10 @@ function Select({ label, options, placeholder, error, hint, className, id, disab
           disabled,
           "aria-invalid": !!error || void 0,
           className: clsx3(
-            "w-full appearance-none rounded-lg border bg-white px-3 py-2 pr-9 text-sm text-gray-900",
+            "w-full appearance-none rounded-lg border bg-surface px-3 py-2 pr-9 text-sm text-gray-900",
             "focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
             "disabled:bg-gray-50 disabled:text-gray-400 disabled:cursor-not-allowed",
-            error ? "border-red-400" : "border-gray-300"
+            error ? "border-danger" : "border-gray-300"
           ),
           ...rest,
           children: [
@@ -209,9 +209,9 @@ function Select({ label, options, placeholder, error, hint, className, id, disab
           ]
         }
       ),
-      /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-400" })
+      /* @__PURE__ */ jsx4(ChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500" })
     ] }),
-    error ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-xs text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-xs text-gray-500", children: hint }) : null
+    error ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-xs text-danger-ink", children: error }) : hint ? /* @__PURE__ */ jsx4("p", { className: "mt-1 text-xs text-gray-500", children: hint }) : null
   ] });
 }
 
@@ -225,24 +225,24 @@ function Input({ label, error, hint, icon, className, id, ...rest }) {
   return /* @__PURE__ */ jsxs5("div", { className, children: [
     label && /* @__PURE__ */ jsx5("label", { htmlFor: inputId, className: "mb-1 block text-sm font-medium text-gray-700", children: label }),
     /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
-      icon && /* @__PURE__ */ jsx5("span", { className: "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-gray-400 [&>svg]:h-5 [&>svg]:w-5", children: icon }),
+      icon && /* @__PURE__ */ jsx5("span", { className: "pointer-events-none absolute left-3 top-1/2 flex -translate-y-1/2 items-center text-gray-500 [&>svg]:h-5 [&>svg]:w-5", children: icon }),
       /* @__PURE__ */ jsx5(
         "input",
         {
           id: inputId,
           "aria-invalid": !!error || void 0,
           className: clsx4(
-            "w-full rounded-lg border bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400",
+            "w-full rounded-lg border bg-surface px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400",
             "focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
             "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400",
             icon && "pl-9",
-            error ? "border-red-400" : "border-gray-300"
+            error ? "border-danger" : "border-gray-300"
           ),
           ...rest
         }
       )
     ] }),
-    error ? /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-gray-500", children: hint }) : null
+    error ? /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-danger-ink", children: error }) : hint ? /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-gray-500", children: hint }) : null
   ] });
 }
 
@@ -256,7 +256,7 @@ var sizes2 = {
   lg: "h-12 w-12 text-base",
   xl: "h-14 w-14 text-lg"
 };
-var AVATAR_COLORS = ["#6366f1", "#0ea5e9", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899", "#14b8a6"];
+var AVATAR_COLORS = ["#4f46e5", "#0369a1", "#047857", "#b45309", "#dc2626", "#7c3aed", "#db2777", "#0f766e"];
 function initialsOf(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "?";
@@ -320,7 +320,7 @@ function PaginationBar({
         /* @__PURE__ */ jsx7("div", { children: totalPages > 1 && /* @__PURE__ */ jsxs6("nav", { "aria-label": placement ? `Pagination, ${placement} table` : "Pagination", className: "flex items-center gap-1", children: [
           /* @__PURE__ */ jsx7("button", { type: "button", className: navBtn, disabled: page <= 1, onClick: () => onPageChange(page - 1), children: "\xAB Prev" }),
           pageWindow(page, totalPages).map(
-            (p, i) => p === null ? /* @__PURE__ */ jsx7("span", { className: "px-1 text-gray-400", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx7(
+            (p, i) => p === null ? /* @__PURE__ */ jsx7("span", { className: "px-1 text-gray-500", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -349,7 +349,7 @@ function PaginationBar({
               {
                 value: pageSize,
                 onChange: (e) => onPageSizeChange(Number(e.target.value)),
-                className: "rounded-md border border-gray-300 bg-white px-1.5 py-1 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
+                className: "rounded-md border border-gray-300 bg-surface px-1.5 py-1 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
                 children: pageSizeOptions.map((n) => /* @__PURE__ */ jsx7("option", { value: n, children: n }, n))
               }
             )
@@ -390,7 +390,7 @@ function SegmentedControl({ options, value, onChange, label, className }) {
             onClick: () => onChange(o.value),
             className: clsx7(
               "rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
-              selected ? "bg-white text-gray-900 shadow-sm" : "text-gray-500 hover:text-gray-800"
+              selected ? "bg-surface text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"
             ),
             children: o.label
           },
@@ -457,12 +457,12 @@ function MultiSelect({ options, value, onChange, label, className }) {
             "aria-label": labels.length ? `${label}: ${labels.join(", ")}` : label,
             onClick: () => setOpen((o) => !o),
             className: clsx8(
-              "flex w-full items-center justify-between gap-2 rounded-lg border bg-white px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
+              "flex w-full items-center justify-between gap-2 rounded-lg border bg-surface px-3 py-2 text-left text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-brand-400",
               value.length ? "border-brand-500 text-gray-900" : "border-gray-300 text-gray-500"
             ),
             children: [
               /* @__PURE__ */ jsx9("span", { className: "truncate", children: summary }),
-              /* @__PURE__ */ jsx9(ChevronDownIcon2, { className: "h-5 w-5 shrink-0 text-gray-400" })
+              /* @__PURE__ */ jsx9(ChevronDownIcon2, { className: "h-5 w-5 shrink-0 text-gray-500" })
             ]
           }
         ),
@@ -475,19 +475,19 @@ function MultiSelect({ options, value, onChange, label, className }) {
             onMouseDown: (e) => {
               if (!(e.target instanceof HTMLInputElement)) e.preventDefault();
             },
-            className: "absolute left-0 z-20 mt-1 max-h-64 min-w-full overflow-y-auto rounded-xl border border-gray-200 bg-white p-1 shadow-xl",
+            className: "absolute left-0 z-20 mt-1 max-h-64 min-w-full overflow-y-auto rounded-xl border border-gray-200 bg-surface p-1 shadow-xl",
             children: [
               options.map((o) => /* @__PURE__ */ jsxs7("label", { className: "flex cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-sm text-gray-800 hover:bg-gray-50", children: [
                 /* @__PURE__ */ jsx9("input", { type: "checkbox", className: "h-4 w-4 rounded", checked: value.includes(o.value), onChange: () => toggle(o.value) }),
                 /* @__PURE__ */ jsx9("span", { className: "flex-1 whitespace-nowrap", children: o.label }),
-                o.count !== void 0 && /* @__PURE__ */ jsx9("span", { className: "text-xs tabular-nums text-gray-400", children: o.count })
+                o.count !== void 0 && /* @__PURE__ */ jsx9("span", { className: "text-xs tabular-nums text-gray-500", children: o.count })
               ] }, o.value)),
               value.length > 0 && /* @__PURE__ */ jsx9(
                 "button",
                 {
                   type: "button",
                   onClick: () => onChange([]),
-                  className: "mt-1 w-full rounded-md border-t border-gray-100 px-2.5 py-1.5 text-left text-xs font-medium text-brand-700 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+                  className: "mt-1 w-full rounded-md border-t border-gray-100 px-2.5 py-1.5 text-left text-xs font-medium text-accent hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
                   children: "Clear selection"
                 }
               )
@@ -700,7 +700,7 @@ function DataTable({
         MultiSelect,
         {
           className: "w-full sm:w-44",
-          label: c.filterLabel ?? `All ${c.header.toLowerCase()}`,
+          label: c.filterLabel ?? `Any ${c.header.toLowerCase()}`,
           value: filters[c.id] ?? [],
           onChange: (v) => {
             setFilters((f) => ({ ...f, [c.id]: v }));
@@ -776,7 +776,7 @@ function DataTable({
                       ),
                       children: [
                         /* @__PURE__ */ jsx10("span", { className: "truncate", children: c.header }),
-                        /* @__PURE__ */ jsx10(Icon, { className: clsx9("h-4 w-4 shrink-0", sorted ? "text-brand-600" : "text-gray-400"), "aria-hidden": "true" })
+                        /* @__PURE__ */ jsx10(Icon, { className: clsx9("h-4 w-4 shrink-0", sorted ? "text-accent" : "text-gray-500"), "aria-hidden": "true" })
                       ]
                     }
                   ) : /* @__PURE__ */ jsx10("span", { className: "block truncate", children: c.header }),
@@ -822,7 +822,7 @@ function DataTable({
             pageRows.length === 0 && /* @__PURE__ */ jsx10("tr", { className: "border-t border-gray-100", children: /* @__PURE__ */ jsxs8("td", { colSpan: columns.length, className: "px-4 py-10 text-center text-sm text-gray-500", children: [
               emptyMessage,
               " ",
-              filterActive && /* @__PURE__ */ jsx10("button", { type: "button", onClick: clearAll, className: "font-medium text-brand-700 underline", children: "Clear filters" })
+              filterActive && /* @__PURE__ */ jsx10("button", { type: "button", onClick: clearAll, className: "font-medium text-accent underline", children: "Clear filters" })
             ] }) })
           ] })
         ]
@@ -837,15 +837,15 @@ import clsx10 from "clsx";
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var fills = {
   brand: "bg-brand-600",
-  success: "bg-emerald-500",
-  warning: "bg-amber-500",
-  danger: "bg-red-500"
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger"
 };
 var strokes = {
-  brand: "text-brand-600",
-  success: "text-emerald-500",
-  warning: "text-amber-500",
-  danger: "text-red-500"
+  brand: "text-accent",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger"
 };
 var heights = { sm: "h-1", md: "h-2", lg: "h-3" };
 function ProgressBar({ value, label, showLabel = false, tone = "brand", size = "md", className }) {
@@ -943,7 +943,7 @@ function LoadingOverlay({ loading, label = "Loading\u2026", children, className
   return /* @__PURE__ */ jsxs10("div", { className: className ? `relative ${className}` : "relative", "aria-busy": loading || void 0, children: [
     /* @__PURE__ */ jsx13("div", { inert: loading || void 0, children }),
     loading && /* @__PURE__ */ jsxs10("div", { className: "xex-overlay absolute inset-0 z-10 flex items-center justify-center gap-3 rounded-[inherit] backdrop-blur-[1px]", children: [
-      /* @__PURE__ */ jsx13(Spinner, { size: "lg", label, className: "text-brand-600" }),
+      /* @__PURE__ */ jsx13(Spinner, { size: "lg", label, className: "text-accent" }),
       /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium text-gray-700", "aria-hidden": "true", children: label })
     ] })
   ] });
@@ -962,12 +962,12 @@ var defaults = {
 function FetchStatus({ state, messages, onRetry }) {
   const text = messages?.[state] ?? defaults[state];
   return /* @__PURE__ */ jsxs11("p", { role: "status", "aria-live": "polite", className: "flex items-center gap-2 text-sm", children: [
-    state === "idle" && /* @__PURE__ */ jsx14(CloudIcon, { className: "h-5 w-5 text-gray-400" }),
-    state === "loading" && /* @__PURE__ */ jsx14(Spinner, { size: "md", decorative: true, className: "text-brand-600" }),
-    state === "success" && /* @__PURE__ */ jsx14(CheckCircleIcon, { className: "h-5 w-5 text-emerald-500" }),
-    state === "error" && /* @__PURE__ */ jsx14(ExclamationCircleIcon, { className: "h-5 w-5 text-red-500" }),
-    /* @__PURE__ */ jsx14("span", { className: state === "error" ? "text-red-700" : state === "idle" ? "text-gray-500" : "text-gray-700", children: text }),
-    state === "loading" && /* @__PURE__ */ jsx14(LoadingDots, { className: "text-gray-400" }),
+    state === "idle" && /* @__PURE__ */ jsx14(CloudIcon, { className: "h-5 w-5 text-gray-500" }),
+    state === "loading" && /* @__PURE__ */ jsx14(Spinner, { size: "md", decorative: true, className: "text-accent" }),
+    state === "success" && /* @__PURE__ */ jsx14(CheckCircleIcon, { className: "h-5 w-5 text-success" }),
+    state === "error" && /* @__PURE__ */ jsx14(ExclamationCircleIcon, { className: "h-5 w-5 text-danger" }),
+    /* @__PURE__ */ jsx14("span", { className: state === "error" ? "text-danger-ink" : state === "idle" ? "text-gray-500" : "text-gray-700", children: text }),
+    state === "loading" && /* @__PURE__ */ jsx14(LoadingDots, { className: "text-gray-500" }),
     state === "error" && onRetry && /* @__PURE__ */ jsx14(Button, { size: "xs", variant: "outline", onClick: onRetry, children: "Retry" })
   ] });
 }
@@ -1064,7 +1064,7 @@ function Tabs({
                   "inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400 disabled:cursor-not-allowed disabled:opacity-50",
                   sizes3[size],
                   fullWidth && "flex-1",
-                  variant === "underline" ? clsx12("rounded-t-lg", isSelected ? "text-brand-700" : "text-gray-500 hover:text-gray-800") : clsx12("rounded-full", isSelected ? "bg-brand-600 text-white" : "text-gray-600 hover:bg-gray-100")
+                  variant === "underline" ? clsx12("rounded-t-lg", isSelected ? "text-accent" : "text-gray-500 hover:text-gray-800") : clsx12("rounded-full", isSelected ? "bg-brand-600 text-white" : "text-gray-600 hover:bg-gray-100")
                 ),
                 children: [
                   item.icon,
@@ -1074,7 +1074,7 @@ function Tabs({
                     {
                       className: clsx12(
                         "rounded-full px-1.5 py-px text-[11px] font-semibold tabular-nums",
-                        isSelected ? variant === "pills" ? "bg-white/25 text-white" : "bg-brand-100 text-brand-700" : "bg-gray-100 text-gray-600"
+                        isSelected ? variant === "pills" ? "bg-white/25 text-white" : "bg-accent-softer text-accent" : "bg-gray-100 text-gray-600"
                       ),
                       children: item.badge
                     }
@@ -1107,7 +1107,7 @@ function Tabs({
 import { Bars3Icon } from "@heroicons/react/24/outline";
 import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 function Header({ title, subtitle, actions, onMenu }) {
-  return /* @__PURE__ */ jsxs13("header", { className: "sticky top-0 z-30 flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 bg-white px-4 py-4 sm:px-6", children: [
+  return /* @__PURE__ */ jsxs13("header", { className: "sticky top-0 z-30 flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 bg-surface px-4 py-4 sm:px-6", children: [
     /* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 items-center gap-3", children: [
       onMenu && /* @__PURE__ */ jsx16(
         "button",
@@ -1279,7 +1279,7 @@ function PageGuide({ sections }) {
           },
           className: clsx13(
             "block py-1.5 pl-3 pr-2 text-sm transition-colors",
-            i === active ? "font-medium text-brand-700" : "text-gray-500 hover:text-gray-900"
+            i === active ? "font-medium text-accent" : "text-gray-500 hover:text-gray-900"
           ),
           children: s.label
         }
@@ -1330,7 +1330,7 @@ function Sidebar({ items, active, onSelect, open, onClose }) {
         "aria-label": "Main navigation",
         onKeyDown: open ? trapTab : void 0,
         className: clsx14(
-          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-gray-200 bg-white duration-200",
+          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-gray-200 bg-surface duration-200",
           "lg:sticky lg:top-0 lg:z-auto lg:h-screen lg:w-60 lg:shrink-0 lg:translate-x-0",
           // Closed on small screens: invisible = out of the tab order. It switches off only after
           // the slide-out finishes, but switches on immediately so focus can move in on open.
@@ -1342,7 +1342,7 @@ function Sidebar({ items, active, onSelect, open, onClose }) {
               /* @__PURE__ */ jsx19("span", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-brand-600 text-sm font-bold text-white", children: "X" }),
               /* @__PURE__ */ jsx19("span", { className: "text-lg font-bold tracking-tight text-gray-900", children: "XeX" })
             ] }),
-            /* @__PURE__ */ jsx19("button", { type: "button", onClick: onClose, "aria-label": "Close navigation", className: "rounded-lg p-1 text-gray-400 hover:bg-gray-100 lg:hidden", children: /* @__PURE__ */ jsx19(XMarkIcon3, { className: "h-5 w-5" }) })
+            /* @__PURE__ */ jsx19("button", { type: "button", onClick: onClose, "aria-label": "Close navigation", className: "rounded-lg p-1 text-gray-500 hover:bg-gray-100 lg:hidden", children: /* @__PURE__ */ jsx19(XMarkIcon3, { className: "h-5 w-5" }) })
           ] }),
           /* @__PURE__ */ jsx19("nav", { className: "flex-1 space-y-1 overflow-y-auto px-3 pb-4 pt-2", children: items.map(({ id, label, icon: Icon }) => /* @__PURE__ */ jsxs16(
             "a",
@@ -1411,7 +1411,7 @@ function ThemeSwitcher({ showLabels = false }) {
         type: "button",
         onClick: toggleMode,
         "aria-label": `Switch to ${mode === "dark" ? "light" : "dark"} mode`,
-        className: "flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
+        className: "flex items-center gap-1.5 rounded-lg border border-gray-300 bg-surface px-2.5 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400",
         children: [
           mode === "dark" ? /* @__PURE__ */ jsx20(SunIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx20(MoonIcon, { className: "h-4 w-4" }),
           mode === "dark" ? "Light" : "Dark"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xex/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "XeX design system: React components, app shell and theme provider.",
   "license": "MIT",
   "keywords": [
@@ -46,11 +46,13 @@
   "scripts": {
     "build": "tsup",
     "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
-    "@xex/tokens": "^0.1.0",
+    "@xex/tokens": "^0.2.0",
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
@@ -58,9 +60,16 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "axe-core": "^4.14.0",
+    "jsdom": "^30.1.2",
     "tsup": "^8.3.5",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vitest": "^3.2.7",
+    "vitest-axe": "^0.1.0"
   }
 }