warqadui 0.0.8 → 0.0.11

package/dist/index.mjs

@@ -0,0 +1,3237 @@
+// 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 as useState2, useEffect as useEffect2, useRef } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Menu, ChevronDown, ChevronRight } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+// src/providers/WarqadProvider.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+
+// src/hooks/ThemeContext.tsx
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ThemeContext = createContext(void 0);
+var ThemeProvider = ({ children }) => {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme");
+      if (savedTheme) {
+        return savedTheme === "dark";
+      }
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return false;
+  });
+  useEffect(() => {
+    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__ */ jsx2(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/providers/WarqadProvider.tsx
+import { jsx as jsx3 } 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 = { api: "/api" }
+}) => {
+  const mergedConfig = {
+    api: "/api",
+    ...config,
+    theme: {
+      primaryColor: "#3b82f6",
+      // Default blue-500
+      ...config?.theme
+    }
+  };
+  return /* @__PURE__ */ jsx3(WarqadConfigContext.Provider, { value: { config: mergedConfig }, children: /* @__PURE__ */ jsx3(ThemeProvider, { children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        "--primary-color": mergedConfig.theme?.primaryColor
+      },
+      children
+    }
+  ) }) });
+};
+
+// src/components/DashboardLayout.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var useMediaQuery = (query) => {
+  const [matches, setMatches] = useState2(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+  useEffect2(() => {
+    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 config = useWarqadConfig();
+  const primaryColor = config.theme?.primaryColor || "#3b82f6";
+  const { isDarkMode } = useTheme();
+  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 ? "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]"
+        ),
+        style: shouldHighlight && !item.disabled ? {
+          backgroundColor: isDarkMode ? `${primaryColor}33` : `${primaryColor}1A`,
+          color: primaryColor
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-3 overflow-hidden",
+                isSidebarCollapsed ? "justify-center w-full" : ""
+              ),
+              children: [
+                item.icon && /* @__PURE__ */ jsx4(
+                  "span",
+                  {
+                    className: cn(
+                      "shrink-0 transition-colors [&_svg]:w-4 [&_svg]:h-4",
+                      !shouldHighlight || item.disabled ? "text-gray-400 dark:text-gray-500" : "",
+                      item.disabled && "group-hover:text-gray-400"
+                    ),
+                    style: shouldHighlight && !item.disabled ? { color: primaryColor } : { color: "var(--icon-color)" },
+                    children: item.icon
+                  }
+                ),
+                /* @__PURE__ */ jsx4(AnimatePresence, { children: !isSidebarCollapsed && /* @__PURE__ */ jsx4(
+                  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__ */ jsx4(
+            "span",
+            {
+              className: cn(
+                "shrink-0 ml-2 transition-transform duration-200",
+                !shouldHighlight && "text-gray-400"
+              ),
+              style: shouldHighlight ? { color: primaryColor } : void 0,
+              children: isExpanded ? /* @__PURE__ */ jsx4(ChevronDown, { size: 16 }) : /* @__PURE__ */ jsx4(ChevronRight, { size: 16 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx4(AnimatePresence, { initial: false, children: !isSidebarCollapsed && hasSubItems && isExpanded && !item.disabled && /* @__PURE__ */ jsx4(
+      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__ */ jsx4("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__ */ jsx4(
+            SubItem,
+            {
+              item: subItem,
+              parentDisabled: item.disabled
+            },
+            index
+          ))
+        ] })
+      }
+    ) })
+  ] });
+};
+var SubItem = ({
+  item,
+  parentDisabled
+}) => {
+  const config = useWarqadConfig();
+  const primaryColor = config.theme?.primaryColor || "#3b82f6";
+  const { isDarkMode } = useTheme();
+  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 ? "font-medium" : "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]"
+      ),
+      style: isActive && !isDisabled ? {
+        backgroundColor: isDarkMode ? `${primaryColor}4D` : `${primaryColor}1A`,
+        // 10%
+        color: primaryColor
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx4("span", { className: "truncate", children: item.label }),
+        isActive && !isDisabled && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 rounded-r-full",
+            style: { backgroundColor: primaryColor }
+          }
+        )
+      ]
+    }
+  );
+};
+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
+  sidebarFooter
+}) => {
+  const config = useWarqadConfig();
+  const primaryColor = config.theme?.primaryColor || "#3b82f6";
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [isSidebarOpen, setIsSidebarOpen] = useState2(true);
+  const [expandedMenus, setExpandedMenus] = useState2(
+    () => {
+      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);
+  useEffect2(() => {
+    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;
+  useEffect2(() => {
+    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 }
+    }
+  };
+  const renderLogo = () => {
+    if (logo) {
+      if (typeof logo === "string") {
+        return /* @__PURE__ */ jsx4(
+          "img",
+          {
+            src: logo,
+            alt: title || "Logo",
+            className: "w-8 h-8 rounded-lg object-cover shrink-0"
+          }
+        );
+      }
+      return logo;
+    }
+    if (!title) return null;
+    const words = title.trim().split(/\s+/);
+    let initials = "";
+    if (words.length > 1) {
+      initials = (words[0][0] + words[1][0]).toUpperCase();
+    } else if (words[0].length >= 2) {
+      initials = words[0].substring(0, 2).toUpperCase();
+    } else if (words[0].length === 1) {
+      initials = words[0].toUpperCase();
+    }
+    return /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: "flex items-center justify-center w-8 h-8 rounded-lg text-white font-bold text-sm shrink-0 shadow-sm leading-none",
+        style: { backgroundColor: primaryColor },
+        children: /* @__PURE__ */ jsx4("span", { className: "mt-px", children: initials })
+      }
+    );
+  };
+  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__ */ jsx4(AnimatePresence, { children: !isDesktop && isSidebarOpen && /* @__PURE__ */ jsx4(
+          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__ */ jsx4(
+                "div",
+                {
+                  className: cn(
+                    "h-16 flex items-center border-b border-gray-100 dark:border-gray-800 shrink-0 overflow-hidden transition-all duration-300",
+                    isCollapsed ? "justify-center px-0" : "px-6"
+                  ),
+                  children: /* @__PURE__ */ jsx4(
+                    "div",
+                    {
+                      className: "flex items-center gap-2 max-w-full overflow-hidden",
+                      style: { color: primaryColor },
+                      children: isCollapsed ? renderLogo() : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                        renderLogo(),
+                        /* @__PURE__ */ jsx4("span", { className: "font-bold text-lg tracking-tight text-gray-900 dark:text-white truncate", children: title })
+                      ] })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx4("div", { className: "flex-1 p-4 overflow-y-auto overflow-x-hidden scrollbar-hide", children: /* @__PURE__ */ jsx4("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__ */ jsx4(
+                  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
+                );
+              }) }) }),
+              sidebarFooter && !isCollapsed && /* @__PURE__ */ jsx4("div", { className: "shrink-0 p-4 border-t border-gray-100 dark:border-gray-800", children: sidebarFooter })
+            ]
+          }
+        ),
+        /* @__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 shrink-0", children: [
+            /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx4(
+              "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__ */ jsx4(Menu, { size: 20 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-2", children: userProfile && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx4("div", { className: "w-px h-6 mx-2 bg-gray-200 dark:bg-gray-800" }),
+              userProfile
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsx4("main", { className: "flex-1 p-2 md:p-4 overflow-y-auto", children: /* @__PURE__ */ jsx4("div", { className: "max-w-7xl mx-auto", children }) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/ThemeToggle.tsx
+import { Sun, Moon } from "lucide-react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ThemeToggle = ({
+  className
+}) => {
+  const { isDarkMode, toggleTheme } = useTheme();
+  return /* @__PURE__ */ jsx5(
+    "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__ */ jsx5(
+        Sun,
+        {
+          size: 20,
+          className: "stroke-2 transition-transform duration-300 rotate-0 scale-100"
+        }
+      ) : /* @__PURE__ */ jsx5(
+        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 jsx6 } from "react/jsx-runtime";
+var LoadingBox = () => {
+  return /* @__PURE__ */ jsx6("div", { children: /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx6("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 jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var ClassicSpin = ({ msg = "Please wait..." }) => {
+  return /* @__PURE__ */ jsx7("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__ */ jsx7("div", { className: "absolute inset-0 bg-indigo-500 blur-lg opacity-20 animate-pulse" }),
+      /* @__PURE__ */ jsx7(Loader2, { className: "h-8 w-8 animate-spin text-indigo-600 dark:text-indigo-400 relative z-10" })
+    ] }),
+    /* @__PURE__ */ jsx7("p", { className: "mt-3 text-sm font-medium text-gray-900 dark:text-white", children: msg })
+  ] }) });
+};
+
+// src/components/spins/OverlaySpin.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var OverlaySpin = ({ msg = "Processing..." }) => /* @__PURE__ */ jsx8("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__ */ jsx8("div", { className: "w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
+  /* @__PURE__ */ jsx8("span", { className: "text-xs font-medium text-gray-500 animate-pulse", children: msg })
+] }) });
+
+// src/components/spins/LoadingSpin.tsx
+import { jsx as jsx9, 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__ */ jsx9(
+          "circle",
+          {
+            className: "opacity-25",
+            cx: "12",
+            cy: "12",
+            r: "10",
+            stroke: "currentColor",
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          "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 jsx10, 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__ */ jsx10("span", { className: "text-[10px] font-bold uppercase tracking-widest text-gray-400", children: language }),
+          /* @__PURE__ */ jsx10(
+            "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__ */ jsx10(Check, { size: 14, className: "text-green-500" }) : /* @__PURE__ */ jsx10(Copy, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx10("div", { className: "p-4 overflow-x-auto", children: /* @__PURE__ */ jsx10("pre", { className: "text-sm font-mono leading-relaxed text-gray-800 dark:text-gray-300", children: code }) })
+      ]
+    }
+  );
+};
+
+// src/components/Card.tsx
+import { jsx as jsx11 } 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__ */ jsx11(
+    "div",
+    {
+      className: cn(
+        "rounded-[2rem] border p-6 transition-all duration-300",
+        variants[variant],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var CardHeader = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx11("div", { className: cn("mb-4 space-y-1.5", className), children });
+var CardTitle = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx11(
+  "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__ */ jsx11("p", { className: cn("text-sm text-gray-500 dark:text-gray-400", className), children });
+var CardContent = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx11("div", { className: cn("", className), children });
+var CardFooter = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx11("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 jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  isLoading = false,
+  width = 500
+}) => {
+  return /* @__PURE__ */ jsx12(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs7("div", { className: "fixed inset-0 z-[1000] flex items-center justify-center p-4 sm:p-6", children: [
+    /* @__PURE__ */ jsx12(
+      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__ */ jsx12("h3", { className: "text-xl font-bold text-gray-900 dark:text-white tracking-tight", children: title }),
+            /* @__PURE__ */ jsx12(
+              "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__ */ jsx12(X, { size: 20 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx12("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__ */ jsx12(ClassicSpin, {}),
+            /* @__PURE__ */ jsx12(
+              "div",
+              {
+                className: isLoading ? "opacity-20 blur-sm transition-all" : "transition-all",
+                children
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
+};
+
+// src/components/PageHeader.tsx
+import { jsx as jsx13, 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__ */ jsx13("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white tracking-tight", children: title }),
+      children
+    ] }),
+    description && /* @__PURE__ */ jsx13("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";
+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,
+    variant = "default",
+    ...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: `${label ? "space-y-2" : ""} group  ${containerClassName} `,
+        children: [
+          label && /* @__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-2.5 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-2.5"} pr-2.5 py-1 text-gray-900 dark:text-white placeholder-gray-400 outline-none focus:outline-none focus:ring-0 transition-all duration-200 text-sm ${variant === "ghost" ? "bg-transparent border-transparent shadow-none h-full" : "rounded-xl border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/50 focus:bg-white dark:focus:bg-zinc-900 h-9"} ${className}`,
+                style: variant === "default" ? {
+                  borderColor: isFocused ? primaryColor : void 0,
+                  boxShadow: isFocused ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+                } : 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-2.5 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"
+          )
+        }
+      );
+    }
+    let inputPropsObj = form && name ? form.register(name, type === "number" ? { valueAsNumber: true } : {}) : {};
+    if (type === "number" && (!form || !name)) {
+      const originalOnChange = props.onChange;
+      inputPropsObj = {
+        ...inputPropsObj,
+        value: props.value !== void 0 && props.value !== null ? String(props.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 (originalOnChange) {
+            const fakeEvent = {
+              ...e,
+              target: {
+                ...e.target,
+                value: rawValue,
+                valueAsNumber: rawValue === "" ? NaN : Number(rawValue)
+              }
+            };
+            originalOnChange(fakeEvent);
+          }
+        }
+      };
+      return renderInput(inputPropsObj, "text");
+    }
+    return renderInput(inputPropsObj, type === "number" ? "text" : type);
+  }
+);
+
+// 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-2.5 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-xl border-gray-200 dark:border-zinc-800 bg-white 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-2.5"} pr-2.5 h-9 py-1 ${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, useEffect as useEffect5, useRef as useRef2 } from "react";
+import { ChevronDown as ChevronDown2, Check as Check2 } from "lucide-react";
+import { Controller as Controller3 } from "react-hook-form";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var SelectContent = ({
+  label,
+  options,
+  icon,
+  error,
+  containerClassName = "",
+  name,
+  form,
+  onChangeHandler,
+  currentValue,
+  onFocus,
+  onBlur,
+  className = "",
+  variant = "default",
+  fieldInternalProps,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState8(false);
+  const [isFocused, setIsFocused] = useState8(false);
+  const { theme } = useWarqadConfig();
+  const primaryColor = theme?.primaryColor;
+  const containerRef = useRef2(null);
+  const dropdownAnchorRef = useRef2(null);
+  const dropdownContentRef = useRef2(null);
+  const lastFocusTime = useRef2(0);
+  useEffect5(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setIsFocused(false);
+        fieldInternalProps?.onBlur?.();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [fieldInternalProps]);
+  const handleSelect = (option) => {
+    if (option.disabled) return;
+    onChangeHandler(option.value);
+    if (form && name) {
+      form.setValue(name, option.value, {
+        shouldValidate: true,
+        shouldDirty: true
+      });
+      form.clearErrors(name);
+    }
+    setIsOpen(false);
+    fieldInternalProps?.onBlur?.();
+  };
+  const displayValue = options.find((o) => o.value === currentValue)?.label || "Select...";
+  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__ */ jsxs11(
+    "div",
+    {
+      ref: containerRef,
+      className: `${label ? "space-y-2" : ""} group ${containerClassName}`,
+      children: [
+        label && /* @__PURE__ */ jsxs11(
+          "label",
+          {
+            className: `block text-xs font-medium transition-colors duration-200`,
+            style: { color: isFocused || isOpen ? primaryColor : void 0 },
+            children: [
+              label,
+              props.required && /* @__PURE__ */ jsx16("span", { className: "text-red-500 ml-1", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs11("div", { className: "relative", ref: dropdownAnchorRef, children: [
+          /* @__PURE__ */ jsxs11(
+            "div",
+            {
+              id: props.id,
+              className: `flex items-center w-full select-none text-gray-900 dark:text-white transition-all duration-200 outline-none focus:outline-none focus:ring-0 py-1 ${props.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${variant === "ghost" ? "bg-transparent border-transparent shadow-none px-0 h-full border-none ring-0 focus:border-none focus:ring-0" : isFocused || isOpen ? "ring-0 border rounded-xl h-9" : "border-gray-200 dark:border-zinc-800 border rounded-xl bg-white dark:bg-zinc-900/50 h-9"} ${className}`,
+              style: variant === "default" ? {
+                borderColor: isFocused || isOpen ? primaryColor : void 0,
+                boxShadow: isFocused || isOpen ? `${primaryColor}33 0px 0px 0px 2px` : void 0,
+                backgroundColor: isFocused || isOpen ? "var(--tw-colors-white, white)" : void 0
+              } : void 0,
+              onClick: () => {
+                if (props.disabled) return;
+                if (Date.now() - lastFocusTime.current < 150) {
+                  return;
+                }
+                setIsOpen(!isOpen);
+                setIsFocused(true);
+                onFocus?.(null);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  if (props.disabled) return;
+                  setIsOpen(!isOpen);
+                  setIsFocused(true);
+                } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+                  e.preventDefault();
+                  setIsOpen(true);
+                }
+              },
+              onFocus: () => {
+                setIsFocused(true);
+                setIsOpen(true);
+                lastFocusTime.current = Date.now();
+              },
+              tabIndex: props.disabled ? -1 : 0,
+              onBlur: (e) => {
+                if (!dropdownContentRef.current?.contains(e.relatedTarget) && !containerRef.current?.contains(e.relatedTarget)) {
+                  setIsOpen(false);
+                  setIsFocused(false);
+                  fieldInternalProps?.onBlur?.();
+                  onBlur?.(null);
+                }
+              },
+              children: [
+                icon && /* @__PURE__ */ jsx16(
+                  "div",
+                  {
+                    className: `pl-2.5 pr-2 flex items-center transition-colors duration-200`,
+                    style: { color: isFocused || isOpen ? primaryColor : "#9ca3af" },
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ jsx16(
+                  "div",
+                  {
+                    className: `flex-1 truncate text-sm ${icon ? "" : "pl-2.5"} ${!currentValue && currentValue !== 0 && currentValue !== false ? "text-gray-400" : ""}`,
+                    children: displayValue
+                  }
+                ),
+                /* @__PURE__ */ jsx16("div", { className: "pr-2.5 flex items-center gap-1 shrink-0", children: /* @__PURE__ */ jsx16(
+                  ChevronDown2,
+                  {
+                    className: `h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`
+                  }
+                ) })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx16(
+            "div",
+            {
+              ref: dropdownContentRef,
+              className: "absolute top-full left-0 z-50 mt-1 bg-white dark:bg-zinc-950 rounded-xl border border-gray-200 dark:border-zinc-800 shadow-xl max-h-60 overflow-y-auto p-1.5 w-max min-w-full",
+              children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-0.5", children: [
+                options.map((option, index) => {
+                  const isSelected = currentValue === option.value;
+                  return /* @__PURE__ */ jsxs11(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: option.disabled,
+                      className: `w-full text-left px-3 py-2 rounded-md text-sm flex items-center justify-between transition-colors ${option.disabled ? "opacity-50 cursor-not-allowed text-gray-400" : isSelected ? "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-gray-100" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800"}`,
+                      style: isSelected && !option.disabled && primaryColor ? {
+                        color: primaryColor
+                      } : void 0,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleSelect(option);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx16("span", { className: "whitespace-nowrap", children: option.label }),
+                        isSelected && /* @__PURE__ */ jsx16(
+                          Check2,
+                          {
+                            className: "h-4 w-4 shrink-0",
+                            style: { color: primaryColor }
+                          }
+                        )
+                      ]
+                    },
+                    String(option.value) || index
+                  );
+                }),
+                options.length === 0 && /* @__PURE__ */ jsx16("div", { className: "p-3 text-center text-sm text-gray-500", children: "No options available" })
+              ] })
+            }
+          )
+        ] }),
+        message && /* @__PURE__ */ jsx16("p", { className: "text-sm text-red-600 dark:text-red-400", children: message })
+      ]
+    }
+  );
+};
+var Select = forwardRef3(
+  (props, ref) => {
+    const { form, name, onChange, value } = props;
+    if (form && name) {
+      return /* @__PURE__ */ jsx16(
+        Controller3,
+        {
+          name,
+          control: form.control,
+          render: ({
+            field: {
+              onChange: formOnChange,
+              value: formValue,
+              ref: fieldRef,
+              onBlur
+            }
+          }) => /* @__PURE__ */ jsx16(
+            SelectContent,
+            {
+              ...props,
+              currentValue: formValue,
+              onChangeHandler: (val) => {
+                formOnChange(val);
+                onChange?.(val);
+              },
+              fieldInternalProps: { ref: fieldRef, onBlur }
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx16(
+      SelectContent,
+      {
+        ...props,
+        currentValue: value,
+        onChangeHandler: onChange || (() => {
+        })
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+
+// src/components/Fields/textArea.tsx
+import { forwardRef as forwardRef4, useState as useState9 } from "react";
+import {
+  Controller as Controller4
+} 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 w-full! ${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-2.5 py-1 rounded-xl border-gray-200 dark:border-zinc-800 bg-white 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(
+        Controller4,
+        {
+          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 useEffect6, useRef as useRef3, forwardRef as forwardRef5 } from "react";
+import { createPortal } from "react-dom";
+import { Search, Loader2 as Loader22, ChevronDown as ChevronDown3, Check as Check3, 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 { api: configApi } = useWarqadConfig();
+  const api = useMemo(
+    () => axios.create({
+      baseURL: configApi || "/api",
+      withCredentials: true
+    }),
+    [configApi]
+  );
+  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 Controller5 } from "react-hook-form";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var SearchApiContent = ({
+  label,
+  api,
+  placeholder = "Search...",
+  currentValue,
+  onChangeHandler,
+  queryKey = "search",
+  labelKey = "name",
+  valueKey = "_id",
+  error,
+  containerClassName = "",
+  className = "",
+  disabled,
+  name,
+  obj,
+  form,
+  filter = [],
+  required,
+  v = 2,
+  variant = "default",
+  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 = useRef3(null);
+  const dropdownAnchorRef = useRef3(null);
+  const dropdownRef = useRef3(null);
+  const inputRef = useRef3(null);
+  const prevApiRef = useRef3(api);
+  const [dropdownStyle, setDropdownStyle] = useState11({});
+  const updateDropdownPosition = () => {
+    if (dropdownAnchorRef.current) {
+      const rect = dropdownAnchorRef.current.getBoundingClientRect();
+      const style = {
+        position: "fixed",
+        top: `${rect.bottom + 4}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        zIndex: 999999
+      };
+      if (rect.bottom + 240 > window.innerHeight) {
+        style.top = "auto";
+        style.bottom = `${window.innerHeight - rect.top + 4}px`;
+      }
+      setDropdownStyle(style);
+    }
+  };
+  useEffect6(() => {
+    if (isOpen) {
+      updateDropdownPosition();
+      window.addEventListener("scroll", updateDropdownPosition, true);
+      window.addEventListener("resize", updateDropdownPosition);
+      return () => {
+        window.removeEventListener("scroll", updateDropdownPosition, true);
+        window.removeEventListener("resize", updateDropdownPosition);
+      };
+    }
+  }, [isOpen]);
+  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: api,
+        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([]);
+    }
+  };
+  useEffect6(() => {
+    const timer = setTimeout(() => {
+      if (isOpen) {
+        fetchOptions(searchTerm);
+      }
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchTerm, api, isOpen]);
+  useEffect6(() => {
+    if (isOpen && options.length === 0) {
+      fetchOptions("");
+    }
+  }, [isOpen]);
+  useEffect6(() => {
+    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];
+  };
+  useEffect6(() => {
+    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]);
+  useEffect6(() => {
+    if (prevApiRef.current !== api) {
+      prevApiRef.current = api;
+      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("");
+    }
+  }, [api, form, name, obj, onChangeHandler]);
+  useEffect6(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (containerRef.current && !containerRef.current.contains(target) && !(dropdownRef.current && dropdownRef.current.contains(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))
+  );
+  useEffect6(() => {
+    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: `${label ? "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", ref: dropdownAnchorRef, children: [
+          /* @__PURE__ */ jsxs13(
+            "div",
+            {
+              className: `flex items-center w-full px-0 text-gray-900 dark:text-white transition-all duration-200 cursor-text py-1 ${variant === "ghost" ? "bg-transparent border-transparent shadow-none px-0 h-full" : isFocused || isOpen ? "ring-2 bg-white dark:bg-zinc-900 border rounded-xl h-9" : "border-gray-200 dark:border-zinc-800 border rounded-xl bg-white dark:bg-zinc-900/50 h-9"} ${className}`,
+              style: variant === "default" ? {
+                borderColor: isFocused || isOpen ? primaryColor : void 0,
+                boxShadow: isFocused || isOpen ? `${primaryColor}33 0px 0px 0px 2px` : void 0
+              } : void 0,
+              onClick: () => {
+                if (disabled) return;
+                inputRef.current?.focus();
+                setIsOpen(true);
+              },
+              children: [
+                /* @__PURE__ */ jsx18(
+                  "div",
+                  {
+                    className: `${variant === "ghost" ? "pl-0" : "pl-2.5"} text-gray-400`,
+                    children: /* @__PURE__ */ jsx18(Search, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs13("div", { className: "flex-1 relative ms-2", children: [
+                  !isOpen && currentValue && /* @__PURE__ */ jsx18("div", { className: "absolute inset-0 flex items-center ms-1 truncate select-none", children: getDisplayValue() }),
+                  /* @__PURE__ */ jsx18(
+                    "input",
+                    {
+                      ref: setInputRef,
+                      type: "text",
+                      className: `block w-full bg-transparent border-none focus:ring-0 py-1 focus:outline-none text-sm ${!isOpen && currentValue ? "opacity-0" : "opacity-100"} ${variant === "ghost" ? "h-full" : "h-9"}`,
+                      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-2.5 w-[60px]!  flex items-center gap-1 shrink-0 min-w-[40px] justify-end", children: isLoading ? /* @__PURE__ */ jsx18(Loader22, { className: "h-4 w-4 animate-spin text-blue-500 shrink-0" }) : /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", 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 && typeof document !== "undefined" && createPortal(
+            /* @__PURE__ */ jsx18(
+              "div",
+              {
+                ref: dropdownRef,
+                className: "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",
+                style: dropdownStyle,
+                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(
+                          Check3,
+                          {
+                            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") })
+              }
+            ),
+            document.body
+          )
+        ] }),
+        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(
+        Controller5,
+        {
+          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 Controller6
+} 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-2.5 py-1 rounded-xl! border! shadow-none transition-all! duration-200! outline-none!
+      bg-white! dark:bg-zinc-900!
+      text-gray-900! dark:text-zinc-100!
+      hover:bg-white! 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-xl `,
+          placeholder: "DD/MM/YYYY",
+          needConfirm: false,
+          style: {
+            height: "36px",
+            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(
+        Controller6,
+        {
+          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 React7, { useState as useState13, useMemo as useMemo2, useEffect as useEffect7 } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getExpandedRowModel,
+  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: userColumns,
+  data,
+  isLoading = false,
+  pageRows,
+  searchPlaceholder = "Search all columns...",
+  className = "",
+  verticalLines = false,
+  rowPadding = "px-4 py-3",
+  index = false,
+  renderSubComponent,
+  hasSubComponent = () => true,
+  // default to true
+  defaultExpanded = false,
+  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 [expanded, setExpanded] = useState13(() => {
+    const initialState = {};
+    if (defaultExpanded && renderSubComponent && data) {
+      data.forEach((row, idx) => {
+        if (hasSubComponent(row)) {
+          initialState[idx] = true;
+        }
+      });
+    }
+    return initialState;
+  });
+  const columns = useMemo2(() => {
+    const mappedColumns = userColumns.map((col) => ({
+      ...col,
+      accessorKey: col.key || col.accessorKey,
+      id: col.id || col.key || col.accessorKey
+    }));
+    if (!index) return mappedColumns;
+    return [
+      {
+        id: "_index",
+        header: "#",
+        cell: ({ row }) => /* @__PURE__ */ jsx20("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
+        enableSorting: false
+      },
+      ...mappedColumns
+    ];
+  }, [userColumns, index]);
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: pageRows ? getPaginationRowModel() : void 0,
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    onExpandedChange: setExpanded,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: "includesString",
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      globalFilter,
+      expanded,
+      ...pageRows ? { pagination: { pageSize: pageRows, pageIndex: 0 } } : {}
+    },
+    manualPagination: false
+  });
+  useEffect7(() => {
+    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: `${rowPadding} text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-[1%] whitespace-nowrap" : ""}`,
+          children: header.isPlaceholder ? null : flexRender(
+            header.column.columnDef.header,
+            header.getContext()
+          )
+        },
+        header.id
+      )) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx20("tbody", { className: "", 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: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
+              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__ */ jsxs15(React7.Fragment, { children: [
+        /* @__PURE__ */ jsx20(
+          "tr",
+          {
+            className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
+            "data-state": row.getIsSelected() && "selected",
+            onClick: (e) => {
+              if (renderSubComponent && hasSubComponent(row.original)) {
+                const target = e.target;
+                if (!target.closest(
+                  "button, a, input, select, textarea"
+                )) {
+                  row.toggleExpanded();
+                }
+              }
+            },
+            children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx20(
+              "td",
+              {
+                className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" ? "w-[1%] whitespace-nowrap" : ""}`,
+                children: flexRender(
+                  cell.column.columnDef.cell,
+                  cell.getContext()
+                )
+              },
+              cell.id
+            ))
+          }
+        ),
+        renderSubComponent && row.getIsExpanded() && hasSubComponent(row.original) && /* @__PURE__ */ jsx20("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ jsx20("td", { colSpan: columns.length, className: "px-2 py-0", children: /* @__PURE__ */ jsxs15("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
+          /* @__PURE__ */ jsx20("div", { className: "absolute left-2 top-0 bottom-2 w-6 border-l-2 border-b-2 rounded-bl-xl border-(--theme-primary) dark:border-(--theme-primary) pointer-events-none" }),
+          renderSubComponent({
+            row: row.original,
+            index: row.index
+          })
+        ] }) }) })
+      ] }, 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."
+        }
+      ) }) }),
+      table.getFooterGroups().some(
+        (group) => group.headers.some(
+          (header) => header.column.columnDef.footer
+        )
+      ) && /* @__PURE__ */ jsx20("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx20("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx20(
+        "td",
+        {
+          className: `${rowPadding} text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-[1%] whitespace-nowrap" : ""}`,
+          children: header.isPlaceholder ? null : flexRender(
+            header.column.columnDef.footer,
+            header.getContext()
+          )
+        },
+        header.id
+      )) }, footerGroup.id)) })
+    ] }) }) }),
+    /* @__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/components/tables/PostTable.tsx
+import React8, { useState as useState14, useMemo as useMemo3, useEffect as useEffect8, useRef as useRef4 } from "react";
+import {
+  useReactTable as useReactTable2,
+  getCoreRowModel as getCoreRowModel2,
+  getSortedRowModel as getSortedRowModel2,
+  getFilteredRowModel as getFilteredRowModel2,
+  getExpandedRowModel as getExpandedRowModel2,
+  flexRender as flexRender2
+} from "@tanstack/react-table";
+import { Plus, Edit2, Trash2, Check as Check4, X as X3, ChevronDown as ChevronDown5 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+function PostTable({
+  columns: userColumns,
+  data: controlledData,
+  onChange,
+  isLoading = false,
+  className = "",
+  verticalLines = false,
+  rowPadding = "px-4 py-3",
+  index = false,
+  renderAddButton,
+  renderSubComponent,
+  hasSubComponent = () => true,
+  // default to true if renderSubComponent is provided
+  defaultExpanded = false
+}) {
+  const { theme } = useWarqadConfig();
+  const primaryColor = theme?.primaryColor;
+  const [sorting, setSorting] = useState14([]);
+  const [columnFilters, setColumnFilters] = useState14([]);
+  const [columnVisibility, setColumnVisibility] = useState14({});
+  const [expanded, setExpanded] = useState14(() => {
+    const initialState = {};
+    if (defaultExpanded && renderSubComponent && controlledData) {
+      controlledData.forEach((row, idx) => {
+        if (hasSubComponent(row)) {
+          initialState[idx] = true;
+        }
+      });
+    }
+    return initialState;
+  });
+  const [data, setData] = useState14(controlledData || []);
+  const entryRowRef = useRef4(null);
+  const focusAndScrollEntryRow = () => {
+    setTimeout(() => {
+      if (entryRowRef.current) {
+        entryRowRef.current.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        });
+        const firstInput = entryRowRef.current.querySelector(
+          "input:not([disabled]), select:not([disabled]), textarea:not([disabled])"
+        );
+        if (firstInput && document.activeElement !== firstInput) {
+          firstInput.focus();
+        }
+      }
+    }, 50);
+  };
+  useEffect8(() => {
+    focusAndScrollEntryRow();
+  }, []);
+  useEffect8(() => {
+    if (controlledData) {
+      setData(controlledData);
+    }
+  }, [controlledData]);
+  const [entryData, setEntryData] = useState14({});
+  const [editingIndex, setEditingIndex] = useState14(null);
+  const [isSavingAsync, setIsSavingAsync] = useState14(false);
+  const [fieldErrors, setFieldErrors] = useState14({});
+  const handleSaveField = async () => {
+    if (Object.keys(entryData).length === 0) return;
+    let newData = [...data];
+    if (editingIndex !== null) {
+      newData[editingIndex] = {
+        ...newData[editingIndex],
+        ...entryData
+      };
+    } else {
+      newData = [...newData, entryData];
+    }
+    if (onChange) {
+      setIsSavingAsync(true);
+      try {
+        const actions = {
+          focus: (columnId) => {
+            if (entryRowRef.current) {
+              const td = entryRowRef.current.querySelector(
+                `td[data-column-id="${columnId}"]`
+              );
+              if (td) {
+                const input = td.querySelector(
+                  `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
+                );
+                if (input) input.focus();
+              }
+            }
+          },
+          setError: (columnId, hasError) => {
+            setFieldErrors((prev) => ({
+              ...prev,
+              [columnId]: hasError
+            }));
+          }
+        };
+        const type = editingIndex !== null ? "edit" : "add";
+        const result = await onChange(entryData, actions, type, newData);
+        if (result === false) {
+          setIsSavingAsync(false);
+          return;
+        }
+      } catch (error) {
+        setIsSavingAsync(false);
+        return;
+      }
+    }
+    setData(newData);
+    setEntryData({});
+    setFieldErrors({});
+    setIsSavingAsync(false);
+    if (editingIndex !== null) {
+      setEditingIndex(null);
+    } else {
+      focusAndScrollEntryRow();
+    }
+  };
+  const handleCancelEdit = () => {
+    setEditingIndex(null);
+    setEntryData({});
+    setFieldErrors({});
+  };
+  const handleEdit = (index2, rowOriginal) => {
+    setEditingIndex(index2);
+    setEntryData(rowOriginal);
+  };
+  const handleDelete = (index2) => {
+    const newData = data.filter((_, i) => i !== index2);
+    setData(newData);
+    const actions = {
+      focus: (columnId) => {
+        if (entryRowRef.current) {
+          const td = entryRowRef.current.querySelector(
+            `td[data-column-id="${columnId}"]`
+          );
+          if (td) {
+            const input = td.querySelector(
+              `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${columnId}']`
+            );
+            if (input) input.focus();
+          }
+        }
+      },
+      setError: (columnId, hasError) => {
+        setFieldErrors((prev) => ({
+          ...prev,
+          [columnId]: hasError
+        }));
+      }
+    };
+    onChange?.(data[index2], actions, "delete", newData);
+    if (editingIndex === index2) {
+      handleCancelEdit();
+    } else if (editingIndex !== null && editingIndex > index2) {
+      setEditingIndex(editingIndex - 1);
+    }
+  };
+  const actionColumn = {
+    id: "actions",
+    header: "Actions",
+    cell: ({ row }) => {
+      return /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx21(
+          "button",
+          {
+            onClick: () => handleEdit(row.index, row.original),
+            className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-[var(--theme-primary)] dark:hover:text-[var(--theme-primary)] transition-colors",
+            title: "Edit",
+            children: /* @__PURE__ */ jsx21(Edit2, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx21(
+          "button",
+          {
+            onClick: () => handleDelete(row.index),
+            className: "p-1 px-2 rounded-md hover:bg-gray-100 dark:hover:bg-zinc-800 text-gray-500 hover:text-red-600 dark:hover:text-red-400 transition-colors",
+            title: "Delete",
+            children: /* @__PURE__ */ jsx21(Trash2, { size: 16 })
+          }
+        )
+      ] });
+    }
+  };
+  const columns = useMemo3(() => {
+    const mappedUserColumns = userColumns.map((col) => ({
+      ...col,
+      accessorKey: col.key || col.accessorKey,
+      id: col.id || col.key || col.accessorKey
+    }));
+    let finalColumns = [...mappedUserColumns, actionColumn];
+    if (index) {
+      finalColumns.unshift({
+        id: "_index",
+        header: "#",
+        cell: ({ row }) => /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx21("span", { className: "text-gray-500 font-medium ml-1", children: row.index + 1 }),
+          renderSubComponent && hasSubComponent(row.original) && /* @__PURE__ */ jsx21(
+            ChevronDown5,
+            {
+              size: 16,
+              className: `text-gray-400 dark:text-gray-500 transition-transform ${row.getIsExpanded() ? "rotate-180" : ""}`
+            }
+          )
+        ] }),
+        enableSorting: false,
+        meta: {
+          field: () => /* @__PURE__ */ jsx21("span", { className: "text-gray-400 font-medium px-2 block select-none", children: "#" })
+        }
+      });
+    }
+    return finalColumns;
+  }, [userColumns, actionColumn, index]);
+  const table = useReactTable2({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel2(),
+    getSortedRowModel: getSortedRowModel2(),
+    getFilteredRowModel: getFilteredRowModel2(),
+    getExpandedRowModel: getExpandedRowModel2(),
+    onExpandedChange: setExpanded,
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      expanded
+    }
+  });
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: `space-y-4 w-full ${className}`,
+      style: { "--theme-primary": primaryColor || "#3b82f6" },
+      children: /* @__PURE__ */ jsx21("div", { className: "rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 relative", children: /* @__PURE__ */ jsx21("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs16("table", { className: "w-full text-left border-collapse", children: [
+        /* @__PURE__ */ jsx21("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__ */ jsx21("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx21(
+          "th",
+          {
+            className: `${rowPadding} text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-[1%] whitespace-nowrap" : ""}`,
+            children: header.isPlaceholder ? null : flexRender2(
+              header.column.columnDef.header,
+              header.getContext()
+            )
+          },
+          header.id
+        )) }, headerGroup.id)) }),
+        /* @__PURE__ */ jsxs16("tbody", { className: "", children: [
+          isLoading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx21(
+            "tr",
+            {
+              className: "border-b border-gray-100 dark:border-zinc-800/50",
+              children: columns.map((_2, j) => /* @__PURE__ */ jsx21(
+                "td",
+                {
+                  className: `${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800/50" : ""}`,
+                  children: /* @__PURE__ */ jsx21("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__ */ jsxs16(React8.Fragment, { children: [
+            /* @__PURE__ */ jsx21(
+              "tr",
+              {
+                className: `border-b border-gray-200 dark:border-zinc-800 hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors last:border-b-0 ${renderSubComponent && hasSubComponent(row.original) ? "cursor-pointer" : ""}`,
+                "data-state": row.getIsSelected() && "selected",
+                onClick: (e) => {
+                  if (renderSubComponent && hasSubComponent(row.original)) {
+                    const target = e.target;
+                    if (!target.closest(
+                      "button, a, input, select, textarea"
+                    )) {
+                      row.toggleExpanded();
+                    }
+                  }
+                },
+                children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx21(
+                  "td",
+                  {
+                    className: `${rowPadding} text-sm text-gray-700 dark:text-gray-200 ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${cell.column.id === "_index" ? "w-[1%] whitespace-nowrap" : ""}`,
+                    children: flexRender2(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    )
+                  },
+                  cell.id
+                ))
+              }
+            ),
+            renderSubComponent && row.getIsExpanded() && hasSubComponent(row.original) && /* @__PURE__ */ jsx21("tr", { className: "border-b border-gray-200 dark:border-zinc-800 bg-gray-50/20 dark:bg-zinc-900/20", children: /* @__PURE__ */ jsx21("td", { colSpan: columns.length, className: "px-2 py-0", children: /* @__PURE__ */ jsxs16("div", { className: "relative pl-6 pb-2 pr-2 pt-2 h-full", children: [
+              /* @__PURE__ */ jsx21("div", { className: "absolute left-2 top-0 bottom-2 w-6 border-l-2 border-b-2 rounded-bl-xl border-(--theme-primary) dark:border-(--theme-primary) pointer-events-none" }),
+              renderSubComponent({
+                row: row.original,
+                index: row.index
+              })
+            ] }) }) })
+          ] }, row.id)) : /* @__PURE__ */ jsx21("tr", { children: /* @__PURE__ */ jsx21(
+            "td",
+            {
+              colSpan: columns.length,
+              className: "h-32 text-center text-sm text-gray-500",
+              children: "No results found."
+            }
+          ) }),
+          /* @__PURE__ */ jsx21(
+            "tr",
+            {
+              ref: entryRowRef,
+              className: "border-t border-gray-200 dark:border-zinc-800",
+              children: (function() {
+                const visibleColumns = table.getVisibleLeafColumns();
+                const editableColumns = visibleColumns.filter(
+                  (c) => c.id !== "actions" && c.id !== "_index"
+                );
+                const finalEditableCol = editableColumns[editableColumns.length - 1];
+                const finalEditableId = finalEditableCol ? finalEditableCol.id || finalEditableCol.columnDef.accessorKey : null;
+                return visibleColumns.map((column) => {
+                  const currentId = column.id || column.columnDef.accessorKey;
+                  if (column.id === "actions") {
+                    return /* @__PURE__ */ jsx21(
+                      "td",
+                      {
+                        className: cn(
+                          rowPadding,
+                          "py-1! text-sm align-middle transition-colors duration-200",
+                          verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""
+                        ),
+                        children: /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-2", children: editingIndex !== null ? /* @__PURE__ */ jsxs16(Fragment2, { children: [
+                          /* @__PURE__ */ jsx21(
+                            "button",
+                            {
+                              onClick: handleSaveField,
+                              disabled: isSavingAsync,
+                              className: "flex-1 h-8 flex items-center justify-center rounded-lg bg-green-500/10 text-green-600 dark:bg-emerald-500/20 dark:text-emerald-400 hover:bg-green-500 hover:text-white dark:hover:bg-emerald-500 transition-colors shadow-sm active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed",
+                              title: "Update",
+                              children: isSavingAsync ? /* @__PURE__ */ jsx21("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-emerald-500/30 border-t-emerald-500 animate-spin" }) : /* @__PURE__ */ jsx21(Check4, { size: 16, strokeWidth: 2.5 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx21(
+                            "button",
+                            {
+                              onClick: handleCancelEdit,
+                              disabled: isSavingAsync,
+                              className: "flex-1 h-8 flex items-center justify-center rounded-lg bg-red-500/10 text-red-600 dark:bg-red-500/20 dark:text-red-400 hover:bg-red-500 hover:text-white dark:hover:bg-red-500 transition-colors shadow-sm active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed",
+                              title: "Cancel",
+                              children: /* @__PURE__ */ jsx21(X3, { size: 16, strokeWidth: 2.5 })
+                            }
+                          )
+                        ] }) : /* @__PURE__ */ jsx21(Fragment2, { children: renderAddButton ? renderAddButton(
+                          entryData,
+                          handleSaveField,
+                          isSavingAsync
+                        ) : /* @__PURE__ */ jsxs16(
+                          "button",
+                          {
+                            onClick: handleSaveField,
+                            disabled: isSavingAsync,
+                            className: "w-full cursor-pointer h-8 flex items-center justify-center gap-1.5 rounded-lg text-white text-xs font-medium transition-all shadow-[0_1px_2px_rgba(0,0,0,0.05)] hover:shadow-md hover:-translate-y-px active:scale-[0.98] active:translate-y-0 bg-[var(--theme-primary)] hover:brightness-110 disabled:opacity-50 disabled:cursor-not-allowed",
+                            title: "Add Row",
+                            children: [
+                              isSavingAsync ? /* @__PURE__ */ jsx21("div", { className: "w-3.5 h-3.5 rounded-full border-2 border-white/30 border-t-white animate-spin" }) : /* @__PURE__ */ jsx21(Plus, { size: 14, strokeWidth: 2.5 }),
+                              /* @__PURE__ */ jsx21("span", { children: isSavingAsync ? "Adding..." : "Add" })
+                            ]
+                          }
+                        ) }) })
+                      },
+                      column.id
+                    );
+                  }
+                  const fieldRenderer = column.columnDef.meta?.field;
+                  const accessor = column.columnDef.accessorKey || column.id;
+                  const value = entryData[accessor] || "";
+                  const hasError = !!fieldErrors[accessor];
+                  const onChangeValue = (val) => {
+                    setEntryData((prev) => ({
+                      ...prev,
+                      [accessor]: val
+                    }));
+                    if (fieldErrors[accessor]) {
+                      setFieldErrors((prev) => {
+                        const next = { ...prev };
+                        delete next[accessor];
+                        return next;
+                      });
+                    }
+                  };
+                  return /* @__PURE__ */ jsx21(
+                    "td",
+                    {
+                      "data-column-id": column.id,
+                      onClick: (e) => {
+                        const input = e.currentTarget.querySelector(
+                          `input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex='0'], [id*='${column.id}']`
+                        );
+                        if (input && document.activeElement !== input) {
+                          input.focus();
+                        }
+                      },
+                      className: cn(
+                        rowPadding,
+                        "py-1! text-sm align-middle transition-colors duration-200",
+                        column.id !== "_index" ? "cursor-text" : "",
+                        verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : "",
+                        column.id === "_index" ? "w-[1%] whitespace-nowrap" : "",
+                        hasError && "ring-1 ring-inset ring-red-500"
+                      ),
+                      children: /* @__PURE__ */ jsx21(
+                        "div",
+                        {
+                          className: cn(
+                            "flex items-center",
+                            column.id === "_index" ? "" : "w-full min-w-[120px] h-9"
+                          ),
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault();
+                              handleSaveField();
+                            }
+                          },
+                          children: fieldRenderer ? fieldRenderer({
+                            value,
+                            onChange: onChangeValue,
+                            rowData: entryData,
+                            setRowData: setEntryData
+                          }) : /* @__PURE__ */ jsx21(
+                            Fields_default.Input,
+                            {
+                              id: `pti-${accessor}`,
+                              label: "",
+                              variant: "ghost",
+                              value,
+                              onChange: (e) => onChangeValue(e.target.value),
+                              className: "px-0! bg-transparent!",
+                              placeholder: `${typeof column.columnDef.header === "string" ? column.columnDef.header : column.id}`
+                            }
+                          )
+                        }
+                      )
+                    },
+                    column.id
+                  );
+                });
+              })()
+            }
+          )
+        ] }),
+        table.getFooterGroups().some(
+          (group) => group.headers.some(
+            (header) => header.column.columnDef.footer
+          )
+        ) && /* @__PURE__ */ jsx21("tfoot", { className: "bg-gray-50/50 dark:bg-zinc-900/50 border-t border-gray-200 dark:border-zinc-800", children: table.getFooterGroups().map((footerGroup) => /* @__PURE__ */ jsx21("tr", { children: footerGroup.headers.map((header) => /* @__PURE__ */ jsx21(
+          "td",
+          {
+            className: `${rowPadding} text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""} ${header.id === "_index" ? "w-[1%] whitespace-nowrap" : ""}`,
+            children: header.isPlaceholder ? null : flexRender2(
+              header.column.columnDef.footer,
+              header.getContext()
+            )
+          },
+          header.id
+        )) }, footerGroup.id)) })
+      ] }) }) })
+    }
+  );
+}
+
+// src/components/tables/SimpleTable.tsx
+import { useMemo as useMemo4 } from "react";
+import {
+  useReactTable as useReactTable3,
+  getCoreRowModel as getCoreRowModel3,
+  flexRender as flexRender3
+} from "@tanstack/react-table";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+function SimpleTable({
+  columns: userColumns,
+  data,
+  className = "",
+  renderFooter,
+  rowPadding = "py-3",
+  verticalLines = false
+}) {
+  const { theme } = useWarqadConfig();
+  const columns = useMemo4(() => {
+    return userColumns.map((col) => ({
+      ...col,
+      accessorKey: col.key || col.accessorKey,
+      id: col.id || col.key || col.accessorKey
+    }));
+  }, [userColumns]);
+  const table = useReactTable3({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel3()
+  });
+  return /* @__PURE__ */ jsxs17("div", { className: `w-full overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsxs17("table", { className: "w-full text-left border-collapse", children: [
+      /* @__PURE__ */ jsx22("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx22(
+        "tr",
+        {
+          className: "border-b border-gray-200 dark:border-zinc-800",
+          children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx22(
+            "th",
+            {
+              className: `${rowPadding} font-semibold text-gray-900 dark:text-zinc-100 text-[13px] ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""}`,
+              style: {
+                width: header.column.getSize() !== 150 ? header.column.getSize() : "auto"
+              },
+              children: header.isPlaceholder ? null : flexRender3(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          ))
+        },
+        headerGroup.id
+      )) }),
+      /* @__PURE__ */ jsx22("tbody", { className: "text-gray-600 dark:text-zinc-400", children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx22(
+        "tr",
+        {
+          className: "border-b border-gray-100 dark:border-zinc-800/60 last:border-0 hover:bg-gray-50/50 dark:hover:bg-zinc-900/30 transition-colors",
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx22(
+            "td",
+            {
+              className: `text-[13px] ${rowPadding} ${verticalLines ? "border-x border-gray-200 dark:border-zinc-800" : ""}`,
+              children: flexRender3(cell.column.columnDef.cell, cell.getContext())
+            },
+            cell.id
+          ))
+        },
+        row.id
+      )) })
+    ] }),
+    renderFooter && /* @__PURE__ */ jsx22("div", { className: "mt-2 pt-3 border-t border-gray-200 dark:border-zinc-800", children: renderFooter() })
+  ] });
+}
+
+// src/components/Badge.tsx
+import React10 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Badge = React10.forwardRef(
+  ({
+    children,
+    className,
+    variant = "primary",
+    size = "md",
+    outline = false,
+    ...props
+  }, ref) => {
+    const baseStyles = "inline-flex items-center justify-center font-medium rounded-full transition-colors whitespace-nowrap";
+    const variants = {
+      primary: outline ? "border border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400 bg-transparent" : "bg-blue-600 text-white dark:bg-blue-500 border border-transparent",
+      danger: outline ? "border border-red-600 text-red-600 dark:border-red-400 dark:text-red-400 bg-transparent" : "bg-red-600 text-white dark:bg-red-500 border border-transparent",
+      warning: outline ? "border border-yellow-500 text-yellow-700 dark:border-yellow-400 dark:text-yellow-300 bg-transparent" : "bg-yellow-500 text-white dark:bg-yellow-400 border border-transparent",
+      success: outline ? "border border-green-600 text-green-600 dark:border-green-400 dark:text-green-400 bg-transparent" : "bg-green-600 text-white dark:bg-green-500 border border-transparent"
+    };
+    const sizes = {
+      sm: "px-2 py-0.5 text-[0.65rem] leading-none uppercase tracking-wider font-semibold",
+      md: "px-2.5 py-1 text-xs leading-tight font-semibold",
+      lg: "px-3 py-1.5 text-sm leading-tight font-semibold"
+    };
+    return /* @__PURE__ */ jsx23(
+      "span",
+      {
+        ref,
+        className: cn(baseStyles, variants[variant], sizes[size], className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/Branding.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Branding = ({
+  text,
+  disabled = false,
+  className
+}) => {
+  return /* @__PURE__ */ jsx24(
+    "p",
+    {
+      className: cn(
+        "text-center text-[10px] font-bold uppercase tracking-widest transition-all duration-300 font-bona",
+        disabled ? "opacity-40 cursor-not-allowed" : "text-slate-900 dark:text-slate-50",
+        className
+      ),
+      children: text
+    }
+  );
+};
+
+// 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 {
+  Badge,
+  Branding,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  ClassicSpin,
+  CodeBlock,
+  DashboardLayout,
+  DataTable,
+  DateInput,
+  Fields_default as Fields,
+  Input,
+  LoadingBox,
+  LoadingSpin,
+  Modal,
+  OverlaySpin,
+  PageHeader,
+  PhoneInput,
+  PostTable,
+  SearchApi,
+  Select,
+  SimpleTable,
+  Textarea,
+  ThemeProvider,
+  ThemeToggle,
+  WarqadProvider,
+  generatePdf,
+  useApis_default as useApi,
+  useModal,
+  useTheme,
+  useWarqadConfig
+};