@onesaz/ui 0.4.0 → 0.4.2

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 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 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 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-50",
+    strip: "bg-success-500",
+    iconColor: "text-success-600"
   },
   warning: {
-    iconBg: "bg-amber-500",
-    progress: "bg-amber-500",
-    textColor: "text-amber-500"
+    root: "bg-warning-50",
+    strip: "bg-warning-500",
+    iconColor: "text-warning-600"
   },
   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-50",
+    strip: "bg-error-500",
+    iconColor: "text-error-600"
   }
 };
-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(
   ({
@@ -7767,15 +7777,327 @@ var DropdownMenuShortcut = ({
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
-// src/components/drawer.tsx
+// src/components/backdrop.tsx
 import * as React43 from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var Backdrop = React43.forwardRef(
+  ({
+    open,
+    invisible = false,
+    transitionDuration = 225,
+    keepMounted = false,
+    disablePortal = false,
+    disableScrollLock = false,
+    className,
+    children,
+    onClick,
+    ...props
+  }, ref) => {
+    const [mounted, setMounted] = React43.useState(open);
+    const [visible, setVisible] = React43.useState(false);
+    React43.useEffect(() => {
+      if (open) {
+        setMounted(true);
+        const raf = requestAnimationFrame(() => setVisible(true));
+        return () => cancelAnimationFrame(raf);
+      } else {
+        setVisible(false);
+        if (!keepMounted) {
+          const t = setTimeout(() => setMounted(false), transitionDuration);
+          return () => clearTimeout(t);
+        }
+      }
+    }, [open, keepMounted, transitionDuration]);
+    React43.useEffect(() => {
+      if (disableScrollLock) return;
+      if (open) {
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+          document.body.style.overflow = prev;
+        };
+      }
+    }, [open, disableScrollLock]);
+    if (!mounted) return null;
+    const node = /* @__PURE__ */ jsx43(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        onClick,
+        style: { transitionDuration: `${transitionDuration}ms` },
+        className: cn(
+          "fixed inset-0 z-50 flex items-center justify-center transition-opacity",
+          invisible ? "bg-transparent" : "bg-black/50",
+          visible ? "opacity-100" : "opacity-0",
+          !visible && "pointer-events-none",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+    if (disablePortal || typeof document === "undefined") return node;
+    return createPortal(node, document.body);
+  }
+);
+Backdrop.displayName = "Backdrop";
+
+// src/components/snackbar.tsx
+import * as React44 from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+var SnackbarContent = React44.forwardRef(
+  ({ className, message, action, ...props }, ref) => /* @__PURE__ */ jsxs28(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn(
+        "flex items-center gap-3 min-w-72 max-w-[568px] rounded-lg px-4 py-3 text-sm shadow-lg",
+        "bg-foreground text-background",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx44("span", { className: "flex-1", children: message }),
+        action && /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: action })
+      ]
+    }
+  )
+);
+SnackbarContent.displayName = "SnackbarContent";
+var anchorClasses = {
+  "top-left": "top-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "top-right": "top-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4"
+};
+var Snackbar = React44.forwardRef(
+  ({
+    open,
+    message,
+    action,
+    autoHideDuration = 6e3,
+    onClose,
+    anchorOrigin = { vertical: "bottom", horizontal: "left" },
+    transitionDuration = 225,
+    disableWindowBlurListener = false,
+    disablePortal = false,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [mounted, setMounted] = React44.useState(open);
+    const [visible, setVisible] = React44.useState(false);
+    const timer = React44.useRef(null);
+    const posKey = `${anchorOrigin.vertical}-${anchorOrigin.horizontal}`;
+    const position = anchorClasses[posKey] ?? anchorClasses["bottom-left"];
+    const slideDir = anchorOrigin.vertical === "top" ? "-8px" : "8px";
+    const clearTimer = React44.useCallback(() => {
+      if (timer.current) clearTimeout(timer.current);
+    }, []);
+    const startTimer = React44.useCallback(() => {
+      if (!autoHideDuration) return;
+      clearTimer();
+      timer.current = setTimeout(() => onClose?.(null, "timeout"), autoHideDuration);
+    }, [autoHideDuration, onClose, clearTimer]);
+    React44.useEffect(() => {
+      if (open) {
+        setMounted(true);
+        const raf = requestAnimationFrame(() => setVisible(true));
+        return () => cancelAnimationFrame(raf);
+      } else {
+        setVisible(false);
+        const t = setTimeout(() => setMounted(false), transitionDuration);
+        return () => clearTimeout(t);
+      }
+    }, [open, transitionDuration]);
+    React44.useEffect(() => {
+      if (open) {
+        startTimer();
+        return clearTimer;
+      }
+    }, [open, startTimer, clearTimer]);
+    React44.useEffect(() => {
+      if (disableWindowBlurListener || !open) return;
+      window.addEventListener("blur", clearTimer);
+      window.addEventListener("focus", startTimer);
+      return () => {
+        window.removeEventListener("blur", clearTimer);
+        window.removeEventListener("focus", startTimer);
+      };
+    }, [open, disableWindowBlurListener, clearTimer, startTimer]);
+    React44.useEffect(() => {
+      if (!open) return;
+      const onKey = (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onClose?.(e, "escapeKeyDown");
+        }
+      };
+      document.addEventListener("keydown", onKey);
+      return () => document.removeEventListener("keydown", onKey);
+    }, [open, onClose]);
+    if (!mounted) return null;
+    const node = /* @__PURE__ */ jsx44(
+      "div",
+      {
+        ref,
+        className: cn("fixed z-[1400]", position, className),
+        style: {
+          opacity: visible ? 1 : 0,
+          transform: visible ? "translateY(0)" : `translateY(${slideDir})`,
+          transition: `opacity ${transitionDuration}ms ease, transform ${transitionDuration}ms ease`
+        },
+        onMouseEnter: clearTimer,
+        onMouseLeave: startTimer,
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx44(SnackbarContent, { message, action })
+      }
+    );
+    if (disablePortal || typeof document === "undefined") return node;
+    return createPortal2(node, document.body);
+  }
+);
+Snackbar.displayName = "Snackbar";
+function ManagedRow({ item, vertical, transitionDuration, onRemove }) {
+  const [visible, setVisible] = React44.useState(false);
+  const timer = React44.useRef(null);
+  const slideDir = vertical === "top" ? "-8px" : "8px";
+  const clearTimer = React44.useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  const startTimer = React44.useCallback(() => {
+    if (!item.autoHideDuration) return;
+    clearTimer();
+    timer.current = setTimeout(() => {
+      onRemove(item.key);
+      item.onClose?.();
+    }, item.autoHideDuration);
+  }, [item, onRemove, clearTimer]);
+  React44.useEffect(() => {
+    const raf = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  React44.useEffect(() => {
+    startTimer();
+    return clearTimer;
+  }, [startTimer, clearTimer]);
+  return /* @__PURE__ */ jsx44(
+    "div",
+    {
+      style: {
+        opacity: visible ? 1 : 0,
+        transform: visible ? "translateY(0)" : `translateY(${slideDir})`,
+        transition: `opacity ${transitionDuration}ms ease, transform ${transitionDuration}ms ease`
+      },
+      onMouseEnter: clearTimer,
+      onMouseLeave: startTimer,
+      children: item.content
+    }
+  );
+}
+var SnackbarContext = React44.createContext({
+  enqueueSnackbar: () => "",
+  closeSnackbar: () => {
+  }
+});
+function SnackbarProvider({
+  children,
+  anchorOrigin = { vertical: "bottom", horizontal: "left" },
+  autoHideDuration = 5e3,
+  maxSnack = 3,
+  transitionDuration = 225
+}) {
+  const [items, setItems] = React44.useState([]);
+  const closeSnackbar = React44.useCallback((key) => {
+    setItems((prev) => prev.filter((i) => i.key !== key));
+  }, []);
+  const enqueueSnackbar = React44.useCallback(
+    (message, options = {}) => {
+      const key = `snk-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      const { variant, action, onClose, autoHideDuration: dur, anchorOrigin: anchor } = options;
+      let content;
+      if (variant) {
+        content = /* @__PURE__ */ jsx44(Alert, { variant, onClose: () => {
+          closeSnackbar(key);
+          onClose?.();
+        }, children: message });
+      } else if (React44.isValidElement(message)) {
+        content = message;
+      } else {
+        content = /* @__PURE__ */ jsx44(SnackbarContent, { message, action });
+      }
+      setItems((prev) => {
+        const capped = prev.length >= maxSnack ? prev.slice(-(maxSnack - 1)) : prev;
+        return [
+          ...capped,
+          {
+            key,
+            content,
+            autoHideDuration: dur !== void 0 ? dur : autoHideDuration,
+            anchorOrigin: anchor ?? anchorOrigin,
+            onClose
+          }
+        ];
+      });
+      return key;
+    },
+    [autoHideDuration, anchorOrigin, maxSnack, closeSnackbar]
+  );
+  const groups = React44.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    items.forEach((item) => {
+      const k = `${item.anchorOrigin.vertical}-${item.anchorOrigin.horizontal}`;
+      map.set(k, [...map.get(k) ?? [], item]);
+    });
+    return map;
+  }, [items]);
+  return /* @__PURE__ */ jsxs28(SnackbarContext.Provider, { value: { enqueueSnackbar, closeSnackbar }, children: [
+    children,
+    typeof document !== "undefined" && Array.from(groups.entries()).map(([posKey, posItems]) => {
+      const [vertical, horizontal] = posKey.split("-");
+      return createPortal2(
+        /* @__PURE__ */ jsx44(
+          "div",
+          {
+            className: cn(
+              "fixed z-[1400] flex gap-2 pointer-events-none",
+              vertical === "top" ? "top-4 flex-col" : "bottom-4 flex-col-reverse",
+              horizontal === "left" ? "left-4" : horizontal === "right" ? "right-4" : "left-1/2 -translate-x-1/2"
+            ),
+            children: posItems.map((item) => /* @__PURE__ */ jsx44("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx44(
+              ManagedRow,
+              {
+                item,
+                vertical,
+                transitionDuration,
+                onRemove: closeSnackbar
+              }
+            ) }, item.key))
+          },
+          posKey
+        ),
+        document.body
+      );
+    })
+  ] });
+}
+var useSnackbar = () => React44.useContext(SnackbarContext);
+
+// src/components/drawer.tsx
+import * as React45 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 var Drawer = DialogPrimitive2.Root;
 var DrawerTrigger = DialogPrimitive2.Trigger;
 var DrawerClose = DialogPrimitive2.Close;
 var DrawerPortal = DialogPrimitive2.Portal;
-var DrawerOverlay = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var DrawerOverlay = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -7795,9 +8117,9 @@ var slideVariants = {
   top: "inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
   bottom: "inset-x-0 bottom-0 w-full data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
 };
-var DrawerContent = React43.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs28(DrawerPortal, { children: [
-  /* @__PURE__ */ jsx43(DrawerOverlay, {}),
-  /* @__PURE__ */ jsxs28(
+var DrawerContent = React45.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs29(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx45(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs29(
     DialogPrimitive2.Content,
     {
       ref,
@@ -7811,7 +8133,7 @@ var DrawerContent = React43.forwardRef(({ side = "right", showClose = true, clas
       ...props,
       children: [
         children,
-        showClose && /* @__PURE__ */ jsxs28(
+        showClose && /* @__PURE__ */ jsxs29(
           DrawerClose,
           {
             className: cn(
@@ -7821,7 +8143,7 @@ var DrawerContent = React43.forwardRef(({ side = "right", showClose = true, clas
               "disabled:pointer-events-none"
             ),
             children: [
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx45(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -7834,10 +8156,10 @@ var DrawerContent = React43.forwardRef(({ side = "right", showClose = true, clas
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   className: "h-4 w-4",
-                  children: /* @__PURE__ */ jsx43("path", { d: "M18 6 6 18M6 6l12 12" })
+                  children: /* @__PURE__ */ jsx45("path", { d: "M18 6 6 18M6 6l12 12" })
                 }
               ),
-              /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Close" })
+              /* @__PURE__ */ jsx45("span", { className: "sr-only", children: "Close" })
             ]
           }
         )
@@ -7846,8 +8168,8 @@ var DrawerContent = React43.forwardRef(({ side = "right", showClose = true, clas
   )
 ] }));
 DrawerContent.displayName = "DrawerContent";
-var DrawerHeader = React43.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var DrawerHeader = React45.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
     "div",
     {
       ref,
@@ -7857,7 +8179,7 @@ var DrawerHeader = React43.forwardRef(
   )
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerTitle = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var DrawerTitle = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   DialogPrimitive2.Title,
   {
     ref,
@@ -7866,7 +8188,7 @@ var DrawerTitle = React43.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
-var DrawerDescription = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var DrawerDescription = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
   DialogPrimitive2.Description,
   {
     ref,
@@ -7875,8 +8197,8 @@ var DrawerDescription = React43.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DrawerDescription.displayName = DialogPrimitive2.Description.displayName;
-var DrawerBody = React43.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var DrawerBody = React45.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
     "div",
     {
       ref,
@@ -7886,8 +8208,8 @@ var DrawerBody = React43.forwardRef(
   )
 );
 DrawerBody.displayName = "DrawerBody";
-var DrawerFooter = React43.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
+var DrawerFooter = React45.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
     "div",
     {
       ref,
@@ -7913,16 +8235,16 @@ var SheetBody = DrawerBody;
 var SheetFooter = DrawerFooter;
 
 // src/components/topbar.tsx
-import * as React44 from "react";
-import { Fragment as Fragment6, jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import * as React46 from "react";
+import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 var sizeClasses5 = {
   sm: "h-12",
   md: "h-14",
   lg: "h-16"
 };
-var TopBar = React44.forwardRef(
+var TopBar = React46.forwardRef(
   ({ className, bordered = true, sticky = false, size = "md", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "header",
       {
         ref,
@@ -7940,23 +8262,23 @@ var TopBar = React44.forwardRef(
   }
 );
 TopBar.displayName = "TopBar";
-var TopBarBrand = React44.forwardRef(
+var TopBarBrand = React46.forwardRef(
   ({ className, logo, name, href, children, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs29(Fragment6, { children: [
-      logo && /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: logo }),
-      name && /* @__PURE__ */ jsx44("span", { className: "font-semibold text-lg", children: name }),
+    const content = /* @__PURE__ */ jsxs30(Fragment6, { children: [
+      logo && /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: logo }),
+      name && /* @__PURE__ */ jsx46("span", { className: "font-semibold text-lg", children: name }),
       children
     ] });
     if (href) {
-      return /* @__PURE__ */ jsx44("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: /* @__PURE__ */ jsx44("a", { href, className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: content }) });
+      return /* @__PURE__ */ jsx46("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: /* @__PURE__ */ jsx46("a", { href, className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: content }) });
     }
-    return /* @__PURE__ */ jsx44("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: content });
+    return /* @__PURE__ */ jsx46("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: content });
   }
 );
 TopBarBrand.displayName = "TopBarBrand";
-var TopBarNav = React44.forwardRef(
+var TopBarNav = React46.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "nav",
       {
         ref,
@@ -7968,9 +8290,9 @@ var TopBarNav = React44.forwardRef(
   }
 );
 TopBarNav.displayName = "TopBarNav";
-var TopBarNavItem = React44.forwardRef(
+var TopBarNavItem = React46.forwardRef(
   ({ className, active, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "a",
       {
         ref,
@@ -7986,9 +8308,9 @@ var TopBarNavItem = React44.forwardRef(
   }
 );
 TopBarNavItem.displayName = "TopBarNavItem";
-var TopBarSection = React44.forwardRef(
+var TopBarSection = React46.forwardRef(
   ({ className, align = "left", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         ref,
@@ -8008,9 +8330,9 @@ var TopBarSection = React44.forwardRef(
   }
 );
 TopBarSection.displayName = "TopBarSection";
-var TopBarDivider = React44.forwardRef(
+var TopBarDivider = React46.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx46(
       "div",
       {
         ref,
@@ -8023,17 +8345,17 @@ var TopBarDivider = React44.forwardRef(
 TopBarDivider.displayName = "TopBarDivider";
 
 // src/components/sidebar.tsx
-import * as React45 from "react";
-import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
-var SidebarContext = React45.createContext(void 0);
+import * as React47 from "react";
+import { Fragment as Fragment7, jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+var SidebarContext = React47.createContext(void 0);
 var useSidebar = () => {
-  const context = React45.useContext(SidebarContext);
+  const context = React47.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a Sidebar");
   }
   return context;
 };
-var Sidebar = React45.forwardRef(
+var Sidebar = React47.forwardRef(
   ({
     className,
     collapsed: controlledCollapsed,
@@ -8045,10 +8367,10 @@ var Sidebar = React45.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React45.useState(defaultCollapsed);
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React47.useState(defaultCollapsed);
     const isControlled = controlledCollapsed !== void 0;
     const collapsed = isControlled ? controlledCollapsed : uncontrolledCollapsed;
-    const setCollapsed = React45.useCallback(
+    const setCollapsed = React47.useCallback(
       (value) => {
         if (!isControlled) {
           setUncontrolledCollapsed(value);
@@ -8057,7 +8379,7 @@ var Sidebar = React45.forwardRef(
       },
       [isControlled, onCollapsedChange]
     );
-    return /* @__PURE__ */ jsx45(SidebarContext.Provider, { value: { collapsed, setCollapsed }, children: /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx47(SidebarContext.Provider, { value: { collapsed, setCollapsed }, children: /* @__PURE__ */ jsx47(
       "aside",
       {
         ref,
@@ -8077,9 +8399,9 @@ var Sidebar = React45.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = React45.forwardRef(
+var SidebarHeader = React47.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         ref,
@@ -8091,9 +8413,9 @@ var SidebarHeader = React45.forwardRef(
   }
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarContent = React45.forwardRef(
+var SidebarContent = React47.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         ref,
@@ -8105,9 +8427,9 @@ var SidebarContent = React45.forwardRef(
   }
 );
 SidebarContent.displayName = "SidebarContent";
-var SidebarFooter = React45.forwardRef(
+var SidebarFooter = React47.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         ref,
@@ -8119,25 +8441,25 @@ var SidebarFooter = React45.forwardRef(
   }
 );
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarGroup = React45.forwardRef(
+var SidebarGroup = React47.forwardRef(
   ({ className, label, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    return /* @__PURE__ */ jsxs30("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
-      label && !collapsed && /* @__PURE__ */ jsx45("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
-      label && collapsed && /* @__PURE__ */ jsx45("div", { className: "flex justify-center py-1.5", children: /* @__PURE__ */ jsx45("div", { className: "h-px w-4 bg-border" }) }),
-      /* @__PURE__ */ jsx45("div", { className: "space-y-1", children })
+    return /* @__PURE__ */ jsxs31("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+      label && !collapsed && /* @__PURE__ */ jsx47("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
+      label && collapsed && /* @__PURE__ */ jsx47("div", { className: "flex justify-center py-1.5", children: /* @__PURE__ */ jsx47("div", { className: "h-px w-4 bg-border" }) }),
+      /* @__PURE__ */ jsx47("div", { className: "space-y-1", children })
     ] });
   }
 );
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarItem = React45.forwardRef(
+var SidebarItem = React47.forwardRef(
   ({ className, icon, active, disabled, badge, onClick, href, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    const content = /* @__PURE__ */ jsxs30(Fragment7, { children: [
-      icon && /* @__PURE__ */ jsx45("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
-      !collapsed && /* @__PURE__ */ jsxs30(Fragment7, { children: [
-        /* @__PURE__ */ jsx45("span", { className: "flex-1 truncate", children }),
-        badge && /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: badge })
+    const content = /* @__PURE__ */ jsxs31(Fragment7, { children: [
+      icon && /* @__PURE__ */ jsx47("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
+      !collapsed && /* @__PURE__ */ jsxs31(Fragment7, { children: [
+        /* @__PURE__ */ jsx47("span", { className: "flex-1 truncate", children }),
+        badge && /* @__PURE__ */ jsx47("span", { className: "shrink-0", children: badge })
       ] })
     ] });
     const itemClasses = cn(
@@ -8148,9 +8470,9 @@ var SidebarItem = React45.forwardRef(
       className
     );
     if (href) {
-      return /* @__PURE__ */ jsx45("div", { ref, ...props, children: /* @__PURE__ */ jsx45("a", { href, className: itemClasses, children: content }) });
+      return /* @__PURE__ */ jsx47("div", { ref, ...props, children: /* @__PURE__ */ jsx47("a", { href, className: itemClasses, children: content }) });
     }
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx47(
       "div",
       {
         ref,
@@ -8165,20 +8487,20 @@ var SidebarItem = React45.forwardRef(
   }
 );
 SidebarItem.displayName = "SidebarItem";
-var SidebarSubMenu = React45.forwardRef(
+var SidebarSubMenu = React47.forwardRef(
   ({ className, icon, label, defaultOpen = false, children, ...props }, ref) => {
-    const [open, setOpen] = React45.useState(defaultOpen);
+    const [open, setOpen] = React47.useState(defaultOpen);
     const { collapsed } = useSidebar();
-    React45.useEffect(() => {
+    React47.useEffect(() => {
       if (collapsed) {
         setOpen(false);
       }
     }, [collapsed]);
     if (collapsed) {
-      return /* @__PURE__ */ jsx45(SidebarItem, { icon, className, children: label });
+      return /* @__PURE__ */ jsx47(SidebarItem, { icon, className, children: label });
     }
-    return /* @__PURE__ */ jsxs30("div", { ref, className, ...props, children: [
-      /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs31("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ jsxs31(
         "div",
         {
           className: cn(
@@ -8189,9 +8511,9 @@ var SidebarSubMenu = React45.forwardRef(
           role: "button",
           tabIndex: 0,
           children: [
-            icon && /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: icon }),
-            /* @__PURE__ */ jsx45("span", { className: "flex-1 truncate", children: label }),
-            /* @__PURE__ */ jsx45(
+            icon && /* @__PURE__ */ jsx47("span", { className: "shrink-0", children: icon }),
+            /* @__PURE__ */ jsx47("span", { className: "flex-1 truncate", children: label }),
+            /* @__PURE__ */ jsx47(
               "svg",
               {
                 className: cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-90"),
@@ -8202,21 +8524,21 @@ var SidebarSubMenu = React45.forwardRef(
                 strokeWidth: "2",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
-                children: /* @__PURE__ */ jsx45("path", { d: "m9 18 6-6-6-6" })
+                children: /* @__PURE__ */ jsx47("path", { d: "m9 18 6-6-6-6" })
               }
             )
           ]
         }
       ),
-      open && /* @__PURE__ */ jsx45("div", { className: "ml-4 pl-3 border-l border-border space-y-1 mt-1", children })
+      open && /* @__PURE__ */ jsx47("div", { className: "ml-4 pl-3 border-l border-border space-y-1 mt-1", children })
     ] });
   }
 );
 SidebarSubMenu.displayName = "SidebarSubMenu";
-var SidebarToggle = React45.forwardRef(
+var SidebarToggle = React47.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { collapsed, setCollapsed } = useSidebar();
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx47(
       "button",
       {
         ref,
@@ -8230,7 +8552,7 @@ var SidebarToggle = React45.forwardRef(
         ),
         "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
         ...props,
-        children: children || /* @__PURE__ */ jsxs30(
+        children: children || /* @__PURE__ */ jsxs31(
           "svg",
           {
             className: cn("h-5 w-5 transition-transform", collapsed && "rotate-180"),
@@ -8242,9 +8564,9 @@ var SidebarToggle = React45.forwardRef(
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ jsx45("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-              /* @__PURE__ */ jsx45("path", { d: "M9 3v18" }),
-              /* @__PURE__ */ jsx45("path", { d: "m14 9 3 3-3 3" })
+              /* @__PURE__ */ jsx47("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+              /* @__PURE__ */ jsx47("path", { d: "M9 3v18" }),
+              /* @__PURE__ */ jsx47("path", { d: "m14 9 3 3-3 3" })
             ]
           }
         )
@@ -8255,17 +8577,17 @@ var SidebarToggle = React45.forwardRef(
 SidebarToggle.displayName = "SidebarToggle";
 
 // src/components/sidebar-rail.tsx
-import * as React46 from "react";
-import { Fragment as Fragment8, jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
-var SidebarRailContext = React46.createContext(void 0);
+import * as React48 from "react";
+import { Fragment as Fragment8, jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+var SidebarRailContext = React48.createContext(void 0);
 var useSidebarRail = () => {
-  const context = React46.useContext(SidebarRailContext);
+  const context = React48.useContext(SidebarRailContext);
   if (!context) {
     throw new Error("useSidebarRail must be used within a SidebarRail");
   }
   return context;
 };
-var SidebarRail = React46.forwardRef(
+var SidebarRail = React48.forwardRef(
   ({
     className,
     defaultActiveRail = null,
@@ -8283,14 +8605,14 @@ var SidebarRail = React46.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [uncontrolledActiveRail, setUncontrolledActiveRail] = React46.useState(defaultActiveRail);
-    const [expanded, setExpanded] = React46.useState(!!defaultActiveRail);
-    const [uncontrolledRailExpanded, setUncontrolledRailExpanded] = React46.useState(defaultRailExpanded);
+    const [uncontrolledActiveRail, setUncontrolledActiveRail] = React48.useState(defaultActiveRail);
+    const [expanded, setExpanded] = React48.useState(!!defaultActiveRail);
+    const [uncontrolledRailExpanded, setUncontrolledRailExpanded] = React48.useState(defaultRailExpanded);
     const isControlled = controlledActiveRail !== void 0;
     const activeRail = isControlled ? controlledActiveRail : uncontrolledActiveRail;
     const isRailControlled = controlledRailExpanded !== void 0;
     const railExpanded = isRailControlled ? controlledRailExpanded : uncontrolledRailExpanded;
-    const setActiveRail = React46.useCallback(
+    const setActiveRail = React48.useCallback(
       (rail) => {
         if (!isControlled) {
           setUncontrolledActiveRail(rail);
@@ -8300,7 +8622,7 @@ var SidebarRail = React46.forwardRef(
       },
       [isControlled, onActiveRailChange]
     );
-    const setRailExpanded = React46.useCallback(
+    const setRailExpanded = React48.useCallback(
       (value) => {
         if (!isRailControlled) {
           setUncontrolledRailExpanded(value);
@@ -8309,7 +8631,7 @@ var SidebarRail = React46.forwardRef(
       },
       [isRailControlled, onRailExpandedChange]
     );
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       SidebarRailContext.Provider,
       {
         value: {
@@ -8323,7 +8645,7 @@ var SidebarRail = React46.forwardRef(
           overlayRail: overlayRail && expandableRail,
           expandableRail
         },
-        children: /* @__PURE__ */ jsx46(
+        children: /* @__PURE__ */ jsx48(
           "div",
           {
             ref,
@@ -8346,11 +8668,11 @@ var SidebarRail = React46.forwardRef(
   }
 );
 SidebarRail.displayName = "SidebarRail";
-var IconRail = React46.forwardRef(
+var IconRail = React48.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { railExpanded, overlayRail, expandableRail } = useSidebarRail();
     const isExpanded = expandableRail && railExpanded;
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         ref,
@@ -8359,13 +8681,16 @@ var IconRail = React46.forwardRef(
           isExpanded && !overlayRail ? "w-[var(--rail-expanded-width)]" : "w-[var(--rail-width)]"
         ),
         ...props,
-        children: /* @__PURE__ */ jsx46(
+        children: /* @__PURE__ */ jsx48(
           "div",
           {
             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
@@ -8376,9 +8701,9 @@ var IconRail = React46.forwardRef(
   }
 );
 IconRail.displayName = "IconRail";
-var IconRailHeader = React46.forwardRef(
+var IconRailHeader = React48.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         ref,
@@ -8393,9 +8718,9 @@ var IconRailHeader = React46.forwardRef(
   }
 );
 IconRailHeader.displayName = "IconRailHeader";
-var IconRailContent = React46.forwardRef(
+var IconRailContent = React48.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         ref,
@@ -8407,9 +8732,9 @@ var IconRailContent = React46.forwardRef(
   }
 );
 IconRailContent.displayName = "IconRailContent";
-var IconRailFooter = React46.forwardRef(
+var IconRailFooter = React48.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         ref,
@@ -8424,7 +8749,7 @@ var IconRailFooter = React46.forwardRef(
   }
 );
 IconRailFooter.displayName = "IconRailFooter";
-var IconRailItem = React46.forwardRef(
+var IconRailItem = React48.forwardRef(
   ({ className, railId, icon, label, asButton = false, toggleRail = false, onClick, ...props }, ref) => {
     const {
       activeRail,
@@ -8450,7 +8775,7 @@ var IconRailItem = React46.forwardRef(
         setActiveRail(railId);
       }
     };
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       "button",
       {
         ref,
@@ -8469,14 +8794,14 @@ var IconRailItem = React46.forwardRef(
         ...props,
         children: [
           icon,
-          isRailExpanded && label && /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium truncate", children: label })
+          isRailExpanded && label && /* @__PURE__ */ jsx48("span", { className: "text-sm font-medium truncate", children: label })
         ]
       }
     );
   }
 );
 IconRailItem.displayName = "IconRailItem";
-var RailPanel = React46.forwardRef(
+var RailPanel = React48.forwardRef(
   ({ className, railId, title, children, ...props }, ref) => {
     const { activeRail, setActiveRail, hoverExpand } = useSidebarRail();
     const isVisible = activeRail === railId;
@@ -8486,7 +8811,7 @@ var RailPanel = React46.forwardRef(
       }
     };
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs32(
       "div",
       {
         ref,
@@ -8499,16 +8824,16 @@ var RailPanel = React46.forwardRef(
         onMouseLeave: handleMouseLeave,
         ...props,
         children: [
-          title && /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
-            /* @__PURE__ */ jsx46("span", { className: "font-semibold text-sm", children: title }),
-            /* @__PURE__ */ jsx46(
+          title && /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsx48("span", { className: "font-semibold text-sm", children: title }),
+            /* @__PURE__ */ jsx48(
               "button",
               {
                 type: "button",
                 onClick: () => setActiveRail(null),
                 className: "p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground cursor-pointer",
                 "aria-label": "Close panel",
-                children: /* @__PURE__ */ jsxs31(
+                children: /* @__PURE__ */ jsxs32(
                   "svg",
                   {
                     className: "h-4 w-4",
@@ -8520,36 +8845,36 @@ var RailPanel = React46.forwardRef(
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     children: [
-                      /* @__PURE__ */ jsx46("path", { d: "M18 6 6 18" }),
-                      /* @__PURE__ */ jsx46("path", { d: "m6 6 12 12" })
+                      /* @__PURE__ */ jsx48("path", { d: "M18 6 6 18" }),
+                      /* @__PURE__ */ jsx48("path", { d: "m6 6 12 12" })
                     ]
                   }
                 )
               }
             )
           ] }),
-          /* @__PURE__ */ jsx46("div", { className: "flex-1 overflow-y-auto", children })
+          /* @__PURE__ */ jsx48("div", { className: "flex-1 overflow-y-auto", children })
         ]
       }
     );
   }
 );
 RailPanel.displayName = "RailPanel";
-var RailPanelGroup = React46.forwardRef(
+var RailPanelGroup = React48.forwardRef(
   ({ className, label, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs31("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
-      label && /* @__PURE__ */ jsx46("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
-      /* @__PURE__ */ jsx46("div", { className: "space-y-1", children })
+    return /* @__PURE__ */ jsxs32("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+      label && /* @__PURE__ */ jsx48("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
+      /* @__PURE__ */ jsx48("div", { className: "space-y-1", children })
     ] });
   }
 );
 RailPanelGroup.displayName = "RailPanelGroup";
-var RailPanelItem = React46.forwardRef(
+var RailPanelItem = React48.forwardRef(
   ({ className, icon, active, disabled, badge, href, children, onClick, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs31(Fragment8, { children: [
-      icon && /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: icon }),
-      /* @__PURE__ */ jsx46("span", { className: "flex-1 truncate", children }),
-      badge && /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: badge })
+    const content = /* @__PURE__ */ jsxs32(Fragment8, { children: [
+      icon && /* @__PURE__ */ jsx48("span", { className: "shrink-0", children: icon }),
+      /* @__PURE__ */ jsx48("span", { className: "flex-1 truncate", children }),
+      badge && /* @__PURE__ */ jsx48("span", { className: "shrink-0", children: badge })
     ] });
     const itemClasses = cn(
       "flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors cursor-pointer",
@@ -8558,9 +8883,9 @@ var RailPanelItem = React46.forwardRef(
       className
     );
     if (href) {
-      return /* @__PURE__ */ jsx46("div", { ref, ...props, children: /* @__PURE__ */ jsx46("a", { href, className: itemClasses, children: content }) });
+      return /* @__PURE__ */ jsx48("div", { ref, ...props, children: /* @__PURE__ */ jsx48("a", { href, className: itemClasses, children: content }) });
     }
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         ref,
@@ -8577,34 +8902,34 @@ var RailPanelItem = React46.forwardRef(
 RailPanelItem.displayName = "RailPanelItem";
 
 // src/playground.tsx
-import * as React47 from "react";
-import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
-var Section = ({ title, children }) => /* @__PURE__ */ jsxs32("div", { className: "mb-8", children: [
-  /* @__PURE__ */ jsx47("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
-  /* @__PURE__ */ jsx47("div", { className: "p-4 border border-border rounded-lg bg-background", children })
+import * as React49 from "react";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs33("div", { className: "mb-8", children: [
+  /* @__PURE__ */ jsx49("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
+  /* @__PURE__ */ jsx49("div", { className: "p-4 border border-border rounded-lg bg-background", children })
 ] });
 var ThemeToggle = () => {
   const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx47(Label, { children: "Theme:" }),
-    /* @__PURE__ */ jsxs32(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
-      /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select theme" }) }),
-      /* @__PURE__ */ jsxs32(SelectContent, { children: [
-        /* @__PURE__ */ jsx47(SelectItem, { value: "light", children: "Light" }),
-        /* @__PURE__ */ jsx47(SelectItem, { value: "dark", children: "Dark" }),
-        /* @__PURE__ */ jsx47(SelectItem, { value: "system", children: "System" })
+  return /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx49(Label, { children: "Theme:" }),
+    /* @__PURE__ */ jsxs33(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
+      /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select theme" }) }),
+      /* @__PURE__ */ jsxs33(SelectContent, { children: [
+        /* @__PURE__ */ jsx49(SelectItem, { value: "light", children: "Light" }),
+        /* @__PURE__ */ jsx49(SelectItem, { value: "dark", children: "Dark" }),
+        /* @__PURE__ */ jsx49(SelectItem, { value: "system", children: "System" })
       ] })
     ] })
   ] });
 };
 var PlaygroundContent = () => {
-  const [dialogOpen, setDialogOpen] = React47.useState(false);
-  const [checkboxChecked, setCheckboxChecked] = React47.useState(false);
-  const [switchChecked, setSwitchChecked] = React47.useState(false);
-  const [inputValue, setInputValue] = React47.useState("");
-  const [textareaValue, setTextareaValue] = React47.useState("");
-  const [selectValue, setSelectValue] = React47.useState("");
-  const [comboboxValue, setComboboxValue] = React47.useState(null);
+  const [dialogOpen, setDialogOpen] = React49.useState(false);
+  const [checkboxChecked, setCheckboxChecked] = React49.useState(false);
+  const [switchChecked, setSwitchChecked] = React49.useState(false);
+  const [inputValue, setInputValue] = React49.useState("");
+  const [textareaValue, setTextareaValue] = React49.useState("");
+  const [selectValue, setSelectValue] = React49.useState("");
+  const [comboboxValue, setComboboxValue] = React49.useState(null);
   const comboboxOptions = [
     { value: "react", label: "React" },
     { value: "vue", label: "Vue" },
@@ -8612,35 +8937,35 @@ var PlaygroundContent = () => {
     { value: "svelte", label: "Svelte" },
     { value: "solid", label: "SolidJS" }
   ];
-  return /* @__PURE__ */ jsx47("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs32("div", { className: "max-w-4xl mx-auto", children: [
-    /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between mb-8", children: [
-      /* @__PURE__ */ jsx47("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
-      /* @__PURE__ */ jsx47(ThemeToggle, {})
+  return /* @__PURE__ */ jsx49("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs33("div", { className: "max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between mb-8", children: [
+      /* @__PURE__ */ jsx49("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
+      /* @__PURE__ */ jsx49(ThemeToggle, {})
     ] }),
-    /* @__PURE__ */ jsxs32(Section, { title: "Button", children: [
-      /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap gap-4", children: [
-        /* @__PURE__ */ jsx47(Button, { variant: "default", children: "Default" }),
-        /* @__PURE__ */ jsx47(Button, { variant: "destructive", children: "Destructive" }),
-        /* @__PURE__ */ jsx47(Button, { variant: "outline", children: "Outline" }),
-        /* @__PURE__ */ jsx47(Button, { variant: "secondary", children: "Secondary" }),
-        /* @__PURE__ */ jsx47(Button, { variant: "ghost", children: "Ghost" }),
-        /* @__PURE__ */ jsx47(Button, { variant: "link", children: "Link" })
+    /* @__PURE__ */ jsxs33(Section, { title: "Button", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ jsx49(Button, { variant: "default", children: "Default" }),
+        /* @__PURE__ */ jsx49(Button, { variant: "destructive", children: "Destructive" }),
+        /* @__PURE__ */ jsx49(Button, { variant: "outline", children: "Outline" }),
+        /* @__PURE__ */ jsx49(Button, { variant: "secondary", children: "Secondary" }),
+        /* @__PURE__ */ jsx49(Button, { variant: "ghost", children: "Ghost" }),
+        /* @__PURE__ */ jsx49(Button, { variant: "link", children: "Link" })
       ] }),
-      /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap gap-4 mt-4", children: [
-        /* @__PURE__ */ jsx47(Button, { size: "sm", children: "Small" }),
-        /* @__PURE__ */ jsx47(Button, { size: "default", children: "Default" }),
-        /* @__PURE__ */ jsx47(Button, { size: "lg", children: "Large" }),
-        /* @__PURE__ */ jsx47(Button, { size: "icon", children: "\u{1F514}" })
+      /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+        /* @__PURE__ */ jsx49(Button, { size: "sm", children: "Small" }),
+        /* @__PURE__ */ jsx49(Button, { size: "default", children: "Default" }),
+        /* @__PURE__ */ jsx49(Button, { size: "lg", children: "Large" }),
+        /* @__PURE__ */ jsx49(Button, { size: "icon", children: "\u{1F514}" })
       ] }),
-      /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap gap-4 mt-4", children: [
-        /* @__PURE__ */ jsx47(Button, { disabled: true, children: "Disabled" }),
-        /* @__PURE__ */ jsx47(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
+      /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+        /* @__PURE__ */ jsx49(Button, { disabled: true, children: "Disabled" }),
+        /* @__PURE__ */ jsx49(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx47(Section, { title: "Input", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx47(Label, { htmlFor: "input-default", children: "Default Input" }),
-        /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx49(Section, { title: "Input", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx49(Label, { htmlFor: "input-default", children: "Default Input" }),
+        /* @__PURE__ */ jsx49(
           Input,
           {
             id: "input-default",
@@ -8650,19 +8975,19 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx47(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
-        /* @__PURE__ */ jsx47(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx49(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
+        /* @__PURE__ */ jsx49(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
       ] }),
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx47(Label, { htmlFor: "input-type", children: "Email Input" }),
-        /* @__PURE__ */ jsx47(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx49(Label, { htmlFor: "input-type", children: "Email Input" }),
+        /* @__PURE__ */ jsx49(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx47(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx47(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
-        /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx49(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx49(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
+        /* @__PURE__ */ jsx49(
           Textarea,
           {
             id: "textarea-default",
@@ -8672,52 +8997,52 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx47(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
-        /* @__PURE__ */ jsx47(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx49(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
+        /* @__PURE__ */ jsx49(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx47(Section, { title: "Select", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx47(Label, { children: "Default Select" }),
-        /* @__PURE__ */ jsxs32(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
-          /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select an option..." }) }),
-          /* @__PURE__ */ jsxs32(SelectContent, { children: [
-            /* @__PURE__ */ jsx47(SelectItem, { value: "option1", children: "Option 1" }),
-            /* @__PURE__ */ jsx47(SelectItem, { value: "option2", children: "Option 2" }),
-            /* @__PURE__ */ jsx47(SelectItem, { value: "option3", children: "Option 3" })
+    /* @__PURE__ */ jsx49(Section, { title: "Select", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx49(Label, { children: "Default Select" }),
+        /* @__PURE__ */ jsxs33(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
+          /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select an option..." }) }),
+          /* @__PURE__ */ jsxs33(SelectContent, { children: [
+            /* @__PURE__ */ jsx49(SelectItem, { value: "option1", children: "Option 1" }),
+            /* @__PURE__ */ jsx49(SelectItem, { value: "option2", children: "Option 2" }),
+            /* @__PURE__ */ jsx49(SelectItem, { value: "option3", children: "Option 3" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx47(Label, { children: "Grouped Select" }),
-        /* @__PURE__ */ jsxs32(SelectNamespace, { children: [
-          /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select a food..." }) }),
-          /* @__PURE__ */ jsxs32(SelectContent, { children: [
-            /* @__PURE__ */ jsxs32(SelectGroup, { children: [
-              /* @__PURE__ */ jsx47(SelectLabel, { children: "Fruits" }),
-              /* @__PURE__ */ jsx47(SelectItem, { value: "apple", children: "Apple" }),
-              /* @__PURE__ */ jsx47(SelectItem, { value: "banana", children: "Banana" })
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx49(Label, { children: "Grouped Select" }),
+        /* @__PURE__ */ jsxs33(SelectNamespace, { children: [
+          /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select a food..." }) }),
+          /* @__PURE__ */ jsxs33(SelectContent, { children: [
+            /* @__PURE__ */ jsxs33(SelectGroup, { children: [
+              /* @__PURE__ */ jsx49(SelectLabel, { children: "Fruits" }),
+              /* @__PURE__ */ jsx49(SelectItem, { value: "apple", children: "Apple" }),
+              /* @__PURE__ */ jsx49(SelectItem, { value: "banana", children: "Banana" })
             ] }),
-            /* @__PURE__ */ jsxs32(SelectGroup, { children: [
-              /* @__PURE__ */ jsx47(SelectLabel, { children: "Vegetables" }),
-              /* @__PURE__ */ jsx47(SelectItem, { value: "carrot", children: "Carrot" }),
-              /* @__PURE__ */ jsx47(SelectItem, { value: "potato", children: "Potato" })
+            /* @__PURE__ */ jsxs33(SelectGroup, { children: [
+              /* @__PURE__ */ jsx49(SelectLabel, { children: "Vegetables" }),
+              /* @__PURE__ */ jsx49(SelectItem, { value: "carrot", children: "Carrot" }),
+              /* @__PURE__ */ jsx49(SelectItem, { value: "potato", children: "Potato" })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs32("div", { children: [
-        /* @__PURE__ */ jsx47(Label, { children: "Disabled Select" }),
-        /* @__PURE__ */ jsxs32(SelectNamespace, { disabled: true, children: [
-          /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Disabled..." }) }),
-          /* @__PURE__ */ jsx47(SelectContent, { children: /* @__PURE__ */ jsx47(SelectItem, { value: "none", children: "None" }) })
+      /* @__PURE__ */ jsxs33("div", { children: [
+        /* @__PURE__ */ jsx49(Label, { children: "Disabled Select" }),
+        /* @__PURE__ */ jsxs33(SelectNamespace, { disabled: true, children: [
+          /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Disabled..." }) }),
+          /* @__PURE__ */ jsx49(SelectContent, { children: /* @__PURE__ */ jsx49(SelectItem, { value: "none", children: "None" }) })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx47(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx47("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs32("div", { children: [
-      /* @__PURE__ */ jsx47(Label, { children: "Framework" }),
-      /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx49(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx49("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsx49(Label, { children: "Framework" }),
+      /* @__PURE__ */ jsx49(
         Combobox,
         {
           options: comboboxOptions,
@@ -8729,9 +9054,9 @@ var PlaygroundContent = () => {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ jsx47(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx47(
+    /* @__PURE__ */ jsx49(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx49(
           Checkbox,
           {
             id: "checkbox",
@@ -8739,15 +9064,15 @@ var PlaygroundContent = () => {
             onChange: (e) => setCheckboxChecked(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx47(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
+        /* @__PURE__ */ jsx49(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
       ] }),
-      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx47(Checkbox, { id: "checkbox-disabled", disabled: true }),
-        /* @__PURE__ */ jsx47(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx49(Checkbox, { id: "checkbox-disabled", disabled: true }),
+        /* @__PURE__ */ jsx49(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
       ] }),
-      /* @__PURE__ */ jsx47(Separator, {}),
-      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx47(
+      /* @__PURE__ */ jsx49(Separator, {}),
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx49(
           Switch,
           {
             id: "switch",
@@ -8755,160 +9080,161 @@ var PlaygroundContent = () => {
             onChange: (e) => setSwitchChecked(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx47(Label, { htmlFor: "switch", children: "Enable notifications" })
+        /* @__PURE__ */ jsx49(Label, { htmlFor: "switch", children: "Enable notifications" })
       ] }),
-      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx47(Switch, { id: "switch-disabled", disabled: true }),
-        /* @__PURE__ */ jsx47(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx49(Switch, { id: "switch-disabled", disabled: true }),
+        /* @__PURE__ */ jsx49(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
       ] })
     ] }) }),
-    /* @__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__ */ jsx49(Section, { title: "Badge", children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap gap-4", children: [
+      /* @__PURE__ */ jsx49(Badge, { children: "Default" }),
+      /* @__PURE__ */ jsx49(Badge, { color: "success", children: "Success" }),
+      /* @__PURE__ */ jsx49(Badge, { color: "warning", children: "Warning" }),
+      /* @__PURE__ */ jsx49(Badge, { color: "error", variant: "outlined", children: "Error" }),
+      /* @__PURE__ */ jsx49(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: [
-        /* @__PURE__ */ jsxs32(CardHeader, { children: [
-          /* @__PURE__ */ jsx47(CardTitle, { children: "Card Title" }),
-          /* @__PURE__ */ jsx47(CardDescription, { children: "Card description goes here" })
+    /* @__PURE__ */ jsx49(Section, { title: "Card", children: /* @__PURE__ */ jsxs33("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs33(Card, { children: [
+        /* @__PURE__ */ jsxs33(CardHeader, { children: [
+          /* @__PURE__ */ jsx49(CardTitle, { children: "Card Title" }),
+          /* @__PURE__ */ jsx49(CardDescription, { children: "Card description goes here" })
         ] }),
-        /* @__PURE__ */ jsx47(CardContent, { children: /* @__PURE__ */ jsx47("p", { className: "text-foreground", children: "This is the card content area." }) }),
-        /* @__PURE__ */ jsxs32(CardFooter, { children: [
-          /* @__PURE__ */ jsx47(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
-          /* @__PURE__ */ jsx47(Button, { children: "Submit" })
+        /* @__PURE__ */ jsx49(CardContent, { children: /* @__PURE__ */ jsx49("p", { className: "text-foreground", children: "This is the card content area." }) }),
+        /* @__PURE__ */ jsxs33(CardFooter, { children: [
+          /* @__PURE__ */ jsx49(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
+          /* @__PURE__ */ jsx49(Button, { children: "Submit" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs32(Card, { children: [
-        /* @__PURE__ */ jsxs32(CardHeader, { children: [
-          /* @__PURE__ */ jsx47(CardTitle, { children: "Another Card" }),
-          /* @__PURE__ */ jsx47(CardDescription, { children: "With different content" })
+      /* @__PURE__ */ jsxs33(Card, { children: [
+        /* @__PURE__ */ jsxs33(CardHeader, { children: [
+          /* @__PURE__ */ jsx49(CardTitle, { children: "Another Card" }),
+          /* @__PURE__ */ jsx49(CardDescription, { children: "With different content" })
         ] }),
-        /* @__PURE__ */ jsx47(CardContent, { children: /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx47(Label, { htmlFor: "card-input", children: "Name" }),
-          /* @__PURE__ */ jsx47(Input, { id: "card-input", placeholder: "Enter name..." })
+        /* @__PURE__ */ jsx49(CardContent, { children: /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx49(Label, { htmlFor: "card-input", children: "Name" }),
+          /* @__PURE__ */ jsx49(Input, { id: "card-input", placeholder: "Enter name..." })
         ] }) }),
-        /* @__PURE__ */ jsx47(CardFooter, { children: /* @__PURE__ */ jsx47(Button, { className: "w-full", children: "Save" }) })
+        /* @__PURE__ */ jsx49(CardFooter, { children: /* @__PURE__ */ jsx49(Button, { className: "w-full", children: "Save" }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs32(Section, { title: "Dialog", children: [
-      /* @__PURE__ */ jsx47(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
-      /* @__PURE__ */ jsx47(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs32(DialogContent, { children: [
-        /* @__PURE__ */ jsxs32(DialogHeader, { children: [
-          /* @__PURE__ */ jsx47(DialogTitle, { children: "Create New Zone" }),
-          /* @__PURE__ */ jsx47(DialogDescription, { children: "Fill in the details below to create a new zone." })
+    /* @__PURE__ */ jsxs33(Section, { title: "Dialog", children: [
+      /* @__PURE__ */ jsx49(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
+      /* @__PURE__ */ jsx49(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs33(DialogContent, { children: [
+        /* @__PURE__ */ jsxs33(DialogHeader, { children: [
+          /* @__PURE__ */ jsx49(DialogTitle, { children: "Create New Zone" }),
+          /* @__PURE__ */ jsx49(DialogDescription, { children: "Fill in the details below to create a new zone." })
         ] }),
-        /* @__PURE__ */ jsxs32("div", { className: "space-y-4 py-4", children: [
-          /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs32("div", { children: [
-              /* @__PURE__ */ jsx47(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
-              /* @__PURE__ */ jsx47(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
+        /* @__PURE__ */ jsxs33("div", { className: "space-y-4 py-4", children: [
+          /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs33("div", { children: [
+              /* @__PURE__ */ jsx49(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
+              /* @__PURE__ */ jsx49(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
             ] }),
-            /* @__PURE__ */ jsxs32("div", { children: [
-              /* @__PURE__ */ jsx47(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
-              /* @__PURE__ */ jsx47(Input, { id: "zone-code", placeholder: "eg :hyd022" })
+            /* @__PURE__ */ jsxs33("div", { children: [
+              /* @__PURE__ */ jsx49(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
+              /* @__PURE__ */ jsx49(Input, { id: "zone-code", placeholder: "eg :hyd022" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs32("div", { children: [
-              /* @__PURE__ */ jsx47(Label, { children: "State *" }),
-              /* @__PURE__ */ jsxs32(SelectNamespace, { children: [
-                /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select state" }) }),
-                /* @__PURE__ */ jsxs32(SelectContent, { children: [
-                  /* @__PURE__ */ jsx47(SelectItem, { value: "telangana", children: "TELANGANA" }),
-                  /* @__PURE__ */ jsx47(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
+          /* @__PURE__ */ jsxs33("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs33("div", { children: [
+              /* @__PURE__ */ jsx49(Label, { children: "State *" }),
+              /* @__PURE__ */ jsxs33(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select state" }) }),
+                /* @__PURE__ */ jsxs33(SelectContent, { children: [
+                  /* @__PURE__ */ jsx49(SelectItem, { value: "telangana", children: "TELANGANA" }),
+                  /* @__PURE__ */ jsx49(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs32("div", { children: [
-              /* @__PURE__ */ jsx47(Label, { children: "District *" }),
-              /* @__PURE__ */ jsxs32(SelectNamespace, { children: [
-                /* @__PURE__ */ jsx47(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: "Select District" }) }),
-                /* @__PURE__ */ jsxs32(SelectContent, { children: [
-                  /* @__PURE__ */ jsx47(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
-                  /* @__PURE__ */ jsx47(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
+            /* @__PURE__ */ jsxs33("div", { children: [
+              /* @__PURE__ */ jsx49(Label, { children: "District *" }),
+              /* @__PURE__ */ jsxs33(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx49(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx49(SelectValue, { placeholder: "Select District" }) }),
+                /* @__PURE__ */ jsxs33(SelectContent, { children: [
+                  /* @__PURE__ */ jsx49(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
+                  /* @__PURE__ */ jsx49(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
                 ] })
               ] })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs32(DialogFooter, { children: [
-          /* @__PURE__ */ jsx47(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
-          /* @__PURE__ */ jsx47(Button, { onClick: () => setDialogOpen(false), children: "Create" })
+        /* @__PURE__ */ jsxs33(DialogFooter, { children: [
+          /* @__PURE__ */ jsx49(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
+          /* @__PURE__ */ jsx49(Button, { onClick: () => setDialogOpen(false), children: "Create" })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx47(Section, { title: "Table", children: /* @__PURE__ */ jsxs32(TableNamespace, { children: [
-      /* @__PURE__ */ jsx47(TableCaption, { children: "A list of recent invoices" }),
-      /* @__PURE__ */ jsx47(TableHeader, { children: /* @__PURE__ */ jsxs32(TableRow, { children: [
-        /* @__PURE__ */ jsx47(TableHead, { children: "Invoice" }),
-        /* @__PURE__ */ jsx47(TableHead, { children: "Status" }),
-        /* @__PURE__ */ jsx47(TableHead, { children: "Method" }),
-        /* @__PURE__ */ jsx47(TableHead, { className: "text-right", children: "Amount" })
+    /* @__PURE__ */ jsx49(Section, { title: "Table", children: /* @__PURE__ */ jsxs33(TableNamespace, { children: [
+      /* @__PURE__ */ jsx49(TableCaption, { children: "A list of recent invoices" }),
+      /* @__PURE__ */ jsx49(TableHeader, { children: /* @__PURE__ */ jsxs33(TableRow, { children: [
+        /* @__PURE__ */ jsx49(TableHead, { children: "Invoice" }),
+        /* @__PURE__ */ jsx49(TableHead, { children: "Status" }),
+        /* @__PURE__ */ jsx49(TableHead, { children: "Method" }),
+        /* @__PURE__ */ jsx49(TableHead, { className: "text-right", children: "Amount" })
       ] }) }),
-      /* @__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: "Credit Card" }),
-          /* @__PURE__ */ jsx47(TableCell, { className: "text-right", children: "$250.00" })
+      /* @__PURE__ */ jsxs33(TableBody, { children: [
+        /* @__PURE__ */ jsxs33(TableRow, { children: [
+          /* @__PURE__ */ jsx49(TableCell, { children: "INV001" }),
+          /* @__PURE__ */ jsx49(TableCell, { children: /* @__PURE__ */ jsx49(Badge, { color: "success", children: "Paid" }) }),
+          /* @__PURE__ */ jsx49(TableCell, { children: "Credit Card" }),
+          /* @__PURE__ */ jsx49(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: "PayPal" }),
-          /* @__PURE__ */ jsx47(TableCell, { className: "text-right", children: "$150.00" })
+        /* @__PURE__ */ jsxs33(TableRow, { children: [
+          /* @__PURE__ */ jsx49(TableCell, { children: "INV002" }),
+          /* @__PURE__ */ jsx49(TableCell, { children: /* @__PURE__ */ jsx49(Badge, { color: "warning", variant: "outlined", children: "Pending" }) }),
+          /* @__PURE__ */ jsx49(TableCell, { children: "PayPal" }),
+          /* @__PURE__ */ jsx49(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: "Bank Transfer" }),
-          /* @__PURE__ */ jsx47(TableCell, { className: "text-right", children: "$350.00" })
+        /* @__PURE__ */ jsxs33(TableRow, { children: [
+          /* @__PURE__ */ jsx49(TableCell, { children: "INV003" }),
+          /* @__PURE__ */ jsx49(TableCell, { children: /* @__PURE__ */ jsx49(Badge, { color: "error", variant: "outlined", children: "Failed" }) }),
+          /* @__PURE__ */ jsx49(TableCell, { children: "Bank Transfer" }),
+          /* @__PURE__ */ jsx49(TableCell, { className: "text-right", children: "$350.00" })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx47(Section, { title: "Pagination", children: /* @__PURE__ */ jsx47(PaginationNamespace, { children: /* @__PURE__ */ jsxs32(PaginationContent, { children: [
-      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
-      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationLink, { isActive: true, children: "1" }) }),
-      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationLink, { children: "2" }) }),
-      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationLink, { children: "3" }) }),
-      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationEllipsis, {}) }),
-      /* @__PURE__ */ jsx47(PaginationItem, { children: /* @__PURE__ */ jsx47(PaginationNext, { onClick: () => console.log("Next") }) })
+    /* @__PURE__ */ jsx49(Section, { title: "Pagination", children: /* @__PURE__ */ jsx49(PaginationNamespace, { children: /* @__PURE__ */ jsxs33(PaginationContent, { children: [
+      /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
+      /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationLink, { isActive: true, children: "1" }) }),
+      /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationLink, { children: "2" }) }),
+      /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationLink, { children: "3" }) }),
+      /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationEllipsis, {}) }),
+      /* @__PURE__ */ jsx49(PaginationItem, { children: /* @__PURE__ */ jsx49(PaginationNext, { onClick: () => console.log("Next") }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx47(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-8", children: [
-      /* @__PURE__ */ jsxs32("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx47(Spinner, { size: "sm" }),
-        /* @__PURE__ */ jsx47("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
+    /* @__PURE__ */ jsx49(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx49(Spinner, { size: "sm" }),
+        /* @__PURE__ */ jsx49("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
       ] }),
-      /* @__PURE__ */ jsxs32("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx47(Spinner, { size: "default" }),
-        /* @__PURE__ */ jsx47("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
+      /* @__PURE__ */ jsxs33("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx49(Spinner, { size: "default" }),
+        /* @__PURE__ */ jsx49("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
       ] }),
-      /* @__PURE__ */ jsxs32("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx47(Spinner, { size: "lg" }),
-        /* @__PURE__ */ jsx47("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
+      /* @__PURE__ */ jsxs33("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx49(Spinner, { size: "lg" }),
+        /* @__PURE__ */ jsx49("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx47(Section, { title: "Separator", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx47("p", { className: "text-foreground", children: "Content above separator" }),
-      /* @__PURE__ */ jsx47(Separator, {}),
-      /* @__PURE__ */ jsx47("p", { className: "text-foreground", children: "Content below separator" }),
-      /* @__PURE__ */ jsxs32("div", { className: "flex items-center h-10", children: [
-        /* @__PURE__ */ jsx47("span", { className: "text-foreground", children: "Left" }),
-        /* @__PURE__ */ jsx47(Separator, { orientation: "vertical", className: "mx-4" }),
-        /* @__PURE__ */ jsx47("span", { className: "text-foreground", children: "Right" })
+    /* @__PURE__ */ jsx49(Section, { title: "Separator", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx49("p", { className: "text-foreground", children: "Content above separator" }),
+      /* @__PURE__ */ jsx49(Separator, {}),
+      /* @__PURE__ */ jsx49("p", { className: "text-foreground", children: "Content below separator" }),
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center h-10", children: [
+        /* @__PURE__ */ jsx49("span", { className: "text-foreground", children: "Left" }),
+        /* @__PURE__ */ jsx49(Separator, { orientation: "vertical", className: "mx-4" }),
+        /* @__PURE__ */ jsx49("span", { className: "text-foreground", children: "Right" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx47(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs32("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx47("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
-      /* @__PURE__ */ jsx47("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
-      /* @__PURE__ */ jsx47("p", { className: "text-accent", children: "text-accent - Accent color" }),
-      /* @__PURE__ */ jsx47("p", { className: "text-destructive", children: "text-destructive - Destructive color" })
+    /* @__PURE__ */ jsx49(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs33("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx49("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
+      /* @__PURE__ */ jsx49("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
+      /* @__PURE__ */ jsx49("p", { className: "text-accent", children: "text-accent - Accent color" }),
+      /* @__PURE__ */ jsx49("p", { className: "text-destructive", children: "text-destructive - Destructive color" })
     ] }) })
   ] }) });
 };
-var Playground = () => /* @__PURE__ */ jsx47(ThemeProvider, { defaultTheme: "light", children: /* @__PURE__ */ jsx47(PlaygroundContent, {}) });
+var Playground = () => /* @__PURE__ */ jsx49(ThemeProvider, { defaultTheme: "light", children: /* @__PURE__ */ jsx49(PlaygroundContent, {}) });
 export {
   Accordion,
   AccordionContent,
@@ -8931,6 +9257,7 @@ export {
   AreaChart,
   Avatar,
   AvatarGroup,
+  Backdrop,
   Badge,
   BarChart,
   BottomNavigation,
@@ -9091,6 +9418,9 @@ export {
   SkeletonTableRow,
   SkeletonText,
   Slider,
+  Snackbar,
+  SnackbarContent,
+  SnackbarProvider,
   Spinner,
   Stack,
   Switch,
@@ -9139,6 +9469,7 @@ export {
   useFormControl,
   useSidebar,
   useSidebarRail,
+  useSnackbar,
   useTheme
 };
 //# sourceMappingURL=index.js.map