@almadar/ui 2.25.3 → 2.26.0

package/dist/providers/index.cjs

@@ -661,28 +661,28 @@ var marginYStyles = {
 };
 var bgStyles = {
   transparent: "bg-transparent",
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
-  surface: "bg-[var(--color-card)]",
-  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm"
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
 };
 var roundedStyles = {
   none: "rounded-none",
-  sm: "rounded-[var(--radius-sm)]",
-  md: "rounded-[var(--radius-md)]",
-  lg: "rounded-[var(--radius-lg)]",
-  xl: "rounded-[var(--radius-xl)]",
-  "2xl": "rounded-[var(--radius-xl)]",
-  full: "rounded-[var(--radius-full)]"
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
 };
 var shadowStyles = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]",
-  xl: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
 };
 var displayStyles = {
   block: "block",
@@ -770,7 +770,7 @@ var Box = React110__namespace.default.forwardRef(
           // Background
           bgStyles[bg],
           // Border - uses theme variables
-          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          border && "border-[length:var(--border-width)] border-border",
           // Rounded
           roundedStyles[rounded],
           // Shadow
@@ -799,30 +799,30 @@ var Box = React110__namespace.default.forwardRef(
 );
 Box.displayName = "Box";
 var variantStyles = {
-  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h3: "text-2xl font-bold text-[var(--color-foreground)]",
-  h4: "text-xl font-bold text-[var(--color-foreground)]",
-  h5: "text-lg font-bold text-[var(--color-foreground)]",
-  h6: "text-base font-bold text-[var(--color-foreground)]",
-  heading: "text-2xl font-bold text-[var(--color-foreground)]",
-  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
-  body1: "text-base font-normal text-[var(--color-foreground)]",
-  body2: "text-sm font-normal text-[var(--color-foreground)]",
-  body: "text-base font-normal text-[var(--color-foreground)]",
-  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
-  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
-  small: "text-sm font-normal text-[var(--color-foreground)]",
-  large: "text-lg font-medium text-[var(--color-foreground)]",
-  label: "text-sm font-medium text-[var(--color-foreground)]"
+  h1: "text-4xl font-bold tracking-tight text-foreground",
+  h2: "text-3xl font-bold tracking-tight text-foreground",
+  h3: "text-2xl font-bold text-foreground",
+  h4: "text-xl font-bold text-foreground",
+  h5: "text-lg font-bold text-foreground",
+  h6: "text-base font-bold text-foreground",
+  heading: "text-2xl font-bold text-foreground",
+  subheading: "text-lg font-semibold text-foreground",
+  body1: "text-base font-normal text-foreground",
+  body2: "text-sm font-normal text-foreground",
+  body: "text-base font-normal text-foreground",
+  caption: "text-xs font-normal text-muted-foreground",
+  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
+  small: "text-sm font-normal text-foreground",
+  large: "text-lg font-medium text-foreground",
+  label: "text-sm font-medium text-foreground"
 };
 var colorStyles = {
-  primary: "text-[var(--color-foreground)]",
-  secondary: "text-[var(--color-muted-foreground)]",
-  muted: "text-[var(--color-muted-foreground)]",
-  error: "text-[var(--color-error)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
+  primary: "text-foreground",
+  secondary: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning",
   inherit: "text-inherit"
 };
 var weightStyles = {
@@ -907,49 +907,49 @@ var Typography = ({
 Typography.displayName = "Typography";
 var variantStyles2 = {
   primary: [
-    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+    "bg-primary text-primary-foreground",
     "border-none",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "shadow-sm",
+    "hover:bg-primary-hover hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white hover:border-[var(--color-accent)]",
+    "bg-transparent text-accent",
+    "border border-accent",
+    "hover:bg-accent hover:text-white hover:border-accent",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
-    "bg-transparent text-[var(--color-muted-foreground)]",
-    "hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+    "bg-transparent text-muted-foreground",
+    "hover:text-foreground hover:bg-muted",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-error)] hover:text-[var(--color-error-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error",
+    "shadow-sm",
+    "hover:bg-error hover:text-error-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-success)] hover:text-[var(--color-success-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success",
+    "shadow-sm",
+    "hover:bg-success hover:text-success-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]",
-    "shadow-[var(--shadow-sm)]",
-    "hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-foreground)] hover:shadow-[var(--shadow-hover)]",
-    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning",
+    "shadow-sm",
+    "hover:bg-warning hover:text-warning-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   // "default" is an alias for secondary
   default: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-secondary text-secondary-foreground",
+    "border-[length:var(--border-width-thin)] border-border",
+    "hover:bg-secondary-hover",
     "active:scale-[var(--active-scale)]"
   ].join(" ")
 };
@@ -1020,10 +1020,10 @@ var Button = React110__namespace.default.forwardRef(
         className: cn(
           "inline-flex items-center justify-center gap-2",
           "font-[var(--font-weight-medium)]",
-          "rounded-[var(--radius-sm)]",
+          "rounded-sm",
           "cursor-pointer",
           "transition-all duration-[var(--transition-normal)]",
-          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-offset-[length:var(--focus-ring-offset)]",
+          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           variantStyles2[variant],
           sizeStyles2[size],
@@ -1044,34 +1044,34 @@ var Button = React110__namespace.default.forwardRef(
 Button.displayName = "Button";
 var variantStyles3 = {
   default: [
-    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" "),
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   error: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   info: [
-    "bg-[var(--color-surface)] text-[var(--color-info)]",
-    "border-[length:var(--border-width)] border-[var(--color-info)]"
+    "bg-surface text-info",
+    "border-[length:var(--border-width)] border-info"
   ].join(" "),
   neutral: [
-    "bg-[var(--color-muted)] text-[var(--color-muted-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-muted-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" ")
 };
 var sizeStyles3 = {
@@ -1091,7 +1091,7 @@ var Badge = React110__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex items-center gap-1 font-bold rounded-[var(--radius-sm)]",
+          "inline-flex items-center gap-1 font-bold rounded-sm",
           variantStyles3[variant],
           sizeStyles3[size],
           className
@@ -1127,21 +1127,21 @@ var Input = React110__namespace.default.forwardRef(
     const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-4 w-4" });
     const showClearButton = clearable && value && String(value).length > 0;
     const baseClassName = cn(
-      "block w-full rounded-[var(--radius-sm)] transition-all duration-[var(--transition-fast)]",
-      "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+      "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
+      "border-[length:var(--border-width-thin)] border-border",
       "px-3 py-2 text-sm",
-      "bg-[var(--color-card)] hover:bg-[var(--color-muted)] focus:bg-[var(--color-card)]",
-      "text-[var(--color-foreground)] placeholder:text-[var(--color-muted-foreground)]",
-      "focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] focus:border-[var(--color-ring)]",
-      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[var(--color-muted)]",
-      error ? "border-[var(--color-error)] focus:border-[var(--color-error)] focus:ring-[var(--color-error)]" : "",
+      "bg-card hover:bg-muted focus:bg-card",
+      "text-foreground placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring",
+      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted",
+      error ? "border-error focus:border-error focus:ring-error" : "",
       resolvedLeftIcon && "pl-10",
       (rightIcon || showClearButton) && "pr-10",
       className
     );
     if (type === "select") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+        resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
@@ -1156,7 +1156,7 @@ var Input = React110__namespace.default.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4" }) })
       ] });
     }
     if (type === "textarea") {
@@ -1181,9 +1181,9 @@ var Input = React110__namespace.default.forwardRef(
           checked: props.checked,
           onChange,
           className: cn(
-            "h-4 w-4 rounded-[var(--radius-sm)]",
-            "border-[var(--color-border)]",
-            "text-[var(--color-primary)] focus:ring-[var(--color-ring)]",
+            "h-4 w-4 rounded-sm",
+            "border-border",
+            "text-primary focus:ring-ring",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             className
           ),
@@ -1192,7 +1192,7 @@ var Input = React110__namespace.default.forwardRef(
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+      resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -1209,11 +1209,11 @@ var Input = React110__namespace.default.forwardRef(
         {
           type: "button",
           onClick: onClear,
-          className: "absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
+          className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4" })
         }
       ),
-      rightIcon && !showClearButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)]", children: rightIcon })
+      rightIcon && !showClearButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: rightIcon })
     ] });
   }
 );
@@ -1225,13 +1225,13 @@ var Label = React110__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "block text-sm font-bold text-[var(--color-foreground)]",
+          "block text-sm font-bold text-foreground",
           className
         ),
         ...props,
         children: [
           children,
-          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--color-error)] ml-1", children: "*" })
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-error ml-1", children: "*" })
         ]
       }
     );
