warqadui 0.0.3

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | "warning";
+    size?: "sm" | "md" | "lg";
+    isLoading?: boolean;
+    icon?: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+
+interface NavItem {
+    label: string;
+    icon?: React.ReactNode;
+    path?: string;
+    subItems?: NavItem[];
+}
+interface DashboardLayoutProps {
+    children: React.ReactNode;
+    navItems: NavItem[];
+    title?: string;
+    logo?: React.ReactNode;
+    userProfile?: React.ReactNode;
+}
+declare const DashboardLayout: React.FC<DashboardLayoutProps>;
+
+declare const ThemeToggle: React.FC<{
+    className?: string;
+}>;
+
+declare const useTheme: () => {
+    isDarkMode: boolean;
+    toggleTheme: () => void;
+};
+
+export { Button, type ButtonProps, DashboardLayout, type NavItem, ThemeToggle, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | "warning";
+    size?: "sm" | "md" | "lg";
+    isLoading?: boolean;
+    icon?: React.ReactNode;
+}
+declare const Button: React.FC<ButtonProps>;
+
+interface NavItem {
+    label: string;
+    icon?: React.ReactNode;
+    path?: string;
+    subItems?: NavItem[];
+}
+interface DashboardLayoutProps {
+    children: React.ReactNode;
+    navItems: NavItem[];
+    title?: string;
+    logo?: React.ReactNode;
+    userProfile?: React.ReactNode;
+}
+declare const DashboardLayout: React.FC<DashboardLayoutProps>;
+
+declare const ThemeToggle: React.FC<{
+    className?: string;
+}>;
+
+declare const useTheme: () => {
+    isDarkMode: boolean;
+    toggleTheme: () => void;
+};
+
+export { Button, type ButtonProps, DashboardLayout, type NavItem, ThemeToggle, useTheme };

package/dist/index.js

