@onesaz/ui 0.4.0 → 0.4.1

package/dist/index.js

@@ -737,10 +737,10 @@ var colorClasses2 = {
   inherit: "",
   primary: "text-accent",
   secondary: "text-muted-foreground",
-  success: "text-green-600 dark:text-green-400",
-  warning: "text-orange-600 dark:text-orange-400",
-  error: "text-destructive",
-  info: "text-blue-600 dark:text-blue-400",
+  success: "text-success-600 dark:text-success-400",
+  warning: "text-warning-600 dark:text-warning-400",
+  error: "text-error-600 dark:text-error-400",
+  info: "text-info-600 dark:text-info-400",
   muted: "text-muted-foreground",
   white: "text-white",
   dark: "text-foreground"
@@ -771,13 +771,13 @@ var verticalAlignClasses = {
   baseline: "align-baseline"
 };
 var gradientClasses = {
-  primary: "from-purple-5 to-purple-8",
-  secondary: "from-slate-5 to-slate-8",
-  info: "from-blue-4 to-blue-7",
-  success: "from-green-4 to-green-7",
-  warning: "from-orange-4 to-orange-7",
-  error: "from-red-4 to-red-7",
-  dark: "from-slate-7 to-slate-10"
+  primary: "from-violet-400 to-violet-700",
+  secondary: "from-slate-400 to-slate-700",
+  info: "from-info-400 to-info-700",
+  success: "from-success-400 to-success-700",
+  warning: "from-warning-400 to-warning-700",
+  error: "from-error-400 to-error-700",
+  dark: "from-slate-600 to-slate-900"
 };
 var Typography = React5.forwardRef(
   ({
@@ -1834,8 +1834,34 @@ CardFooter.displayName = "CardFooter";
 // src/components/badge.tsx
 import * as React19 from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
+var containedClasses = {
+  default: "bg-accent text-accent-foreground",
+  success: "bg-success-500 text-white dark:bg-success-600",
+  warning: "bg-warning-500 text-white dark:bg-warning-600",
+  error: "bg-error-500 text-white dark:bg-error-600",
+  destructive: "bg-destructive text-destructive-foreground"
+};
+var outlinedClasses = {
+  default: "border border-accent text-accent",
+  success: "border border-success-500 text-success-600 dark:text-success-400",
+  warning: "border border-warning-500 text-warning-600 dark:text-warning-400",
+  error: "border border-error-500 text-error-600 dark:text-error-400",
+  destructive: "border border-destructive text-destructive"
+};
+var textClasses = {
+  default: "text-accent",
+  success: "text-success-600 dark:text-success-400",
+  warning: "text-warning-600 dark:text-warning-400",
+  error: "text-error-600 dark:text-error-400",
+  destructive: "text-destructive"
+};
+var variantMap = {
+  contained: containedClasses,
+  outlined: outlinedClasses,
+  text: textClasses
+};
 var Badge = React19.forwardRef(
-  ({ className, variant = "default", ...props }, ref) => {
+  ({ className, color = "default", variant = "contained", ...props }, ref) => {
     return /* @__PURE__ */ jsx19(
       "div",
       {
@@ -1843,15 +1869,7 @@ var Badge = React19.forwardRef(
         className: cn(
           "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors",
           "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-          {
-            "border-transparent bg-accent text-accent-foreground": variant === "default",
-            "border-transparent bg-muted text-foreground": variant === "secondary",
-            "border-transparent bg-destructive text-destructive-foreground": variant === "destructive",
-            "border border-border text-foreground": variant === "outline",
-            "border border-green-300 bg-green-100 text-green-800": variant === "success",
-            "border border-yellow-300 bg-yellow-100 text-yellow-800": variant === "warning",
-            "border border-blue-300 bg-blue-100 text-blue-800": variant === "info"
-          },
+          (variantMap[variant] ?? variantMap.contained)[color] ?? "",
           className
         ),
         ...props
@@ -1864,28 +1882,51 @@ Badge.displayName = "Badge";
 // src/components/chip.tsx
 import * as React20 from "react";
 import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
-var filledColorClasses = {
-  default: "bg-muted text-foreground",
-  primary: "bg-accent text-accent-foreground",
-  secondary: "bg-muted text-muted-foreground",
-  success: "bg-green-100 text-green-800",
-  warning: "bg-yellow-100 text-yellow-800",
-  error: "bg-red-100 text-red-800",
-  info: "bg-blue-100 text-blue-800"
+var filledClasses = {
+  default: "bg-accent text-accent-foreground",
+  success: "bg-success-500 text-white dark:bg-success-600",
+  warning: "bg-warning-500 text-white dark:bg-warning-600",
+  error: "bg-error-500 text-white dark:bg-error-600",
+  destructive: "bg-destructive text-destructive-foreground"
+};
+var filledHoverClasses = {
+  default: "hover:bg-accent-hover",
+  success: "hover:bg-success-600 dark:hover:bg-success-500",
+  warning: "hover:bg-warning-600 dark:hover:bg-warning-500",
+  error: "hover:bg-error-600 dark:hover:bg-error-500",
+  destructive: "hover:bg-destructive/90"
 };
-var outlinedColorClasses = {
-  default: "border-border text-foreground",
-  primary: "border-accent text-accent",
-  secondary: "border-muted-foreground text-muted-foreground",
-  success: "border-green-500 text-green-700",
-  warning: "border-yellow-500 text-yellow-700",
-  error: "border-red-500 text-red-700",
-  info: "border-blue-500 text-blue-700"
+var outlinedClasses2 = {
+  default: "border-accent text-accent",
+  success: "border-success-500 text-success-600 dark:border-success-400 dark:text-success-400",
+  warning: "border-warning-500 text-warning-600 dark:border-warning-400 dark:text-warning-400",
+  error: "border-error-500 text-error-600 dark:border-error-400 dark:text-error-400",
+  destructive: "border-destructive text-destructive"
+};
+var outlinedHoverClasses = {
+  default: "hover:bg-accent/10",
+  success: "hover:bg-success-500/10",
+  warning: "hover:bg-warning-500/10",
+  error: "hover:bg-error-500/10",
+  destructive: "hover:bg-destructive/10"
 };
 var sizeClasses3 = {
-  small: "h-6 text-xs px-2",
-  medium: "h-8 text-sm px-3"
+  small: "h-6 text-xs px-2 gap-1",
+  medium: "h-8 text-sm px-3 gap-1.5"
+};
+var iconSizeClasses = {
+  small: "[&>svg]:h-3 [&>svg]:w-3",
+  medium: "[&>svg]:h-4 [&>svg]:w-4"
+};
+var avatarSizeClasses = {
+  small: "[&>*]:h-4 [&>*]:w-4",
+  medium: "[&>*]:h-5 [&>*]:w-5"
+};
+var deleteBtnSizeClasses = {
+  small: "h-3.5 w-3.5",
+  medium: "h-4 w-4"
 };
+var DefaultDeleteIcon = ({ size }) => /* @__PURE__ */ jsx20("svg", { viewBox: "0 0 20 20", fill: "currentColor", className: deleteBtnSizeClasses[size], children: /* @__PURE__ */ jsx20("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) });
 var Chip = React20.forwardRef(
   ({
     className,
@@ -1899,58 +1940,74 @@ var Chip = React20.forwardRef(
     deleteIcon,
     clickable = false,
     disabled = false,
+    href,
+    component,
     children,
     onClick,
+    onKeyDown,
     ...props
   }, ref) => {
-    const isClickable = clickable || !!onClick;
     const content = label ?? children;
+    const isClickable = clickable || !!onClick || !!href;
+    const Component = component ?? (href ? "a" : "div");
+    const colorClass = variant === "filled" ? filledClasses[color] ?? filledClasses.default : outlinedClasses2[color] ?? outlinedClasses2.default;
+    const hoverClass = isClickable && !disabled ? variant === "filled" ? filledHoverClasses[color] ?? filledHoverClasses.default : outlinedHoverClasses[color] ?? outlinedHoverClasses.default : "";
+    const handleKeyDown = (e) => {
+      if (!disabled) {
+        if (isClickable && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          e.currentTarget.click();
+        }
+        if (onDelete && (e.key === "Delete" || e.key === "Backspace")) {
+          e.preventDefault();
+          onDelete(e);
+        }
+      }
+      onKeyDown?.(e);
+    };
     return /* @__PURE__ */ jsxs9(
-      "div",
+      Component,
       {
         ref,
+        href,
         role: isClickable ? "button" : void 0,
-        tabIndex: isClickable && !disabled ? 0 : void 0,
+        tabIndex: isClickable && !disabled ? 0 : onDelete && !disabled ? 0 : void 0,
+        "aria-disabled": disabled || void 0,
         onClick: disabled ? void 0 : onClick,
+        onKeyDown: handleKeyDown,
         className: cn(
-          "inline-flex items-center rounded-full font-medium transition-colors",
-          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1",
+          "inline-flex items-center rounded-full font-medium transition-colors select-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
           sizeClasses3[size],
-          variant === "filled" ? filledColorClasses[color] : cn("border bg-transparent", outlinedColorClasses[color]),
-          isClickable && !disabled && "cursor-pointer hover:opacity-80",
+          variant === "outlined" && "border bg-transparent",
+          colorClass,
+          hoverClass,
+          isClickable && !disabled ? "cursor-pointer" : "cursor-default",
           disabled && "pointer-events-none opacity-50",
           className
         ),
         ...props,
         children: [
-          avatar && /* @__PURE__ */ jsx20("span", { className: "mr-1 -ml-1 flex items-center justify-center [&>*]:h-5 [&>*]:w-5 [&>*]:rounded-full", children: avatar }),
-          !avatar && icon && /* @__PURE__ */ jsx20("span", { className: "mr-1 -ml-0.5 flex items-center justify-center [&>svg]:h-4 [&>svg]:w-4", children: icon }),
+          avatar && /* @__PURE__ */ jsx20("span", { className: cn("-ml-1 flex shrink-0 items-center justify-center [&>*]:rounded-full", avatarSizeClasses[size]), children: avatar }),
+          !avatar && icon && /* @__PURE__ */ jsx20("span", { className: cn("-ml-0.5 flex shrink-0 items-center justify-center", iconSizeClasses[size]), children: icon }),
           /* @__PURE__ */ jsx20("span", { className: "truncate", children: content }),
           onDelete && /* @__PURE__ */ jsx20(
             "button",
             {
               type: "button",
+              tabIndex: -1,
               onClick: (e) => {
                 e.stopPropagation();
                 if (!disabled) onDelete(e);
               },
               className: cn(
-                "ml-1 -mr-1 flex items-center justify-center rounded-full",
-                "h-4 w-4 hover:bg-black/10 focus:outline-none",
+                "-mr-1 flex shrink-0 items-center justify-center rounded-full",
+                "opacity-60 hover:opacity-100 focus:outline-none transition-opacity",
                 disabled && "pointer-events-none"
               ),
               disabled,
               "aria-label": "Remove",
-              children: deleteIcon ?? /* @__PURE__ */ jsx20(
-                "svg",
-                {
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewBox: "0 0 20 20",
-                  fill: "currentColor",
-                  className: "h-3 w-3",
-                  children: /* @__PURE__ */ jsx20("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
-                }
-              )
+              children: deleteIcon ?? /* @__PURE__ */ jsx20(DefaultDeleteIcon, { size })
             }
           )
         ]
@@ -2399,20 +2456,20 @@ var variantStyles = {
     border: ""
   },
   destructive: {
-    icon: "text-red-500",
-    border: "border-l-4 border-l-red-500"
+    icon: "text-error-500",
+    border: "border-l-4 border-l-error-500"
   },
   success: {
-    icon: "text-green-500",
-    border: "border-l-4 border-l-green-500"
+    icon: "text-success-500",
+    border: "border-l-4 border-l-success-500"
   },
   warning: {
-    icon: "text-yellow-500",
-    border: "border-l-4 border-l-yellow-500"
+    icon: "text-warning-500",
+    border: "border-l-4 border-l-warning-500"
   },
   info: {
-    icon: "text-blue-500",
-    border: "border-l-4 border-l-blue-500"
+    icon: "text-info-500",
+    border: "border-l-4 border-l-info-500"
   }
 };
 var VariantIcons = {
@@ -2578,217 +2635,170 @@ Spinner.displayName = "Spinner";
 // src/components/alert.tsx
 import * as React27 from "react";
 import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
-var variants = {
+var variantConfig = {
   default: {
-    iconBg: "bg-zinc-900",
-    progress: "bg-zinc-900",
-    textColor: "text-zinc-900"
-  },
-  info: {
-    iconBg: "bg-blue-600",
-    progress: "bg-blue-600",
-    textColor: "text-blue-600"
+    root: "bg-accent/10",
+    strip: "bg-accent",
+    iconColor: "text-accent"
   },
   success: {
-    iconBg: "bg-emerald-600",
-    progress: "bg-emerald-600",
-    textColor: "text-emerald-600"
+    root: "bg-success-500/10",
+    strip: "bg-success-500",
+    iconColor: "text-success-600 dark:text-success-500"
   },
   warning: {
-    iconBg: "bg-amber-500",
-    progress: "bg-amber-500",
-    textColor: "text-amber-500"
+    root: "bg-warning-500/10",
+    strip: "bg-warning-500",
+    iconColor: "text-warning-600 dark:text-warning-500"
   },
   error: {
-    iconBg: "bg-rose-600",
-    progress: "bg-rose-600",
-    textColor: "text-rose-600"
-  },
-  destructive: {
-    iconBg: "bg-rose-700",
-    progress: "bg-rose-700",
-    textColor: "text-rose-700"
+    root: "bg-error-500/10",
+    strip: "bg-error-500",
+    iconColor: "text-error-600 dark:text-error-500"
   }
 };
-var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsx27(
+var InfoIcon = () => /* @__PURE__ */ jsxs14(
   "svg",
   {
-    className,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: "2",
-    children: /* @__PURE__ */ jsx27("path", { d: "m5 13 4 4L19 7" })
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "h-4 w-4 shrink-0 mt-px",
+    children: [
+      /* @__PURE__ */ jsx27("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx27("path", { d: "M12 16v-4M12 8h.01" })
+    ]
   }
 );
-var InfoIcon = ({ className }) => /* @__PURE__ */ jsxs14(
+var CheckIcon2 = () => /* @__PURE__ */ jsxs14(
   "svg",
   {
-    className,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "h-4 w-4 shrink-0 mt-px",
     children: [
-      /* @__PURE__ */ jsx27("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ jsx27("path", { d: "M12 16v-4M12 8h.01" })
+      /* @__PURE__ */ jsx27("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+      /* @__PURE__ */ jsx27("path", { d: "m9 11 3 3L22 4" })
     ]
   }
 );
-var WarningIcon = ({ className }) => /* @__PURE__ */ jsxs14(
+var WarningIcon = () => /* @__PURE__ */ jsxs14(
   "svg",
   {
-    className,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "h-4 w-4 shrink-0 mt-px",
     children: [
       /* @__PURE__ */ jsx27("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
       /* @__PURE__ */ jsx27("path", { d: "M12 9v4M12 17h.01" })
     ]
   }
 );
-var XCircleIcon = ({ className }) => /* @__PURE__ */ jsxs14(
+var ErrorIcon = () => /* @__PURE__ */ jsxs14(
   "svg",
   {
-    className,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "h-4 w-4 shrink-0 mt-px",
     children: [
       /* @__PURE__ */ jsx27("circle", { cx: "12", cy: "12", r: "10" }),
       /* @__PURE__ */ jsx27("path", { d: "m15 9-6 6M9 9l6 6" })
     ]
   }
 );
-var CloseIcon = ({ className }) => /* @__PURE__ */ jsx27(
+var CloseIcon = () => /* @__PURE__ */ jsx27(
   "svg",
   {
-    className,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: "currentColor",
     strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "h-3.5 w-3.5",
     children: /* @__PURE__ */ jsx27("path", { d: "M18 6 6 18M6 6l12 12" })
   }
 );
-var iconMap = {
-  default: InfoIcon,
-  info: InfoIcon,
-  success: CheckIcon2,
-  warning: WarningIcon,
-  error: XCircleIcon,
-  destructive: XCircleIcon
+var defaultIcons = {
+  default: /* @__PURE__ */ jsx27(InfoIcon, {}),
+  success: /* @__PURE__ */ jsx27(CheckIcon2, {}),
+  warning: /* @__PURE__ */ jsx27(WarningIcon, {}),
+  error: /* @__PURE__ */ jsx27(ErrorIcon, {})
 };
-var Alert = ({
-  variant = "default",
-  duration = 1e14,
-  // default 4000ms
-  onClose,
-  className,
-  children,
-  ...props
-}) => {
-  const [visible, setVisible] = React27.useState(true);
-  const [progress, setProgress] = React27.useState(100);
-  const styles = variants[variant];
-  const Icon2 = iconMap[variant];
-  const hasDescription = React27.Children.toArray(children).some(
-    (child) => React27.isValidElement(child) && child.type === AlertDescription
-  );
-  React27.useEffect(() => {
-    if (duration === null) return;
-    const start = Date.now();
-    const interval = setInterval(() => {
-      const elapsed = Date.now() - start;
-      const percent = 100 - elapsed / duration * 100;
-      setProgress(percent);
-      if (elapsed >= duration) {
-        clearInterval(interval);
-        handleClose();
+var Alert = React27.forwardRef(
+  ({ className, variant = "default", onClose, icon, children, ...props }, ref) => {
+    const cfg = variantConfig[variant];
+    const resolvedIcon = icon === null ? null : icon ?? defaultIcons[variant];
+    return /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: cn(
+          "relative flex gap-3 rounded-lg border border-border pl-5 pr-4 py-3 text-sm overflow-hidden",
+          cfg.root,
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx27("div", { className: cn("absolute left-0 top-0 bottom-0 w-1", cfg.strip) }),
+          resolvedIcon && /* @__PURE__ */ jsx27("span", { className: cn("mt-0.5", cfg.iconColor), children: resolvedIcon }),
+          /* @__PURE__ */ jsx27("div", { className: "flex-1 min-w-0", children }),
+          onClose && /* @__PURE__ */ jsx27(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Dismiss",
+              className: "shrink-0 self-start mt-0.5 rounded text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx27(CloseIcon, {})
+            }
+          )
+        ]
       }
-    }, 16);
-    return () => clearInterval(interval);
-  }, [duration]);
-  const handleClose = () => {
-    setVisible(false);
-    onClose?.();
-  };
-  if (!visible) return null;
-  return /* @__PURE__ */ jsxs14(
-    "div",
+    );
+  }
+);
+Alert.displayName = "Alert";
+var AlertTitle = React27.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx27(
+    "h5",
     {
-      role: "alert",
-      className: cn(
-        "relative w-[380px] rounded-xl bg-background border border-border shadow-lg p-4 flex gap-4 items-start overflow-hidden",
-        className
-      ),
+      ref,
+      className: cn("font-semibold leading-snug text-foreground", className),
       ...props,
-      children: [
-        /* @__PURE__ */ jsx27(
-          "div",
-          {
-            className: cn(
-              "flex items-center justify-center h-10 w-10 rounded-full text-white shrink-0",
-              styles.iconBg
-            ),
-            children: /* @__PURE__ */ jsx27(Icon2, { className: "h-5 w-5" })
-          }
-        ),
-        /* @__PURE__ */ jsx27("div", { className: cn("flex-1", !hasDescription && "flex items-center mt-2"), children: React27.Children.map(children, (child) => {
-          if (React27.isValidElement(child) && child.type === AlertTitle) {
-            return React27.cloneElement(child, {
-              hasDescription,
-              variant
-            });
-          }
-          return child;
-        }) }),
-        /* @__PURE__ */ jsx27(
-          "button",
-          {
-            onClick: handleClose,
-            className: "absolute top-3 right-3 text-muted-foreground hover:text-foreground transition",
-            children: /* @__PURE__ */ jsx27(CloseIcon, { className: "h-4 w-4" })
-          }
-        ),
-        duration !== null && /* @__PURE__ */ jsx27("div", { className: "absolute bottom-0 left-0 h-1 w-full bg-muted", children: /* @__PURE__ */ jsx27(
-          "div",
-          {
-            className: cn("h-full transition-all", styles.progress),
-            style: { width: `${progress}%` }
-          }
-        ) })
-      ]
+      children
     }
-  );
-};
-var AlertTitle = ({
-  className,
-  children,
-  hasDescription = true,
-  variant = "default",
-  ...props
-}) => {
-  const styles = variants[variant];
-  return /* @__PURE__ */ jsx27(
-    "h4",
+  )
+);
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React27.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx27(
+    "p",
     {
-      className: cn("font-semibold text-sm", styles.textColor, className),
+      ref,
+      className: cn("text-sm text-muted-foreground mt-0.5 leading-relaxed", className),
       ...props,
       children
     }
-  );
-};
-var AlertDescription = ({
-  className,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx27("p", { className: cn("text-sm text-muted-foreground mt-1", className), ...props, children });
-};
+  )
+);
+AlertDescription.displayName = "AlertDescription";
 
 // src/components/tabs.tsx
 import * as React28 from "react";
@@ -3053,11 +3063,11 @@ var linearSizeClasses = {
   lg: "h-3"
 };
 var variantClasses2 = {
-  default: "bg-primary-500",
-  success: "bg-green-500",
-  warning: "bg-yellow-500",
-  error: "bg-red-500",
-  info: "bg-blue-500"
+  default: "bg-accent",
+  success: "bg-success-500",
+  warning: "bg-warning-500",
+  error: "bg-error-500",
+  info: "bg-info-500"
 };
 var LinearProgress = React30.forwardRef(
   ({
@@ -3109,11 +3119,11 @@ var circularSizeValues = {
   xl: 72
 };
 var strokeColors = {
-  default: "stroke-primary-500",
-  success: "stroke-green-500",
-  warning: "stroke-yellow-500",
-  error: "stroke-red-500",
-  info: "stroke-blue-500"
+  default: "stroke-accent",
+  success: "stroke-success-500",
+  warning: "stroke-warning-500",
+  error: "stroke-error-500",
+  info: "stroke-info-500"
 };
 var CircularProgress = React30.forwardRef(
   ({
@@ -6118,10 +6128,10 @@ var colorStyles = {
   default: "text-foreground",
   muted: "text-muted-foreground",
   primary: "text-primary",
-  success: "text-green-600 dark:text-green-400",
-  warning: "text-yellow-600 dark:text-yellow-400",
-  error: "text-destructive",
-  info: "text-blue-600 dark:text-blue-400"
+  success: "text-success-600 dark:text-success-400",
+  warning: "text-warning-600 dark:text-warning-400",
+  error: "text-error-600 dark:text-error-400",
+  info: "text-info-600 dark:text-info-400"
 };
 var DataListLabel = React38.forwardRef(
   ({
@@ -8364,8 +8374,11 @@ var IconRail = React46.forwardRef(
           {
             className: cn(
               "flex flex-col bg-card border-r border-border h-full",
-              "transition-[width] duration-200",
-              overlayRail && isExpanded ? "absolute left-0 top-0 z-30 w-[var(--rail-expanded-width)] shadow-lg" : "w-full",
+              "transition-[width,box-shadow] duration-200",
+              overlayRail && expandableRail ? cn(
+                "absolute left-0 top-0 z-30",
+                isExpanded ? "w-[var(--rail-expanded-width)] shadow-lg" : "w-[var(--rail-width)] shadow-none"
+              ) : "w-full",
               className
             ),
             children
@@ -8764,9 +8777,10 @@ var PlaygroundContent = () => {
     ] }) }),
     /* @__PURE__ */ jsx47(Section, { title: "Badge", children: /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap gap-4", children: [
       /* @__PURE__ */ jsx47(Badge, { children: "Default" }),
-      /* @__PURE__ */ jsx47(Badge, { variant: "secondary", children: "Secondary" }),
-      /* @__PURE__ */ jsx47(Badge, { variant: "destructive", children: "Destructive" }),
-      /* @__PURE__ */ jsx47(Badge, { variant: "outline", children: "Outline" })
+      /* @__PURE__ */ jsx47(Badge, { color: "success", children: "Success" }),
+      /* @__PURE__ */ jsx47(Badge, { color: "warning", children: "Warning" }),
+      /* @__PURE__ */ jsx47(Badge, { color: "error", variant: "outlined", children: "Error" }),
+      /* @__PURE__ */ jsx47(Badge, { color: "destructive", variant: "text", children: "Destructive" })
     ] }) }),
     /* @__PURE__ */ jsx47(Section, { title: "Card", children: /* @__PURE__ */ jsxs32("div", { className: "grid gap-4 md:grid-cols-2", children: [
       /* @__PURE__ */ jsxs32(Card, { children: [
@@ -8850,19 +8864,19 @@ var PlaygroundContent = () => {
       /* @__PURE__ */ jsxs32(TableBody, { children: [
         /* @__PURE__ */ jsxs32(TableRow, { children: [
           /* @__PURE__ */ jsx47(TableCell, { children: "INV001" }),
-          /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Badge, { children: "Paid" }) }),
+          /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Badge, { color: "success", children: "Paid" }) }),
           /* @__PURE__ */ jsx47(TableCell, { children: "Credit Card" }),
           /* @__PURE__ */ jsx47(TableCell, { className: "text-right", children: "$250.00" })
         ] }),
         /* @__PURE__ */ jsxs32(TableRow, { children: [
           /* @__PURE__ */ jsx47(TableCell, { children: "INV002" }),
-          /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Badge, { variant: "secondary", children: "Pending" }) }),
+          /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Badge, { color: "warning", variant: "outlined", children: "Pending" }) }),
           /* @__PURE__ */ jsx47(TableCell, { children: "PayPal" }),
           /* @__PURE__ */ jsx47(TableCell, { className: "text-right", children: "$150.00" })
         ] }),
         /* @__PURE__ */ jsxs32(TableRow, { children: [
           /* @__PURE__ */ jsx47(TableCell, { children: "INV003" }),
-          /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Badge, { variant: "destructive", children: "Failed" }) }),
+          /* @__PURE__ */ jsx47(TableCell, { children: /* @__PURE__ */ jsx47(Badge, { color: "error", variant: "outlined", children: "Failed" }) }),
           /* @__PURE__ */ jsx47(TableCell, { children: "Bank Transfer" }),
           /* @__PURE__ */ jsx47(TableCell, { className: "text-right", children: "$350.00" })
         ] })