@ztwoint/z-ui 0.1.92 → 0.1.93

package/dist/components/badge/badge.js

@@ -1,9 +1,9 @@
-import { jsx as i } from "react/jsx-runtime";
-import { Slot as n } from "@radix-ui/react-slot";
-import { cva as c } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+import { Slot as c } from "@radix-ui/react-slot";
+import { cva as i } from "class-variance-authority";
 import "react";
 import { cn as u } from "../../lib/utils.js";
-const l = c(
+const l = i(
   "inline-flex rounded-lg items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
@@ -20,10 +20,10 @@ const l = c(
       },
       color: {
         default: "",
-        primary: "surface-neutral-default text-default-brand [a&]:hover:surface-neutral-hover",
-        destructive: "surface-danger-default text-inverted-primary [a&]:hover:surface-danger-hover",
-        success: "surface-success-default text-inverted-primary [a&]:hover:surface-success-hover",
-        warning: "surface-warning-default text-inverted-primary [a&]:hover:surface-warning-hover"
+        primary: "bg-surface-neutral-default text-default-brand [a&]:hover:bg-surface-neutral-hover",
+        destructive: "bg-surface-danger-default text-inverted-primary [a&]:hover:bg-surface-danger-hover",
+        success: "bg-surface-success-default text-inverted-primary [a&]:hover:bg-surface-success-hover",
+        warning: "bg-surface-warning-default text-inverted-primary [a&]:hover:bg-surface-warning-hover"
       }
     },
     compoundVariants: [
@@ -31,64 +31,64 @@ const l = c(
       {
         variant: "default",
         color: "default",
-        class: "surface-neutral-hover [a&]:hover:surface-neutral-hover"
+        class: "bg-surface-neutral-hover [a&]:hover:bg-surface-neutral-hover"
       },
       {
         variant: "default",
         color: "primary",
-        class: "surface-primary-light text-default-brand [a&]:hover:surface-neutral-hover"
+        class: "bg-[var(--surface-accent-light)] text-default-brand [a&]:hover:bg-surface-neutral-hover"
       },
       {
         variant: "default",
         color: "destructive",
-        class: "surface-danger-light text-danger-secondary [a&]:hover:surface-danger-hover"
+        class: "bg-[var(--surface-danger-light)] text-danger-secondary [a&]:hover:bg-surface-danger-hover"
       },
       {
         variant: "default",
         color: "success",
-        class: "surface-success-light text-success-secondary [a&]:hover:surface-success-hover"
+        class: "bg-[var(--surface-success-light)] text-success-secondary [a&]:hover:bg-surface-success-hover"
       },
       {
         variant: "default",
         color: "warning",
-        class: "surface-warning-light text-warning-secondary [a&]:hover:surface-warning-hover"
+        class: "bg-[var(--surface-warning-light)] text-warning-secondary [a&]:hover:bg-surface-warning-hover"
       },
       // Destructive variant with different colors
       {
         variant: "destructive",
         color: "default",
-        class: "surface-neutral-primary text-inverted-primary [a&]:hover:surface-neutral-hover"
+        class: "bg-neutral-950 text-inverted-primary [a&]:hover:bg-neutral-800"
       },
       {
         variant: "destructive",
         color: "primary",
-        class: "surface-primary-default text-inverted-primary [a&]:hover:surface-primary-hover"
+        class: "bg-[var(--surface-accent-default)] text-inverted-primary [a&]:hover:bg-surface-primary-hover"
       },
       // Outline variant with different colors
       {
         variant: "outline",
         color: "default",
-        class: "surface-neutral-default text-neutral-primary border-stroke-solid-high [a&]:hover:surface-neutral-hover"
+        class: "bg-[var(--surface-neutral-hover)] text-neutral-primary border border-neutral-300 [a&]:hover:bg-surface-neutral-hover"
       },
       {
         variant: "outline",
         color: "primary",
-        class: "surface-primary-light text-default-brand border-stroke-inverted-active [a&]:hover:surface-neutral-hover"
+        class: "bg-[var(--surface-accent-light)] text-brand-secondary border border-blue-300 [a&]:hover:bg-surface-neutral-hover"
       },
       {
         variant: "outline",
         color: "destructive",
-        class: "surface-danger-light text-danger-secondary border border-red-200 [a&]:hover:surface-danger-light-hover"
+        class: "bg-[var(--surface-danger-light)] text-danger-secondary border border-red-300 [a&]:hover:bg-surface-danger-light-hover"
       },
       {
         variant: "outline",
         color: "success",
-        class: "surface-success-light text-success-secondary border border-green-200 [a&]:hover:surface-success-light-hover"
+        class: "bg-[var(--surface-success-light)] text-success-secondary border border-green-300 [a&]:hover:bg-surface-success-light-hover"
       },
       {
         variant: "outline",
         color: "warning",
-        class: "surface-warning-light text-warning-secondary border border-amber-200 [a&]:hover:surface-warning-light-hover"
+        class: "bg-[var(--surface-warning-light)] text-warning-secondary border border-amber-300 [a&]:hover:bg-surface-warning-light-hover"
       }
     ],
     defaultVariants: {
@@ -98,7 +98,7 @@ const l = c(
     }
   }
 );
-function x({
+function p({
   className: r,
   variant: e,
   size: a,
@@ -106,8 +106,8 @@ function x({
   asChild: s = !1,
   ...o
 }) {
-  return /* @__PURE__ */ i(
-    s ? n : "span",
+  return /* @__PURE__ */ n(
+    s ? c : "span",
     {
       "data-slot": "badge",
       className: u(l({ variant: e, size: a, color: t }), r),
@@ -116,6 +116,6 @@ function x({
   );
 }
 export {
-  x as Badge,
+  p as Badge,
   l as badgeVariants
 };

package/dist/css/config/colors/semantic/surface.css

@@ -12,24 +12,28 @@
   --surface-accent-hover: var(--blue-800);
   --surface-accent-pressed: var(--blue-400);
   --surface-accent-disabled: var(--neutral-100);
+  --surface-accent-light: var(--blue-50);
 
   /* Surface Colors - Danger */
   --surface-danger-default: var(--red-600);
   --surface-danger-hover: var(--red-800);
   --surface-danger-pressed: var(--red-400);
   --surface-danger-disabled: var(--neutral-100);
+  --surface-danger-light: var(--red-50);
 
   /* Surface Colors - Success */
   --surface-success-default: var(--green-600);
   --surface-success-hover: var(--green-800);
   --surface-success-pressed: var(--green-400);
   --surface-success-disabled: var(--neutral-100);
+  --surface-success-light: var(--green-50);
 
   /* Surface Colors - Warning */
   --surface-warning-default: var(--amber-600);
   --surface-warning-hover: var(--amber-800);
   --surface-warning-pressed: var(--amber-400);
   --surface-warning-disabled: var(--neutral-100);
+  --surface-warning-light: var(--amber-50);
 
   /* Surface Colors - Purple */
   --surface-purple-default: var(--violet-600);