@@ -0,0 +1,470 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  DashboardLayout: () => DashboardLayout,
+  ThemeToggle: () => ThemeToggle,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = ({
+  children,
+  className,
+  variant = "primary",
+  size = "md",
+  isLoading,
+  icon,
+  ...props
+}) => {
+  const variants = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 shadow-md focus:ring-blue-600",
+    secondary: "bg-slate-800 text-white hover:bg-slate-900 active:bg-slate-950 shadow-md focus:ring-slate-800",
+    outline: "border-2 border-slate-200 bg-transparent hover:bg-slate-50 active:bg-slate-100 focus:ring-slate-500",
+    ghost: "bg-transparent hover:bg-slate-100 active:bg-slate-200 focus:ring-slate-500",
+    danger: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 shadow-md focus:ring-red-600",
+    warning: "bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-700 shadow-md focus:ring-amber-500"
+  };
+  const sizes = {
+    sm: "px-3 py-1.5 text-sm rounded-md gap-1.5",
+    md: "px-4 py-2 rounded-lg gap-2",
+    lg: "px-6 py-3 text-lg rounded-xl font-medium gap-2.5"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      className: cn(
+        "inline-flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+        variants[variant],
+        sizes[size],
+        className
+      ),
+      disabled: isLoading || props.disabled,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-shrink-0", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+// src/components/DashboardLayout.tsx
+var import_react = require("react");
+var import_react_router_dom = require("react-router-dom");
+var import_lucide_react = require("lucide-react");
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var useMediaQuery = (query) => {
+  const [matches, setMatches] = (0, import_react.useState)(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+  (0, import_react.useEffect)(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [matches, query]);
+  return matches;
+};
+var isPathActive = (navPath, currentPath) => {
+  if (!navPath || !currentPath) return false;
+  return currentPath === navPath || navPath !== "/" && currentPath.startsWith(`${navPath}/`);
+};
+var SidebarItem = ({
+  item,
+  isActive,
+  isChildActive,
+  onClick,
+  isExpanded,
+  onToggleExpand,
+  isSidebarCollapsed
+}) => {
+  const hasSubItems = item.subItems && item.subItems.length > 0;
+  const shouldHighlight = isActive || hasSubItems && isExpanded || isChildActive;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-1 group relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: hasSubItems ? onToggleExpand : onClick,
+        title: isSidebarCollapsed ? item.label : void 0,
+        className: cn(
+          "w-full flex items-center py-2.5 rounded-lg text-sm font-medium transition-all duration-200",
+          isSidebarCollapsed ? "justify-center px-2" : "justify-between px-3",
+          shouldHighlight ? "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-3 overflow-hidden",
+                isSidebarCollapsed ? "justify-center w-full" : ""
+              ),
+              children: [
+                item.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      "flex-shrink-0 transition-colors",
+                      shouldHighlight ? "text-blue-600 dark:text-blue-400" : "text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400"
+                    ),
+                    children: item.icon
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: !isSidebarCollapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_framer_motion.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__ */ (0, import_jsx_runtime2.jsx)(
+            "span",
+            {
+              className: cn(
+                "flex-shrink-0 ml-2 transition-transform duration-200",
+                shouldHighlight ? "text-blue-500" : "text-gray-400"
+              ),
+              children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronRight, { size: 16 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: !isSidebarCollapsed && hasSubItems && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_framer_motion.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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative ml-6 mt-1 space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute left-0 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-800" }),
+          item.subItems.map((subItem, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SubItem, { item: subItem }, index))
+        ] })
+      }
+    ) })
+  ] });
+};
+var SubItem = ({ item }) => {
+  const location = (0, import_react_router_dom.useLocation)();
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const isActive = isPathActive(item.path, location.pathname);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      onClick: () => item.path && navigate(item.path),
+      className: cn(
+        "relative w-full flex items-center px-3 py-2 pl-6 rounded-md text-sm transition-colors duration-200",
+        isActive ? "bg-blue-100/50 text-blue-700 font-medium dark:bg-blue-900/30 dark:text-blue-400" : "text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate", children: item.label }),
+        isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-blue-500 rounded-r-full" })
+      ]
+    }
+  );
+};
+var DashboardLayout = ({
+  children,
+  navItems,
+  title = "Dashboard",
+  logo,
+  userProfile
+}) => {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const location = (0, import_react_router_dom.useLocation)();
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const [isSidebarOpen, setIsSidebarOpen] = (0, import_react.useState)(true);
+  const [expandedMenus, setExpandedMenus] = (0, import_react.useState)(
+    () => {
+      const initialState = {};
+      navItems.forEach((item) => {
+        if (item.subItems?.some(
+          (sub) => isPathActive(sub.path, location.pathname)
+        )) {
+          initialState[item.label] = true;
+        }
+      });
+      return initialState;
+    }
+  );
+  const prevPathRef = (0, import_react.useRef)(location.pathname);
+  (0, import_react.useEffect)(() => {
+    if (prevPathRef.current !== location.pathname) {
+      const activeItem = navItems.find(
+        (item) => item.subItems?.some((sub) => isPathActive(sub.path, location.pathname))
+      );
+      if (activeItem) {
+        setExpandedMenus((prev) => ({ ...prev, [activeItem.label]: true }));
+      }
+      prevPathRef.current = location.pathname;
+    }
+  }, [location.pathname, navItems]);
+  const isCollapsed = isDesktop && !isSidebarOpen;
+  (0, import_react.useEffect)(() => {
+    if (!isDesktop) {
+      setIsSidebarOpen(false);
+    } else {
+      setIsSidebarOpen(true);
+    }
+  }, [isDesktop]);
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+  const toggleMenu = (label) => {
+    if (isCollapsed) {
+      setIsSidebarOpen(true);
+      setTimeout(() => {
+        setExpandedMenus((prev) => {
+          const isCurrentlyOpen = !!prev[label];
+          return isCurrentlyOpen ? {} : { [label]: true };
+        });
+      }, 50);
+      return;
+    }
+    setExpandedMenus((prev) => {
+      const isCurrentlyOpen = !!prev[label];
+      return isCurrentlyOpen ? {} : { [label]: true };
+    });
+  };
+  const sidebarVariants = {
+    desktopOpen: {
+      width: "16rem",
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    },
+    desktopClosed: {
+      width: "5rem",
+      // Mini Sidebar Width
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    },
+    mobileOpen: {
+      x: 0,
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    },
+    mobileClosed: {
+      x: "-100%",
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 text-slate-900 dark:text-slate-100 flex transition-colors duration-300 font-sans overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: !isDesktop && isSidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_framer_motion.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__ */ (0, import_jsx_runtime2.jsxs)(
+      import_framer_motion.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__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: cn(
+                "h-16 flex items-center border-b border-gray-100 dark:border-gray-800 flex-shrink-0 overflow-hidden transition-all duration-300",
+                isCollapsed ? "justify-center px-0" : "px-6"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center gap-2 text-blue-600 dark:text-blue-400", children: isCollapsed ? logo : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                logo,
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-bold text-lg tracking-tight text-gray-900 dark:text-white", children: title })
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 p-4 overflow-y-auto overflow-x-hidden scrollbar-hide", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("nav", { className: "space-y-1", children: navItems.map((item) => {
+            const isActive = isPathActive(item.path, location.pathname);
+            const isChildActive = item.subItems?.some(
+              (sub) => isPathActive(sub.path, location.pathname)
+            );
+            const isExpanded = expandedMenus[item.label];
+            return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              SidebarItem,
+              {
+                item,
+                isActive,
+                isChildActive: !!isChildActive,
+                isExpanded: !!isExpanded,
+                isSidebarCollapsed: !!isCollapsed,
+                onClick: () => {
+                  if (item.path) navigate(item.path);
+                  if (isCollapsed && !item.path) {
+                    setIsSidebarOpen(true);
+                  }
+                },
+                onToggleExpand: () => toggleMenu(item.label)
+              },
+              item.label
+            );
+          }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 flex flex-col min-w-0 h-screen overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("header", { className: "sticky top-0 z-30 h-16 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 px-4 sm:px-6 flex items-center justify-between flex-shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "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__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Menu, { size: 20 })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex items-center gap-2", children: userProfile && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-px h-6 mx-2 bg-gray-200 dark:bg-gray-800" }),
+          userProfile
+        ] }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("main", { className: "flex-1 p-2 md:p-4 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "max-w-7xl mx-auto", children }) })
+    ] })
+  ] });
+};
+
+// src/components/ThemeToggle.tsx
+var import_lucide_react2 = require("lucide-react");
+
+// src/hooks/useTheme.ts
+var import_react2 = require("react");
+var useTheme = () => {
+  const [isDarkMode, setIsDarkMode] = (0, import_react2.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;
+  });
+  (0, import_react2.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);
+  return { isDarkMode, toggleTheme };
+};
+
+// src/components/ThemeToggle.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ThemeToggle = ({
+  className
+}) => {
+  const { isDarkMode, toggleTheme } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(
+        import_lucide_react2.Sun,
+        {
+          size: 20,
+          className: "stroke-2 transition-transform duration-300 rotate-0 scale-100"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_lucide_react2.Moon,
+        {
+          size: 20,
+          className: "stroke-2 transition-transform duration-300 rotate-0 scale-100"
+        }
+      )
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  DashboardLayout,
+  ThemeToggle,
+  useTheme
+});

