@onesaz/ui 0.4.11 → 0.4.12

package/dist/index.js

@@ -9474,12 +9474,97 @@ var Backdrop = React44.forwardRef(
 );
 Backdrop.displayName = "Backdrop";
 
-// src/components/snackbar.tsx
+// src/components/popover.tsx
 import * as React45 from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
-var SnackbarContent = React45.forwardRef(
-  ({ className, message, action, ...props }, ref) => /* @__PURE__ */ jsxs30(
+var PopoverRoot = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverPortal = PopoverPrimitive.Portal;
+var PopoverClose = PopoverPrimitive.Close;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverArrow = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx45(
+  PopoverPrimitive.Arrow,
+  {
+    ref,
+    className: cn("fill-white dark:fill-neutral-800", className),
+    ...props
+  }
+));
+PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
+var PopoverContent = React45.forwardRef(({ className, align = "center", sideOffset = 6, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsx45(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs30(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 rounded-lg border border-neutral-200 bg-white p-4 shadow-md outline-none",
+      "dark:border-neutral-700 dark:bg-neutral-800",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2",
+      "data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2",
+      "data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      showArrow && /* @__PURE__ */ jsx45(PopoverArrow, {})
+    ]
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var Popover = ({
+  children,
+  content,
+  side = "bottom",
+  align = "center",
+  sideOffset = 6,
+  open,
+  onOpenChange,
+  defaultOpen,
+  modal = false,
+  showArrow = false,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs30(
+    PopoverRoot,
+    {
+      open,
+      onOpenChange,
+      defaultOpen,
+      modal,
+      children: [
+        /* @__PURE__ */ jsx45(PopoverTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx45(
+          PopoverContent,
+          {
+            side,
+            align,
+            sideOffset,
+            showArrow,
+            className,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+};
+Popover.displayName = "Popover";
+var Popper = (props) => /* @__PURE__ */ jsx45(Popover, { ...props, modal: false });
+Popper.displayName = "Popper";
+
+// src/components/snackbar.tsx
+import * as React46 from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+var SnackbarContent = React46.forwardRef(
+  ({ className, message, action, ...props }, ref) => /* @__PURE__ */ jsxs31(
     "div",
     {
       ref,
@@ -9491,8 +9576,8 @@ var SnackbarContent = React45.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx45("span", { className: "flex-1", children: message }),
-        action && /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: action })
+        /* @__PURE__ */ jsx46("span", { className: "flex-1", children: message }),
+        action && /* @__PURE__ */ jsx46("span", { className: "shrink-0", children: action })
       ]
     }
   )
@@ -9506,7 +9591,7 @@ var anchorClasses = {
   "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
   "bottom-right": "bottom-4 right-4"
 };
-var Snackbar = React45.forwardRef(
+var Snackbar = React46.forwardRef(
   ({
     open,
     message,
@@ -9521,21 +9606,21 @@ var Snackbar = React45.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [mounted, setMounted] = React45.useState(open);
-    const [visible, setVisible] = React45.useState(false);
-    const timer = React45.useRef(null);
+    const [mounted, setMounted] = React46.useState(open);
+    const [visible, setVisible] = React46.useState(false);
+    const timer = React46.useRef(null);
     const posKey = `${anchorOrigin.vertical}-${anchorOrigin.horizontal}`;
     const position = anchorClasses[posKey] ?? anchorClasses["bottom-left"];
     const slideDir = anchorOrigin.vertical === "top" ? "-8px" : "8px";
-    const clearTimer = React45.useCallback(() => {
+    const clearTimer = React46.useCallback(() => {
       if (timer.current) clearTimeout(timer.current);
     }, []);
-    const startTimer = React45.useCallback(() => {
+    const startTimer = React46.useCallback(() => {
       if (!autoHideDuration) return;
       clearTimer();
       timer.current = setTimeout(() => onClose?.(null, "timeout"), autoHideDuration);
     }, [autoHideDuration, onClose, clearTimer]);
-    React45.useEffect(() => {
+    React46.useEffect(() => {
       if (open) {
         setMounted(true);
         const raf = requestAnimationFrame(() => setVisible(true));
@@ -9546,13 +9631,13 @@ var Snackbar = React45.forwardRef(
         return () => clearTimeout(t);
       }
     }, [open, transitionDuration]);
-    React45.useEffect(() => {
+    React46.useEffect(() => {
       if (open) {
         startTimer();
         return clearTimer;
       }
     }, [open, startTimer, clearTimer]);
-    React45.useEffect(() => {
+    React46.useEffect(() => {
       if (disableWindowBlurListener || !open) return;
       window.addEventListener("blur", clearTimer);
       window.addEventListener("focus", startTimer);
@@ -9561,7 +9646,7 @@ var Snackbar = React45.forwardRef(
         window.removeEventListener("focus", startTimer);
       };
     }, [open, disableWindowBlurListener, clearTimer, startTimer]);
-    React45.useEffect(() => {
+    React46.useEffect(() => {
       if (!open) return;
       const onKey = (e) => {
         if (e.key === "Escape") {
@@ -9573,7 +9658,7 @@ var Snackbar = React45.forwardRef(
       return () => document.removeEventListener("keydown", onKey);
     }, [open, onClose]);
     if (!mounted) return null;
-    const node = /* @__PURE__ */ jsx45(
+    const node = /* @__PURE__ */ jsx46(
       "div",
       {
         ref,
@@ -9586,7 +9671,7 @@ var Snackbar = React45.forwardRef(
         onMouseEnter: clearTimer,
         onMouseLeave: startTimer,
         ...props,
-        children: children ?? /* @__PURE__ */ jsx45(SnackbarContent, { message, action })
+        children: children ?? /* @__PURE__ */ jsx46(SnackbarContent, { message, action })
       }
     );
     if (disablePortal || typeof document === "undefined") return node;
@@ -9595,13 +9680,13 @@ var Snackbar = React45.forwardRef(
 );
 Snackbar.displayName = "Snackbar";
 function ManagedRow({ item, vertical, transitionDuration, onRemove }) {
-  const [visible, setVisible] = React45.useState(false);
-  const timer = React45.useRef(null);
+  const [visible, setVisible] = React46.useState(false);
+  const timer = React46.useRef(null);
   const slideDir = vertical === "top" ? "-8px" : "8px";
-  const clearTimer = React45.useCallback(() => {
+  const clearTimer = React46.useCallback(() => {
     if (timer.current) clearTimeout(timer.current);
   }, []);
-  const startTimer = React45.useCallback(() => {
+  const startTimer = React46.useCallback(() => {
     if (!item.autoHideDuration) return;
     clearTimer();
     timer.current = setTimeout(() => {
@@ -9609,15 +9694,15 @@ function ManagedRow({ item, vertical, transitionDuration, onRemove }) {
       item.onClose?.();
     }, item.autoHideDuration);
   }, [item, onRemove, clearTimer]);
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     const raf = requestAnimationFrame(() => setVisible(true));
     return () => cancelAnimationFrame(raf);
   }, []);
-  React45.useEffect(() => {
+  React46.useEffect(() => {
     startTimer();
     return clearTimer;
   }, [startTimer, clearTimer]);
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "div",
     {
       style: {
@@ -9631,7 +9716,7 @@ function ManagedRow({ item, vertical, transitionDuration, onRemove }) {
     }
   );
 }
-var SnackbarContext = React45.createContext({
+var SnackbarContext = React46.createContext({
   enqueueSnackbar: () => "",
   closeSnackbar: () => {
   }
@@ -9643,24 +9728,24 @@ function SnackbarProvider({
   maxSnack = 3,
   transitionDuration = 225
 }) {
-  const [items, setItems] = React45.useState([]);
-  const closeSnackbar = React45.useCallback((key) => {
+  const [items, setItems] = React46.useState([]);
+  const closeSnackbar = React46.useCallback((key) => {
     setItems((prev) => prev.filter((i) => i.key !== key));
   }, []);
-  const enqueueSnackbar = React45.useCallback(
+  const enqueueSnackbar = React46.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__ */ jsx45(Alert, { variant, onClose: () => {
+        content = /* @__PURE__ */ jsx46(Alert, { variant, onClose: () => {
           closeSnackbar(key);
           onClose?.();
         }, children: message });
-      } else if (React45.isValidElement(message)) {
+      } else if (React46.isValidElement(message)) {
         content = message;
       } else {
-        content = /* @__PURE__ */ jsx45(SnackbarContent, { message, action });
+        content = /* @__PURE__ */ jsx46(SnackbarContent, { message, action });
       }
       setItems((prev) => {
         const capped = prev.length >= maxSnack ? prev.slice(-(maxSnack - 1)) : prev;
@@ -9679,7 +9764,7 @@ function SnackbarProvider({
     },
     [autoHideDuration, anchorOrigin, maxSnack, closeSnackbar]
   );
-  const groups = React45.useMemo(() => {
+  const groups = React46.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     items.forEach((item) => {
       const k = `${item.anchorOrigin.vertical}-${item.anchorOrigin.horizontal}`;
@@ -9687,12 +9772,12 @@ function SnackbarProvider({
     });
     return map;
   }, [items]);
-  return /* @__PURE__ */ jsxs30(SnackbarContext.Provider, { value: { enqueueSnackbar, closeSnackbar }, children: [
+  return /* @__PURE__ */ jsxs31(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__ */ jsx45(
+        /* @__PURE__ */ jsx46(
           "div",
           {
             className: cn(
@@ -9700,7 +9785,7 @@ function SnackbarProvider({
               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__ */ jsx45("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx45(
+            children: posItems.map((item) => /* @__PURE__ */ jsx46("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx46(
               ManagedRow,
               {
                 item,
@@ -9717,17 +9802,17 @@ function SnackbarProvider({
     })
   ] });
 }
-var useSnackbar = () => React45.useContext(SnackbarContext);
+var useSnackbar = () => React46.useContext(SnackbarContext);
 
 // src/components/drawer.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
 var Drawer = DialogPrimitive2.Root;
 var DrawerTrigger = DialogPrimitive2.Trigger;
 var DrawerClose = DialogPrimitive2.Close;
 var DrawerPortal = DialogPrimitive2.Portal;
-var DrawerOverlay = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DrawerOverlay = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -9747,9 +9832,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 = React46.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs31(DrawerPortal, { children: [
-  /* @__PURE__ */ jsx46(DrawerOverlay, {}),
-  /* @__PURE__ */ jsxs31(
+var DrawerContent = React47.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs32(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx47(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs32(
     DialogPrimitive2.Content,
     {
       ref,
@@ -9763,7 +9848,7 @@ var DrawerContent = React46.forwardRef(({ side = "right", showClose = true, clas
       ...props,
       children: [
         children,
-        showClose && /* @__PURE__ */ jsxs31(
+        showClose && /* @__PURE__ */ jsxs32(
           DrawerClose,
           {
             className: cn(
@@ -9773,7 +9858,7 @@ var DrawerContent = React46.forwardRef(({ side = "right", showClose = true, clas
               "disabled:pointer-events-none"
             ),
             children: [
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx47(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -9786,10 +9871,10 @@ var DrawerContent = React46.forwardRef(({ side = "right", showClose = true, clas
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
                   className: "h-4 w-4",
-                  children: /* @__PURE__ */ jsx46("path", { d: "M18 6 6 18M6 6l12 12" })
+                  children: /* @__PURE__ */ jsx47("path", { d: "M18 6 6 18M6 6l12 12" })
                 }
               ),
-              /* @__PURE__ */ jsx46("span", { className: "sr-only", children: "Close" })
+              /* @__PURE__ */ jsx47("span", { className: "sr-only", children: "Close" })
             ]
           }
         )
@@ -9798,8 +9883,8 @@ var DrawerContent = React46.forwardRef(({ side = "right", showClose = true, clas
   )
 ] }));
 DrawerContent.displayName = "DrawerContent";
-var DrawerHeader = React46.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DrawerHeader = React47.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
     "div",
     {
       ref,
@@ -9809,7 +9894,7 @@ var DrawerHeader = React46.forwardRef(
   )
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerTitle = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DrawerTitle = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   DialogPrimitive2.Title,
   {
     ref,
@@ -9818,7 +9903,7 @@ var DrawerTitle = React46.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
-var DrawerDescription = React46.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DrawerDescription = React47.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   DialogPrimitive2.Description,
   {
     ref,
@@ -9827,8 +9912,8 @@ var DrawerDescription = React46.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 DrawerDescription.displayName = DialogPrimitive2.Description.displayName;
-var DrawerBody = React46.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DrawerBody = React47.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
     "div",
     {
       ref,
@@ -9838,8 +9923,8 @@ var DrawerBody = React46.forwardRef(
   )
 );
 DrawerBody.displayName = "DrawerBody";
-var DrawerFooter = React46.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx46(
+var DrawerFooter = React47.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
     "div",
     {
       ref,
@@ -9865,17 +9950,17 @@ var SheetBody = DrawerBody;
 var SheetFooter = DrawerFooter;
 
 // src/components/topbar.tsx
-import * as React47 from "react";
-import { Fragment as Fragment8, jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+import * as React48 from "react";
+import { Fragment as Fragment8, jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
 var sizeClasses5 = {
   sm: "h-12",
   md: "h-14",
   lg: "h-16"
 };
-var TopBar = React47.forwardRef(
+var TopBar = React48.forwardRef(
   ({ className, bordered = true, sticky = false, size = "md", children, ...props }, ref) => {
     const safeSize = size in sizeClasses5 ? size : "md";
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(
       "header",
       {
         ref,
@@ -9893,23 +9978,23 @@ var TopBar = React47.forwardRef(
   }
 );
 TopBar.displayName = "TopBar";
-var TopBarBrand = React47.forwardRef(
+var TopBarBrand = React48.forwardRef(
   ({ className, logo, name, href, children, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs32(Fragment8, { children: [
-      logo && /* @__PURE__ */ jsx47("span", { className: "shrink-0", children: logo }),
-      name && /* @__PURE__ */ jsx47("span", { className: "font-semibold text-lg", children: name }),
+    const content = /* @__PURE__ */ jsxs33(Fragment8, { children: [
+      logo && /* @__PURE__ */ jsx48("span", { className: "shrink-0", children: logo }),
+      name && /* @__PURE__ */ jsx48("span", { className: "font-semibold text-lg", children: name }),
       children
     ] });
     if (href) {
-      return /* @__PURE__ */ jsx47("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: /* @__PURE__ */ jsx47("a", { href, className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: content }) });
+      return /* @__PURE__ */ jsx48("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: /* @__PURE__ */ jsx48("a", { href, className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: content }) });
     }
-    return /* @__PURE__ */ jsx47("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: content });
+    return /* @__PURE__ */ jsx48("div", { ref, className: cn("flex items-center gap-2", className), ...props, children: content });
   }
 );
 TopBarBrand.displayName = "TopBarBrand";
-var TopBarNav = React47.forwardRef(
+var TopBarNav = React48.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(
       "nav",
       {
         ref,
@@ -9921,9 +10006,9 @@ var TopBarNav = React47.forwardRef(
   }
 );
 TopBarNav.displayName = "TopBarNav";
-var TopBarNavItem = React47.forwardRef(
+var TopBarNavItem = React48.forwardRef(
   ({ className, active, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(
       "a",
       {
         ref,
@@ -9939,9 +10024,9 @@ var TopBarNavItem = React47.forwardRef(
   }
 );
 TopBarNavItem.displayName = "TopBarNavItem";
-var TopBarSection = React47.forwardRef(
+var TopBarSection = React48.forwardRef(
   ({ className, align = "left", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         ref,
@@ -9961,9 +10046,9 @@ var TopBarSection = React47.forwardRef(
   }
 );
 TopBarSection.displayName = "TopBarSection";
-var TopBarDivider = React47.forwardRef(
+var TopBarDivider = React48.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx47(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         ref,
@@ -9976,17 +10061,17 @@ var TopBarDivider = React47.forwardRef(
 TopBarDivider.displayName = "TopBarDivider";
 
 // src/components/sidebar.tsx
-import * as React48 from "react";
-import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
-var SidebarContext = React48.createContext(void 0);
+import * as React49 from "react";
+import { Fragment as Fragment9, jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+var SidebarContext = React49.createContext(void 0);
 var useSidebar = () => {
-  const context = React48.useContext(SidebarContext);
+  const context = React49.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a Sidebar");
   }
   return context;
 };
-var Sidebar = React48.forwardRef(
+var Sidebar = React49.forwardRef(
   ({
     className,
     collapsed: controlledCollapsed,
@@ -9998,10 +10083,10 @@ var Sidebar = React48.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React48.useState(defaultCollapsed);
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = React49.useState(defaultCollapsed);
     const isControlled = controlledCollapsed !== void 0;
     const collapsed = isControlled ? controlledCollapsed : uncontrolledCollapsed;
-    const setCollapsed = React48.useCallback(
+    const setCollapsed = React49.useCallback(
       (value) => {
         if (!isControlled) {
           setUncontrolledCollapsed(value);
@@ -10010,7 +10095,7 @@ var Sidebar = React48.forwardRef(
       },
       [isControlled, onCollapsedChange]
     );
-    return /* @__PURE__ */ jsx48(SidebarContext.Provider, { value: { collapsed, setCollapsed }, children: /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx49(SidebarContext.Provider, { value: { collapsed, setCollapsed }, children: /* @__PURE__ */ jsx49(
       "aside",
       {
         ref,
@@ -10030,9 +10115,9 @@ var Sidebar = React48.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarHeader = React48.forwardRef(
+var SidebarHeader = React49.forwardRef(
   ({ className, accentColor = false, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx49(
       "div",
       {
         ref,
@@ -10048,9 +10133,9 @@ var SidebarHeader = React48.forwardRef(
   }
 );
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarContent = React48.forwardRef(
+var SidebarContent = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx49(
       "div",
       {
         ref,
@@ -10062,9 +10147,9 @@ var SidebarContent = React48.forwardRef(
   }
 );
 SidebarContent.displayName = "SidebarContent";
-var SidebarFooter = React48.forwardRef(
+var SidebarFooter = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx49(
       "div",
       {
         ref,
@@ -10076,25 +10161,25 @@ var SidebarFooter = React48.forwardRef(
   }
 );
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarGroup = React48.forwardRef(
+var SidebarGroup = React49.forwardRef(
   ({ className, label, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    return /* @__PURE__ */ jsxs33("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
-      label && !collapsed && /* @__PURE__ */ jsx48("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
-      label && collapsed && /* @__PURE__ */ jsx48("div", { className: "flex justify-center py-1.5", children: /* @__PURE__ */ jsx48("div", { className: "h-px w-4 bg-border" }) }),
-      /* @__PURE__ */ jsx48("div", { className: "space-y-1", children })
+    return /* @__PURE__ */ jsxs34("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+      label && !collapsed && /* @__PURE__ */ jsx49("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
+      label && collapsed && /* @__PURE__ */ jsx49("div", { className: "flex justify-center py-1.5", children: /* @__PURE__ */ jsx49("div", { className: "h-px w-4 bg-border" }) }),
+      /* @__PURE__ */ jsx49("div", { className: "space-y-1", children })
     ] });
   }
 );
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarItem = React48.forwardRef(
+var SidebarItem = React49.forwardRef(
   ({ className, icon, active, disabled, badge, onClick, href, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    const content = /* @__PURE__ */ jsxs33(Fragment9, { children: [
-      icon && /* @__PURE__ */ jsx48("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
-      !collapsed && /* @__PURE__ */ jsxs33(Fragment9, { children: [
-        /* @__PURE__ */ jsx48("span", { className: "flex-1 truncate", children }),
-        badge && /* @__PURE__ */ jsx48("span", { className: "shrink-0", children: badge })
+    const content = /* @__PURE__ */ jsxs34(Fragment9, { children: [
+      icon && /* @__PURE__ */ jsx49("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
+      !collapsed && /* @__PURE__ */ jsxs34(Fragment9, { children: [
+        /* @__PURE__ */ jsx49("span", { className: "flex-1 truncate", children }),
+        badge && /* @__PURE__ */ jsx49("span", { className: "shrink-0", children: badge })
       ] })
     ] });
     const itemClasses = cn(
@@ -10105,9 +10190,9 @@ var SidebarItem = React48.forwardRef(
       className
     );
     if (href) {
-      return /* @__PURE__ */ jsx48("div", { ref, ...props, children: /* @__PURE__ */ jsx48("a", { href, className: itemClasses, children: content }) });
+      return /* @__PURE__ */ jsx49("div", { ref, ...props, children: /* @__PURE__ */ jsx49("a", { href, className: itemClasses, children: content }) });
     }
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx49(
       "div",
       {
         ref,
@@ -10122,20 +10207,20 @@ var SidebarItem = React48.forwardRef(
   }
 );
 SidebarItem.displayName = "SidebarItem";
-var SidebarSubMenu = React48.forwardRef(
+var SidebarSubMenu = React49.forwardRef(
   ({ className, icon, label, defaultOpen = false, children, ...props }, ref) => {
-    const [open, setOpen] = React48.useState(defaultOpen);
+    const [open, setOpen] = React49.useState(defaultOpen);
     const { collapsed } = useSidebar();
-    React48.useEffect(() => {
+    React49.useEffect(() => {
       if (collapsed) {
         setOpen(false);
       }
     }, [collapsed]);
     if (collapsed) {
-      return /* @__PURE__ */ jsx48(SidebarItem, { icon, className, children: label });
+      return /* @__PURE__ */ jsx49(SidebarItem, { icon, className, children: label });
     }
-    return /* @__PURE__ */ jsxs33("div", { ref, className, ...props, children: [
-      /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ jsxs34(
         "div",
         {
           className: cn(
@@ -10146,9 +10231,9 @@ var SidebarSubMenu = React48.forwardRef(
           role: "button",
           tabIndex: 0,
           children: [
-            icon && /* @__PURE__ */ jsx48("span", { className: "shrink-0", children: icon }),
-            /* @__PURE__ */ jsx48("span", { className: "flex-1 truncate", children: label }),
-            /* @__PURE__ */ jsx48(
+            icon && /* @__PURE__ */ jsx49("span", { className: "shrink-0", children: icon }),
+            /* @__PURE__ */ jsx49("span", { className: "flex-1 truncate", children: label }),
+            /* @__PURE__ */ jsx49(
               "svg",
               {
                 className: cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-90"),
@@ -10159,21 +10244,21 @@ var SidebarSubMenu = React48.forwardRef(
                 strokeWidth: "2",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
-                children: /* @__PURE__ */ jsx48("path", { d: "m9 18 6-6-6-6" })
+                children: /* @__PURE__ */ jsx49("path", { d: "m9 18 6-6-6-6" })
               }
             )
           ]
         }
       ),
-      open && /* @__PURE__ */ jsx48("div", { className: "ml-4 pl-3 border-l border-border space-y-1 mt-1", children })
+      open && /* @__PURE__ */ jsx49("div", { className: "ml-4 pl-3 border-l border-border space-y-1 mt-1", children })
     ] });
   }
 );
 SidebarSubMenu.displayName = "SidebarSubMenu";
-var SidebarToggle = React48.forwardRef(
+var SidebarToggle = React49.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { collapsed, setCollapsed } = useSidebar();
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx49(
       "button",
       {
         ref,
@@ -10187,7 +10272,7 @@ var SidebarToggle = React48.forwardRef(
         ),
         "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
         ...props,
-        children: children || /* @__PURE__ */ jsxs33(
+        children: children || /* @__PURE__ */ jsxs34(
           "svg",
           {
             className: cn("h-5 w-5 transition-transform", collapsed && "rotate-180"),
@@ -10199,9 +10284,9 @@ var SidebarToggle = React48.forwardRef(
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-              /* @__PURE__ */ jsx48("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-              /* @__PURE__ */ jsx48("path", { d: "M9 3v18" }),
-              /* @__PURE__ */ jsx48("path", { d: "m14 9 3 3-3 3" })
+              /* @__PURE__ */ jsx49("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+              /* @__PURE__ */ jsx49("path", { d: "M9 3v18" }),
+              /* @__PURE__ */ jsx49("path", { d: "m14 9 3 3-3 3" })
             ]
           }
         )
@@ -10212,17 +10297,17 @@ var SidebarToggle = React48.forwardRef(
 SidebarToggle.displayName = "SidebarToggle";
 
 // src/components/sidebar-rail.tsx
-import * as React49 from "react";
-import { Fragment as Fragment10, jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
-var SidebarRailContext = React49.createContext(void 0);
+import * as React50 from "react";
+import { Fragment as Fragment10, jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
+var SidebarRailContext = React50.createContext(void 0);
 var useSidebarRail = () => {
-  const context = React49.useContext(SidebarRailContext);
+  const context = React50.useContext(SidebarRailContext);
   if (!context) {
     throw new Error("useSidebarRail must be used within a SidebarRail");
   }
   return context;
 };
-var SidebarRail = React49.forwardRef(
+var SidebarRail = React50.forwardRef(
   ({
     className,
     defaultActiveRail = null,
@@ -10240,14 +10325,14 @@ var SidebarRail = React49.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [uncontrolledActiveRail, setUncontrolledActiveRail] = React49.useState(defaultActiveRail);
-    const [expanded, setExpanded] = React49.useState(!!defaultActiveRail);
-    const [uncontrolledRailExpanded, setUncontrolledRailExpanded] = React49.useState(defaultRailExpanded);
+    const [uncontrolledActiveRail, setUncontrolledActiveRail] = React50.useState(defaultActiveRail);
+    const [expanded, setExpanded] = React50.useState(!!defaultActiveRail);
+    const [uncontrolledRailExpanded, setUncontrolledRailExpanded] = React50.useState(defaultRailExpanded);
     const isControlled = controlledActiveRail !== void 0;
     const activeRail = isControlled ? controlledActiveRail : uncontrolledActiveRail;
     const isRailControlled = controlledRailExpanded !== void 0;
     const railExpanded = isRailControlled ? controlledRailExpanded : uncontrolledRailExpanded;
-    const setActiveRail = React49.useCallback(
+    const setActiveRail = React50.useCallback(
       (rail) => {
         if (!isControlled) {
           setUncontrolledActiveRail(rail);
@@ -10257,7 +10342,7 @@ var SidebarRail = React49.forwardRef(
       },
       [isControlled, onActiveRailChange]
     );
-    const setRailExpanded = React49.useCallback(
+    const setRailExpanded = React50.useCallback(
       (value) => {
         if (!isRailControlled) {
           setUncontrolledRailExpanded(value);
@@ -10266,7 +10351,7 @@ var SidebarRail = React49.forwardRef(
       },
       [isRailControlled, onRailExpandedChange]
     );
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       SidebarRailContext.Provider,
       {
         value: {
@@ -10280,7 +10365,7 @@ var SidebarRail = React49.forwardRef(
           overlayRail: overlayRail && expandableRail,
           expandableRail
         },
-        children: /* @__PURE__ */ jsx49(
+        children: /* @__PURE__ */ jsx50(
           "div",
           {
             ref,
@@ -10303,7 +10388,7 @@ var SidebarRail = React49.forwardRef(
   }
 );
 SidebarRail.displayName = "SidebarRail";
-var IconRail = React49.forwardRef(
+var IconRail = React50.forwardRef(
   ({ className, children, hoverExpandRail = false, ...props }, ref) => {
     const { railExpanded, overlayRail, expandableRail, setRailExpanded } = useSidebarRail();
     const isExpanded = expandableRail && railExpanded;
@@ -10317,7 +10402,7 @@ var IconRail = React49.forwardRef(
         setRailExpanded(false);
       }
     };
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       "div",
       {
         ref,
@@ -10328,7 +10413,7 @@ var IconRail = React49.forwardRef(
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         ...props,
-        children: /* @__PURE__ */ jsx49(
+        children: /* @__PURE__ */ jsx50(
           "div",
           {
             className: cn(
@@ -10348,9 +10433,9 @@ var IconRail = React49.forwardRef(
   }
 );
 IconRail.displayName = "IconRail";
-var IconRailHeader = React49.forwardRef(
+var IconRailHeader = React50.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       "div",
       {
         ref,
@@ -10365,9 +10450,9 @@ var IconRailHeader = React49.forwardRef(
   }
 );
 IconRailHeader.displayName = "IconRailHeader";
-var IconRailContent = React49.forwardRef(
+var IconRailContent = React50.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       "div",
       {
         ref,
@@ -10379,9 +10464,9 @@ var IconRailContent = React49.forwardRef(
   }
 );
 IconRailContent.displayName = "IconRailContent";
-var IconRailFooter = React49.forwardRef(
+var IconRailFooter = React50.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       "div",
       {
         ref,
@@ -10396,7 +10481,7 @@ var IconRailFooter = React49.forwardRef(
   }
 );
 IconRailFooter.displayName = "IconRailFooter";
-var IconRailItem = React49.forwardRef(
+var IconRailItem = React50.forwardRef(
   ({ className, railId, icon, label, asButton = false, toggleRail = false, iconColor, onClick, ...props }, ref) => {
     const {
       activeRail,
@@ -10422,8 +10507,8 @@ var IconRailItem = React49.forwardRef(
         setActiveRail(railId);
       }
     };
-    const iconWithColor = iconColor ? /* @__PURE__ */ jsx49("span", { style: { color: iconColor }, className: "flex items-center justify-center", children: icon }) : icon;
-    return /* @__PURE__ */ jsxs34(
+    const iconWithColor = iconColor ? /* @__PURE__ */ jsx50("span", { style: { color: iconColor }, className: "flex items-center justify-center", children: icon }) : icon;
+    return /* @__PURE__ */ jsxs35(
       "button",
       {
         ref,
@@ -10443,14 +10528,14 @@ var IconRailItem = React49.forwardRef(
         ...props,
         children: [
           iconWithColor,
-          isRailExpanded && label && /* @__PURE__ */ jsx49("span", { className: "text-sm font-medium truncate", children: label })
+          isRailExpanded && label && /* @__PURE__ */ jsx50("span", { className: "text-sm font-medium truncate", children: label })
         ]
       }
     );
   }
 );
 IconRailItem.displayName = "IconRailItem";
-var RailPanel = React49.forwardRef(
+var RailPanel = React50.forwardRef(
   ({ className, railId, title, children, ...props }, ref) => {
     const { activeRail, setActiveRail, hoverExpand } = useSidebarRail();
     const isVisible = activeRail === railId;
@@ -10460,7 +10545,7 @@ var RailPanel = React49.forwardRef(
       }
     };
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       "div",
       {
         ref,
@@ -10473,16 +10558,16 @@ var RailPanel = React49.forwardRef(
         onMouseLeave: handleMouseLeave,
         ...props,
         children: [
-          title && /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
-            /* @__PURE__ */ jsx49("span", { className: "font-semibold text-sm", children: title }),
-            /* @__PURE__ */ jsx49(
+          title && /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsx50("span", { className: "font-semibold text-sm", children: title }),
+            /* @__PURE__ */ jsx50(
               "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__ */ jsxs34(
+                children: /* @__PURE__ */ jsxs35(
                   "svg",
                   {
                     className: "h-4 w-4",
@@ -10494,36 +10579,36 @@ var RailPanel = React49.forwardRef(
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     children: [
-                      /* @__PURE__ */ jsx49("path", { d: "M18 6 6 18" }),
-                      /* @__PURE__ */ jsx49("path", { d: "m6 6 12 12" })
+                      /* @__PURE__ */ jsx50("path", { d: "M18 6 6 18" }),
+                      /* @__PURE__ */ jsx50("path", { d: "m6 6 12 12" })
                     ]
                   }
                 )
               }
             )
           ] }),
-          /* @__PURE__ */ jsx49("div", { className: "flex-1 overflow-y-auto", children })
+          /* @__PURE__ */ jsx50("div", { className: "flex-1 overflow-y-auto", children })
         ]
       }
     );
   }
 );
 RailPanel.displayName = "RailPanel";
-var RailPanelGroup = React49.forwardRef(
+var RailPanelGroup = React50.forwardRef(
   ({ className, label, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs34("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
-      label && /* @__PURE__ */ jsx49("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
-      /* @__PURE__ */ jsx49("div", { className: "space-y-1", children })
+    return /* @__PURE__ */ jsxs35("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+      label && /* @__PURE__ */ jsx50("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
+      /* @__PURE__ */ jsx50("div", { className: "space-y-1", children })
     ] });
   }
 );
 RailPanelGroup.displayName = "RailPanelGroup";
-var RailPanelItem = React49.forwardRef(
+var RailPanelItem = React50.forwardRef(
   ({ className, icon, active, disabled, badge, href, children, onClick, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs34(Fragment10, { children: [
-      icon && /* @__PURE__ */ jsx49("span", { className: "shrink-0", children: icon }),
-      /* @__PURE__ */ jsx49("span", { className: "flex-1 truncate", children }),
-      badge && /* @__PURE__ */ jsx49("span", { className: "shrink-0", children: badge })
+    const content = /* @__PURE__ */ jsxs35(Fragment10, { children: [
+      icon && /* @__PURE__ */ jsx50("span", { className: "shrink-0", children: icon }),
+      /* @__PURE__ */ jsx50("span", { className: "flex-1 truncate", children }),
+      badge && /* @__PURE__ */ jsx50("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",
@@ -10532,9 +10617,9 @@ var RailPanelItem = React49.forwardRef(
       className
     );
     if (href) {
-      return /* @__PURE__ */ jsx49("div", { ref, ...props, children: /* @__PURE__ */ jsx49("a", { href, className: itemClasses, children: content }) });
+      return /* @__PURE__ */ jsx50("div", { ref, ...props, children: /* @__PURE__ */ jsx50("a", { href, className: itemClasses, children: content }) });
     }
-    return /* @__PURE__ */ jsx49(
+    return /* @__PURE__ */ jsx50(
       "div",
       {
         ref,
@@ -10551,34 +10636,34 @@ var RailPanelItem = React49.forwardRef(
 RailPanelItem.displayName = "RailPanelItem";
 
 // src/playground.tsx
-import * as React50 from "react";
-import { jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
-var Section = ({ title, children }) => /* @__PURE__ */ jsxs35("div", { className: "mb-8", children: [
-  /* @__PURE__ */ jsx50("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
-  /* @__PURE__ */ jsx50("div", { className: "p-4 border border-border rounded-lg bg-background", children })
+import * as React51 from "react";
+import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs36("div", { className: "mb-8", children: [
+  /* @__PURE__ */ jsx51("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
+  /* @__PURE__ */ jsx51("div", { className: "p-4 border border-border rounded-lg bg-background", children })
 ] });
 var ThemeToggle = () => {
   const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx50(Label, { children: "Theme:" }),
-    /* @__PURE__ */ jsxs35(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
-      /* @__PURE__ */ jsx50(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx50(SelectValue, { placeholder: "Select theme" }) }),
-      /* @__PURE__ */ jsxs35(SelectContent, { children: [
-        /* @__PURE__ */ jsx50(SelectItem, { value: "light", children: "Light" }),
-        /* @__PURE__ */ jsx50(SelectItem, { value: "dark", children: "Dark" }),
-        /* @__PURE__ */ jsx50(SelectItem, { value: "system", children: "System" })
+  return /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx51(Label, { children: "Theme:" }),
+    /* @__PURE__ */ jsxs36(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
+      /* @__PURE__ */ jsx51(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx51(SelectValue, { placeholder: "Select theme" }) }),
+      /* @__PURE__ */ jsxs36(SelectContent, { children: [
+        /* @__PURE__ */ jsx51(SelectItem, { value: "light", children: "Light" }),
+        /* @__PURE__ */ jsx51(SelectItem, { value: "dark", children: "Dark" }),
+        /* @__PURE__ */ jsx51(SelectItem, { value: "system", children: "System" })
       ] })
     ] })
   ] });
 };
 var PlaygroundContent = () => {
-  const [dialogOpen, setDialogOpen] = React50.useState(false);
-  const [checkboxChecked, setCheckboxChecked] = React50.useState(false);
-  const [switchChecked, setSwitchChecked] = React50.useState(false);
-  const [inputValue, setInputValue] = React50.useState("");
-  const [textareaValue, setTextareaValue] = React50.useState("");
-  const [selectValue, setSelectValue] = React50.useState("");
-  const [comboboxValue, setComboboxValue] = React50.useState(null);
+  const [dialogOpen, setDialogOpen] = React51.useState(false);
+  const [checkboxChecked, setCheckboxChecked] = React51.useState(false);
+  const [switchChecked, setSwitchChecked] = React51.useState(false);
+  const [inputValue, setInputValue] = React51.useState("");
+  const [textareaValue, setTextareaValue] = React51.useState("");
+  const [selectValue, setSelectValue] = React51.useState("");
+  const [comboboxValue, setComboboxValue] = React51.useState(null);
   const comboboxOptions = [
     { value: "react", label: "React" },
     { value: "vue", label: "Vue" },
@@ -10586,35 +10671,35 @@ var PlaygroundContent = () => {
     { value: "svelte", label: "Svelte" },
     { value: "solid", label: "SolidJS" }
   ];
-  return /* @__PURE__ */ jsx50("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs35("div", { className: "max-w-4xl mx-auto", children: [
-    /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between mb-8", children: [
-      /* @__PURE__ */ jsx50("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
-      /* @__PURE__ */ jsx50(ThemeToggle, {})
+  return /* @__PURE__ */ jsx51("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs36("div", { className: "max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between mb-8", children: [
+      /* @__PURE__ */ jsx51("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
+      /* @__PURE__ */ jsx51(ThemeToggle, {})
     ] }),
-    /* @__PURE__ */ jsxs35(Section, { title: "Button", children: [
-      /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap gap-4", children: [
-        /* @__PURE__ */ jsx50(Button, { variant: "contained", children: "Default" }),
-        /* @__PURE__ */ jsx50(Button, { variant: "destructive", children: "Destructive" }),
-        /* @__PURE__ */ jsx50(Button, { variant: "outlined", children: "Outline" }),
-        /* @__PURE__ */ jsx50(Button, { variant: "secondary", children: "Secondary" }),
-        /* @__PURE__ */ jsx50(Button, { variant: "ghost", children: "Ghost" }),
-        /* @__PURE__ */ jsx50(Button, { variant: "link", children: "Link" })
+    /* @__PURE__ */ jsxs36(Section, { title: "Button", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ jsx51(Button, { variant: "contained", children: "Default" }),
+        /* @__PURE__ */ jsx51(Button, { variant: "destructive", children: "Destructive" }),
+        /* @__PURE__ */ jsx51(Button, { variant: "outlined", children: "Outline" }),
+        /* @__PURE__ */ jsx51(Button, { variant: "secondary", children: "Secondary" }),
+        /* @__PURE__ */ jsx51(Button, { variant: "ghost", children: "Ghost" }),
+        /* @__PURE__ */ jsx51(Button, { variant: "link", children: "Link" })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap gap-4 mt-4", children: [
-        /* @__PURE__ */ jsx50(Button, { size: "sm", children: "Small" }),
-        /* @__PURE__ */ jsx50(Button, { size: "default", children: "Default" }),
-        /* @__PURE__ */ jsx50(Button, { size: "lg", children: "Large" }),
-        /* @__PURE__ */ jsx50(Button, { size: "icon", children: "\u{1F514}" })
+      /* @__PURE__ */ jsxs36("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+        /* @__PURE__ */ jsx51(Button, { size: "sm", children: "Small" }),
+        /* @__PURE__ */ jsx51(Button, { size: "default", children: "Default" }),
+        /* @__PURE__ */ jsx51(Button, { size: "lg", children: "Large" }),
+        /* @__PURE__ */ jsx51(Button, { size: "icon", children: "\u{1F514}" })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap gap-4 mt-4", children: [
-        /* @__PURE__ */ jsx50(Button, { disabled: true, children: "Disabled" }),
-        /* @__PURE__ */ jsx50(Button, { variant: "outlined", disabled: true, children: "Disabled Outline" })
+      /* @__PURE__ */ jsxs36("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+        /* @__PURE__ */ jsx51(Button, { disabled: true, children: "Disabled" }),
+        /* @__PURE__ */ jsx51(Button, { variant: "outlined", disabled: true, children: "Disabled Outline" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx50(Section, { title: "Input", children: /* @__PURE__ */ jsxs35("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx50(Label, { htmlFor: "input-default", children: "Default Input" }),
-        /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx51(Section, { title: "Input", children: /* @__PURE__ */ jsxs36("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx51(Label, { htmlFor: "input-default", children: "Default Input" }),
+        /* @__PURE__ */ jsx51(
           Input,
           {
             id: "input-default",
@@ -10624,19 +10709,19 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx50(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
-        /* @__PURE__ */ jsx50(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx51(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
+        /* @__PURE__ */ jsx51(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx50(Label, { htmlFor: "input-type", children: "Email Input" }),
-        /* @__PURE__ */ jsx50(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx51(Label, { htmlFor: "input-type", children: "Email Input" }),
+        /* @__PURE__ */ jsx51(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs35("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx50(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
-        /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx51(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs36("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx51(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
+        /* @__PURE__ */ jsx51(
           Textarea,
           {
             id: "textarea-default",
@@ -10646,52 +10731,52 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx50(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
-        /* @__PURE__ */ jsx50(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx51(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
+        /* @__PURE__ */ jsx51(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Select", children: /* @__PURE__ */ jsxs35("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx50(Label, { children: "Default Select" }),
-        /* @__PURE__ */ jsxs35(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
-          /* @__PURE__ */ jsx50(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx50(SelectValue, { placeholder: "Select an option..." }) }),
-          /* @__PURE__ */ jsxs35(SelectContent, { children: [
-            /* @__PURE__ */ jsx50(SelectItem, { value: "option1", children: "Option 1" }),
-            /* @__PURE__ */ jsx50(SelectItem, { value: "option2", children: "Option 2" }),
-            /* @__PURE__ */ jsx50(SelectItem, { value: "option3", children: "Option 3" })
+    /* @__PURE__ */ jsx51(Section, { title: "Select", children: /* @__PURE__ */ jsxs36("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx51(Label, { children: "Default Select" }),
+        /* @__PURE__ */ jsxs36(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
+          /* @__PURE__ */ jsx51(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx51(SelectValue, { placeholder: "Select an option..." }) }),
+          /* @__PURE__ */ jsxs36(SelectContent, { children: [
+            /* @__PURE__ */ jsx51(SelectItem, { value: "option1", children: "Option 1" }),
+            /* @__PURE__ */ jsx51(SelectItem, { value: "option2", children: "Option 2" }),
+            /* @__PURE__ */ jsx51(SelectItem, { value: "option3", children: "Option 3" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx50(Label, { children: "Grouped Select" }),
-        /* @__PURE__ */ jsxs35(SelectNamespace, { children: [
-          /* @__PURE__ */ jsx50(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx50(SelectValue, { placeholder: "Select a food..." }) }),
-          /* @__PURE__ */ jsxs35(SelectContent, { children: [
-            /* @__PURE__ */ jsxs35(SelectGroup, { children: [
-              /* @__PURE__ */ jsx50(SelectLabel, { children: "Fruits" }),
-              /* @__PURE__ */ jsx50(SelectItem, { value: "apple", children: "Apple" }),
-              /* @__PURE__ */ jsx50(SelectItem, { value: "banana", children: "Banana" })
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx51(Label, { children: "Grouped Select" }),
+        /* @__PURE__ */ jsxs36(SelectNamespace, { children: [
+          /* @__PURE__ */ jsx51(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx51(SelectValue, { placeholder: "Select a food..." }) }),
+          /* @__PURE__ */ jsxs36(SelectContent, { children: [
+            /* @__PURE__ */ jsxs36(SelectGroup, { children: [
+              /* @__PURE__ */ jsx51(SelectLabel, { children: "Fruits" }),
+              /* @__PURE__ */ jsx51(SelectItem, { value: "apple", children: "Apple" }),
+              /* @__PURE__ */ jsx51(SelectItem, { value: "banana", children: "Banana" })
             ] }),
-            /* @__PURE__ */ jsxs35(SelectGroup, { children: [
-              /* @__PURE__ */ jsx50(SelectLabel, { children: "Vegetables" }),
-              /* @__PURE__ */ jsx50(SelectItem, { value: "carrot", children: "Carrot" }),
-              /* @__PURE__ */ jsx50(SelectItem, { value: "potato", children: "Potato" })
+            /* @__PURE__ */ jsxs36(SelectGroup, { children: [
+              /* @__PURE__ */ jsx51(SelectLabel, { children: "Vegetables" }),
+              /* @__PURE__ */ jsx51(SelectItem, { value: "carrot", children: "Carrot" }),
+              /* @__PURE__ */ jsx51(SelectItem, { value: "potato", children: "Potato" })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { children: [
-        /* @__PURE__ */ jsx50(Label, { children: "Disabled Select" }),
-        /* @__PURE__ */ jsxs35(SelectNamespace, { disabled: true, children: [
-          /* @__PURE__ */ jsx50(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx50(SelectValue, { placeholder: "Disabled..." }) }),
-          /* @__PURE__ */ jsx50(SelectContent, { children: /* @__PURE__ */ jsx50(SelectItem, { value: "none", children: "None" }) })
+      /* @__PURE__ */ jsxs36("div", { children: [
+        /* @__PURE__ */ jsx51(Label, { children: "Disabled Select" }),
+        /* @__PURE__ */ jsxs36(SelectNamespace, { disabled: true, children: [
+          /* @__PURE__ */ jsx51(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx51(SelectValue, { placeholder: "Disabled..." }) }),
+          /* @__PURE__ */ jsx51(SelectContent, { children: /* @__PURE__ */ jsx51(SelectItem, { value: "none", children: "None" }) })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx50("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs35("div", { children: [
-      /* @__PURE__ */ jsx50(Label, { children: "Framework" }),
-      /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx51(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx51("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs36("div", { children: [
+      /* @__PURE__ */ jsx51(Label, { children: "Framework" }),
+      /* @__PURE__ */ jsx51(
         Combobox,
         {
           options: comboboxOptions,
@@ -10703,9 +10788,9 @@ var PlaygroundContent = () => {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs35("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx51(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs36("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx51(
           Checkbox,
           {
             id: "checkbox",
@@ -10713,15 +10798,15 @@ var PlaygroundContent = () => {
             onChange: (e) => setCheckboxChecked(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx50(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
+        /* @__PURE__ */ jsx51(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx50(Checkbox, { id: "checkbox-disabled", disabled: true }),
-        /* @__PURE__ */ jsx50(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx51(Checkbox, { id: "checkbox-disabled", disabled: true }),
+        /* @__PURE__ */ jsx51(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
       ] }),
-      /* @__PURE__ */ jsx50(Separator, {}),
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx51(Separator, {}),
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx51(
           Switch,
           {
             id: "switch",
@@ -10729,161 +10814,161 @@ var PlaygroundContent = () => {
             onChange: (e) => setSwitchChecked(e.target.checked)
           }
         ),
-        /* @__PURE__ */ jsx50(Label, { htmlFor: "switch", children: "Enable notifications" })
+        /* @__PURE__ */ jsx51(Label, { htmlFor: "switch", children: "Enable notifications" })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx50(Switch, { id: "switch-disabled", disabled: true }),
-        /* @__PURE__ */ jsx50(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx51(Switch, { id: "switch-disabled", disabled: true }),
+        /* @__PURE__ */ jsx51(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Badge", children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-wrap gap-4", children: [
-      /* @__PURE__ */ jsx50(Badge, { children: "Default" }),
-      /* @__PURE__ */ jsx50(Badge, { color: "success", children: "Success" }),
-      /* @__PURE__ */ jsx50(Badge, { color: "warning", children: "Warning" }),
-      /* @__PURE__ */ jsx50(Badge, { color: "error", variant: "outlined", children: "Error" }),
-      /* @__PURE__ */ jsx50(Badge, { color: "destructive", variant: "text", children: "Destructive" })
+    /* @__PURE__ */ jsx51(Section, { title: "Badge", children: /* @__PURE__ */ jsxs36("div", { className: "flex flex-wrap gap-4", children: [
+      /* @__PURE__ */ jsx51(Badge, { children: "Default" }),
+      /* @__PURE__ */ jsx51(Badge, { color: "success", children: "Success" }),
+      /* @__PURE__ */ jsx51(Badge, { color: "warning", children: "Warning" }),
+      /* @__PURE__ */ jsx51(Badge, { color: "error", variant: "outlined", children: "Error" }),
+      /* @__PURE__ */ jsx51(Badge, { color: "destructive", variant: "text", children: "Destructive" })
     ] }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Card", children: /* @__PURE__ */ jsxs35("div", { className: "grid gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs35(Card, { children: [
-        /* @__PURE__ */ jsxs35(CardHeader, { children: [
-          /* @__PURE__ */ jsx50(CardTitle, { children: "Card Title" }),
-          /* @__PURE__ */ jsx50(CardDescription, { children: "Card description goes here" })
+    /* @__PURE__ */ jsx51(Section, { title: "Card", children: /* @__PURE__ */ jsxs36("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs36(Card, { children: [
+        /* @__PURE__ */ jsxs36(CardHeader, { children: [
+          /* @__PURE__ */ jsx51(CardTitle, { children: "Card Title" }),
+          /* @__PURE__ */ jsx51(CardDescription, { children: "Card description goes here" })
         ] }),
-        /* @__PURE__ */ jsx50(CardContent, { children: /* @__PURE__ */ jsx50("p", { className: "text-foreground", children: "This is the card content area." }) }),
-        /* @__PURE__ */ jsxs35(CardFooter, { children: [
-          /* @__PURE__ */ jsx50(Button, { variant: "outlined", className: "mr-2", children: "Cancel" }),
-          /* @__PURE__ */ jsx50(Button, { children: "Submit" })
+        /* @__PURE__ */ jsx51(CardContent, { children: /* @__PURE__ */ jsx51("p", { className: "text-foreground", children: "This is the card content area." }) }),
+        /* @__PURE__ */ jsxs36(CardFooter, { children: [
+          /* @__PURE__ */ jsx51(Button, { variant: "outlined", className: "mr-2", children: "Cancel" }),
+          /* @__PURE__ */ jsx51(Button, { children: "Submit" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs35(Card, { children: [
-        /* @__PURE__ */ jsxs35(CardHeader, { children: [
-          /* @__PURE__ */ jsx50(CardTitle, { children: "Another Card" }),
-          /* @__PURE__ */ jsx50(CardDescription, { children: "With different content" })
+      /* @__PURE__ */ jsxs36(Card, { children: [
+        /* @__PURE__ */ jsxs36(CardHeader, { children: [
+          /* @__PURE__ */ jsx51(CardTitle, { children: "Another Card" }),
+          /* @__PURE__ */ jsx51(CardDescription, { children: "With different content" })
         ] }),
-        /* @__PURE__ */ jsx50(CardContent, { children: /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx50(Label, { htmlFor: "card-input", children: "Name" }),
-          /* @__PURE__ */ jsx50(Input, { id: "card-input", placeholder: "Enter name..." })
+        /* @__PURE__ */ jsx51(CardContent, { children: /* @__PURE__ */ jsxs36("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx51(Label, { htmlFor: "card-input", children: "Name" }),
+          /* @__PURE__ */ jsx51(Input, { id: "card-input", placeholder: "Enter name..." })
         ] }) }),
-        /* @__PURE__ */ jsx50(CardFooter, { children: /* @__PURE__ */ jsx50(Button, { className: "w-full", children: "Save" }) })
+        /* @__PURE__ */ jsx51(CardFooter, { children: /* @__PURE__ */ jsx51(Button, { className: "w-full", children: "Save" }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs35(Section, { title: "Dialog", children: [
-      /* @__PURE__ */ jsx50(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
-      /* @__PURE__ */ jsx50(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs35(DialogContent, { children: [
-        /* @__PURE__ */ jsxs35(DialogHeader, { children: [
-          /* @__PURE__ */ jsx50(DialogTitle, { children: "Create New Zone" }),
-          /* @__PURE__ */ jsx50(DialogDescription, { children: "Fill in the details below to create a new zone." })
+    /* @__PURE__ */ jsxs36(Section, { title: "Dialog", children: [
+      /* @__PURE__ */ jsx51(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
+      /* @__PURE__ */ jsx51(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs36(DialogContent, { children: [
+        /* @__PURE__ */ jsxs36(DialogHeader, { children: [
+          /* @__PURE__ */ jsx51(DialogTitle, { children: "Create New Zone" }),
+          /* @__PURE__ */ jsx51(DialogDescription, { children: "Fill in the details below to create a new zone." })
         ] }),
-        /* @__PURE__ */ jsxs35("div", { className: "space-y-4 py-4", children: [
-          /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs35("div", { children: [
-              /* @__PURE__ */ jsx50(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
-              /* @__PURE__ */ jsx50(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
+        /* @__PURE__ */ jsxs36("div", { className: "space-y-4 py-4", children: [
+          /* @__PURE__ */ jsxs36("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs36("div", { children: [
+              /* @__PURE__ */ jsx51(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
+              /* @__PURE__ */ jsx51(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
             ] }),
-            /* @__PURE__ */ jsxs35("div", { children: [
-              /* @__PURE__ */ jsx50(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
-              /* @__PURE__ */ jsx50(Input, { id: "zone-code", placeholder: "eg :hyd022" })
+            /* @__PURE__ */ jsxs36("div", { children: [
+              /* @__PURE__ */ jsx51(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
+              /* @__PURE__ */ jsx51(Input, { id: "zone-code", placeholder: "eg :hyd022" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs35("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs35("div", { children: [
-              /* @__PURE__ */ jsx50(Label, { children: "State *" }),
-              /* @__PURE__ */ jsxs35(SelectNamespace, { children: [
-                /* @__PURE__ */ jsx50(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx50(SelectValue, { placeholder: "Select state" }) }),
-                /* @__PURE__ */ jsxs35(SelectContent, { children: [
-                  /* @__PURE__ */ jsx50(SelectItem, { value: "telangana", children: "TELANGANA" }),
-                  /* @__PURE__ */ jsx50(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
+          /* @__PURE__ */ jsxs36("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs36("div", { children: [
+              /* @__PURE__ */ jsx51(Label, { children: "State *" }),
+              /* @__PURE__ */ jsxs36(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx51(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx51(SelectValue, { placeholder: "Select state" }) }),
+                /* @__PURE__ */ jsxs36(SelectContent, { children: [
+                  /* @__PURE__ */ jsx51(SelectItem, { value: "telangana", children: "TELANGANA" }),
+                  /* @__PURE__ */ jsx51(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs35("div", { children: [
-              /* @__PURE__ */ jsx50(Label, { children: "District *" }),
-              /* @__PURE__ */ jsxs35(SelectNamespace, { children: [
-                /* @__PURE__ */ jsx50(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx50(SelectValue, { placeholder: "Select District" }) }),
-                /* @__PURE__ */ jsxs35(SelectContent, { children: [
-                  /* @__PURE__ */ jsx50(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
-                  /* @__PURE__ */ jsx50(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
+            /* @__PURE__ */ jsxs36("div", { children: [
+              /* @__PURE__ */ jsx51(Label, { children: "District *" }),
+              /* @__PURE__ */ jsxs36(SelectNamespace, { children: [
+                /* @__PURE__ */ jsx51(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx51(SelectValue, { placeholder: "Select District" }) }),
+                /* @__PURE__ */ jsxs36(SelectContent, { children: [
+                  /* @__PURE__ */ jsx51(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
+                  /* @__PURE__ */ jsx51(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
                 ] })
               ] })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs35(DialogFooter, { children: [
-          /* @__PURE__ */ jsx50(Button, { variant: "outlined", onClick: () => setDialogOpen(false), children: "CANCEL" }),
-          /* @__PURE__ */ jsx50(Button, { onClick: () => setDialogOpen(false), children: "Create" })
+        /* @__PURE__ */ jsxs36(DialogFooter, { children: [
+          /* @__PURE__ */ jsx51(Button, { variant: "outlined", onClick: () => setDialogOpen(false), children: "CANCEL" }),
+          /* @__PURE__ */ jsx51(Button, { onClick: () => setDialogOpen(false), children: "Create" })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx50(Section, { title: "Table", children: /* @__PURE__ */ jsxs35(TableNamespace, { children: [
-      /* @__PURE__ */ jsx50(TableCaption, { children: "A list of recent invoices" }),
-      /* @__PURE__ */ jsx50(TableHeader, { children: /* @__PURE__ */ jsxs35(TableRow, { children: [
-        /* @__PURE__ */ jsx50(TableHead, { children: "Invoice" }),
-        /* @__PURE__ */ jsx50(TableHead, { children: "Status" }),
-        /* @__PURE__ */ jsx50(TableHead, { children: "Method" }),
-        /* @__PURE__ */ jsx50(TableHead, { className: "text-right", children: "Amount" })
+    /* @__PURE__ */ jsx51(Section, { title: "Table", children: /* @__PURE__ */ jsxs36(TableNamespace, { children: [
+      /* @__PURE__ */ jsx51(TableCaption, { children: "A list of recent invoices" }),
+      /* @__PURE__ */ jsx51(TableHeader, { children: /* @__PURE__ */ jsxs36(TableRow, { children: [
+        /* @__PURE__ */ jsx51(TableHead, { children: "Invoice" }),
+        /* @__PURE__ */ jsx51(TableHead, { children: "Status" }),
+        /* @__PURE__ */ jsx51(TableHead, { children: "Method" }),
+        /* @__PURE__ */ jsx51(TableHead, { className: "text-right", children: "Amount" })
       ] }) }),
-      /* @__PURE__ */ jsxs35(TableBody, { children: [
-        /* @__PURE__ */ jsxs35(TableRow, { children: [
-          /* @__PURE__ */ jsx50(TableCell, { children: "INV001" }),
-          /* @__PURE__ */ jsx50(TableCell, { children: /* @__PURE__ */ jsx50(Badge, { color: "success", children: "Paid" }) }),
-          /* @__PURE__ */ jsx50(TableCell, { children: "Credit Card" }),
-          /* @__PURE__ */ jsx50(TableCell, { className: "text-right", children: "$250.00" })
+      /* @__PURE__ */ jsxs36(TableBody, { children: [
+        /* @__PURE__ */ jsxs36(TableRow, { children: [
+          /* @__PURE__ */ jsx51(TableCell, { children: "INV001" }),
+          /* @__PURE__ */ jsx51(TableCell, { children: /* @__PURE__ */ jsx51(Badge, { color: "success", children: "Paid" }) }),
+          /* @__PURE__ */ jsx51(TableCell, { children: "Credit Card" }),
+          /* @__PURE__ */ jsx51(TableCell, { className: "text-right", children: "$250.00" })
         ] }),
-        /* @__PURE__ */ jsxs35(TableRow, { children: [
-          /* @__PURE__ */ jsx50(TableCell, { children: "INV002" }),
-          /* @__PURE__ */ jsx50(TableCell, { children: /* @__PURE__ */ jsx50(Badge, { color: "warning", variant: "outlined", children: "Pending" }) }),
-          /* @__PURE__ */ jsx50(TableCell, { children: "PayPal" }),
-          /* @__PURE__ */ jsx50(TableCell, { className: "text-right", children: "$150.00" })
+        /* @__PURE__ */ jsxs36(TableRow, { children: [
+          /* @__PURE__ */ jsx51(TableCell, { children: "INV002" }),
+          /* @__PURE__ */ jsx51(TableCell, { children: /* @__PURE__ */ jsx51(Badge, { color: "warning", variant: "outlined", children: "Pending" }) }),
+          /* @__PURE__ */ jsx51(TableCell, { children: "PayPal" }),
+          /* @__PURE__ */ jsx51(TableCell, { className: "text-right", children: "$150.00" })
         ] }),
-        /* @__PURE__ */ jsxs35(TableRow, { children: [
-          /* @__PURE__ */ jsx50(TableCell, { children: "INV003" }),
-          /* @__PURE__ */ jsx50(TableCell, { children: /* @__PURE__ */ jsx50(Badge, { color: "error", variant: "outlined", children: "Failed" }) }),
-          /* @__PURE__ */ jsx50(TableCell, { children: "Bank Transfer" }),
-          /* @__PURE__ */ jsx50(TableCell, { className: "text-right", children: "$350.00" })
+        /* @__PURE__ */ jsxs36(TableRow, { children: [
+          /* @__PURE__ */ jsx51(TableCell, { children: "INV003" }),
+          /* @__PURE__ */ jsx51(TableCell, { children: /* @__PURE__ */ jsx51(Badge, { color: "error", variant: "outlined", children: "Failed" }) }),
+          /* @__PURE__ */ jsx51(TableCell, { children: "Bank Transfer" }),
+          /* @__PURE__ */ jsx51(TableCell, { className: "text-right", children: "$350.00" })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Pagination", children: /* @__PURE__ */ jsx50(PaginationNamespace, { children: /* @__PURE__ */ jsxs35(PaginationContent, { children: [
-      /* @__PURE__ */ jsx50(PaginationItem, { children: /* @__PURE__ */ jsx50(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
-      /* @__PURE__ */ jsx50(PaginationItem, { children: /* @__PURE__ */ jsx50(PaginationLink, { isActive: true, children: "1" }) }),
-      /* @__PURE__ */ jsx50(PaginationItem, { children: /* @__PURE__ */ jsx50(PaginationLink, { children: "2" }) }),
-      /* @__PURE__ */ jsx50(PaginationItem, { children: /* @__PURE__ */ jsx50(PaginationLink, { children: "3" }) }),
-      /* @__PURE__ */ jsx50(PaginationItem, { children: /* @__PURE__ */ jsx50(PaginationEllipsis, {}) }),
-      /* @__PURE__ */ jsx50(PaginationItem, { children: /* @__PURE__ */ jsx50(PaginationNext, { onClick: () => console.log("Next") }) })
+    /* @__PURE__ */ jsx51(Section, { title: "Pagination", children: /* @__PURE__ */ jsx51(PaginationNamespace, { children: /* @__PURE__ */ jsxs36(PaginationContent, { children: [
+      /* @__PURE__ */ jsx51(PaginationItem, { children: /* @__PURE__ */ jsx51(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
+      /* @__PURE__ */ jsx51(PaginationItem, { children: /* @__PURE__ */ jsx51(PaginationLink, { isActive: true, children: "1" }) }),
+      /* @__PURE__ */ jsx51(PaginationItem, { children: /* @__PURE__ */ jsx51(PaginationLink, { children: "2" }) }),
+      /* @__PURE__ */ jsx51(PaginationItem, { children: /* @__PURE__ */ jsx51(PaginationLink, { children: "3" }) }),
+      /* @__PURE__ */ jsx51(PaginationItem, { children: /* @__PURE__ */ jsx51(PaginationEllipsis, {}) }),
+      /* @__PURE__ */ jsx51(PaginationItem, { children: /* @__PURE__ */ jsx51(PaginationNext, { onClick: () => console.log("Next") }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-8", children: [
-      /* @__PURE__ */ jsxs35("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx50(Spinner2, { size: "sm" }),
-        /* @__PURE__ */ jsx50("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
+    /* @__PURE__ */ jsx51(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx51(Spinner2, { size: "sm" }),
+        /* @__PURE__ */ jsx51("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx50(Spinner2, { size: "default" }),
-        /* @__PURE__ */ jsx50("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
+      /* @__PURE__ */ jsxs36("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx51(Spinner2, { size: "default" }),
+        /* @__PURE__ */ jsx51("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx50(Spinner2, { size: "lg" }),
-        /* @__PURE__ */ jsx50("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
+      /* @__PURE__ */ jsxs36("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx51(Spinner2, { size: "lg" }),
+        /* @__PURE__ */ jsx51("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Separator", children: /* @__PURE__ */ jsxs35("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx50("p", { className: "text-foreground", children: "Content above separator" }),
-      /* @__PURE__ */ jsx50(Separator, {}),
-      /* @__PURE__ */ jsx50("p", { className: "text-foreground", children: "Content below separator" }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center h-10", children: [
-        /* @__PURE__ */ jsx50("span", { className: "text-foreground", children: "Left" }),
-        /* @__PURE__ */ jsx50(Separator, { orientation: "vertical", className: "mx-4" }),
-        /* @__PURE__ */ jsx50("span", { className: "text-foreground", children: "Right" })
+    /* @__PURE__ */ jsx51(Section, { title: "Separator", children: /* @__PURE__ */ jsxs36("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx51("p", { className: "text-foreground", children: "Content above separator" }),
+      /* @__PURE__ */ jsx51(Separator, {}),
+      /* @__PURE__ */ jsx51("p", { className: "text-foreground", children: "Content below separator" }),
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center h-10", children: [
+        /* @__PURE__ */ jsx51("span", { className: "text-foreground", children: "Left" }),
+        /* @__PURE__ */ jsx51(Separator, { orientation: "vertical", className: "mx-4" }),
+        /* @__PURE__ */ jsx51("span", { className: "text-foreground", children: "Right" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx50(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx50("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
-      /* @__PURE__ */ jsx50("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
-      /* @__PURE__ */ jsx50("p", { className: "text-accent", children: "text-accent - Accent color" }),
-      /* @__PURE__ */ jsx50("p", { className: "text-destructive", children: "text-destructive - Destructive color" })
+    /* @__PURE__ */ jsx51(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs36("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx51("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
+      /* @__PURE__ */ jsx51("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
+      /* @__PURE__ */ jsx51("p", { className: "text-accent", children: "text-accent - Accent color" }),
+      /* @__PURE__ */ jsx51("p", { className: "text-destructive", children: "text-destructive - Destructive color" })
     ] }) })
   ] }) });
 };
-var Playground = () => /* @__PURE__ */ jsx50(ThemeProvider, { defaultTheme: "light", children: /* @__PURE__ */ jsx50(PlaygroundContent, {}) });
+var Playground = () => /* @__PURE__ */ jsx51(ThemeProvider, { defaultTheme: "light", children: /* @__PURE__ */ jsx51(PlaygroundContent, {}) });
 export {
   Accordion,
   AccordionContent,
@@ -11023,6 +11108,15 @@ export {
   PaginationPrevious,
   PieChart,
   Playground,
+  Popover,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+  Popper,
   Progress,
   ProgressCard,
   ProgressDonut,