warqadui 0.0.4 → 0.0.6

package/packages/ui/dist/index.mjs

@@ -0,0 +1,2249 @@
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = ({
+  children,
+  className,
+  variant = "primary",
+  size = "md",
+  isLoading,
+  icon,
+  ...props
+}) => {
+  const variants = {
+    primary: "bg-[#007AFF] text-white hover:bg-[#0071e3] active:scale-[0.98] active:opacity-90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus:ring-[#007AFF]",
+    secondary: "bg-[#F5F5F7] text-[#1D1D1F] hover:bg-[#E8E8ED] dark:bg-[#FFFFFF]/10 dark:text-[#F5F5F7] dark:hover:bg-[#FFFFFF]/15 active:scale-[0.98] focus:ring-gray-400",
+    outline: "border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/50 backdrop-blur-md text-[#1D1D1F] dark:text-white hover:bg-gray-50 dark:hover:bg-gray-900 active:scale-[0.98] focus:ring-gray-400",
+    ghost: "bg-transparent text-[#007AFF] hover:bg-[#007AFF]/10 active:scale-[0.98] focus:ring-[#007AFF]",
+    danger: "bg-[#FF3B30] text-white hover:bg-[#E03126] active:scale-[0.98] active:opacity-90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus:ring-[#FF3B30]",
+    warning: "bg-[#FF9500] text-white hover:bg-[#E68600] active:scale-[0.98] active:opacity-90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus:ring-[#FF9500]"
+  };
+  const sizes = {
+    sm: "px-3 py-1.5 text-sm rounded-[10px] gap-1.5 font-medium",
+    md: "px-5 py-2.5 rounded-[12px] gap-2 font-medium tracking-tight",
+    lg: "px-7 py-3.5 text-lg rounded-[16px] font-semibold tracking-tight gap-2.5"
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "inline-flex items-center justify-center transition-all duration-200 ease-out focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:opacity-50 select-none cursor-pointer disabled:cursor-not-allowed",
+        variants[variant],
+        sizes[size],
+        className
+      ),
+      disabled: isLoading || props.disabled,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "animate-spin -ml-1 mr-2 h-4 w-4",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ) : icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+// src/components/DashboardLayout.tsx
+import { useState, useEffect, useRef } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Menu, ChevronDown, ChevronRight } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var useMediaQuery = (query) => {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [matches, query]);
+  return matches;
+};
+var isPathActive = (navPath, currentPath) => {
+  if (!navPath || !currentPath) return false;
+  return currentPath === navPath || navPath !== "/" && currentPath.startsWith(`${navPath}/`);
+};
+var SidebarItem = ({
+  item,
+  isActive,
+  isChildActive,
+  onClick,
+  isExpanded,
+  onToggleExpand,
+  isSidebarCollapsed
+}) => {
+  const hasSubItems = item.subItems && item.subItems.length > 0;
+  const shouldHighlight = isActive || hasSubItems && isExpanded || isChildActive;
+  return /* @__PURE__ */ jsxs2("div", { className: "mb-1 group relative ", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        onClick: item.disabled ? void 0 : hasSubItems ? onToggleExpand : onClick,
+        disabled: item.disabled,
+        title: isSidebarCollapsed ? item.label : void 0,
+        className: cn(
+          "w-full flex items-center py-2.5 rounded-xl text-sm font-medium transition-all duration-200",
+          isSidebarCollapsed ? "justify-center px-2" : "justify-between px-3",
+          shouldHighlight && !item.disabled ? "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
+          item.disabled && "opacity-50 cursor-not-allowed grayscale-[0.5]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-3 overflow-hidden",
+                isSidebarCollapsed ? "justify-center w-full" : ""
+              ),
+              children: [
+                item.icon && /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    className: cn(
+                      "flex-shrink-0 transition-colors [&_svg]:w-4 [&_svg]:h-4",
+                      shouldHighlight && !item.disabled ? "text-blue-600 dark:text-blue-400" : "text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400",
+                      item.disabled && "group-hover:text-gray-400"
+                    ),
+                    children: item.icon
+                  }
+                ),
+                /* @__PURE__ */ jsx2(AnimatePresence, { children: !isSidebarCollapsed && /* @__PURE__ */ jsx2(
+                  motion.span,
+                  {
+                    initial: { opacity: 0, width: 0 },
+                    animate: { opacity: 1, width: "auto" },
+                    exit: { opacity: 0, width: 0 },
+                    transition: { duration: 0.2 },
+                    className: "truncate",
+                    children: item.label
+                  }
+                ) })
+              ]
+            }
+          ),
+          !isSidebarCollapsed && hasSubItems && /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: cn(
+                "flex-shrink-0 ml-2 transition-transform duration-200",
+                shouldHighlight ? "text-blue-500" : "text-gray-400"
+              ),
+              children: isExpanded ? /* @__PURE__ */ jsx2(ChevronDown, { size: 16 }) : /* @__PURE__ */ jsx2(ChevronRight, { size: 16 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: !isSidebarCollapsed && hasSubItems && isExpanded && !item.disabled && /* @__PURE__ */ jsx2(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.2 },
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsxs2("div", { className: "relative ml-6 mt-1 space-y-1", children: [
+          /* @__PURE__ */ jsx2("div", { className: "absolute left-0 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-800" }),
+          item.subItems.filter((sub) => !!sub && !sub.hidden).map((subItem, index) => /* @__PURE__ */ jsx2(
+            SubItem,
+            {
+              item: subItem,
+              parentDisabled: item.disabled
+            },
+            index
+          ))
+        ] })
+      }
+    ) })
+  ] });
+};
+var SubItem = ({
+  item,
+  parentDisabled
+}) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const isActive = isPathActive(item.path, location.pathname);
+  const isDisabled = item.disabled || parentDisabled;
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      onClick: () => !isDisabled && item.path && navigate(item.path),
+      disabled: isDisabled,
+      className: cn(
+        "relative w-full flex items-center px-3 py-2 pl-6 rounded-lg text-sm transition-colors duration-200",
+        isActive && !isDisabled ? "bg-blue-100/50 text-blue-700 font-medium dark:bg-blue-900/30 dark:text-blue-400" : "text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
+        isDisabled && "opacity-50 cursor-not-allowed grayscale-[0.5]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "truncate", children: item.label }),
+        isActive && !isDisabled && /* @__PURE__ */ jsx2("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-blue-500 rounded-r-full" })
+      ]
+    }
+  );
+};
+var DashboardLayout = ({
+  children,
+  navItems,
+  title = "Dashboard",
+  logo,
+  userProfile,
+  fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"'
+  // Humanist System Stack
+}) => {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [expandedMenus, setExpandedMenus] = useState(
+    () => {
+      const initialState = {};
+      navItems.forEach((item) => {
+        if (item && !item.hidden && !item.disabled && item.subItems?.some(
+          (sub) => sub && !sub.hidden && isPathActive(sub.path, location.pathname)
+        )) {
+          initialState[item.label] = true;
+        }
+      });
+      return initialState;
+    }
+  );
+  const prevPathRef = useRef(location.pathname);
+  useEffect(() => {
+    if (prevPathRef.current !== location.pathname) {
+      const activeItem = navItems.find(
+        (item) => !!item && !item.hidden && !item.disabled && item.subItems?.some(
+          (sub) => sub && !sub.hidden && isPathActive(sub.path, location.pathname)
+        ) === true
+      );
+      if (activeItem) {
+        setExpandedMenus((prev) => ({ ...prev, [activeItem.label]: true }));
+      }
+      prevPathRef.current = location.pathname;
+    }
+  }, [location.pathname, navItems]);
+  const isCollapsed = isDesktop && !isSidebarOpen;
+  useEffect(() => {
+    if (!isDesktop) {
+      setIsSidebarOpen(false);
+    } else {
+      setIsSidebarOpen(true);
+    }
+  }, [isDesktop]);
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+  const toggleMenu = (label) => {
+    if (isCollapsed) {
+      setIsSidebarOpen(true);
+      setTimeout(() => {
+        setExpandedMenus((prev) => {
+          const isCurrentlyOpen = !!prev[label];
+          return isCurrentlyOpen ? {} : { [label]: true };
+        });
+      }, 50);
+      return;
+    }
+    setExpandedMenus((prev) => {
+      const isCurrentlyOpen = !!prev[label];
+      return isCurrentlyOpen ? {} : { [label]: true };
+    });
+  };
+  const sidebarVariants = {
+    desktopOpen: {
+      width: "16rem",
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    },
+    desktopClosed: {
+      width: "5rem",
+      // Mini Sidebar Width
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    },
+    mobileOpen: {
+      x: 0,
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    },
+    mobileClosed: {
+      x: "-100%",
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "min-h-screen bg-gray-50 dark:bg-[#0B0F1A] text-slate-900 dark:text-slate-100 flex transition-colors duration-500 font-sans overflow-hidden",
+      style: { fontFamily },
+      children: [
+        /* @__PURE__ */ jsx2(AnimatePresence, { children: !isDesktop && isSidebarOpen && /* @__PURE__ */ jsx2(
+          motion.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 0.5 },
+            exit: { opacity: 0 },
+            onClick: () => setIsSidebarOpen(false),
+            className: "fixed inset-0 bg-black/50 z-40 lg:hidden backdrop-blur-sm"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs2(
+          motion.aside,
+          {
+            className: "fixed lg:relative inset-y-0 left-0 z-50 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col h-screen",
+            initial: isDesktop ? "desktopOpen" : "mobileClosed",
+            animate: isDesktop ? isSidebarOpen ? "desktopOpen" : "desktopClosed" : isSidebarOpen ? "mobileOpen" : "mobileClosed",
+            variants: sidebarVariants,
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: cn(
+                    "h-16 flex items-center border-b border-gray-100 dark:border-gray-800 flex-shrink-0 overflow-hidden transition-all duration-300",
+                    isCollapsed ? "justify-center px-0" : "px-6"
+                  ),
+                  children: /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 text-blue-600 dark:text-blue-400", children: isCollapsed ? logo : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                    logo,
+                    /* @__PURE__ */ jsx2("span", { className: "font-bold text-lg tracking-tight text-gray-900 dark:text-white", children: title })
+                  ] }) })
+                }
+              ),
+              /* @__PURE__ */ jsx2("div", { className: "flex-1 p-4 overflow-y-auto overflow-x-hidden scrollbar-hide", children: /* @__PURE__ */ jsx2("nav", { className: "space-y-1", children: navItems.filter((item) => !!item && !item.hidden).map((item) => {
+                const isActive = isPathActive(item.path, location.pathname);
+                const isChildActive = item.subItems?.some(
+                  (sub) => sub && !sub.hidden && isPathActive(sub.path, location.pathname)
+                );
+                const isExpanded = expandedMenus[item.label];
+                return /* @__PURE__ */ jsx2(
+                  SidebarItem,
+                  {
+                    item,
+                    isActive,
+                    isChildActive: !!isChildActive,
+                    isExpanded: !!isExpanded,
+                    isSidebarCollapsed: !!isCollapsed,
+                    onClick: () => {
+                      if (item.path) navigate(item.path);
+                      if (isCollapsed && !item.path) {
+                        setIsSidebarOpen(true);
+                      }
+                    },
+                    onToggleExpand: () => toggleMenu(item.label)
+                  },
+                  item.label
+                );
+              }) }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex flex-col min-w-0 h-screen overflow-hidden", children: [
+          /* @__PURE__ */ jsxs2("header", { className: "sticky top-0 z-30 h-16 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 px-4 sm:px-6 flex items-center justify-between flex-shrink-0", children: [
+            /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: toggleSidebar,
+                className: "p-2 -ml-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 transition-colors",
+                children: /* @__PURE__ */ jsx2(Menu, { size: 20 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2", children: userProfile && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx2("div", { className: "w-px h-6 mx-2 bg-gray-200 dark:bg-gray-800" }),
+              userProfile
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx2("main", { className: "flex-1 p-2 md:p-4 overflow-y-auto", children: /* @__PURE__ */ jsx2("div", { className: "max-w-7xl mx-auto", children }) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/ThemeToggle.tsx
+import { Sun, Moon } from "lucide-react";
+
+// src/hooks/ThemeContext.tsx
+import {
+  createContext,
+  useContext,
+  useState as useState2,
+  useEffect as useEffect2
+} from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ThemeContext = createContext(void 0);
+var ThemeProvider = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState2(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme");
+      if (savedTheme) {
+        return savedTheme === "dark";
+      }
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return false;
+  });
+  useEffect2(() => {
+    const root = window.document.documentElement;
+    if (isDarkMode) {
+      root.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      root.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  }, [isDarkMode]);
+  const toggleTheme = () => setIsDarkMode((prev) => !prev);
+  const setTheme = (theme) => setIsDarkMode(theme === "dark");
+  return /* @__PURE__ */ jsx3(ThemeContext.Provider, { value: { isDarkMode, toggleTheme, setTheme }, children });
+};
+var useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+
+// src/components/ThemeToggle.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ThemeToggle = ({
+  className
+}) => {
+  const { isDarkMode, toggleTheme } = useTheme();
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      onClick: toggleTheme,
+      className: cn(
+        "p-2 rounded-lg transition-all duration-200",
+        "text-slate-500 hover:text-blue-600 hover:bg-slate-100",
+        "dark:text-yellow-400 dark:hover:text-yellow-300 dark:hover:bg-slate-800",
+        className
+      ),
+      "aria-label": "Toggle dark mode",
+      children: isDarkMode ? /* @__PURE__ */ jsx4(
+        Sun,
+        {
+          size: 20,
+          className: "stroke-2 transition-transform duration-300 rotate-0 scale-100"
+        }
+      ) : /* @__PURE__ */ jsx4(
+        Moon,
+        {
+          size: 20,
+          className: "stroke-2 transition-transform duration-300 rotate-0 scale-100"
+        }
+      )
+    }
+  );
+};
+
+// src/hooks/useTheme.ts
+import { useState as useState3, useEffect as useEffect3 } from "react";
+
+// src/components/LoadingBox.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LoadingBox = () => {
+  return /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx5("div", { className: "animate-spin rounded-full h-32 w-32 border-b-2 border-primary", children: "aaa" }) }) });
+};
+
+// src/components/spins/ClassicSpin.tsx
+import { Loader2 } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var ClassicSpin = ({ msg = "Please wait..." }) => {
+  return /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 z-50 flex flex-col items-center justify-center bg-white/30 dark:bg-zinc-900/30 backdrop-blur-[0.5px] transition-all duration-200", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center p-6 bg-white dark:bg-zinc-800 rounded-2xl shadow-2xl border border-gray-100 dark:border-zinc-700 animate-in zoom-in-95 duration-200", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx6("div", { className: "absolute inset-0 bg-indigo-500 blur-lg opacity-20 animate-pulse" }),
+      /* @__PURE__ */ jsx6(Loader2, { className: "h-8 w-8 animate-spin text-indigo-600 dark:text-indigo-400 relative z-10" })
+    ] }),
+    /* @__PURE__ */ jsx6("p", { className: "mt-3 text-sm font-medium text-gray-900 dark:text-white", children: msg })
+  ] }) });
+};
+
+// src/components/spins/OverlaySpin.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var OverlaySpin = ({ msg = "Processing..." }) => /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-[1px] z-50 flex items-center justify-center rounded-xl transition-all duration-300", children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-2 bg-white dark:bg-zinc-800 p-4 rounded-xl shadow-xl border border-gray-100 dark:border-zinc-700", children: [
+  /* @__PURE__ */ jsx7("div", { className: "w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
+  /* @__PURE__ */ jsx7("span", { className: "text-xs font-medium text-gray-500 animate-pulse", children: msg })
+] }) });
+
+// src/components/spins/LoadingSpin.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var LoadingSpin = ({
+  className,
+  size = "md",
+  color = "text-current"
+}) => {
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    md: "h-6 w-6",
+    lg: "h-10 w-10"
+  };
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      className: cn("animate-spin", sizeClasses[size], color, className),
+      fill: "none",
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx8(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/CodeBlock.tsx
+import { useState as useState4 } from "react";
+import { Check, Copy } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var CodeBlock = ({
+  code,
+  language = "tsx",
+  className
+}) => {
+  const [copied, setCopied] = useState4(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        "relative group rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-black/50 backdrop-blur-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-gray-800", children: [
+          /* @__PURE__ */ jsx9("span", { className: "text-[10px] font-bold uppercase tracking-widest text-gray-400", children: language }),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              onClick: handleCopy,
+              className: "p-1.5 rounded-lg text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white dark:hover:bg-zinc-800 transition-all duration-200",
+              children: copied ? /* @__PURE__ */ jsx9(Check, { size: 14, className: "text-green-500" }) : /* @__PURE__ */ jsx9(Copy, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "p-4 overflow-x-auto", children: /* @__PURE__ */ jsx9("pre", { className: "text-sm font-mono leading-relaxed text-gray-800 dark:text-gray-300", children: code }) })
+      ]
+    }
+  );
+};
+
+// src/components/Card.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Card = ({
+  children,
+  className,
+  variant = "default",
+  ...props
+}) => {
+  const variants = {
+    default: "bg-white dark:bg-zinc-900 border-gray-200 dark:border-zinc-800 shadow-sm",
+    flat: "bg-gray-50/50 dark:bg-zinc-950/50 border-gray-100 dark:border-zinc-900",
+    glass: "bg-white/70 dark:bg-black/40 backdrop-blur-md border-white/20 dark:border-white/5 shadow-xl"
+  };
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn(
+        "rounded-[2rem] border p-6 transition-all duration-300",
+        variants[variant],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var CardHeader = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx10("div", { className: cn("mb-4 space-y-1.5", className), children });
+var CardTitle = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx10(
+  "h3",
+  {
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight text-gray-900 dark:text-gray-100",
+      className
+    ),
+    children
+  }
+);
+var CardDescription = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx10("p", { className: cn("text-sm text-gray-500 dark:text-gray-400", className), children });
+var CardContent = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx10("div", { className: cn("", className), children });
+var CardFooter = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx10("div", { className: cn("mt-6 flex items-center pt-0", className), children });
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Content = CardContent;
+Card.Footer = CardFooter;
+
+// src/components/modal/Modal.tsx
+import { X } from "lucide-react";
+import { motion as motion2, AnimatePresence as AnimatePresence2 } from "framer-motion";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  isLoading = false,
+  width = 500
+}) => {
+  return /* @__PURE__ */ jsx11(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs7("div", { className: "fixed inset-0 z-[1000] flex items-center justify-center p-4 sm:p-6", children: [
+    /* @__PURE__ */ jsx11(
+      motion2.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        onClick: isLoading ? void 0 : onClose,
+        className: "fixed inset-0 bg-black/40 backdrop-blur-sm transition-all"
+      }
+    ),
+    /* @__PURE__ */ jsxs7(
+      motion2.div,
+      {
+        initial: { opacity: 0, scale: 0.95, y: 10 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.95, y: 10 },
+        transition: { type: "spring", duration: 0.3 },
+        style: { maxWidth: width },
+        className: "w-full bg-white dark:bg-zinc-900 rounded-[2rem] shadow-2xl border border-gray-200 dark:border-white/5 overflow-hidden relative z-10 flex flex-col max-h-[90vh]",
+        children: [
+          /* @__PURE__ */ jsxs7("div", { className: "px-8 py-5 border-b border-gray-100 dark:border-white/5 flex items-center justify-between bg-white/50 dark:bg-zinc-900/50 backdrop-blur-xl sticky top-0 z-20", children: [
+            /* @__PURE__ */ jsx11("h3", { className: "text-xl font-bold text-gray-900 dark:text-white tracking-tight", children: title }),
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                onClick: onClose,
+                disabled: isLoading,
+                className: "p-2 -mr-2 rounded-full text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/5 transition-all disabled:opacity-50",
+                children: /* @__PURE__ */ jsx11(X, { size: 20 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx11("div", { className: "absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-indigo-600 to-purple-500 opacity-60" }),
+          /* @__PURE__ */ jsxs7("div", { className: "p-8 overflow-y-auto relative flex-1", children: [
+            isLoading && /* @__PURE__ */ jsx11(ClassicSpin, {}),
+            /* @__PURE__ */ jsx11(
+              "div",
+              {
+                className: isLoading ? "opacity-20 blur-sm transition-all" : "transition-all",
+                children
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+};
+
+// src/components/PageHeader.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var PageHeader = ({
+  title,
+  description,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs8("div", { className: cn("space-y-2 mb-8", className), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx12("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white tracking-tight", children: title }),
+      children
+    ] }),
+    description && /* @__PURE__ */ jsx12("p", { className: "text-gray-500 dark:text-gray-400 max-w-2xl leading-relaxed", children: description })
+  ] });
+};
+
+// src/hooks/useModal.tsx
+import { useState as useState5, useCallback } from "react";
+var useModal = (initialState = false) => {
+  const [isOpen, setIsOpen] = useState5(initialState);
+  const [state, setState] = useState5(null);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    setState(null);
+  }, []);
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+  const openState = useCallback((data) => {
+    setState(data);
+    open();
+  }, []);
+  return {
+    isOpen,
+    open,
+    close,
+    toggle,
+    openState,
+    state,
+    Modal
+  };
+};
+
+// src/components/Fields/Input.tsx
+import { forwardRef, useEffect as useEffect4, useState as useState6 } from "react";
+import { Eye, EyeOff } from "lucide-react";
+
+// src/providers/WarqadProvider.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var WarqadConfigContext = createContext2(
+  void 0
+);
+var useWarqadConfig = () => {
+  const context = useContext2(WarqadConfigContext);
+  if (context === void 0) {
+    throw new Error("useWarqadConfig must be used within a WarqadProvider");
+  }
+  return context.config;
+};
+var WarqadProvider = ({
+  children,
+  config = { apiUrl: "/api" }
+}) => {
+  const mergedConfig = {
+    apiUrl: "/api",
+    ...config,
+    theme: {
+      primaryColor: "#3b82f6",
+      // Default blue-500
+      ...config?.theme
+    }
+  };
+  return /* @__PURE__ */ jsx13(WarqadConfigContext.Provider, { value: { config: mergedConfig }, children: /* @__PURE__ */ jsx13(ThemeProvider, { children: /* @__PURE__ */ jsx13(
+    "div",
+    {
+      style: {
+        "--primary-color": mergedConfig.theme?.primaryColor
+      },
+      children
+    }
+  ) }) });
+};
+
+// src/components/Fields/Input.tsx
+import {
+  Controller
+} from "react-hook-form";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var Input = forwardRef(
+  ({
+    label,
+    icon,
+    error,
+    containerClassName = "",
+    name,
+    form,
+    onFocus,
+    onBlur,
+    className = "",
+    type,
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = useState6(false);
+    const [showPassword, setShowPassword] = useState6(false);
+    const { theme } = useWarqadConfig();
+    const primaryColor = theme?.primaryColor;
+    let message = error;
+    if (form && name) {
+      const {
+        formState: { errors }
+      } = form;
+      const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
+      message = errorObj?.message;
+    }
+    useEffect4(() => {
+      if (form && name) {
+        form.clearErrors("root");
+      }
+    }, [form?.watch(name)]);
+    const renderInput = (inputProps, localType = type || "text") => /* @__PURE__ */ jsxs9("div", { className: `space-y-2 group ${containerClassName}`, children: [
+      /* @__PURE__ */ jsxs9(
+        "label",
+        {
+          htmlFor: props.id,
+          className: `block capitalize text-xs font-medium transition-colors duration-200`,
+          style: { color: isFocused ? primaryColor : void 0 },
+          children: [
+            label,
+            props.required && /* @__PURE__ */ jsx14("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ jsx14("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: `transition-colors duration-200`,
+            style: { color: isFocused ? primaryColor : "#9ca3af" },
+            children: icon
+          }
+        ) }),
+        /* @__PURE__ */ jsx14(
+          "input",
+          {
+            ref,
+            onFocus: (e) => {
+              setIsFocused(true);
+              onFocus?.(e);
+            },
+            onBlur: (e) => {
+              setIsFocused(false);
+              onBlur?.(e);
+            },
+            className: `block w-full ${icon ? "pl-10" : "pl-3"} pr-3 h-8 py-0 rounded-lg border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-900/50 text-gray-900 dark:text-white placeholder-gray-400 focus:bg-white dark:focus:bg-zinc-900 outline-none transition-all duration-200 border text-sm ${className}`,
+            style: {
+              borderColor: isFocused ? primaryColor : void 0,
+              boxShadow: isFocused ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+            },
+            ...props,
+            ...inputProps,
+            type: localType === "password" ? showPassword ? "text" : "password" : localType
+          }
+        ),
+        type === "password" && /* @__PURE__ */ jsx14(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowPassword(!showPassword),
+            className: "absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors focus:outline-none cursor-pointer",
+            tabIndex: -1,
+            children: showPassword ? /* @__PURE__ */ jsx14(EyeOff, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx14(Eye, { className: "h-5 w-5" })
+          }
+        )
+      ] }),
+      message && /* @__PURE__ */ jsx14("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+    ] });
+    if (form && name && type === "number") {
+      return /* @__PURE__ */ jsx14(
+        Controller,
+        {
+          control: form.control,
+          name,
+          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => renderInput(
+            {
+              ref: fieldRef,
+              onBlur: () => {
+                onBlur2();
+              },
+              value: value ? String(value).split(".").map(
+                (part, index) => index === 0 ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : part
+              ).join(".") : "",
+              onChange: (e) => {
+                const rawValue = e.target.value.replace(/,/g, "");
+                if (!/^\d*\.?\d*$/.test(rawValue)) return;
+                if (rawValue === "") {
+                  onChange("");
+                } else {
+                  const numValue = Number(rawValue);
+                  if (!isNaN(numValue) && String(numValue) === rawValue) {
+                    onChange(numValue);
+                  } else {
+                    onChange(rawValue);
+                  }
+                }
+                props.onChange?.(e);
+              }
+            },
+            "text"
+          )
+        }
+      );
+    }
+    return renderInput(
+      form && name ? form.register(name, type === "number" ? { valueAsNumber: true } : {}) : {}
+    );
+  }
+);
+
+// src/components/Fields/PhoneInput.tsx
+import { forwardRef as forwardRef2, useState as useState7 } from "react";
+import PhoneInputOriginal, {
+  isValidPhoneNumber
+} from "react-phone-number-input";
+import "react-phone-number-input/style.css";
+import { Controller as Controller2 } from "react-hook-form";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var PhoneInput = forwardRef2(
+  ({
+    label,
+    icon,
+    error,
+    containerClassName = "",
+    name,
+    form,
+    onChange,
+    value,
+    className = "",
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = useState7(false);
+    const { theme } = useWarqadConfig();
+    const primaryColor = theme?.primaryColor;
+    let message = error;
+    if (form && name) {
+      const {
+        formState: { errors }
+      } = form;
+      const nameParts = name.split(".");
+      let currentError = errors;
+      for (const part of nameParts) {
+        currentError = currentError?.[part];
+      }
+      message = currentError?.message || message;
+    }
+    const renderInput = (onChangeHandler, currentValue) => /* @__PURE__ */ jsxs10("div", { className: `space-y-2 group ${containerClassName}`, children: [
+      /* @__PURE__ */ jsxs10(
+        "label",
+        {
+          className: `block text-xs font-medium transition-colors duration-200`,
+          style: {
+            color: isFocused || currentValue ? primaryColor : void 0
+          },
+          children: [
+            label,
+            props.required && /* @__PURE__ */ jsx15("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ jsx15("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none z-10", children: /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: `transition-colors duration-200`,
+            style: { color: isFocused ? primaryColor : "#9ca3af" },
+            children: icon
+          }
+        ) }),
+        /* @__PURE__ */ jsx15(
+          PhoneInputOriginal,
+          {
+            ref,
+            defaultCountry: "KE",
+            international: true,
+            withCountryCallingCode: true,
+            value: currentValue,
+            onChange: (val) => onChangeHandler(val),
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            className: `block w-full rounded-lg border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-900/50 text-gray-900 dark:text-white placeholder-gray-400 focus-within:bg-white dark:focus-within:bg-zinc-900 outline-none transition-all duration-200 border [&_.PhoneInputInput]:bg-transparent [&_.PhoneInputInput]:outline-none [&_.PhoneInputInput]:text-sm [&_.PhoneInputCountry]:mr-2 ${icon ? "pl-10" : "pl-3"} pr-3 h-8 py-0 ${className}`,
+            style: {
+              borderColor: isFocused ? primaryColor : void 0,
+              boxShadow: isFocused ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+            },
+            ...props
+          }
+        )
+      ] }),
+      message && /* @__PURE__ */ jsx15("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+    ] });
+    if (form && name) {
+      return /* @__PURE__ */ jsx15(
+        Controller2,
+        {
+          name,
+          control: form.control,
+          rules: {
+            validate: (value2) => value2 && isValidPhoneNumber(value2) ? true : "Invalid phone number"
+          },
+          render: ({ field: { onChange: onChange2, value: value2 } }) => renderInput(onChange2, value2)
+        }
+      );
+    }
+    return renderInput(onChange || (() => {
+    }), value || "");
+  }
+);
+PhoneInput.displayName = "PhoneInput";
+
+// src/components/Fields/select.tsx
+import { forwardRef as forwardRef3, useState as useState8 } from "react";
+import { ChevronDown as ChevronDown2 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var Select = forwardRef3(
+  ({
+    label,
+    options,
+    icon,
+    error,
+    containerClassName = "",
+    name,
+    form,
+    onChange,
+    onFocus,
+    onBlur,
+    className = "",
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = useState8(false);
+    const { theme } = useWarqadConfig();
+    const primaryColor = theme?.primaryColor;
+    let message = error;
+    if (form) {
+      const {
+        formState: { errors }
+      } = form;
+      const nameI = name.split(".");
+      const names = nameI.length > 1 ? nameI[1] : nameI[0];
+      message = errors?.[names ? names : name]?.message;
+    }
+    return /* @__PURE__ */ jsxs11("div", { className: `space-y-2 group ${containerClassName}`, children: [
+      /* @__PURE__ */ jsxs11(
+        "label",
+        {
+          htmlFor: props.id,
+          className: `block text-xs font-medium transition-colors duration-200`,
+          style: { color: isFocused ? primaryColor : void 0 },
+          children: [
+            label,
+            props.required && /* @__PURE__ */ jsx16("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
+        icon && /* @__PURE__ */ jsx16("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: `transition-colors duration-200`,
+            style: { color: isFocused ? primaryColor : "#9ca3af" },
+            children: icon
+          }
+        ) }),
+        /* @__PURE__ */ jsxs11(
+          "select",
+          {
+            ref,
+            onFocus: (e) => {
+              setIsFocused(true);
+              onFocus?.(e);
+            },
+            ...form ? form.register(name) : {},
+            onBlur: (e) => {
+              setIsFocused(false);
+              onBlur?.(e);
+            },
+            onChange: (e) => {
+              onChange?.(e.target.value);
+              if (form) {
+                form.setValue(name, e.target.value);
+              }
+            },
+            className: `block w-full ${icon ? "pl-10" : "pl-3"} pr-10 h-8 py-0 rounded-lg border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-900/50 text-gray-900 dark:text-white placeholder-gray-400 focus:bg-white dark:focus:bg-zinc-900 outline-none transition-all duration-200 border appearance-none text-sm ${className}`,
+            style: {
+              borderColor: isFocused ? primaryColor : void 0,
+              boxShadow: isFocused ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+            },
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxs11("option", { value: "", disabled: true, children: [
+                "Select ",
+                label
+              ] }),
+              options.map((option) => /* @__PURE__ */ jsx16(
+                "option",
+                {
+                  value: String(option.value),
+                  disabled: option.disabled,
+                  children: option.label
+                },
+                String(option.value)
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx16("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx16(ChevronDown2, { className: "h-4 w-4 text-gray-400" }) })
+      ] }),
+      message && /* @__PURE__ */ jsx16("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+// src/components/Fields/textArea.tsx
+import { forwardRef as forwardRef4, useState as useState9 } from "react";
+import {
+  Controller as Controller3
+} from "react-hook-form";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var Textarea = forwardRef4(
+  ({
+    label,
+    error,
+    containerClassName = "",
+    name,
+    form,
+    onFocus,
+    onBlur,
+    className = "",
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = useState9(false);
+    const { theme } = useWarqadConfig();
+    const primaryColor = theme?.primaryColor;
+    let message = error;
+    if (form && name) {
+      const {
+        formState: { errors }
+      } = form;
+      const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
+      message = errorObj?.message;
+    }
+    const renderInput = (inputProps, ref2) => /* @__PURE__ */ jsxs12("div", { className: `space-y-2 group ${containerClassName}`, children: [
+      /* @__PURE__ */ jsxs12(
+        "label",
+        {
+          htmlFor: props.id,
+          className: `block capitalize text-xs font-medium transition-colors duration-200`,
+          style: { color: isFocused ? primaryColor : void 0 },
+          children: [
+            label,
+            props.required && /* @__PURE__ */ jsx17("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx17("div", { className: "relative", children: /* @__PURE__ */ jsx17(
+        "textarea",
+        {
+          ref: ref2,
+          onFocus: (e) => {
+            setIsFocused(true);
+            onFocus?.(e);
+          },
+          onBlur: (e) => {
+            setIsFocused(false);
+            onBlur?.(e);
+          },
+          className: `block w-full px-3 py-3 rounded-lg border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-900/50 text-gray-900 dark:text-white placeholder-gray-400 focus:bg-white dark:focus:bg-zinc-900 outline-none transition-all duration-200 border min-h-[100px] resize-none text-sm ${className}`,
+          style: {
+            borderColor: isFocused ? primaryColor : void 0,
+            boxShadow: isFocused ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+          },
+          ...props,
+          ...inputProps
+        }
+      ) }),
+      message && /* @__PURE__ */ jsx17("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+    ] });
+    if (form && name) {
+      return /* @__PURE__ */ jsx17(
+        Controller3,
+        {
+          control: form.control,
+          name,
+          render: ({ field: { onChange, value, ref: fieldRef, onBlur: onBlur2 } }) => renderInput(
+            {
+              value: value || "",
+              // Ensure controlled input doesn't warn about uncontrolled
+              onChange: (e) => {
+                onChange(e);
+                props.onChange?.(e);
+              },
+              onBlur: () => {
+                onBlur2();
+              }
+            },
+            fieldRef
+          )
+        }
+      );
+    }
+    return renderInput({}, ref);
+  }
+);
+
+// src/components/Fields/searchApi.tsx
+import { useState as useState11, useEffect as useEffect5, useRef as useRef2, forwardRef as forwardRef5 } from "react";
+import { Search, Loader2 as Loader22, ChevronDown as ChevronDown3, Check as Check2, X as X2 } from "lucide-react";
+
+// src/hooks/Fetches/useApis.tsx
+import { useState as useState10, useMemo } from "react";
+import axios from "axios";
+var useApi = () => {
+  const { apiUrl } = useWarqadConfig();
+  const api = useMemo(
+    () => axios.create({
+      baseURL: apiUrl || "/api",
+      withCredentials: true
+    }),
+    [apiUrl]
+  );
+  const [data, setData] = useState10();
+  const [isLoading, setIsLoading] = useState10(false);
+  const [pdfLoading, setPdfLoading] = useState10(false);
+  const [error, setError] = useState10(null);
+  const get = async ({ url, v = 1, params, delay }) => {
+    setIsLoading(true);
+    try {
+      if (delay) await new Promise((r) => setTimeout(r, delay));
+      const response = await api.get(`/v${v}${url}`, { params });
+      setData(response.data);
+      setError(null);
+      return response.data;
+    } catch (err) {
+      const msg = err.response?.data?.message || err.message || "Something went wrong";
+      setError(msg);
+      setData(null);
+      throw new Error(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const post = async ({
+    url,
+    v = 1,
+    body,
+    form,
+    multipart = false
+  }) => {
+    setIsLoading(true);
+    try {
+      let response;
+      if (multipart) {
+        const formData = new FormData();
+        if (body) {
+          Object.keys(body).forEach((key) => {
+            if (key === "files") {
+              const files = body[key];
+              if (Array.isArray(files)) {
+                files.forEach((file) => formData.append(key, file));
+              } else {
+                formData.append(key, files);
+              }
+            } else if (Array.isArray(body[key]) || typeof body[key] === "object") {
+              formData.append(key, JSON.stringify(body[key]));
+            } else {
+              formData.append(key, body[key]);
+            }
+          });
+        }
+        response = await api.post(`/v${v}${url}`, formData, {
+          headers: { "Content-Type": "multipart/form-data" }
+        });
+      } else {
+        response = await api.post(`/v${v}${url}`, body);
+      }
+      setData(response.data);
+      return response.data;
+    } catch (err) {
+      const msg = err.response?.data?.message || err.message || "Something went wrong";
+      setError(msg);
+      if (form) {
+        if (msg !== "zodError") {
+          form.setError("root", { message: msg });
+        } else {
+          const errors = err?.response?.data?.errors || [];
+          errors.forEach((e) => {
+            form.setError(e.field, { message: e.message });
+          });
+        }
+      }
+      throw new Error(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const put = async ({ url, v = 1, body }) => {
+    setIsLoading(true);
+    try {
+      const response = await api.put(`/v${v}${url}`, body);
+      setData(response.data);
+      return response.data;
+    } catch (err) {
+      const msg = err.response?.data?.message || err.message || "Something went wrong";
+      setError(msg);
+      throw new Error(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const remove = async ({ url, v = 1, params }) => {
+    setIsLoading(true);
+    try {
+      const response = await api.delete(`/v${v}${url}`, { params });
+      setData(response.data);
+      setError(null);
+      return response.data;
+    } catch (err) {
+      const msg = err.response?.data?.message || err.message || "Something went wrong";
+      setError(msg);
+      setData(null);
+      throw new Error(msg);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const fetchPdf = async ({
+    url,
+    v = 1,
+    method,
+    body
+  }) => {
+    setPdfLoading(true);
+    try {
+      const response = await api.request({
+        url: `/v${v}${url}`,
+        method,
+        data: body,
+        responseType: "blob"
+      });
+      if (!response.data || response.data.size === 0) {
+        return { ok: false, message: "Received empty PDF file", errors: [] };
+      }
+      setError(null);
+      const pdfObjectUrl = URL.createObjectURL(response.data);
+      return { ok: true, data: pdfObjectUrl };
+    } catch (err) {
+      return {
+        ok: false,
+        message: err.response?.data?.message || err.message || "Server error, something went wrong"
+      };
+    } finally {
+      setPdfLoading(false);
+    }
+  };
+  return {
+    data,
+    error,
+    isLoading,
+    pdfLoading,
+    get,
+    post,
+    put,
+    remove,
+    fetchPdf
+  };
+};
+var useApis_default = useApi;
+
+// src/components/Fields/searchApi.tsx
+import { Controller as Controller4 } from "react-hook-form";
+import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var SearchApiContent = ({
+  label,
+  apiUrl,
+  placeholder = "Search...",
+  currentValue,
+  onChangeHandler,
+  queryKey = "search",
+  labelKey = "name",
+  valueKey = "_id",
+  error,
+  containerClassName = "",
+  className = "",
+  disabled,
+  name,
+  obj,
+  form,
+  filter = [],
+  required,
+  v = 2,
+  fieldInternalProps,
+  ...props
+}) => {
+  const [searchTerm, setSearchTerm] = useState11("");
+  const { theme } = useWarqadConfig();
+  const primaryColor = theme?.primaryColor;
+  const [options, setOptions] = useState11([]);
+  const [isOpen, setIsOpen] = useState11(false);
+  const [isFocused, setIsFocused] = useState11(false);
+  const [activeIndex, setActiveIndex] = useState11(-1);
+  const [selectedObject, setSelectedObject] = useState11(void 0);
+  const [hasAttemptedHydration, setHasAttemptedHydration] = useState11(false);
+  const containerRef = useRef2(null);
+  const inputRef = useRef2(null);
+  const prevApiUrlRef = useRef2(apiUrl);
+  const setInputRef = (element) => {
+    inputRef.current = element;
+    if (fieldInternalProps?.ref) {
+      if (typeof fieldInternalProps.ref === "function") {
+        fieldInternalProps.ref(element);
+      } else {
+        fieldInternalProps.ref.current = element;
+      }
+    }
+  };
+  const { get, isLoading, error: errorMessage } = useApis_default();
+  const fetchOptions = async (query) => {
+    try {
+      const params = {};
+      if (query) params[queryKey] = query;
+      const response = await get({
+        url: apiUrl,
+        params,
+        v
+      });
+      if (Array.isArray(response)) {
+        setOptions(response);
+      } else if (response?.data && Array.isArray(response.data)) {
+        setOptions(response.data);
+      } else if (response?.items && Array.isArray(response.items)) {
+        setOptions(response.items);
+      } else {
+        setOptions([]);
+      }
+    } catch (err) {
+      console.error("Failed to fetch options:", err);
+      if (form && name) {
+        form.setError(name, {
+          type: "manual",
+          message: err.message || "Failed to fetch options"
+        });
+      }
+      setOptions([]);
+    }
+  };
+  useEffect5(() => {
+    const timer = setTimeout(() => {
+      if (isOpen) {
+        fetchOptions(searchTerm);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchTerm, apiUrl, isOpen]);
+  useEffect5(() => {
+    if (isOpen && options.length === 0) {
+      fetchOptions("");
+    }
+  }, [isOpen]);
+  useEffect5(() => {
+    if (currentValue && !selectedObject) {
+      setHasAttemptedHydration(false);
+      fetchOptions(currentValue).finally(() => {
+        setHasAttemptedHydration(true);
+      });
+    } else if (!currentValue) {
+      setHasAttemptedHydration(true);
+      if (selectedObject) setSelectedObject(void 0);
+    }
+  }, [currentValue, selectedObject]);
+  const getOptionValue = (option) => {
+    if (valueKey === "_id" && option._id === void 0 && option.id !== void 0) {
+      return option.id;
+    }
+    return option[valueKey];
+  };
+  useEffect5(() => {
+    if (currentValue && !selectedObject && options.length > 0) {
+      const found = options.find((o) => getOptionValue(o) === currentValue);
+      if (found) {
+        setSelectedObject(found);
+        if (form && obj) {
+          form.setValue(obj, found);
+        }
+      }
+    }
+  }, [currentValue, options, selectedObject, form, obj]);
+  useEffect5(() => {
+    if (prevApiUrlRef.current !== apiUrl) {
+      prevApiUrlRef.current = apiUrl;
+      setSearchTerm("");
+      setOptions([]);
+      setSelectedObject(void 0);
+      if (form) {
+        if (name) {
+          form.setValue(name, void 0, {
+            shouldValidate: true,
+            shouldDirty: true
+          });
+        }
+        if (obj) {
+          form.setValue(obj, void 0, {
+            shouldValidate: true,
+            shouldDirty: true
+          });
+        }
+      } else {
+        onChangeHandler(void 0);
+      }
+      fetchOptions("");
+    }
+  }, [apiUrl, form, name, obj, onChangeHandler]);
+  useEffect5(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setIsFocused(false);
+        setSearchTerm("");
+        fieldInternalProps?.onBlur?.();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [fieldInternalProps]);
+  const getDisplayValue = () => {
+    if (selectedObject) return selectedObject[labelKey];
+    if (options.length > 0 && currentValue) {
+      const found = options.find((o) => getOptionValue(o) === currentValue);
+      if (found) return found[labelKey];
+    }
+    if (isLoading || currentValue && !hasAttemptedHydration)
+      return "Loading...";
+    return currentValue || "";
+  };
+  const handleSelect = (option) => {
+    const value = getOptionValue(option);
+    setSelectedObject(option);
+    onChangeHandler(value);
+    if (form) {
+      if (obj) form.setValue(obj, option);
+      if (name) form.clearErrors(name);
+    }
+    setIsOpen(false);
+    setSearchTerm("");
+    setActiveIndex(-1);
+    fieldInternalProps?.onBlur?.();
+  };
+  const handleKeyDown = (e) => {
+    if (!isOpen) {
+      if (e.key === "ArrowDown" || e.key === "Enter") setIsOpen(true);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setActiveIndex((prev) => prev < options.length - 1 ? prev + 1 : prev);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setActiveIndex((prev) => prev > 0 ? prev - 1 : prev);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < options.length)
+          handleSelect(options[activeIndex]);
+        break;
+      case "Escape":
+        setIsOpen(false);
+        break;
+    }
+  };
+  const clearSelection = (e) => {
+    e.stopPropagation();
+    if (form) {
+      if (name)
+        form.setValue(name, void 0, {
+          shouldValidate: true,
+          shouldDirty: true
+        });
+      if (obj)
+        form.setValue(obj, void 0, {
+          shouldValidate: true,
+          shouldDirty: true
+        });
+    } else {
+      onChangeHandler(void 0);
+    }
+    setSearchTerm("");
+  };
+  const filteredOptions = options.filter(
+    (option) => !filter.includes(getOptionValue(option))
+  );
+  useEffect5(() => {
+    if (form && name && !form.watch(name)) {
+      form.setValue(name, void 0);
+      if (obj) form.setValue(obj, void 0);
+    }
+  }, [form, name, obj]);
+  let message = error;
+  if (form && name) {
+    const {
+      formState: { errors }
+    } = form;
+    const nameParts = name.split(".");
+    let currentError = errors;
+    for (const part of nameParts) {
+      currentError = currentError?.[part];
+    }
+    message = currentError?.message || message;
+  }
+  return /* @__PURE__ */ jsxs13("div", { ref: containerRef, className: `space-y-2 group ${containerClassName}`, children: [
+    label && /* @__PURE__ */ jsxs13(
+      "label",
+      {
+        className: `block text-xs font-medium transition-colors duration-200`,
+        style: { color: isFocused || isOpen ? primaryColor : void 0 },
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx18("span", { className: "text-red-500 ml-1", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs13("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs13(
+        "div",
+        {
+          className: `flex items-center w-full h-8 rounded-lg border bg-gray-50 dark:bg-zinc-900/50 text-gray-900 dark:text-white transition-all duration-200 cursor-text ${isFocused || isOpen ? "ring-2 bg-white dark:bg-zinc-900" : "border-gray-200 dark:border-zinc-800"} ${className}`,
+          style: {
+            borderColor: isFocused || isOpen ? primaryColor : void 0,
+            boxShadow: isFocused || isOpen ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+          },
+          onClick: () => {
+            if (disabled) return;
+            inputRef.current?.focus();
+            setIsOpen(true);
+          },
+          children: [
+            /* @__PURE__ */ jsx18("div", { className: "pl-3 text-gray-400", children: /* @__PURE__ */ jsx18(Search, { className: "h-4 w-4" }) }),
+            /* @__PURE__ */ jsxs13("div", { className: "flex-1 relative", children: [
+              !isOpen && currentValue && /* @__PURE__ */ jsx18("div", { className: "absolute inset-0 flex items-center px-3 truncate select-none", children: getDisplayValue() }),
+              /* @__PURE__ */ jsx18(
+                "input",
+                {
+                  ref: setInputRef,
+                  type: "text",
+                  className: `block w-full bg-transparent border-none focus:ring-0 h-8 py-0 pr-8 placeholder-gray-400 focus:outline-none text-sm ${!isOpen && currentValue ? "opacity-0" : "opacity-100"}`,
+                  placeholder: !currentValue ? placeholder : "",
+                  value: searchTerm,
+                  onChange: (e) => setSearchTerm(e.target.value),
+                  onFocus: () => {
+                    setIsFocused(true);
+                    setIsOpen(true);
+                  },
+                  onKeyDown: handleKeyDown,
+                  disabled,
+                  ...props
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx18("div", { className: "pr-3 flex items-center gap-1", children: isLoading ? /* @__PURE__ */ jsx18(Loader22, { className: "h-4 w-4 animate-spin text-blue-500" }) : /* @__PURE__ */ jsxs13(Fragment2, { children: [
+              currentValue && !disabled && /* @__PURE__ */ jsx18(
+                "button",
+                {
+                  onClick: clearSelection,
+                  type: "button",
+                  className: "p-0.5 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-300",
+                  children: /* @__PURE__ */ jsx18(X2, { className: "h-3 w-3" })
+                }
+              ),
+              /* @__PURE__ */ jsx18(
+                ChevronDown3,
+                {
+                  className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
+                }
+              )
+            ] }) })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx18("div", { className: "absolute z-50 w-full mt-1 bg-white dark:bg-zinc-900 rounded-xl border border-gray-200 dark:border-zinc-800 shadow-lg max-h-60 overflow-y-auto overflow-x-hidden", children: isLoading && options.length === 0 ? /* @__PURE__ */ jsxs13("div", { className: "p-4 text-center text-sm text-gray-500", children: [
+        /* @__PURE__ */ jsx18(Loader22, { className: "h-5 w-5 animate-spin mx-auto mb-2" }),
+        "Loading options..."
+      ] }) : filteredOptions.length > 0 ? /* @__PURE__ */ jsx18("div", { className: "py-1", children: filteredOptions.map((option, index) => {
+        const optValue = getOptionValue(option);
+        const isSelected = currentValue === optValue;
+        const isHighlighted = index === activeIndex;
+        return /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            type: "button",
+            className: `w-full text-left px-3 py-2 text-sm flex items-center justify-between transition-colors ${isSelected ? "font-medium" : isHighlighted ? "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-zinc-800"}`,
+            style: {
+              backgroundColor: isSelected ? `${primaryColor}1A` : void 0,
+              color: isSelected ? primaryColor : void 0
+            },
+            onClick: () => handleSelect(option),
+            onMouseEnter: () => setActiveIndex(index),
+            children: [
+              /* @__PURE__ */ jsx18("span", { className: "truncate", children: option[labelKey] }),
+              isSelected && /* @__PURE__ */ jsx18(
+                Check2,
+                {
+                  className: "h-4 w-4",
+                  style: { color: primaryColor }
+                }
+              )
+            ]
+          },
+          optValue || index
+        );
+      }) }) : /* @__PURE__ */ jsx18("div", { className: "p-4 text-center text-sm text-gray-500", children: errorMessage || (searchTerm ? `No results for "${searchTerm}"` : "No options available") }) })
+    ] }),
+    message && /* @__PURE__ */ jsx18("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+  ] });
+};
+var SearchApi = forwardRef5(
+  (props, _) => {
+    const { form, name, onChange, value } = props;
+    if (form && name) {
+      return /* @__PURE__ */ jsx18(
+        Controller4,
+        {
+          name,
+          control: form.control,
+          render: ({
+            field: { onChange: formOnChange, value: formValue, ref, onBlur }
+          }) => /* @__PURE__ */ jsx18(
+            SearchApiContent,
+            {
+              ...props,
+              currentValue: formValue,
+              onChangeHandler: formOnChange,
+              fieldInternalProps: { ref, onBlur }
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx18(
+      SearchApiContent,
+      {
+        ...props,
+        currentValue: value,
+        onChangeHandler: onChange || (() => {
+        })
+      }
+    );
+  }
+);
+SearchApi.displayName = "SearchApi";
+
+// src/components/Fields/date.tsx
+import { forwardRef as forwardRef6, useState as useState12 } from "react";
+import { DatePicker } from "antd";
+import {
+  Controller as Controller5
+} from "react-hook-form";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import { Calendar } from "lucide-react";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+dayjs.extend(customParseFormat);
+var DateInput = forwardRef6(
+  ({
+    label,
+    error,
+    containerClassName = "",
+    name,
+    form,
+    className = "",
+    value,
+    onBlur = () => {
+    },
+    onChange = () => {
+    },
+    ...props
+  }, ref) => {
+    const { theme } = useWarqadConfig();
+    const primaryColor = theme?.primaryColor;
+    const [isFocused, setIsFocused] = useState12(false);
+    let message = error;
+    if (form && name) {
+      const {
+        formState: { errors }
+      } = form;
+      const errorObj = name.split(".").reduce((acc, current) => acc?.[current], errors);
+      message = errorObj?.message;
+    }
+    const inputStyles = `w-full px-3 py-0 rounded-lg! border! shadow-none transition-all! duration-200! outline-none!
+      bg-gray-50! dark:bg-zinc-900!
+      text-gray-900! dark:text-zinc-100!
+      hover:bg-gray-50! dark:hover:bg-zinc-900!
+      ${message ? "border-red-500 hover:border-red-500 [&.ant-picker-focused]:border-red-500 [&.ant-picker-focused]:ring-red-500/20" : "border-gray-200 dark:border-zinc-700 hover:border-gray-200 dark:hover:border-zinc-700 [&.ant-picker-focused]:ring-2"}
+      [&.ant-picker-focused]:bg-white dark:[&.ant-picker-focused]:bg-zinc-900
+      ${className}`;
+    const renderDatePicker = (val, changeHandler, blurHandler, refProps) => {
+      const dateValue = val && typeof val === "string" ? dayjs(val, "DD/MM/YYYY", true) : dayjs.isDayjs(val) ? val : null;
+      return /* @__PURE__ */ jsx19(
+        DatePicker,
+        {
+          ref: refProps,
+          format: "DD/MM/YYYY",
+          value: dateValue && dateValue.isValid() ? dateValue : null,
+          onChange: (date) => {
+            if (date && dayjs.isDayjs(date)) {
+              changeHandler?.(date.format("DD/MM/YYYY"));
+            } else {
+              changeHandler?.("");
+            }
+          },
+          onFocus: () => setIsFocused(true),
+          onBlur: () => {
+            setIsFocused(false);
+            blurHandler?.();
+          },
+          className: `${inputStyles} [&>input]:text-gray-900! [&>input]:dark:text-zinc-100! [&>input]:text-base rounded-md`,
+          placeholder: "DD/MM/YYYY",
+          needConfirm: false,
+          style: {
+            height: "32px",
+            borderColor: isFocused && !message ? primaryColor : void 0,
+            boxShadow: isFocused && !message ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+          },
+          popupClassName: "z-50",
+          suffixIcon: /* @__PURE__ */ jsx19(
+            Calendar,
+            {
+              className: "h-5 w-5 text-gray-400",
+              style: { color: isFocused ? primaryColor : void 0 }
+            }
+          ),
+          allowClear: true,
+          ...props
+        }
+      );
+    };
+    return /* @__PURE__ */ jsxs14("div", { className: `space-y-2 group ${containerClassName}`, children: [
+      /* @__PURE__ */ jsx19(
+        "label",
+        {
+          className: "block text-xs font-medium transition-colors duration-200",
+          style: {
+            color: message ? "#ef4444" : isFocused ? primaryColor : void 0
+          },
+          children: label
+        }
+      ),
+      form && name ? /* @__PURE__ */ jsx19(
+        Controller5,
+        {
+          control: form.control,
+          name,
+          render: ({ field }) => renderDatePicker(
+            field.value,
+            field.onChange,
+            field.onBlur,
+            field.ref
+          )
+        }
+      ) : renderDatePicker(value, onChange, onBlur, ref),
+      message && /* @__PURE__ */ jsx19("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+    ] });
+  }
+);
+
+// src/components/Fields/index.tsx
+var Fields = {
+  Input,
+  PhoneInput,
+  Select,
+  Textarea,
+  SearchApi,
+  DateInput
+};
+var Fields_default = Fields;
+
+// src/components/tables/DataTable.tsx
+import { useState as useState13, useEffect as useEffect6 } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  flexRender
+} from "@tanstack/react-table";
+import { ChevronDown as ChevronDown4, Search as Search2 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function DataTable({
+  columns,
+  data,
+  isLoading = false,
+  pageRows,
+  searchPlaceholder = "Search all columns...",
+  className = "",
+  onChange
+}) {
+  const { theme } = useWarqadConfig();
+  const primaryColor = theme?.primaryColor;
+  const [sorting, setSorting] = useState13([]);
+  const [columnFilters, setColumnFilters] = useState13([]);
+  const [columnVisibility, setColumnVisibility] = useState13({});
+  const [rowSelection, setRowSelection] = useState13({});
+  const [globalFilter, setGlobalFilter] = useState13("");
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: pageRows ? getPaginationRowModel() : void 0,
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: "includesString",
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      globalFilter,
+      ...pageRows ? { pagination: { pageSize: pageRows, pageIndex: 0 } } : {}
+    },
+    manualPagination: false
+  });
+  useEffect6(() => {
+    if (onChange) {
+      onChange({
+        pagination: {
+          pageIndex: table.getState().pagination.pageIndex,
+          pageSize: table.getState().pagination.pageSize,
+          pageCount: table.getPageCount()
+        },
+        sorting,
+        columnFilters,
+        globalFilter,
+        selectedRows: table.getSelectedRowModel().rows.map((row) => row.original),
+        filteredData: table.getFilteredRowModel().rows.map((row) => row.original)
+      });
+    }
+  }, [
+    sorting,
+    columnFilters,
+    globalFilter,
+    rowSelection,
+    table,
+    onChange,
+    table.getState().pagination.pageIndex,
+    table.getState().pagination.pageSize
+  ]);
+  return /* @__PURE__ */ jsxs15("div", { className: `space-y-4 w-full ${className}`, children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx20("div", { className: "flex-1 max-w-sm", children: /* @__PURE__ */ jsx20(
+        Fields_default.Input,
+        {
+          label: "Search",
+          placeholder: searchPlaceholder,
+          value: globalFilter,
+          onChange: (e) => setGlobalFilter(e.target.value),
+          icon: /* @__PURE__ */ jsx20(Search2, { size: 16 }),
+          className: "!h-9"
+        }
+      ) }),
+      /* @__PURE__ */ jsx20("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs15("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxs15("button", { className: "flex items-center gap-2 px-3 h-9 rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors", children: [
+          "Columns",
+          /* @__PURE__ */ jsx20(ChevronDown4, { size: 14, className: "text-gray-400" })
+        ] }),
+        /* @__PURE__ */ jsx20("div", { className: "absolute right-0 top-full mt-2 w-48 py-1 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50", children: table.getAllColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsxs15(
+          "label",
+          {
+            className: "flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 cursor-pointer capitalize",
+            children: [
+              /* @__PURE__ */ jsx20(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: column.getIsVisible(),
+                  onChange: (e) => column.toggleVisibility(!!e.target.checked),
+                  className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500",
+                  style: { accentColor: primaryColor }
+                }
+              ),
+              column.id
+            ]
+          },
+          column.id
+        )) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx20("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden relative", children: /* @__PURE__ */ jsx20("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs15("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx20("thead", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx20("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx20(
+        "th",
+        {
+          className: "px-4 py-3 text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left",
+          children: header.isPlaceholder ? null : flexRender(
+            header.column.columnDef.header,
+            header.getContext()
+          )
+        },
+        header.id
+      )) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx20("tbody", { className: "divide-y divide-gray-200 dark:divide-zinc-800", children: isLoading ? Array.from({ length: pageRows || 5 }).map((_, i) => /* @__PURE__ */ jsx20(
+        "tr",
+        {
+          className: "border-b border-gray-100 dark:border-zinc-800/50",
+          children: columns.map((_2, j) => /* @__PURE__ */ jsx20("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx20("div", { className: "h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full" }) }, `skeleton-cell-${j}`))
+        },
+        `skeleton-${i}`
+      )) : table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx20(
+        "tr",
+        {
+          className: "hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors",
+          "data-state": row.getIsSelected() && "selected",
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx20(
+            "td",
+            {
+              className: "px-4 py-3 text-sm text-gray-700 dark:text-gray-200",
+              children: flexRender(
+                cell.column.columnDef.cell,
+                cell.getContext()
+              )
+            },
+            cell.id
+          ))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20(
+        "td",
+        {
+          colSpan: columns.length,
+          className: "h-32 text-center text-sm text-gray-500",
+          children: "No results found."
+        }
+      ) }) })
+    ] }) }) }),
+    /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between px-2", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "flex-1 text-xs text-gray-500", children: [
+        table.getFilteredSelectedRowModel().rows.length,
+        " of",
+        " ",
+        table.getFilteredRowModel().rows.length,
+        " row(s) selected."
+      ] }),
+      pageRows && table.getPageCount() > 1 && /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            className: "p-1 px-3 rounded-md border border-gray-200 dark:border-zinc-800 text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            className: "p-1 px-3 rounded-md border border-gray-200 dark:border-zinc-800 text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/utils/pdf.ts
+import html2canvas from "html2canvas-pro";
+import { jsPDF } from "jspdf";
+var generatePdf = async (elementId, options = {}) => {
+  const {
+    orientation = "landscape",
+    unit = "mm",
+    format = "a4",
+    filename = "export.pdf",
+    margin = 10,
+    windowWidth = 1200,
+    scale = 1,
+    showPageNumbers = true
+  } = options;
+  const element = document.getElementById(elementId);
+  if (!element) {
+    console.error(
+      `PDF generation failed: Element with ID "${elementId}" not found.`
+    );
+    return;
+  }
+  try {
+    const pdf = new jsPDF({
+      orientation,
+      unit,
+      format,
+      compress: true
+    });
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    const pageHeight = pdf.internal.pageSize.getHeight();
+    window.html2canvas = html2canvas;
+    await pdf.html(element, {
+      callback: function(doc) {
+        if (showPageNumbers) {
+          const pageCount = doc.internal.getNumberOfPages();
+          for (let i = 1; i <= pageCount; i++) {
+            doc.setPage(i);
+            doc.setFontSize(8);
+            doc.setTextColor(150);
+            const text = `Page ${i} of ${pageCount}`;
+            const textWidth = doc.getStringUnitWidth(text) * 8 / doc.internal.scaleFactor;
+            doc.text(text, (pageWidth - textWidth) / 2, pageHeight - 5);
+          }
+        }
+        doc.save(filename);
+        const pdfBlob = doc.output("blob");
+        const url = URL.createObjectURL(pdfBlob);
+        window.open(url, "_blank");
+      },
+      x: margin,
+      y: margin,
+      width: pageWidth - margin * 2,
+      windowWidth,
+      html2canvas: {
+        useCORS: true,
+        scale: Math.max(scale, 2),
+        // Ensure scale is at least 2 for text clarity
+        logging: false,
+        onclone: (clonedDoc) => {
+          const elements = clonedDoc.getElementsByTagName("*");
+          const tempCanvas = clonedDoc.createElement("canvas");
+          tempCanvas.width = 1;
+          tempCanvas.height = 1;
+          const ctx = tempCanvas.getContext("2d");
+          const target = clonedDoc.getElementById(elementId);
+          if (target) {
+            target.style.width = `${windowWidth}px`;
+            target.style.maxWidth = "none";
+          }
+          const toRgb = (color) => {
+            if (!color || !color.includes("oklch") && !color.includes("oklab"))
+              return color;
+            if (!ctx) return "rgb(0,0,0)";
+            try {
+              ctx.fillStyle = color;
+              const result = ctx.fillStyle;
+              return result.includes("ok") ? "rgb(0,0,0)" : result;
+            } catch (e) {
+              return "rgb(0,0,0)";
+            }
+          };
+          for (let i = 0; i < elements.length; i++) {
+            const el = elements[i];
+            const style = window.getComputedStyle(elements[i]);
+            const colorProps = [
+              "color",
+              "backgroundColor",
+              "borderColor",
+              "borderTopColor",
+              "borderBottomColor",
+              "borderLeftColor",
+              "borderRightColor",
+              "fill",
+              "stroke",
+              "outlineColor",
+              "stopColor",
+              "floodColor",
+              "lightingColor"
+            ];
+            colorProps.forEach((prop) => {
+              const val = style[prop];
+              if (val && (val.includes("oklch") || val.includes("oklab"))) {
+                el.style[prop] = toRgb(val);
+              }
+            });
+          }
+          const styleTags = clonedDoc.getElementsByTagName("style");
+          for (let i = 0; i < styleTags.length; i++) {
+            let cssText = styleTags[i].innerHTML;
+            if (cssText.includes("oklch") || cssText.includes("oklab")) {
+              cssText = cssText.replace(/oklch\([^)]+\)/g, "rgb(0,0,0)");
+              cssText = cssText.replace(/oklab\([^)]+\)/g, "rgb(0,0,0)");
+              styleTags[i].innerHTML = cssText;
+            }
+          }
+        }
+      },
+      autoPaging: "text"
+    });
+  } catch (error) {
+    console.error("PDF generation failed:", error);
+    throw error;
+  }
+};
+export {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ClassicSpin,
+  CodeBlock,
+  DashboardLayout,
+  DataTable,
+  DateInput,
+  Fields_default as Fields,
+  Input,
+  LoadingBox,
+  LoadingSpin,
+  Modal,
+  OverlaySpin,
+  PageHeader,
+  PhoneInput,
+  SearchApi,
+  Select,
+  Textarea,
+  ThemeProvider,
+  ThemeToggle,
+  WarqadProvider,
+  generatePdf,
+  useApis_default as useApi,
+  useModal,
+  useTheme,
+  useWarqadConfig
+};