package/dist/index.mjs

@@ -0,0 +1,440 @@
+// 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-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 shadow-md focus:ring-blue-600",
+    secondary: "bg-slate-800 text-white hover:bg-slate-900 active:bg-slate-950 shadow-md focus:ring-slate-800",
+    outline: "border-2 border-slate-200 bg-transparent hover:bg-slate-50 active:bg-slate-100 focus:ring-slate-500",
+    ghost: "bg-transparent hover:bg-slate-100 active:bg-slate-200 focus:ring-slate-500",
+    danger: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 shadow-md focus:ring-red-600",
+    warning: "bg-amber-500 text-white hover:bg-amber-600 active:bg-amber-700 shadow-md focus:ring-amber-500"
+  };
+  const sizes = {
+    sm: "px-3 py-1.5 text-sm rounded-md gap-1.5",
+    md: "px-4 py-2 rounded-lg gap-2",
+    lg: "px-6 py-3 text-lg rounded-xl font-medium gap-2.5"
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "inline-flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
+        variants[variant],
+        sizes[size],
+        className
+      ),
+      disabled: isLoading || props.disabled,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "animate-spin -ml-1 mr-2 h-4 w-4",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        ) : icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+// src/components/DashboardLayout.tsx
+import { useState, useEffect, useRef } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Menu, ChevronDown, ChevronRight } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var useMediaQuery = (query) => {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [matches, query]);
+  return matches;
+};
+var isPathActive = (navPath, currentPath) => {
+  if (!navPath || !currentPath) return false;
+  return currentPath === navPath || navPath !== "/" && currentPath.startsWith(`${navPath}/`);
+};
+var SidebarItem = ({
+  item,
+  isActive,
+  isChildActive,
+  onClick,
+  isExpanded,
+  onToggleExpand,
+  isSidebarCollapsed
+}) => {
+  const hasSubItems = item.subItems && item.subItems.length > 0;
+  const shouldHighlight = isActive || hasSubItems && isExpanded || isChildActive;
+  return /* @__PURE__ */ jsxs2("div", { className: "mb-1 group relative", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        onClick: hasSubItems ? onToggleExpand : onClick,
+        title: isSidebarCollapsed ? item.label : void 0,
+        className: cn(
+          "w-full flex items-center py-2.5 rounded-lg text-sm font-medium transition-all duration-200",
+          isSidebarCollapsed ? "justify-center px-2" : "justify-between px-3",
+          shouldHighlight ? "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-3 overflow-hidden",
+                isSidebarCollapsed ? "justify-center w-full" : ""
+              ),
+              children: [
+                item.icon && /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    className: cn(
+                      "flex-shrink-0 transition-colors",
+                      shouldHighlight ? "text-blue-600 dark:text-blue-400" : "text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400"
+                    ),
+                    children: item.icon
+                  }
+                ),
+                /* @__PURE__ */ jsx2(AnimatePresence, { children: !isSidebarCollapsed && /* @__PURE__ */ jsx2(
+                  motion.span,
+                  {
+                    initial: { opacity: 0, width: 0 },
+                    animate: { opacity: 1, width: "auto" },
+                    exit: { opacity: 0, width: 0 },
+                    transition: { duration: 0.2 },
+                    className: "truncate",
+                    children: item.label
+                  }
+                ) })
+              ]
+            }
+          ),
+          !isSidebarCollapsed && hasSubItems && /* @__PURE__ */ jsx2(
+            "span",
+            {
+              className: cn(
+                "flex-shrink-0 ml-2 transition-transform duration-200",
+                shouldHighlight ? "text-blue-500" : "text-gray-400"
+              ),
+              children: isExpanded ? /* @__PURE__ */ jsx2(ChevronDown, { size: 16 }) : /* @__PURE__ */ jsx2(ChevronRight, { size: 16 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: !isSidebarCollapsed && hasSubItems && isExpanded && /* @__PURE__ */ jsx2(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.2 },
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsxs2("div", { className: "relative ml-6 mt-1 space-y-1", children: [
+          /* @__PURE__ */ jsx2("div", { className: "absolute left-0 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-800" }),
+          item.subItems.map((subItem, index) => /* @__PURE__ */ jsx2(SubItem, { item: subItem }, index))
+        ] })
+      }
+    ) })
+  ] });
+};
+var SubItem = ({ item }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const isActive = isPathActive(item.path, location.pathname);
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      onClick: () => item.path && navigate(item.path),
+      className: cn(
+        "relative w-full flex items-center px-3 py-2 pl-6 rounded-md text-sm transition-colors duration-200",
+        isActive ? "bg-blue-100/50 text-blue-700 font-medium dark:bg-blue-900/30 dark:text-blue-400" : "text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+      ),
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "truncate", children: item.label }),
+        isActive && /* @__PURE__ */ jsx2("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-blue-500 rounded-r-full" })
+      ]
+    }
+  );
+};
+var DashboardLayout = ({
+  children,
+  navItems,
+  title = "Dashboard",
+  logo,
+  userProfile
+}) => {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [expandedMenus, setExpandedMenus] = useState(
+    () => {
+      const initialState = {};
+      navItems.forEach((item) => {
+        if (item.subItems?.some(
+          (sub) => isPathActive(sub.path, location.pathname)
+        )) {
+          initialState[item.label] = true;
+        }
+      });
+      return initialState;
+    }
+  );
+  const prevPathRef = useRef(location.pathname);
+  useEffect(() => {
+    if (prevPathRef.current !== location.pathname) {
+      const activeItem = navItems.find(
+        (item) => item.subItems?.some((sub) => isPathActive(sub.path, location.pathname))
+      );
+      if (activeItem) {
+        setExpandedMenus((prev) => ({ ...prev, [activeItem.label]: true }));
+      }
+      prevPathRef.current = location.pathname;
+    }
+  }, [location.pathname, navItems]);
+  const isCollapsed = isDesktop && !isSidebarOpen;
+  useEffect(() => {
+    if (!isDesktop) {
+      setIsSidebarOpen(false);
+    } else {
+      setIsSidebarOpen(true);
+    }
+  }, [isDesktop]);
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+  const toggleMenu = (label) => {
+    if (isCollapsed) {
+      setIsSidebarOpen(true);
+      setTimeout(() => {
+        setExpandedMenus((prev) => {
+          const isCurrentlyOpen = !!prev[label];
+          return isCurrentlyOpen ? {} : { [label]: true };
+        });
+      }, 50);
+      return;
+    }
+    setExpandedMenus((prev) => {
+      const isCurrentlyOpen = !!prev[label];
+      return isCurrentlyOpen ? {} : { [label]: true };
+    });
+  };
+  const sidebarVariants = {
+    desktopOpen: {
+      width: "16rem",
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    },
+    desktopClosed: {
+      width: "5rem",
+      // Mini Sidebar Width
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    },
+    mobileOpen: {
+      x: 0,
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    },
+    mobileClosed: {
+      x: "-100%",
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 }
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900 text-slate-900 dark:text-slate-100 flex transition-colors duration-300 font-sans overflow-hidden", children: [
+    /* @__PURE__ */ jsx2(AnimatePresence, { children: !isDesktop && isSidebarOpen && /* @__PURE__ */ jsx2(
+      motion.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 0.5 },
+        exit: { opacity: 0 },
+        onClick: () => setIsSidebarOpen(false),
+        className: "fixed inset-0 bg-black/50 z-40 lg:hidden backdrop-blur-sm"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(
+      motion.aside,
+      {
+        className: "fixed lg:relative inset-y-0 left-0 z-50 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col h-screen",
+        initial: isDesktop ? "desktopOpen" : "mobileClosed",
+        animate: isDesktop ? isSidebarOpen ? "desktopOpen" : "desktopClosed" : isSidebarOpen ? "mobileOpen" : "mobileClosed",
+        variants: sidebarVariants,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: cn(
+                "h-16 flex items-center border-b border-gray-100 dark:border-gray-800 flex-shrink-0 overflow-hidden transition-all duration-300",
+                isCollapsed ? "justify-center px-0" : "px-6"
+              ),
+              children: /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2 text-blue-600 dark:text-blue-400", children: isCollapsed ? logo : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                logo,
+                /* @__PURE__ */ jsx2("span", { className: "font-bold text-lg tracking-tight text-gray-900 dark:text-white", children: title })
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { className: "flex-1 p-4 overflow-y-auto overflow-x-hidden scrollbar-hide", children: /* @__PURE__ */ jsx2("nav", { className: "space-y-1", children: navItems.map((item) => {
+            const isActive = isPathActive(item.path, location.pathname);
+            const isChildActive = item.subItems?.some(
+              (sub) => isPathActive(sub.path, location.pathname)
+            );
+            const isExpanded = expandedMenus[item.label];
+            return /* @__PURE__ */ jsx2(
+              SidebarItem,
+              {
+                item,
+                isActive,
+                isChildActive: !!isChildActive,
+                isExpanded: !!isExpanded,
+                isSidebarCollapsed: !!isCollapsed,
+                onClick: () => {
+                  if (item.path) navigate(item.path);
+                  if (isCollapsed && !item.path) {
+                    setIsSidebarOpen(true);
+                  }
+                },
+                onToggleExpand: () => toggleMenu(item.label)
+              },
+              item.label
+            );
+          }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex flex-col min-w-0 h-screen overflow-hidden", children: [
+      /* @__PURE__ */ jsxs2("header", { className: "sticky top-0 z-30 h-16 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 px-4 sm:px-6 flex items-center justify-between flex-shrink-0", children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: toggleSidebar,
+            className: "p-2 -ml-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 transition-colors",
+            children: /* @__PURE__ */ jsx2(Menu, { size: 20 })
+          }
+        ) }),
+        /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-2", children: userProfile && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2("div", { className: "w-px h-6 mx-2 bg-gray-200 dark:bg-gray-800" }),
+          userProfile
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx2("main", { className: "flex-1 p-2 md:p-4 overflow-y-auto", children: /* @__PURE__ */ jsx2("div", { className: "max-w-7xl mx-auto", children }) })
+    ] })
+  ] });
+};
+
+// src/components/ThemeToggle.tsx
+import { Sun, Moon } from "lucide-react";
+
+// src/hooks/useTheme.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+var useTheme = () => {
+  const [isDarkMode, setIsDarkMode] = useState2(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme");
+      if (savedTheme) {
+        return savedTheme === "dark";
+      }
+      return window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    return false;
+  });
+  useEffect2(() => {
+    const root = window.document.documentElement;
+    if (isDarkMode) {
+      root.classList.add("dark");
+      localStorage.setItem("theme", "dark");
+    } else {
+      root.classList.remove("dark");
+      localStorage.setItem("theme", "light");
+    }
+  }, [isDarkMode]);
+  const toggleTheme = () => setIsDarkMode((prev) => !prev);
+  return { isDarkMode, toggleTheme };
+};
+
+// src/components/ThemeToggle.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ThemeToggle = ({
+  className
+}) => {
+  const { isDarkMode, toggleTheme } = useTheme();
+  return /* @__PURE__ */ jsx3(
+    "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__ */ jsx3(
+        Sun,
+        {
+          size: 20,
+          className: "stroke-2 transition-transform duration-300 rotate-0 scale-100"
+        }
+      ) : /* @__PURE__ */ jsx3(
+        Moon,
+        {
+          size: 20,
+          className: "stroke-2 transition-transform duration-300 rotate-0 scale-100"
+        }
+      )
+    }
+  );
+};
+export {
+  Button,
+  DashboardLayout,
+  ThemeToggle,
+  useTheme
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "warqadui",
+  "version": "0.0.3",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "prepublish": "npm run build"
+  },
+  "peerDependencies": {
+    "antd": "^6.3.1",
+    "framer-motion": ">=10",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router-dom": ">=6",
+    "tailwindcss": ">=3.4.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "dayjs": "^1.11.10",
+    "lucide-react": "^0.344.0",
+    "moment": "^2.30.1",
+    "tailwind-merge": "^2.2.1",
+    "zod": "^3.22.4",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@types/react-router-dom": "^5.3.3",
+    "antd": "^6.3.1",
+    "autoprefixer": "^10.4.17",
+    "clsx": "^2.1.0",
+    "dayjs": "^1.11.10",
+    "lucide-react": "^0.344.0",
+    "moment": "^2.30.1",
+    "postcss": "^8.4.35",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss": "^3.4.1",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3",
+    "zod": "^3.22.4",
+    "zustand": "^4.5.0"
+  }
+}