auxalia-ui-kit 1.4.2 → 1.4.3

package/dist/{chunk-OJQZUU5N.js → chunk-PVFHGZ5I.js}

@@ -76,18 +76,17 @@ var preset = {
         // Auxalia specific colors for direct use
         "auxalia-green": auxaliaColors["auxalia-green"],
         "auxalia-blue": auxaliaColors["auxalia-blue"],
-        "auxalia-petrol": auxaliaColors["auxalia-petrol"]
-      },
-      textColor: {
-        primary: "var(--color-text)",
-        secondary: "var(--color-text-secondary)",
-        muted: "var(--color-text-muted)"
-      },
-      backgroundColor: {
-        hero: "var(--color-bg-hero)",
+        "auxalia-petrol": auxaliaColors["auxalia-petrol"],
+        // Background surface tokens (bg-card, bg-hero, bg-popover, bg-card-hover)
         card: "var(--card)",
-        cardHover: "var(--card-hover)",
-        popover: "var(--popover)"
+        "card-hover": "var(--card-hover)",
+        hero: "var(--color-bg-hero)",
+        popover: "var(--popover)",
+        // Semantic text tokens — non-conflicting names so default palette is preserved
+        // Use as: text-content, text-dim, text-muted
+        content: "var(--color-text)",
+        dim: "var(--color-text-secondary)",
+        muted: "var(--color-text-muted)"
       },
       backgroundImage: {
         "gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",

package/dist/index.cjs

@@ -315,7 +315,7 @@ var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-black/6 dark:border-white/8 bg-popover p-1.5 text-primary shadow-xl dark:shadow-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-32 overflow-hidden rounded-lg border border-black/6 dark:border-white/8 bg-popover p-1.5 text-content shadow-xl dark:shadow-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -328,7 +328,7 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
     ref,
     sideOffset,
     className: cn(
-      "bg-popover z-50 min-w-32 overflow-hidden p-2 text-primary rounded-2xl border border-black/6 dark:border-white/8 transition-colors shadow-xl dark:shadow-black/40",
+      "bg-popover z-50 min-w-32 overflow-hidden p-2 text-content rounded-2xl border border-black/6 dark:border-white/8 transition-colors shadow-xl dark:shadow-black/40",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -777,7 +777,7 @@ var PopoverContent = React3.forwardRef(
       collisionPadding,
       className: cn(
         // base
-        "z-50 w-72 rounded-md border border-black/10 dark:border-white/10 p-4 bg-popover text-primary shadow-md outline-none",
+        "z-50 w-72 rounded-md border border-black/10 dark:border-white/10 p-4 bg-popover text-content shadow-md outline-none",
         // animations
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
@@ -6144,7 +6144,7 @@ var SelectContent2 = React34.forwardRef(({ className, children, position = "popp
   {
     ref,
     className: cn(
-      "bg-popover z-50 min-w-32 overflow-hidden rounded-2xl border border-black/6 dark:border-white/8 p-2 text-primary shadow-xl dark:shadow-black/40",
+      "bg-popover z-50 min-w-32 overflow-hidden rounded-2xl border border-black/6 dark:border-white/8 p-2 text-content shadow-xl dark:shadow-black/40",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
@@ -6171,7 +6171,7 @@ var SelectLabel2 = React34.forwardRef(({ className, ...props }, ref) => /* @__PU
   Label4,
   {
     ref,
-    className: cn("px-2 py-1.5 text-xs font-semibold text-secondary", className),
+    className: cn("px-2 py-1.5 text-xs font-semibold text-dim", className),
     ...props
   }
 ));
@@ -6264,7 +6264,7 @@ function TabsContent({ value, children, className }) {
 
 // src/components/Text/text.styles.ts
 var import_class_variance_authority8 = require("class-variance-authority");
-var textVariants = (0, import_class_variance_authority8.cva)(`text-primary`, {
+var textVariants = (0, import_class_variance_authority8.cva)(`text-content`, {
   variants: {
     size: {
       sm: "text-sm",
@@ -6795,7 +6795,7 @@ var ControlledTable = ({
     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "relative overflow-hidden rounded-lg border border-border", children: [
       loading && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-card/60", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { className: "border-b bg-red-500 text-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { className: "border-b bg-[#ff0000] text-yellow-500", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tr", { children: [
           isSelectable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("th", { className: "w-10 px-3 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             import_radix_ui3.Checkbox.Root,
             {
@@ -7042,18 +7042,17 @@ var preset = {
         // Auxalia specific colors for direct use
         "auxalia-green": auxaliaColors["auxalia-green"],
         "auxalia-blue": auxaliaColors["auxalia-blue"],
-        "auxalia-petrol": auxaliaColors["auxalia-petrol"]
-      },
-      textColor: {
-        primary: "var(--color-text)",
-        secondary: "var(--color-text-secondary)",
-        muted: "var(--color-text-muted)"
-      },
-      backgroundColor: {
-        hero: "var(--color-bg-hero)",
+        "auxalia-petrol": auxaliaColors["auxalia-petrol"],
+        // Background surface tokens (bg-card, bg-hero, bg-popover, bg-card-hover)
         card: "var(--card)",
-        cardHover: "var(--card-hover)",
-        popover: "var(--popover)"
+        "card-hover": "var(--card-hover)",
+        hero: "var(--color-bg-hero)",
+        popover: "var(--popover)",
+        // Semantic text tokens — non-conflicting names so default palette is preserved
+        // Use as: text-content, text-dim, text-muted
+        content: "var(--color-text)",
+        dim: "var(--color-text-secondary)",
+        muted: "var(--color-text-muted)"
       },
       backgroundImage: {
         "gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   tailwind_preset_default
-} from "./chunk-OJQZUU5N.js";
+} from "./chunk-PVFHGZ5I.js";
 
 // src/components/Button.tsx
 import * as React from "react";
@@ -218,7 +218,7 @@ var DropdownMenuSubContent = React2.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-lg border border-black/6 dark:border-white/8 bg-popover p-1.5 text-primary shadow-xl dark:shadow-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-32 overflow-hidden rounded-lg border border-black/6 dark:border-white/8 bg-popover p-1.5 text-content shadow-xl dark:shadow-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -231,7 +231,7 @@ var DropdownMenuContent = React2.forwardRef(({ className, sideOffset = 4, ...pro
     ref,
     sideOffset,
     className: cn(
-      "bg-popover z-50 min-w-32 overflow-hidden p-2 text-primary rounded-2xl border border-black/6 dark:border-white/8 transition-colors shadow-xl dark:shadow-black/40",
+      "bg-popover z-50 min-w-32 overflow-hidden p-2 text-content rounded-2xl border border-black/6 dark:border-white/8 transition-colors shadow-xl dark:shadow-black/40",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
@@ -684,7 +684,7 @@ var PopoverContent = React3.forwardRef(
       collisionPadding,
       className: cn(
         // base
-        "z-50 w-72 rounded-md border border-black/10 dark:border-white/10 p-4 bg-popover text-primary shadow-md outline-none",
+        "z-50 w-72 rounded-md border border-black/10 dark:border-white/10 p-4 bg-popover text-content shadow-md outline-none",
         // animations
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
@@ -6051,7 +6051,7 @@ var SelectContent2 = React34.forwardRef(({ className, children, position = "popp
   {
     ref,
     className: cn(
-      "bg-popover z-50 min-w-32 overflow-hidden rounded-2xl border border-black/6 dark:border-white/8 p-2 text-primary shadow-xl dark:shadow-black/40",
+      "bg-popover z-50 min-w-32 overflow-hidden rounded-2xl border border-black/6 dark:border-white/8 p-2 text-content shadow-xl dark:shadow-black/40",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
@@ -6078,7 +6078,7 @@ var SelectLabel2 = React34.forwardRef(({ className, ...props }, ref) => /* @__PU
   Label4,
   {
     ref,
-    className: cn("px-2 py-1.5 text-xs font-semibold text-secondary", className),
+    className: cn("px-2 py-1.5 text-xs font-semibold text-dim", className),
     ...props
   }
 ));
@@ -6171,7 +6171,7 @@ function TabsContent({ value, children, className }) {
 
 // src/components/Text/text.styles.ts
 import { cva as cva8 } from "class-variance-authority";
-var textVariants = cva8(`text-primary`, {
+var textVariants = cva8(`text-content`, {
   variants: {
     size: {
       sm: "text-sm",
@@ -6725,7 +6725,7 @@ var ControlledTable = ({
     /* @__PURE__ */ jsxs11("div", { className: "relative overflow-hidden rounded-lg border border-border", children: [
       loading && /* @__PURE__ */ jsx32("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-card/60", children: /* @__PURE__ */ jsx32("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" }) }),
       /* @__PURE__ */ jsx32("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs11("table", { className: "w-full text-sm", children: [
-        /* @__PURE__ */ jsx32("thead", { className: "border-b bg-red-500 text-secondary", children: /* @__PURE__ */ jsxs11("tr", { children: [
+        /* @__PURE__ */ jsx32("thead", { className: "border-b bg-[#ff0000] text-yellow-500", children: /* @__PURE__ */ jsxs11("tr", { children: [
           isSelectable && /* @__PURE__ */ jsx32("th", { className: "w-10 px-3 py-3", children: /* @__PURE__ */ jsx32(
             Checkbox.Root,
             {

package/dist/tailwind.preset.cjs

@@ -99,18 +99,17 @@ var preset = {
         // Auxalia specific colors for direct use
         "auxalia-green": auxaliaColors["auxalia-green"],
         "auxalia-blue": auxaliaColors["auxalia-blue"],
-        "auxalia-petrol": auxaliaColors["auxalia-petrol"]
-      },
-      textColor: {
-        primary: "var(--color-text)",
-        secondary: "var(--color-text-secondary)",
-        muted: "var(--color-text-muted)"
-      },
-      backgroundColor: {
-        hero: "var(--color-bg-hero)",
+        "auxalia-petrol": auxaliaColors["auxalia-petrol"],
+        // Background surface tokens (bg-card, bg-hero, bg-popover, bg-card-hover)
         card: "var(--card)",
-        cardHover: "var(--card-hover)",
-        popover: "var(--popover)"
+        "card-hover": "var(--card-hover)",
+        hero: "var(--color-bg-hero)",
+        popover: "var(--popover)",
+        // Semantic text tokens — non-conflicting names so default palette is preserved
+        // Use as: text-content, text-dim, text-muted
+        content: "var(--color-text)",
+        dim: "var(--color-text-secondary)",
+        muted: "var(--color-text-muted)"
       },
       backgroundImage: {
         "gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",

package/dist/tailwind.preset.js

@@ -1,6 +1,6 @@
 import {
   tailwind_preset_default
-} from "./chunk-OJQZUU5N.js";
+} from "./chunk-PVFHGZ5I.js";
 export {
   tailwind_preset_default as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auxalia-ui-kit",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "A React component library built with Radix UI and Tailwind CSS, designed to provide accessible and customizable UI components for modern web applications.",
   "license": "ISC",
   "author": {