@@ -1245,14 +1245,14 @@ var Textarea = React110__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "block w-full border-[length:var(--border-width)] shadow-[var(--shadow-sm)]",
-          "px-3 py-2 text-sm text-[var(--color-foreground)]",
-          "bg-[var(--color-card)]",
+          "block w-full border-[length:var(--border-width)] shadow-sm",
+          "px-3 py-2 text-sm text-foreground",
+          "bg-card",
           "placeholder:text-[var(--color-placeholder)]",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-ring)]",
-          "disabled:bg-[var(--color-muted)] disabled:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed",
+          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           "resize-y min-h-[80px]",
-          error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : "border-[var(--color-border)] focus:border-[var(--color-primary)]",
+          error ? "border-error focus:border-error" : "border-border focus:border-primary",
           className
         ),
         ...props
@@ -1269,12 +1269,12 @@ var Select = React110__namespace.default.forwardRef(
         {
           ref,
           className: cn(
-            "block w-full border-[length:var(--border-width)] shadow-[var(--shadow-sm)] appearance-none",
-            "px-3 py-2 pr-10 text-sm text-[var(--color-foreground)] font-medium",
-            "bg-[var(--color-card)]",
-            "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-ring)]",
-            "disabled:bg-[var(--color-muted)] disabled:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed",
-            error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : "border-[var(--color-border)] focus:border-[var(--color-primary)]",
+            "block w-full border-[length:var(--border-width)] shadow-sm appearance-none",
+            "px-3 py-2 pr-10 text-sm text-foreground font-medium",
+            "bg-card",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+            "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
+            error ? "border-error focus:border-error" : "border-border focus:border-primary",
             className
           ),
           ...props,
@@ -1292,7 +1292,7 @@ var Select = React110__namespace.default.forwardRef(
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4 text-[var(--color-foreground)]" }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4 text-foreground" }) })
     ] });
   }
 );
