@ztwoint/z-ui 0.1.104 → 0.1.105

package/dist/components/badge/badge.d.ts

@@ -1,11 +1,14 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | null | undefined;
-    size?: "default" | "sm" | "xs" | "lg" | null | undefined;
-    color?: "default" | "success" | "warning" | "destructive" | "primary" | null | undefined;
+    variant?: "success" | "warning" | "danger" | "neutral" | "brand" | "gray" | null | undefined;
+    rounded?: "none" | "sm" | "md" | "full" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-declare function Badge({ className, variant, size, color, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+declare function Badge({ className, variant, size, rounded, leftIcon, rightIcon, label, asChild, }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    label?: string;
 }): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };

package/dist/components/badge/badge.js

@@ -1,121 +1,54 @@
-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 { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { Slot as m } from "@radix-ui/react-slot";
+import { cva as o } from "class-variance-authority";
 import "react";
-import { cn as u } from "../../lib/utils.js";
-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: {
-      variant: {
-        default: "border-transparent",
-        destructive: "border-transparent",
-        outline: ""
-      },
-      size: {
-        default: "px-[8px] py-[3px] text-sm",
-        xs: "px-[4px] py-[1px] text-[10px]",
-        sm: "px-[6px] py-[2px] text-xs",
-        lg: "px-[10px] py-[4px] text-base"
-      },
-      color: {
-        default: "",
-        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"
-      }
+import { cn as c } from "../../lib/utils.js";
+const g = o("inline-flex items-center justify-center py-1 px-1.5", {
+  variants: {
+    variant: {
+      neutral: "bg-surface-neutral-default text-neutral-primary border border-stroke-solid-light",
+      brand: "bg-surface-accent-default text-inverted-primary",
+      gray: "bg-surface-gray-default text-inverted-primary",
+      danger: "bg-surface-danger-default text-inverted-primary",
+      success: "bg-surface-success-default text-inverted-primary",
+      warning: "bg-surface-warning-default text-inverted-primary"
     },
-    compoundVariants: [
-      // Default variant with different colors
-      {
-        variant: "default",
-        color: "default",
-        class: "bg-surface-neutral-hover [a&]:hover:bg-surface-neutral-hover"
-      },
-      {
-        variant: "default",
-        color: "primary",
-        class: "bg-[var(--surface-accent-light)] text-default-brand [a&]:hover:bg-surface-neutral-hover"
-      },
-      {
-        variant: "default",
-        color: "destructive",
-        class: "bg-[var(--surface-danger-light)] text-danger-secondary [a&]:hover:bg-surface-danger-hover"
-      },
-      {
-        variant: "default",
-        color: "success",
-        class: "bg-[var(--surface-success-light)] text-success-secondary [a&]:hover:bg-surface-success-hover"
-      },
-      {
-        variant: "default",
-        color: "warning",
-        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: "bg-neutral-950 text-inverted-primary [a&]:hover:bg-neutral-800"
-      },
-      {
-        variant: "destructive",
-        color: "primary",
-        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: "bg-[var(--surface-neutral-hover)] text-neutral-primary border border-neutral-300 [a&]:hover:bg-surface-neutral-hover"
-      },
-      {
-        variant: "outline",
-        color: "primary",
-        class: "bg-[var(--surface-accent-light)] text-brand-secondary border border-blue-300 [a&]:hover:bg-surface-neutral-hover"
-      },
-      {
-        variant: "outline",
-        color: "destructive",
-        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: "bg-[var(--surface-success-light)] text-success-secondary border border-green-300 [a&]:hover:bg-surface-success-light-hover"
-      },
-      {
-        variant: "outline",
-        color: "warning",
-        class: "bg-[var(--surface-warning-light)] text-warning-secondary border border-amber-300 [a&]:hover:bg-surface-warning-light-hover"
-      }
-    ],
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      color: "default"
+    rounded: {
+      full: "rounded-full",
+      lg: "rounded-lg",
+      md: "rounded-md",
+      sm: "rounded-sm",
+      none: "rounded-none"
+    },
+    size: {
+      sm: "leading-none-regular-xs",
+      md: "leading-none-regular-sm",
+      lg: "leading-none-regular"
     }
+  },
+  defaultVariants: {
+    variant: "neutral",
+    rounded: "lg",
+    size: "md"
   }
-);
-function p({
-  className: r,
-  variant: e,
-  size: a,
-  color: t,
-  asChild: s = !1,
-  ...o
+});
+function h({
+  className: t,
+  variant: s,
+  size: d,
+  rounded: i,
+  leftIcon: r,
+  rightIcon: a,
+  label: n,
+  asChild: l = !1
 }) {
-  return /* @__PURE__ */ n(
-    s ? c : "span",
-    {
-      "data-slot": "badge",
-      className: u(l({ variant: e, size: a, color: t }), r),
-      ...o
-    }
-  );
+  return /* @__PURE__ */ u(l ? m : "span", { "data-slot": "badge", className: c(g({ variant: s, size: d, rounded: i }), t), children: [
+    r && /* @__PURE__ */ e("span", { className: "size-3.5", children: r }),
+    n && /* @__PURE__ */ e("span", { className: "flex items-center justify-center px-0.5 py-px", children: n }),
+    a && /* @__PURE__ */ e("span", { className: "size-3.5", children: a })
+  ] });
 }
 export {
-  p as Badge,
-  l as badgeVariants
+  h as Badge,
+  g as badgeVariants
 };

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

@@ -46,6 +46,8 @@
   --surface-inverted-hover: var(--alpha-two-300);
   --surface-inverted-pressed: var(--neutral-00);
   --surface-inverted-disabled: var(--neutral-100);
+
+  --surface-gray-default: var(--neutral-600);
 }
 
 .dark {
@@ -136,4 +138,7 @@
   --color-surface-inverted-hover: var(--surface-inverted-hover);
   --color-surface-inverted-pressed: var(--surface-inverted-pressed);
   --color-surface-inverted-disabled: var(--surface-inverted-disabled);
+
+  /* Surface Colors - Gray */
+  --color-surface-gray-default: var(--surface-gray-default);
 }