@@ -1308,9 +1308,9 @@ var Checkbox = React110__namespace.default.forwardRef(
           type: "checkbox",
           id: inputId,
           className: cn(
-            "peer h-4 w-4 border-[length:var(--border-width)] border-[var(--color-border)]",
-            "accent-[var(--color-primary)] focus:ring-[var(--color-ring)] focus:ring-offset-0",
-            "bg-[var(--color-card)] checked:bg-[var(--color-primary)]",
+            "peer h-4 w-4 border-[length:var(--border-width)] border-border",
+            "accent-primary focus:ring-ring focus:ring-offset-0",
+            "bg-card checked:bg-primary",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             className
           ),
@@ -1321,7 +1321,7 @@ var Checkbox = React110__namespace.default.forwardRef(
         "label",
         {
           htmlFor: inputId,
-          className: "ml-2 text-sm text-[var(--color-foreground)] font-medium cursor-pointer select-none",
+          className: "ml-2 text-sm text-foreground font-medium cursor-pointer select-none",
           children: label
         }
       )
@@ -1331,34 +1331,34 @@ var Checkbox = React110__namespace.default.forwardRef(
 Checkbox.displayName = "Checkbox";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   // Interactive variant with theme-specific hover effects
   interactive: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)]"
+    "hover:shadow-lg"
   ].join(" ")
 };
 var paddingStyles2 = {
@@ -1369,9 +1369,9 @@ var paddingStyles2 = {
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg"
 };
 var Card = React110__namespace.default.forwardRef(
   ({
@@ -1389,7 +1389,7 @@ var Card = React110__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-[var(--radius-md)]",
+          "rounded-md",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
@@ -1399,8 +1399,8 @@ var Card = React110__namespace.default.forwardRef(
         ...props,
         children: [
           (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-[var(--color-card-foreground)] font-[var(--font-weight-bold)]", children: title }),
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-muted-foreground)] mt-1", children: subtitle })
+            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-card-foreground font-[var(--font-weight-bold)]", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] }),
           children
         ]
@@ -1416,7 +1416,7 @@ var CardTitle = React110__namespace.default.forwardRef(({ className, ...props },
   {
     ref,
     className: cn(
-      "text-lg text-[var(--color-card-foreground)]",
+      "text-lg text-card-foreground",
       "font-[var(--font-weight-bold)]",
       className
     ),
@@ -1449,7 +1449,7 @@ var Spinner = React110__namespace.default.forwardRef(
       "div",
       {
         ref,
-        className: cn("text-[var(--color-foreground)]", className),
+        className: cn("text-foreground", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: cn("animate-spin", sizeStyles4[size]) })
       }
@@ -1506,8 +1506,8 @@ var Radio = React110__namespace.default.forwardRef(
                 "flex items-center justify-center",
                 "border-[length:var(--border-width)] transition-all cursor-pointer",
                 sizeClasses6[size],
-                hasError ? "border-[var(--color-error)] peer-focus:ring-[var(--color-error)]/20" : "border-[var(--color-border)] peer-focus:ring-[var(--color-ring)]/20",
-                checked ? hasError ? "border-[var(--color-error)]" : "border-[var(--color-primary)] bg-[var(--color-primary)]" : "",
+                hasError ? "border-error peer-focus:ring-error/20" : "border-border peer-focus:ring-ring/20",
+                checked ? hasError ? "border-error" : "border-primary bg-primary" : "",
                 "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2",
                 disabled && "opacity-50 cursor-not-allowed",
                 !disabled && "hover:border-[var(--color-border-hover)]"
@@ -1518,7 +1518,7 @@ var Radio = React110__namespace.default.forwardRef(
                   className: cn(
                     "transition-all",
                     dotSizeClasses[size],
-                    hasError ? "bg-[var(--color-error)]" : "bg-[var(--color-primary-foreground)]"
+                    hasError ? "bg-error" : "bg-primary-foreground"
                   )
                 }
               )
@@ -1531,7 +1531,7 @@ var Radio = React110__namespace.default.forwardRef(
             htmlFor: radioId,
             className: cn(
               "block text-sm font-medium cursor-pointer select-none",
-              hasError ? "text-[var(--color-error)]" : "text-[var(--color-foreground)]",
+              hasError ? "text-error" : "text-foreground",
               disabled && "opacity-50 cursor-not-allowed"
             ),
             children: label
@@ -1543,7 +1543,7 @@ var Radio = React110__namespace.default.forwardRef(
           "p",
           {
             id: `${radioId}-error`,
-            className: "text-sm text-[var(--color-error)] font-medium",
+            className: "text-sm text-error font-medium",
             role: "alert",
             children: error
           }
@@ -1552,7 +1552,7 @@ var Radio = React110__namespace.default.forwardRef(
           "p",
           {
             id: `${radioId}-helper`,
-            className: "text-sm text-[var(--color-muted-foreground)]",
+            className: "text-sm text-muted-foreground",
             children: helperText
           }
         )
@@ -1713,20 +1713,20 @@ var Stack = ({
 var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", ...props });
 var statusColors = {
-  online: "bg-[var(--color-success)]",
-  offline: "bg-[var(--color-muted-foreground)]",
-  away: "bg-[var(--color-warning)]",
-  busy: "bg-[var(--color-error)]",
-  warning: "bg-[var(--color-warning)]",
-  critical: "bg-[var(--color-error)]"
+  online: "bg-success",
+  offline: "bg-muted-foreground",
+  away: "bg-warning",
+  busy: "bg-error",
+  warning: "bg-warning",
+  critical: "bg-error"
 };
 var pulseRingColors = {
-  online: "ring-[var(--color-success)]",
-  offline: "ring-[var(--color-muted-foreground)]",
-  away: "ring-[var(--color-warning)]",
-  busy: "ring-[var(--color-error)]",
-  warning: "ring-[var(--color-warning)]",
-  critical: "ring-[var(--color-error)]"
+  online: "ring-success",
+  offline: "ring-muted-foreground",
+  away: "ring-warning",
+  busy: "ring-error",
+  warning: "ring-warning",
+  critical: "ring-error"
 };
 var sizeStyles5 = {
   sm: "w-2 h-2",
@@ -1770,10 +1770,10 @@ function resolveDirection(value, direction) {
   return value > 0 ? "up" : "down";
 }
 function resolveColor(dir, invert) {
-  if (dir === "flat") return "text-[var(--color-muted-foreground)]";
+  if (dir === "flat") return "text-muted-foreground";
   const isPositive = dir === "up";
   const isGood = invert ? !isPositive : isPositive;
-  return isGood ? "text-[var(--color-success)]" : "text-[var(--color-error)]";
+  return isGood ? "text-success" : "text-error";
 }
 var iconMap2 = {
   up: LucideIcons.TrendingUp,
@@ -1891,7 +1891,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute inset-x-0 rounded-full bg-[var(--color-muted)]",
+                  "absolute inset-x-0 rounded-full bg-muted",
                   trackSizes[size]
                 ),
                 style: { top: "50%", transform: "translateY(-50%)" }
@@ -1901,7 +1901,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute rounded-full bg-[var(--color-muted-foreground)] opacity-30",
+                  "absolute rounded-full bg-muted-foreground opacity-30",
                   trackSizes[size]
                 ),
                 style: {
@@ -1916,7 +1916,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute rounded-full bg-[var(--color-primary)]",
+                  "absolute rounded-full bg-primary",
                   trackSizes[size]
                 ),
                 style: {
@@ -1978,9 +1978,9 @@ var RangeSlider = React110__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute rounded-full bg-[var(--color-primary-foreground)]",
-                  "border-2 border-[var(--color-primary)]",
-                  "shadow-[var(--shadow-sm)]",
+                  "absolute rounded-full bg-primary-foreground",
+                  "border-2 border-primary",
+                  "shadow-sm",
                   "pointer-events-none",
                   "transition-transform duration-100",
                   isDragging && "scale-110",
@@ -1998,7 +1998,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
               {
                 className: cn(
                   "absolute -top-8 px-2 py-0.5 rounded",
-                  "bg-[var(--color-foreground)] text-[var(--color-background)]",
+                  "bg-foreground text-background",
                   "text-xs font-medium whitespace-nowrap",
                   "pointer-events-none"
                 ),
@@ -2015,7 +2015,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
             return /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: "absolute w-px h-1.5 bg-[var(--color-muted-foreground)]",
+                className: "absolute w-px h-1.5 bg-muted-foreground",
                 style: { left: `${tickPercent}%` }
               },
               i
@@ -2029,8 +2029,8 @@ var RangeSlider = React110__namespace.default.forwardRef(
 RangeSlider.displayName = "RangeSlider";
 var backgroundClasses = {
   default: "",
-  alt: "bg-[var(--color-surface)]",
-  dark: "bg-[var(--color-foreground)] text-[var(--color-background)]",
+  alt: "bg-surface",
+  dark: "bg-foreground text-background",
   gradient: [
     "bg-gradient-to-b",
     "from-[var(--color-primary)]/5",
@@ -2207,9 +2207,9 @@ var ErrorState = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mb-4 rounded-[var(--radius-full)] bg-[var(--color-error)]/10 p-3", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.AlertCircle, { className: "h-8 w-8 text-[var(--color-error)]" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-medium text-[var(--color-foreground)]", children: resolvedTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "mt-1 text-[var(--color-muted-foreground)] max-w-sm", children: resolvedMessage }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mb-4 rounded-full bg-error/10 p-3", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.AlertCircle, { className: "h-8 w-8 text-error" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-medium text-foreground", children: resolvedTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "mt-1 text-muted-foreground max-w-sm", children: resolvedMessage }),
         (onRetry || retryEvent) && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", className: "mt-4", onClick: handleRetry, children: t("error.retry") })
       ]
     }
@@ -2883,7 +2883,7 @@ var MarkdownContent = React110__namespace.default.memo(
                   "blockquote",
                   {
                     ...props,
-                    className: "border-l-4 border-blue-500 pl-4 italic text-[var(--color-foreground)] my-4",
+                    className: "border-l-4 border-blue-500 pl-4 italic text-foreground my-4",
                     children
                   }
                 );
@@ -2958,7 +2958,7 @@ var CodeBlock = React110__namespace.default.memo(
                 variant: "ghost",
                 size: "sm",
                 onClick: handleCopy,
-                className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-[var(--color-muted-foreground)] hover:text-white",
+                className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-muted-foreground hover:text-white",
                 "aria-label": "Copy code",
                 children: copied ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { size: 16, className: "text-green-400" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Copy, { size: 16 })
               }