@marcoschwartz/lite-ui 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -8,7 +8,7 @@ var themes = {
   default: {
     name: "default",
     button: {
-      base: "font-semibold rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95",
+      base: "font-semibold rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95 gap-2",
       variants: {
         primary: "bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-sm hover:shadow-md dark:bg-blue-500 dark:hover:bg-blue-600 dark:active:bg-blue-700",
         secondary: "bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white shadow-sm hover:shadow-md dark:bg-gray-500 dark:hover:bg-gray-600 dark:active:bg-gray-700",
@@ -18,15 +18,15 @@ var themes = {
         info: "bg-cyan-600 hover:bg-cyan-700 active:bg-cyan-800 text-white shadow-sm hover:shadow-md dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:active:bg-cyan-700"
       },
       sizes: {
-        sm: "px-3 py-1.5 text-sm",
-        md: "px-4 py-2 text-base",
-        lg: "px-6 py-3 text-lg",
-        xl: "px-8 py-4 text-xl"
+        sm: "px-3 py-1.5 text-sm min-h-[30px]",
+        md: "px-4 py-2 text-base min-h-[38px]",
+        lg: "px-6 py-3 text-lg min-h-[48px]",
+        xl: "px-8 py-4 text-xl min-h-[60px]"
       },
       disabled: "opacity-50 cursor-not-allowed hover:shadow-sm active:scale-100"
     },
     select: {
-      base: "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 pr-10 cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500",
+      base: "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 text-left transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 pr-10 cursor-pointer dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500",
       sizes: {
         sm: "px-3 py-1.5 text-sm",
         md: "px-4 py-2.5 text-base",
@@ -39,7 +39,7 @@ var themes = {
   minimalistic: {
     name: "minimalistic",
     button: {
-      base: "font-normal rounded-none transition-colors duration-200 focus:outline-none border-2",
+      base: "font-normal rounded-none transition-colors duration-200 focus:outline-none border-2 gap-2",
       variants: {
         primary: "bg-transparent border-white text-white hover:bg-white hover:text-black",
         secondary: "bg-transparent border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-black",
@@ -49,15 +49,15 @@ var themes = {
         info: "bg-transparent border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-black"
       },
       sizes: {
-        sm: "px-4 py-2 text-sm uppercase tracking-wide",
-        md: "px-6 py-3 text-base uppercase tracking-wide",
-        lg: "px-8 py-4 text-lg uppercase tracking-wider",
-        xl: "px-10 py-5 text-xl uppercase tracking-wider"
+        sm: "px-4 py-2 text-sm uppercase tracking-wide min-h-[36px]",
+        md: "px-6 py-3 text-base uppercase tracking-wide min-h-[48px]",
+        lg: "px-8 py-4 text-lg uppercase tracking-wider min-h-[60px]",
+        xl: "px-10 py-5 text-xl uppercase tracking-wider min-h-[72px]"
       },
       disabled: "opacity-30 cursor-not-allowed hover:bg-transparent"
     },
     select: {
-      base: "w-full appearance-none rounded-none border-2 border-white bg-transparent text-white transition-colors duration-200 focus:outline-none pr-10 cursor-pointer placeholder:text-gray-500",
+      base: "w-full appearance-none rounded-none border-2 border-white bg-transparent text-white text-left transition-colors duration-200 focus:outline-none pr-10 cursor-pointer placeholder:text-gray-500",
       sizes: {
         sm: "px-4 py-2 text-sm uppercase tracking-wide",
         md: "px-4 py-3 text-base uppercase tracking-wide",
@@ -75,7 +75,20 @@ var ThemeContext = createContext(void 0);
 function useTheme() {
   const context = useContext(ThemeContext);
   if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
+    const warnOnce = () => {
+      if (process.env.NODE_ENV === "development") {
+        console.warn("useTheme: Component used outside ThemeProvider. Using default theme. Wrap your app with <ThemeProvider> for full functionality.");
+      }
+    };
+    return {
+      theme: themes.default,
+      themeName: "default",
+      setTheme: () => warnOnce(),
+      colorMode: "light",
+      setColorMode: () => warnOnce(),
+      toggleColorMode: () => warnOnce(),
+      resolvedColorMode: "light"
+    };
   }
   return context;
 }
@@ -123,6 +136,13 @@ function ThemeProvider({
       document.documentElement.classList.remove("dark");
     }
   };
+  const toggleColorMode = () => {
+    if (colorMode === "system") {
+      setColorMode(resolvedColorMode === "dark" ? "light" : "dark");
+    } else {
+      setColorMode(colorMode === "dark" ? "light" : "dark");
+    }
+  };
   useEffect(() => {
     if (!mounted) return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -147,40 +167,49 @@ function ThemeProvider({
     setTheme,
     colorMode,
     setColorMode,
+    toggleColorMode,
     resolvedColorMode
   }, children });
 }
 
 // src/components/Button.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Button = ({
   variant = "primary",
   size = "md",
   className = "",
   children,
   disabled,
+  leftIcon,
+  rightIcon,
+  iconOnly = false,
   ...props
 }) => {
   const { theme } = useTheme();
   const baseStyles = theme.button.base;
-  const variantStyles = theme.button.variants[variant];
-  const sizeStyles = theme.button.sizes[size];
+  const variantStyles3 = theme.button.variants[variant];
+  const sizeStyles2 = theme.button.sizes[size];
   const disabledStyles = disabled ? theme.button.disabled : "";
-  const classes = `${baseStyles} ${variantStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();
+  const iconOnlyStyles = iconOnly ? "!p-0 aspect-square" : "";
+  const classes = `inline-flex items-center justify-center ${baseStyles} ${variantStyles3} ${sizeStyles2} ${disabledStyles} ${iconOnlyStyles} ${className}`.trim();
   return /* @__PURE__ */ jsx2(
     "button",
     {
       className: classes,
       disabled,
       ...props,
-      children
+      children: iconOnly ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        leftIcon && /* @__PURE__ */ jsx2("span", { className: "inline-flex shrink-0", children: leftIcon }),
+        children && /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center", children }),
+        rightIcon && /* @__PURE__ */ jsx2("span", { className: "inline-flex shrink-0", children: rightIcon })
+      ] })
     }
   );
 };
 
 // src/components/Select.tsx
 import { useState as useState2, useRef, useEffect as useEffect2 } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Select = ({
   options,
   size = "md",
@@ -190,19 +219,30 @@ var Select = ({
   value: controlledValue,
   defaultValue,
   onChange,
+  label,
+  error,
+  helperText,
+  searchable = false,
+  searchPlaceholder = "Search...",
   ...props
 }) => {
   const { theme, themeName } = useTheme();
   const [isOpen, setIsOpen] = useState2(false);
   const [internalValue, setInternalValue] = useState2(defaultValue || "");
+  const [searchQuery, setSearchQuery] = useState2("");
   const dropdownRef = useRef(null);
+  const searchInputRef = useRef(null);
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const selectedOption = options.find((opt) => opt.value === value);
   const displayText = selectedOption ? selectedOption.label : placeholder || "Select...";
+  const filteredOptions = searchable && searchQuery ? options.filter(
+    (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
+  ) : options;
   useEffect2(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
+        setSearchQuery("");
       }
     };
     if (isOpen) {
@@ -210,11 +250,17 @@ var Select = ({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
+  useEffect2(() => {
+    if (isOpen && searchable && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isOpen, searchable]);
   const handleSelect = (optionValue) => {
     if (disabled) return;
     setInternalValue(optionValue);
     onChange?.(optionValue);
     setIsOpen(false);
+    setSearchQuery("");
   };
   const handleToggle = () => {
     if (!disabled) {
@@ -222,9 +268,10 @@ var Select = ({
     }
   };
   const baseStyles = theme.select.base;
-  const sizeStyles = theme.select.sizes[size];
+  const sizeStyles2 = theme.select.sizes[size];
   const disabledStyles = disabled ? theme.select.disabled : "";
-  const buttonClasses = `${baseStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();
+  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+  const buttonClasses = `${baseStyles} ${sizeStyles2} ${disabledStyles} ${errorStyles}`.trim();
   const iconColor = themeName === "minimalistic" ? disabled ? "text-gray-600" : "text-white" : disabled ? "text-gray-400" : "text-gray-500";
   const dropdownBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-white border border-gray-300 shadow-lg dark:bg-gray-800 dark:border-gray-600";
   const optionBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-gray-900 hover:bg-blue-50 transition-colors duration-150 dark:text-gray-100 dark:hover:bg-gray-700";
@@ -234,51 +281,3407 @@ var Select = ({
     lg: "px-4 py-3 text-lg",
     xl: "px-5 py-4 text-xl"
   }[size];
-  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
-    /* @__PURE__ */ jsx3(
-      "button",
-      {
-        type: "button",
-        className: buttonClasses,
-        onClick: handleToggle,
-        disabled,
-        children: /* @__PURE__ */ jsx3("span", { className: !selectedOption && placeholder ? "opacity-50" : "", children: displayText })
+  return /* @__PURE__ */ jsxs2("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx3("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsxs2("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: buttonClasses,
+          onClick: handleToggle,
+          disabled,
+          children: /* @__PURE__ */ jsx3("span", { className: !selectedOption && placeholder ? "opacity-50" : "", children: displayText })
+        }
+      ),
+      /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4", children: /* @__PURE__ */ jsx3(
+        "svg",
+        {
+          className: `h-5 w-5 transition-transform duration-200 ${iconColor} ${isOpen ? "rotate-180" : ""}`,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx3(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+              clipRule: "evenodd"
+            }
+          )
+        }
+      ) }),
+      isOpen && !disabled && /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`,
+          children: [
+            searchable && /* @__PURE__ */ jsx3("div", { className: `sticky top-0 ${themeName === "minimalistic" ? "bg-black border-b-2 border-white" : "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"}`, children: /* @__PURE__ */ jsx3(
+              "input",
+              {
+                ref: searchInputRef,
+                type: "text",
+                className: `w-full ${optionSizeStyles} ${themeName === "minimalistic" ? "bg-black text-white placeholder-gray-600 focus:outline-none" : "bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none"}`,
+                placeholder: searchPlaceholder,
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                onClick: (e) => e.stopPropagation()
+              }
+            ) }),
+            /* @__PURE__ */ jsx3("style", { children: `
+                .select-dropdown-scroll {
+                  scrollbar-width: thin;
+                  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+                }
+                .select-dropdown-scroll::-webkit-scrollbar {
+                  width: 8px;
+                }
+                .select-dropdown-scroll::-webkit-scrollbar-track {
+                  background: transparent;
+                }
+                .select-dropdown-scroll::-webkit-scrollbar-thumb {
+                  background-color: rgba(156, 163, 175, 0.5);
+                  border-radius: 4px;
+                  border: 2px solid transparent;
+                  background-clip: padding-box;
+                }
+                .select-dropdown-scroll::-webkit-scrollbar-thumb:hover {
+                  background-color: rgba(156, 163, 175, 0.7);
+                }
+                .dark .select-dropdown-scroll {
+                  scrollbar-color: rgba(75, 85, 99, 0.6) transparent;
+                }
+                .dark .select-dropdown-scroll::-webkit-scrollbar-thumb {
+                  background-color: rgba(75, 85, 99, 0.6);
+                }
+                .dark .select-dropdown-scroll::-webkit-scrollbar-thumb:hover {
+                  background-color: rgba(75, 85, 99, 0.8);
+                }
+              ` }),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "select-dropdown-scroll",
+                style: { maxHeight: "300px", overflowY: "auto" },
+                children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-50 dark:bg-gray-700" : ""}`,
+                    onClick: () => handleSelect(option.value),
+                    children: option.label
+                  },
+                  option.value
+                )) : /* @__PURE__ */ jsx3("div", { className: `${optionSizeStyles} ${themeName === "minimalistic" ? "text-gray-500" : "text-gray-500 dark:text-gray-400"} text-center`, children: "No results found" })
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
+
+// src/components/Modal.tsx
+import { useEffect as useEffect3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl"
+};
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  showCloseButton = true
+}) => {
+  const { theme } = useTheme();
+  useEffect3(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
       }
-    ),
-    /* @__PURE__ */ jsx3("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4", children: /* @__PURE__ */ jsx3(
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const sizeClass = sizeClasses[size];
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-all duration-200",
+      onClick: onClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": title ? "modal-title" : void 0,
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: `relative w-full ${sizeClass} bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform transition-all duration-200 scale-100 animate-in`,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            (title || showCloseButton) && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+              title && /* @__PURE__ */ jsx4("h3", { id: "modal-title", className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+              showCloseButton && /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                  "aria-label": "Close modal",
+                  children: /* @__PURE__ */ jsx4("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "p-6", children })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/Navbar.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Navbar = ({
+  logo,
+  children,
+  className = "",
+  sticky = false
+}) => {
+  const { theme } = useTheme();
+  const baseClasses = sticky ? "sticky top-0 z-40" : "";
+  return /* @__PURE__ */ jsx5("nav", { className: `bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 ${baseClasses} ${className}`, children: /* @__PURE__ */ jsx5("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center h-16", children: [
+    logo && /* @__PURE__ */ jsx5("div", { className: "flex items-center", children: logo }),
+    children && /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-6", children })
+  ] }) }) });
+};
+
+// src/components/Sidebar.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var widthClasses = {
+  sm: "w-48",
+  md: "w-64",
+  lg: "w-80"
+};
+var Sidebar = ({
+  children,
+  className = "",
+  width = "md",
+  position = "left"
+}) => {
+  const { theme } = useTheme();
+  const widthClass = widthClasses[width];
+  const borderClass = position === "left" ? "border-r" : "border-l";
+  return /* @__PURE__ */ jsx6(
+    "aside",
+    {
+      className: `${widthClass} bg-white dark:bg-gray-800 ${borderClass} border-gray-200 dark:border-gray-700 h-full overflow-y-auto ${className}`,
+      children
+    }
+  );
+};
+
+// src/components/SidebarProvider.tsx
+import { createContext as createContext2, useContext as useContext2, useState as useState3 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SidebarContext = createContext2(void 0);
+var SidebarProvider = ({
+  children,
+  defaultOpen = false
+}) => {
+  const [isOpen, setIsOpen] = useState3(defaultOpen);
+  const [isMobile, setIsMobile] = useState3(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const toggle = () => setIsOpen((prev) => !prev);
+  const value = {
+    isOpen,
+    isMobile,
+    open,
+    close,
+    toggle,
+    setIsMobile
+  };
+  return /* @__PURE__ */ jsx7(SidebarContext.Provider, { value, children });
+};
+var useSidebar = () => {
+  const context = useContext2(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+
+// src/components/AppShell.tsx
+import { useState as useState4 } from "react";
+
+// src/icons/icon-utils.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var sizeClasses2 = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8"
+};
+var createIcon = (displayName, path, filled = false) => {
+  const Icon = ({ size = "md", className = "", color = "currentColor" }) => {
+    const sizeClass = sizeClasses2[size];
+    return /* @__PURE__ */ jsx8(
       "svg",
       {
-        className: `h-5 w-5 transition-transform duration-200 ${iconColor} ${isOpen ? "rotate-180" : ""}`,
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 20 20",
-        fill: "currentColor",
+        className: `${sizeClass} ${className}`,
+        fill: filled ? color : "none",
+        viewBox: "0 0 24 24",
+        stroke: filled ? "none" : color,
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx3(
-          "path",
+        children: path
+      }
+    );
+  };
+  Icon.displayName = displayName;
+  return Icon;
+};
+
+// src/icons/HomeIcon.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var HomeIcon = createIcon(
+  "HomeIcon",
+  /* @__PURE__ */ jsx9("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" })
+);
+
+// src/icons/UserIcon.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var UserIcon = createIcon(
+  "UserIcon",
+  /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" })
+);
+
+// src/icons/SearchIcon.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var SearchIcon = createIcon(
+  "SearchIcon",
+  /* @__PURE__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
+);
+
+// src/icons/BellIcon.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var BellIcon = createIcon(
+  "BellIcon",
+  /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" })
+);
+
+// src/icons/SettingsIcon.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var SettingsIcon = createIcon(
+  "SettingsIcon",
+  /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" }),
+    /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+  ] })
+);
+
+// src/icons/MenuIcon.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var MenuIcon = createIcon(
+  "MenuIcon",
+  /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })
+);
+
+// src/icons/CloseIcon.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var CloseIcon = createIcon(
+  "CloseIcon",
+  /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+);
+
+// src/icons/ChevronDownIcon.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var ChevronDownIcon = createIcon(
+  "ChevronDownIcon",
+  /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+);
+
+// src/icons/ChevronRightIcon.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ChevronRightIcon = createIcon(
+  "ChevronRightIcon",
+  /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+);
+
+// src/icons/CheckIcon.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var CheckIcon = createIcon(
+  "CheckIcon",
+  /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })
+);
+
+// src/icons/PlusIcon.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var PlusIcon = createIcon(
+  "PlusIcon",
+  /* @__PURE__ */ jsx19("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })
+);
+
+// src/icons/TrashIcon.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var TrashIcon = createIcon(
+  "TrashIcon",
+  /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" })
+);
+
+// src/icons/EditIcon.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+var EditIcon = createIcon(
+  "EditIcon",
+  /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" })
+);
+
+// src/icons/MailIcon.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var MailIcon = createIcon(
+  "MailIcon",
+  /* @__PURE__ */ jsx22("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" })
+);
+
+// src/icons/StarIcon.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var StarIcon = createIcon(
+  "StarIcon",
+  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" })
+);
+
+// src/icons/HeartIcon.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+var HeartIcon = createIcon(
+  "HeartIcon",
+  /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" })
+);
+
+// src/icons/DownloadIcon.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var DownloadIcon = createIcon(
+  "DownloadIcon",
+  /* @__PURE__ */ jsx25("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" })
+);
+
+// src/icons/UploadIcon.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var UploadIcon = createIcon(
+  "UploadIcon",
+  /* @__PURE__ */ jsx26("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" })
+);
+
+// src/icons/CameraIcon.tsx
+import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs6 } from "react/jsx-runtime";
+var CameraIcon = createIcon(
+  "CameraIcon",
+  /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx27("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" }),
+    /* @__PURE__ */ jsx27("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z" })
+  ] })
+);
+
+// src/icons/LockIcon.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+var LockIcon = createIcon(
+  "LockIcon",
+  /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" })
+);
+
+// src/icons/CalendarIcon.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var CalendarIcon = createIcon(
+  "CalendarIcon",
+  /* @__PURE__ */ jsx29("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })
+);
+
+// src/icons/GoogleIcon.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+var GoogleIcon = createIcon(
+  "GoogleIcon",
+  /* @__PURE__ */ jsx30("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" }),
+  true
+);
+
+// src/icons/GitHubIcon.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+var GitHubIcon = createIcon(
+  "GitHubIcon",
+  /* @__PURE__ */ jsx31("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" }),
+  true
+);
+
+// src/icons/TwitterIcon.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var TwitterIcon = createIcon(
+  "TwitterIcon",
+  /* @__PURE__ */ jsx32("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }),
+  true
+);
+
+// src/icons/FacebookIcon.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+var FacebookIcon = createIcon(
+  "FacebookIcon",
+  /* @__PURE__ */ jsx33("path", { d: "M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" }),
+  true
+);
+
+// src/icons/AppleIcon.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
+var AppleIcon = createIcon(
+  "AppleIcon",
+  /* @__PURE__ */ jsx34("path", { d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }),
+  true
+);
+
+// src/icons/LinkedInIcon.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+var LinkedInIcon = createIcon(
+  "LinkedInIcon",
+  /* @__PURE__ */ jsx35("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }),
+  true
+);
+
+// src/icons/YouTubeIcon.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+var YouTubeIcon = createIcon(
+  "YouTubeIcon",
+  /* @__PURE__ */ jsx36("path", { d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }),
+  true
+);
+
+// src/icons/SlackIcon.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+var SlackIcon = createIcon(
+  "SlackIcon",
+  /* @__PURE__ */ jsx37("path", { d: "M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" }),
+  true
+);
+
+// src/components/AppShell.tsx
+import { Fragment as Fragment4, jsx as jsx38, jsxs as jsxs7 } from "react/jsx-runtime";
+var widthClasses2 = {
+  sm: "w-48",
+  md: "w-64",
+  lg: "w-80"
+};
+var breakpointClasses = {
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl"
+};
+var AppShell = ({
+  children,
+  navbar,
+  header,
+  navbarTitle,
+  navbarLogo,
+  defaultNavbarOpen = false,
+  responsive = true,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const [isMobileNavbarOpen, setIsMobileNavbarOpen] = useState4(defaultNavbarOpen);
+  const navbarWidth = navbar?.width || "md";
+  const navbarBreakpoint = navbar?.breakpoint || "md";
+  const navbarPosition = navbar?.position || "side";
+  const widthClass = widthClasses2[navbarWidth];
+  const breakpoint = breakpointClasses[navbarBreakpoint];
+  if (!responsive && navbar) {
+    return /* @__PURE__ */ jsxs7("div", { className: `min-h-screen flex flex-col ${className}`, children: [
+      header && /* @__PURE__ */ jsx38("div", { className: "w-full", children: header }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-1", children: [
+        /* @__PURE__ */ jsx38("aside", { className: `${widthClass} bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 h-full overflow-y-auto`, children: navbar.content }),
+        /* @__PURE__ */ jsx38("main", { className: "flex-1 overflow-y-auto", children })
+      ] })
+    ] });
+  }
+  if (!responsive) {
+    return /* @__PURE__ */ jsxs7("div", { className: `min-h-screen flex flex-col ${className}`, children: [
+      header && /* @__PURE__ */ jsx38("div", { className: "w-full", children: header }),
+      /* @__PURE__ */ jsx38("main", { className: "flex-1 overflow-y-auto", children })
+    ] });
+  }
+  if (navbar && navbarPosition === "top") {
+    const mobileMenuClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
+    const desktopNavClass = navbarBreakpoint === "sm" ? "sm:flex" : navbarBreakpoint === "md" ? "md:flex" : navbarBreakpoint === "lg" ? "lg:flex" : "xl:flex";
+    return /* @__PURE__ */ jsxs7("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
+      /* @__PURE__ */ jsx38("nav", { className: "sticky top-0 z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx38("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs7("div", { className: "flex justify-between items-center h-16", children: [
+        /* @__PURE__ */ jsx38("div", { className: "flex items-center", children: navbarLogo ? /* @__PURE__ */ jsx38("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ jsx38("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null }),
+        /* @__PURE__ */ jsx38("div", { className: `hidden ${desktopNavClass} items-center gap-6`, children: navbar.content }),
+        /* @__PURE__ */ jsx38(
+          "button",
           {
-            fillRule: "evenodd",
-            d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
-            clipRule: "evenodd"
+            className: `${mobileMenuClass} p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors`,
+            onClick: () => setIsMobileNavbarOpen(!isMobileNavbarOpen),
+            "aria-label": "Toggle menu",
+            children: /* @__PURE__ */ jsx38(MenuIcon, { size: "md" })
           }
         )
+      ] }) }) }),
+      header && /* @__PURE__ */ jsx38("div", { className: "w-full", children: header }),
+      isMobileNavbarOpen && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+        /* @__PURE__ */ jsx38(
+          "div",
+          {
+            className: `${mobileMenuClass} fixed inset-0 z-40 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200`,
+            onClick: () => setIsMobileNavbarOpen(false)
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: `${mobileMenuClass} fixed left-0 top-0 bottom-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-2xl animate-in slide-in-from-left duration-300`, children: [
+          /* @__PURE__ */ jsxs7("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [
+            navbarLogo ? /* @__PURE__ */ jsx38("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ jsx38("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+            /* @__PURE__ */ jsx38(
+              "button",
+              {
+                className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+                onClick: () => setIsMobileNavbarOpen(false),
+                "aria-label": "Close menu",
+                children: /* @__PURE__ */ jsx38("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx38(
+            "div",
+            {
+              className: "p-4 flex flex-col gap-4",
+              onClick: () => setIsMobileNavbarOpen(false),
+              children: navbar.content
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx38("main", { className: "flex-1 overflow-y-auto", children })
+    ] });
+  }
+  if (navbar) {
+    const mobileHeaderClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
+    const desktopNavbarClass = navbarBreakpoint === "sm" ? "sm:block" : navbarBreakpoint === "md" ? "md:block" : navbarBreakpoint === "lg" ? "lg:block" : "xl:block";
+    const mobileDrawerClass = navbarBreakpoint === "sm" ? "sm:hidden" : navbarBreakpoint === "md" ? "md:hidden" : navbarBreakpoint === "lg" ? "lg:hidden" : "xl:hidden";
+    const sidebarWidthClass = navbarWidth === "sm" ? "w-48" : navbarWidth === "lg" ? "w-80" : "w-64";
+    return /* @__PURE__ */ jsxs7("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
+      /* @__PURE__ */ jsxs7("div", { className: `${mobileHeaderClass} sticky top-0 z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between`, children: [
+        navbarLogo ? /* @__PURE__ */ jsx38("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ jsx38("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+        /* @__PURE__ */ jsx38(
+          "button",
+          {
+            className: "p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+            onClick: () => setIsMobileNavbarOpen(!isMobileNavbarOpen),
+            "aria-label": "Toggle menu",
+            children: /* @__PURE__ */ jsx38(MenuIcon, { size: "md" })
+          }
+        )
+      ] }),
+      header && /* @__PURE__ */ jsx38("div", { className: "w-full", children: header }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-1 min-h-0", children: [
+        /* @__PURE__ */ jsx38("aside", { className: `hidden ${desktopNavbarClass} ${sidebarWidthClass} bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto shrink-0`, children: navbar.content }),
+        isMobileNavbarOpen && /* @__PURE__ */ jsxs7(Fragment4, { children: [
+          /* @__PURE__ */ jsx38(
+            "div",
+            {
+              className: `${mobileDrawerClass} fixed inset-0 z-40 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200`,
+              onClick: () => setIsMobileNavbarOpen(false)
+            }
+          ),
+          /* @__PURE__ */ jsxs7("div", { className: `${mobileDrawerClass} fixed left-0 top-0 bottom-0 z-50 w-64 bg-white dark:bg-gray-800 shadow-2xl animate-in slide-in-from-left duration-300`, children: [
+            /* @__PURE__ */ jsxs7("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [
+              navbarLogo ? /* @__PURE__ */ jsx38("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ jsx38("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+              /* @__PURE__ */ jsx38(
+                "button",
+                {
+                  className: "p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+                  onClick: () => setIsMobileNavbarOpen(false),
+                  "aria-label": "Close menu",
+                  children: /* @__PURE__ */ jsx38("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx38(
+              "div",
+              {
+                className: "overflow-y-auto h-[calc(100vh-73px)]",
+                onClick: () => setIsMobileNavbarOpen(false),
+                children: navbar.content
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx38("main", { className: "flex-1 overflow-y-auto min-h-screen", children })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: `min-h-screen flex flex-col ${className}`, children: [
+    header && /* @__PURE__ */ jsx38("div", { className: "w-full", children: header }),
+    /* @__PURE__ */ jsx38("main", { className: "flex-1 overflow-y-auto", children })
+  ] });
+};
+
+// src/components/Drawer.tsx
+import { useEffect as useEffect4 } from "react";
+import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs8 } from "react/jsx-runtime";
+var sizeClasses3 = {
+  left: {
+    sm: "w-64",
+    md: "w-80",
+    lg: "w-96"
+  },
+  right: {
+    sm: "w-64",
+    md: "w-80",
+    lg: "w-96"
+  },
+  top: {
+    sm: "h-48",
+    md: "h-64",
+    lg: "h-80"
+  },
+  bottom: {
+    sm: "h-48",
+    md: "h-64",
+    lg: "h-80"
+  }
+};
+var positionClasses = {
+  left: "left-0 top-0 h-full",
+  right: "right-0 top-0 h-full",
+  top: "top-0 left-0 w-full",
+  bottom: "bottom-0 left-0 w-full"
+};
+var slideClasses = {
+  left: "transform transition-transform duration-300",
+  right: "transform transition-transform duration-300",
+  top: "transform transition-transform duration-300",
+  bottom: "transform transition-transform duration-300"
+};
+var Drawer = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  position = "right",
+  size = "md",
+  showCloseButton = true
+}) => {
+  const { theme } = useTheme();
+  useEffect4(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const sizeClass = sizeClasses3[position][size];
+  const positionClass = positionClasses[position];
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    /* @__PURE__ */ jsx39(
+      "div",
+      {
+        className: "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-all duration-200",
+        onClick: onClose
       }
-    ) }),
-    isOpen && !disabled && /* @__PURE__ */ jsx3(
+    ),
+    /* @__PURE__ */ jsxs8(
       "div",
       {
-        className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`,
-        style: { maxHeight: "300px", overflowY: "auto" },
-        children: options.map((option) => /* @__PURE__ */ jsx3(
-          "div",
+        className: `fixed z-50 ${positionClass} ${sizeClass} bg-white dark:bg-gray-800 shadow-2xl overflow-hidden flex flex-col ${slideClasses[position]}`,
+        children: [
+          (title || showCloseButton) && /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+            title && /* @__PURE__ */ jsx39("h3", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+            showCloseButton && /* @__PURE__ */ jsx39(
+              "button",
+              {
+                onClick: onClose,
+                className: "ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                "aria-label": "Close drawer",
+                children: /* @__PURE__ */ jsx39("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx39("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx39("div", { className: "flex-1 p-6 overflow-y-auto", children })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/TextInput.tsx
+import { forwardRef } from "react";
+import { jsx as jsx40, jsxs as jsxs9 } from "react/jsx-runtime";
+var sizeClasses4 = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2.5 text-base",
+  lg: "px-4 py-3 text-lg"
+};
+var TextInput = forwardRef(
+  ({
+    label,
+    error,
+    helperText,
+    size = "md",
+    fullWidth = false,
+    leftIcon,
+    rightIcon,
+    className = "",
+    disabled,
+    ...props
+  }, ref) => {
+    const { theme, themeName } = useTheme();
+    const baseStyles = theme.select?.base || "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500";
+    const sizeStyle = sizeClasses4[size];
+    const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+    const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+    const widthStyle = fullWidth ? "w-full" : "";
+    const paddingWithIcon = leftIcon ? "pl-10" : rightIcon ? "pr-10" : "";
+    return /* @__PURE__ */ jsxs9("div", { className: `${widthStyle} ${className}`, children: [
+      label && /* @__PURE__ */ jsx40("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ jsx40("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500", children: leftIcon }),
+        /* @__PURE__ */ jsx40(
+          "input",
+          {
+            ref,
+            className: `${baseStyles} ${sizeStyle} ${errorStyles} ${disabledStyles} ${paddingWithIcon}`.trim(),
+            disabled,
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx40("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500", children: rightIcon })
+      ] }),
+      error && /* @__PURE__ */ jsx40("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx40("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/components/NumberInput.tsx
+import { useState as useState5, useRef as useRef2 } from "react";
+import { jsx as jsx41, jsxs as jsxs10 } from "react/jsx-runtime";
+var sizeClasses5 = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2.5 text-base",
+  lg: "px-4 py-3 text-lg"
+};
+var NumberInput = ({
+  label,
+  error,
+  helperText,
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  precision,
+  disabled = false,
+  hideControls = false,
+  size = "md",
+  fullWidth = false,
+  placeholder,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const inputRef = useRef2(null);
+  const [isFocused, setIsFocused] = useState5(false);
+  const clampValue = (val) => {
+    let clamped = val;
+    if (min !== void 0 && clamped < min) clamped = min;
+    if (max !== void 0 && clamped > max) clamped = max;
+    if (precision !== void 0) {
+      clamped = parseFloat(clamped.toFixed(precision));
+    }
+    return clamped;
+  };
+  const handleIncrement = () => {
+    if (disabled) return;
+    const currentValue = value ?? 0;
+    const newValue = clampValue(currentValue + step);
+    onChange?.(newValue);
+  };
+  const handleDecrement = () => {
+    if (disabled) return;
+    const currentValue = value ?? 0;
+    const newValue = clampValue(currentValue - step);
+    onChange?.(newValue);
+  };
+  const handleInputChange = (e) => {
+    const inputValue = e.target.value;
+    if (inputValue === "" || inputValue === "-") {
+      onChange?.(void 0);
+      return;
+    }
+    const numValue = parseFloat(inputValue);
+    if (!isNaN(numValue)) {
+      const clamped = clampValue(numValue);
+      onChange?.(clamped);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      handleIncrement();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      handleDecrement();
+    }
+  };
+  const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500";
+  const sizeStyle = sizeClasses5[size];
+  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+  const widthStyle = fullWidth ? "w-full" : "";
+  const paddingWithControls = !hideControls ? "pr-8" : "";
+  const displayValue = value !== void 0 ? value.toString() : "";
+  return /* @__PURE__ */ jsxs10("div", { className: `${widthStyle} ${className}`, children: [
+    label && /* @__PURE__ */ jsx41("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx41(
+        "input",
+        {
+          ref: inputRef,
+          type: "number",
+          value: displayValue,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          disabled,
+          placeholder,
+          min,
+          max,
+          step,
+          className: `${baseStyles} ${sizeStyle} ${errorStyles} ${disabledStyles} ${paddingWithControls} [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`.trim()
+        }
+      ),
+      !hideControls && /* @__PURE__ */ jsxs10("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex flex-col", children: [
+        /* @__PURE__ */ jsx41(
+          "button",
+          {
+            type: "button",
+            onClick: handleIncrement,
+            disabled: disabled || max !== void 0 && value !== void 0 && value >= max,
+            className: "px-2 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx41("svg", { className: "w-3 h-3 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx41("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 15l7-7 7 7" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx41(
+          "button",
+          {
+            type: "button",
+            onClick: handleDecrement,
+            disabled: disabled || min !== void 0 && value !== void 0 && value <= min,
+            className: "px-2 py-0.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx41("svg", { className: "w-3 h-3 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx41("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M19 9l-7 7-7-7" }) })
+          }
+        )
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsx41("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx41("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
+NumberInput.displayName = "NumberInput";
+
+// src/components/ActionMenu.tsx
+import { useState as useState6, useRef as useRef3, useEffect as useEffect5 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs11 } from "react/jsx-runtime";
+var ActionMenu = ({
+  items,
+  trigger,
+  position = "right",
+  placement = "bottom"
+}) => {
+  const { themeName } = useTheme();
+  const [isOpen, setIsOpen] = useState6(false);
+  const [menuPosition, setMenuPosition] = useState6(null);
+  const [mounted, setMounted] = useState6(false);
+  const menuRef = useRef3(null);
+  const triggerRef = useRef3(null);
+  useEffect5(() => {
+    setMounted(true);
+  }, []);
+  useEffect5(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  useEffect5(() => {
+    if (isOpen && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const menuWidth = 224;
+      const menuHeight = 300;
+      const spacing = 8;
+      let top = 0;
+      let left = 0;
+      switch (placement) {
+        case "top":
+          top = rect.top - menuHeight - spacing;
+          left = position === "left" ? rect.left : rect.right - menuWidth;
+          break;
+        case "bottom":
+          top = rect.bottom + spacing;
+          left = position === "left" ? rect.left : rect.right - menuWidth;
+          break;
+        case "left":
+          top = rect.top;
+          left = rect.left - menuWidth - spacing;
+          break;
+        case "right":
+          top = rect.top;
+          left = rect.right + spacing;
+          break;
+      }
+      setMenuPosition({ top, left });
+    } else {
+      setMenuPosition(null);
+    }
+  }, [isOpen, position, placement]);
+  const handleItemClick = (item) => {
+    if (item.type === "divider") return;
+    if (!item.disabled) {
+      item.onClick();
+      setIsOpen(false);
+    }
+  };
+  const defaultTrigger = /* @__PURE__ */ jsx42(
+    "button",
+    {
+      className: "p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+      "aria-label": "Open menu",
+      children: /* @__PURE__ */ jsx42("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx42("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) })
+    }
+  );
+  const menuBaseStyles = themeName === "minimalistic" ? "bg-black border-2 border-white" : "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg";
+  const itemBaseStyles = themeName === "minimalistic" ? "text-white hover:bg-white hover:text-black transition-colors duration-200" : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
+  const menu = isOpen && mounted && menuPosition ? /* @__PURE__ */ jsx42(
+    "div",
+    {
+      ref: menuRef,
+      className: `fixed w-56 rounded-lg ${menuBaseStyles} z-[9999] max-h-[80vh] overflow-auto`,
+      style: {
+        minWidth: "14rem",
+        top: `${menuPosition.top}px`,
+        left: `${menuPosition.left}px`
+      },
+      children: items.map((item, index) => {
+        if (item.type === "divider") {
+          return /* @__PURE__ */ jsx42(
+            "div",
+            {
+              className: "my-1 border-t border-gray-200 dark:border-gray-700"
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ jsxs11(
+          "button",
           {
-            className: `${optionBaseStyles} ${optionSizeStyles} cursor-pointer ${value === option.value ? themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-100 dark:bg-blue-900" : ""}`,
-            onClick: () => handleSelect(option.value),
-            children: option.label
+            onClick: () => handleItemClick(item),
+            disabled: item.disabled,
+            className: `w-full text-left px-4 py-3 flex items-center gap-3 ${itemBaseStyles} ${item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${item.variant === "danger" ? "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20" : ""}`,
+            children: [
+              item.icon && /* @__PURE__ */ jsx42("span", { className: "flex-shrink-0", children: item.icon }),
+              /* @__PURE__ */ jsx42("span", { className: "flex-1", children: item.label })
+            ]
           },
-          option.value
-        ))
+          index
+        );
+      })
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+    /* @__PURE__ */ jsx42("div", { className: "relative inline-block", ref: triggerRef, children: /* @__PURE__ */ jsx42("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }) }),
+    mounted && createPortal(menu, document.body)
+  ] });
+};
+
+// src/components/Card.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+var paddingClasses = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+var Card = ({
+  children,
+  className = "",
+  padding = "md",
+  hover = false,
+  ...props
+}) => {
+  const { theme } = useTheme();
+  const paddingClass = paddingClasses[padding];
+  const hoverClass = hover ? "hover:shadow-xl hover:scale-[1.02] hover:border-blue-400 dark:hover:border-blue-500 cursor-pointer transition-all duration-200 ease-in-out" : "";
+  return /* @__PURE__ */ jsx43(
+    "div",
+    {
+      className: `bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 ${paddingClass} ${hoverClass} ${className}`,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/Alert.tsx
+import { jsx as jsx44, jsxs as jsxs12 } from "react/jsx-runtime";
+var variantStyles = {
+  info: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-900 dark:text-blue-100",
+  success: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-900 dark:text-green-100",
+  warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-900 dark:text-yellow-100",
+  error: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-900 dark:text-red-100"
+};
+var iconStyles = {
+  info: "text-blue-600 dark:text-blue-400",
+  success: "text-green-600 dark:text-green-400",
+  warning: "text-yellow-600 dark:text-yellow-400",
+  error: "text-red-600 dark:text-red-400"
+};
+var Alert = ({
+  variant = "info",
+  title,
+  children,
+  onClose,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const variantClass = variantStyles[variant];
+  const iconClass = iconStyles[variant];
+  return /* @__PURE__ */ jsx44("div", { className: `rounded-lg border p-4 ${variantClass} ${className}`, role: "alert", children: /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsxs12("div", { className: `flex-shrink-0 ${iconClass}`, children: [
+      variant === "info" && /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx44("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+      variant === "success" && /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx44("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
+      variant === "warning" && /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx44("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+      variant === "error" && /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx44("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex-1", children: [
+      title && /* @__PURE__ */ jsx44("h3", { className: "font-semibold mb-1", children: title }),
+      /* @__PURE__ */ jsx44("div", { className: "text-sm", children })
+    ] }),
+    onClose && /* @__PURE__ */ jsx44(
+      "button",
+      {
+        onClick: onClose,
+        className: `flex-shrink-0 ${iconClass} hover:opacity-70 transition-opacity`,
+        "aria-label": "Close alert",
+        children: /* @__PURE__ */ jsx44("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx44("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
       }
     )
+  ] }) });
+};
+
+// src/components/Checkbox.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx45, jsxs as jsxs13 } from "react/jsx-runtime";
+var Checkbox = forwardRef2(
+  ({ label, error, className = "", disabled, checked, ...props }, ref) => {
+    const { theme } = useTheme();
+    return /* @__PURE__ */ jsxs13("div", { className, children: [
+      /* @__PURE__ */ jsxs13("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "relative inline-flex items-center", children: [
+          /* @__PURE__ */ jsx45(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              disabled,
+              checked,
+              className: "sr-only peer",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx45("div", { className: `w-4 h-4 border-2 rounded transition-all duration-200 flex items-center justify-center
+              ${error ? "border-red-500 dark:border-red-500" : "border-gray-300 dark:border-gray-600"}
+              ${disabled ? "opacity-50 cursor-not-allowed bg-gray-100 dark:bg-gray-800" : "peer-hover:border-gray-400 dark:peer-hover:border-gray-500"}
+              peer-checked:bg-blue-600 peer-checked:border-blue-600
+              peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2
+            `, children: /* @__PURE__ */ jsx45(
+            "svg",
+            {
+              className: `w-3 h-3 text-white transition-opacity duration-200 ${checked ? "opacity-100" : "opacity-0"}`,
+              viewBox: "0 0 12 12",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx45(
+                "path",
+                {
+                  d: "M10 3L4.5 8.5L2 6",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ) })
+        ] }),
+        label && /* @__PURE__ */ jsx45("span", { className: `text-sm text-gray-700 dark:text-gray-300 ${disabled ? "opacity-50 cursor-not-allowed" : "group-hover:text-gray-900 dark:group-hover:text-gray-100"}`, children: label })
+      ] }),
+      error && /* @__PURE__ */ jsx45("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/Toggle.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx46, jsxs as jsxs14 } from "react/jsx-runtime";
+var Toggle = forwardRef3(
+  ({ label, size = "md", className = "", disabled, checked, ...props }, ref) => {
+    const { theme } = useTheme();
+    const toggleClasses = {
+      sm: {
+        switch: "w-9 h-5",
+        thumb: "w-4 h-4 peer-checked:translate-x-4"
+      },
+      md: {
+        switch: "w-11 h-6",
+        thumb: "w-5 h-5 peer-checked:translate-x-5"
+      },
+      lg: {
+        switch: "w-14 h-7",
+        thumb: "w-6 h-6 peer-checked:translate-x-7"
+      }
+    };
+    const currentSize = toggleClasses[size];
+    return /* @__PURE__ */ jsxs14("label", { className: `inline-flex items-center gap-3 cursor-pointer ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`, children: [
+      /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx46(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: "sr-only peer",
+            disabled,
+            checked,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx46(
+          "div",
+          {
+            className: `${currentSize.switch} bg-gray-300 dark:bg-gray-700 peer-focus:ring-2 peer-focus:ring-blue-500 rounded-full peer peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500 transition-colors`
+          }
+        ),
+        /* @__PURE__ */ jsx46(
+          "div",
+          {
+            className: `${currentSize.thumb} bg-white rounded-full shadow-md absolute top-0.5 left-0.5 transition-transform`
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label })
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+
+// src/components/Badge.tsx
+import { jsx as jsx47 } from "react/jsx-runtime";
+var variantStyles2 = {
+  default: "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200",
+  primary: "bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200",
+  success: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200",
+  warning: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200",
+  error: "bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200",
+  info: "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-200"
+};
+var sizeStyles = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-1 text-sm",
+  lg: "px-3 py-1.5 text-base"
+};
+var Badge = ({
+  children,
+  variant = "default",
+  size = "md",
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const variantClass = variantStyles2[variant];
+  const sizeClass = sizeStyles[size];
+  return /* @__PURE__ */ jsx47("span", { className: `inline-flex items-center font-medium rounded-full ${variantClass} ${sizeClass} ${className}`, children });
+};
+
+// src/components/Spinner.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
+var sizeClasses6 = {
+  sm: "w-4 h-4 border-2",
+  md: "w-8 h-8 border-2",
+  lg: "w-12 h-12 border-3",
+  xl: "w-16 h-16 border-4"
+};
+var colorClasses = {
+  primary: "border-blue-600 border-t-transparent",
+  secondary: "border-gray-600 border-t-transparent",
+  white: "border-white border-t-transparent"
+};
+var Spinner = ({
+  size = "md",
+  color = "primary",
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const sizeClass = sizeClasses6[size];
+  const colorClass = colorClasses[color];
+  return /* @__PURE__ */ jsx48(
+    "div",
+    {
+      className: `inline-block rounded-full animate-spin ${sizeClass} ${colorClass} ${className}`,
+      role: "status",
+      "aria-label": "Loading",
+      children: /* @__PURE__ */ jsx48("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+};
+
+// src/components/Tabs.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx49, jsxs as jsxs15 } from "react/jsx-runtime";
+var Tabs = ({
+  tabs,
+  defaultIndex = 0,
+  onChange,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const [activeIndex, setActiveIndex] = useState7(defaultIndex);
+  const handleTabClick = (index) => {
+    if (tabs[index].disabled) return;
+    setActiveIndex(index);
+    onChange?.(index);
+  };
+  return /* @__PURE__ */ jsxs15("div", { className, children: [
+    /* @__PURE__ */ jsx49("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx49("nav", { className: "flex gap-8 px-6", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ jsx49(
+      "button",
+      {
+        onClick: () => handleTabClick(index),
+        disabled: tab.disabled,
+        className: `py-4 px-1 border-b-2 font-medium text-sm transition-colors ${activeIndex === index ? "border-blue-600 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600"} ${tab.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+        "aria-current": activeIndex === index ? "page" : void 0,
+        children: tab.label
+      },
+      index
+    )) }) }),
+    /* @__PURE__ */ jsx49("div", { children: tabs[activeIndex]?.content })
+  ] });
+};
+
+// src/components/Table.tsx
+import { jsx as jsx50, jsxs as jsxs16 } from "react/jsx-runtime";
+function Table({
+  columns,
+  data,
+  keyField = "id",
+  striped = false,
+  hoverable = true,
+  className = ""
+}) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsxs16("div", { className: `overflow-x-auto ${className}`, children: [
+    /* @__PURE__ */ jsxs16("table", { className: "w-full text-left", children: [
+      /* @__PURE__ */ jsx50("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx50("tr", { children: columns.map((column, colIndex) => {
+        const isLast = colIndex === columns.length - 1;
+        return /* @__PURE__ */ jsx50(
+          "th",
+          {
+            className: isLast ? "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider relative" : "px-6 py-3 text-xs font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider",
+            style: { width: column.width },
+            children: column.title
+          },
+          column.key
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx50("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => {
+        const rowClasses = [
+          striped && rowIndex % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : "",
+          hoverable ? "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" : ""
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsx50(
+          "tr",
+          {
+            className: rowClasses,
+            children: columns.map((column, colIndex) => {
+              const isLast = colIndex === columns.length - 1;
+              return /* @__PURE__ */ jsx50(
+                "td",
+                {
+                  className: isLast ? "px-6 py-4 text-sm text-gray-900 dark:text-gray-100 overflow-visible" : "px-6 py-4 text-sm text-gray-900 dark:text-gray-100",
+                  children: column.render ? column.render(row[column.key], row, rowIndex) : row[column.key]
+                },
+                column.key
+              );
+            })
+          },
+          row[keyField] || rowIndex
+        );
+      }) })
+    ] }),
+    data.length === 0 && /* @__PURE__ */ jsx50("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
+  ] });
+}
+
+// src/components/Pagination.tsx
+import { jsx as jsx51, jsxs as jsxs17 } from "react/jsx-runtime";
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, idx) => idx + start);
+  };
+  const paginationRange = () => {
+    const totalPageNumbers = siblingCount + 5;
+    if (totalPageNumbers >= totalPages) {
+      return range(1, totalPages);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPages;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * siblingCount;
+      const leftRange = range(1, leftItemCount);
+      return [...leftRange, "...", totalPages];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * siblingCount;
+      const rightRange = range(totalPages - rightItemCount + 1, totalPages);
+      return [firstPageIndex, "...", ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, "...", ...middleRange, "...", lastPageIndex];
+    }
+    return range(1, totalPages);
+  };
+  const pages = paginationRange();
+  return /* @__PURE__ */ jsxs17("nav", { className: `flex items-center gap-1 ${className}`, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx51(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage - 1),
+        disabled: currentPage === 1,
+        className: "px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+        "aria-label": "Previous page",
+        children: "Previous"
+      }
+    ),
+    pages.map((page, index) => {
+      if (page === "...") {
+        return /* @__PURE__ */ jsx51(
+          "span",
+          {
+            className: "px-3 py-2 text-gray-700 dark:text-gray-300",
+            children: "..."
+          },
+          `dots-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsx51(
+        "button",
+        {
+          onClick: () => onPageChange(page),
+          className: `px-3 py-2 rounded-md text-sm font-medium transition-colors ${currentPage === page ? "bg-blue-600 text-white" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"}`,
+          "aria-label": `Page ${page}`,
+          "aria-current": currentPage === page ? "page" : void 0,
+          children: page
+        },
+        page
+      );
+    }),
+    /* @__PURE__ */ jsx51(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        className: "px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+        "aria-label": "Next page",
+        children: "Next"
+      }
+    )
+  ] });
+};
+
+// src/components/DatePicker.tsx
+import { useState as useState8, useRef as useRef4, useEffect as useEffect6 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx52, jsxs as jsxs18 } from "react/jsx-runtime";
+var DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DatePicker = ({
+  label,
+  error,
+  helperText,
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled,
+  className = "",
+  placeholder = "Select date..."
+}) => {
+  const { theme } = useTheme();
+  const [isOpen, setIsOpen] = useState8(false);
+  const [viewDate, setViewDate] = useState8(value || /* @__PURE__ */ new Date());
+  const [mounted, setMounted] = useState8(false);
+  const [calendarPosition, setCalendarPosition] = useState8(null);
+  const inputRef = useRef4(null);
+  const calendarRef = useRef4(null);
+  useEffect6(() => {
+    setMounted(true);
+  }, []);
+  useEffect6(() => {
+    const handleClickOutside = (event) => {
+      if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  useEffect6(() => {
+    if (isOpen && inputRef.current) {
+      const rect = inputRef.current.getBoundingClientRect();
+      setCalendarPosition({
+        top: rect.bottom + 8,
+        left: rect.left
+      });
+    } else {
+      setCalendarPosition(null);
+    }
+  }, [isOpen]);
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDayOfMonth = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevMonth = new Date(year, month, 0).getDate();
+  const calendarDays = [];
+  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+    calendarDays.push(new Date(year, month - 1, daysInPrevMonth - i));
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    calendarDays.push(new Date(year, month, i));
+  }
+  const remainingDays = 42 - calendarDays.length;
+  for (let i = 1; i <= remainingDays; i++) {
+    calendarDays.push(new Date(year, month + 1, i));
+  }
+  const isSameDay = (date1, date2) => {
+    return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+  };
+  const isToday = (date) => {
+    return isSameDay(date, /* @__PURE__ */ new Date());
+  };
+  const isSelected = (date) => {
+    return value && isSameDay(date, value);
+  };
+  const isCurrentMonth = (date) => {
+    return date.getMonth() === month;
+  };
+  const isDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+  const handleDateClick = (date) => {
+    if (isDisabled(date)) return;
+    onChange?.(date);
+    setIsOpen(false);
+  };
+  const handlePrevMonth = () => {
+    setViewDate(new Date(year, month - 1, 1));
+  };
+  const handleNextMonth = () => {
+    setViewDate(new Date(year, month + 1, 1));
+  };
+  const handleToday = () => {
+    const today = /* @__PURE__ */ new Date();
+    setViewDate(today);
+    onChange?.(today);
+    setIsOpen(false);
+  };
+  const formatDate = (date) => {
+    if (!date) return "";
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  };
+  const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500 cursor-pointer";
+  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+  const calendar = isOpen && mounted && calendarPosition ? /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      ref: calendarRef,
+      className: "fixed z-[9999] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4",
+      style: {
+        top: `${calendarPosition.top}px`,
+        left: `${calendarPosition.left}px`,
+        minWidth: "320px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx52(
+            "button",
+            {
+              onClick: handlePrevMonth,
+              className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+              "aria-label": "Previous month",
+              children: /* @__PURE__ */ jsx52("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs18("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
+              MONTHS[month],
+              " ",
+              year
+            ] }),
+            /* @__PURE__ */ jsx52(
+              "button",
+              {
+                onClick: handleToday,
+                className: "px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+                children: "Today"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx52(
+            "button",
+            {
+              onClick: handleNextMonth,
+              className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+              "aria-label": "Next month",
+              children: /* @__PURE__ */ jsx52("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx52("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ jsx52("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
+        /* @__PURE__ */ jsx52("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+          const isCurrentMonthDay = isCurrentMonth(date);
+          const isTodayDay = isToday(date);
+          const isSelectedDay = isSelected(date);
+          const isDisabledDay = isDisabled(date);
+          return /* @__PURE__ */ jsx52(
+            "button",
+            {
+              onClick: () => handleDateClick(date),
+              disabled: isDisabledDay,
+              className: `
+                aspect-square p-1 rounded-lg text-sm font-medium transition-all
+                ${!isCurrentMonthDay ? "text-gray-400 dark:text-gray-600" : "text-gray-900 dark:text-gray-100"}
+                ${isTodayDay && !isSelectedDay ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold" : ""}
+                ${isSelectedDay ? "bg-blue-600 text-white hover:bg-blue-700" : ""}
+                ${!isSelectedDay && !isDisabledDay ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                ${isDisabledDay ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}
+              `,
+              children: date.getDate()
+            },
+            index
+          );
+        }) })
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs18("div", { className, children: [
+    label && /* @__PURE__ */ jsx52("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        ref: inputRef,
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
+        children: [
+          /* @__PURE__ */ jsx52("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDate(value) : placeholder }),
+          /* @__PURE__ */ jsx52("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx52("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    mounted && createPortal2(calendar, document.body)
+  ] });
+};
+DatePicker.displayName = "DatePicker";
+
+// src/components/TimePicker.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx53, jsxs as jsxs19 } from "react/jsx-runtime";
+var TimePicker = forwardRef4(
+  ({ label, error, helperText, className = "", disabled, ...props }, ref) => {
+    const { theme } = useTheme();
+    const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500";
+    const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+    const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+    return /* @__PURE__ */ jsxs19("div", { className, children: [
+      label && /* @__PURE__ */ jsx53("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ jsx53(
+        "input",
+        {
+          ref,
+          type: "time",
+          disabled,
+          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx53("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx53("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+TimePicker.displayName = "TimePicker";
+
+// src/components/DateTimePicker.tsx
+import { useState as useState9, useRef as useRef5, useEffect as useEffect7 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx54, jsxs as jsxs20 } from "react/jsx-runtime";
+var DAYS2 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS2 = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DateTimePicker = ({
+  label,
+  error,
+  helperText,
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disabled,
+  className = "",
+  placeholder = "Select date and time..."
+}) => {
+  const { theme } = useTheme();
+  const [isOpen, setIsOpen] = useState9(false);
+  const [viewDate, setViewDate] = useState9(value || /* @__PURE__ */ new Date());
+  const [selectedTime, setSelectedTime] = useState9(
+    value ? { hours: value.getHours(), minutes: value.getMinutes() } : { hours: 12, minutes: 0 }
+  );
+  const [mounted, setMounted] = useState9(false);
+  const [pickerPosition, setPickerPosition] = useState9(null);
+  const inputRef = useRef5(null);
+  const pickerRef = useRef5(null);
+  useEffect7(() => {
+    setMounted(true);
+  }, []);
+  useEffect7(() => {
+    const handleClickOutside = (event) => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  useEffect7(() => {
+    if (isOpen && inputRef.current) {
+      const rect = inputRef.current.getBoundingClientRect();
+      setPickerPosition({
+        top: rect.bottom + 8,
+        left: rect.left
+      });
+    } else {
+      setPickerPosition(null);
+    }
+  }, [isOpen]);
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDayOfMonth = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevMonth = new Date(year, month, 0).getDate();
+  const calendarDays = [];
+  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+    calendarDays.push(new Date(year, month - 1, daysInPrevMonth - i));
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    calendarDays.push(new Date(year, month, i));
+  }
+  const remainingDays = 42 - calendarDays.length;
+  for (let i = 1; i <= remainingDays; i++) {
+    calendarDays.push(new Date(year, month + 1, i));
+  }
+  const isSameDay = (date1, date2) => {
+    return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+  };
+  const isToday = (date) => {
+    return isSameDay(date, /* @__PURE__ */ new Date());
+  };
+  const isSelected = (date) => {
+    return value && isSameDay(date, value);
+  };
+  const isCurrentMonth = (date) => {
+    return date.getMonth() === month;
+  };
+  const isDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+  const handleDateClick = (date) => {
+    if (isDisabled(date)) return;
+    const newDateTime = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate(),
+      selectedTime.hours,
+      selectedTime.minutes
+    );
+    onChange?.(newDateTime);
+  };
+  const handleTimeChange = (hours, minutes) => {
+    setSelectedTime({ hours, minutes });
+    if (value) {
+      const newDateTime = new Date(
+        value.getFullYear(),
+        value.getMonth(),
+        value.getDate(),
+        hours,
+        minutes
+      );
+      onChange?.(newDateTime);
+    }
+  };
+  const handleDone = () => {
+    if (value) {
+      setIsOpen(false);
+    }
+  };
+  const handlePrevMonth = () => {
+    setViewDate(new Date(year, month - 1, 1));
+  };
+  const handleNextMonth = () => {
+    setViewDate(new Date(year, month + 1, 1));
+  };
+  const handleToday = () => {
+    const now = /* @__PURE__ */ new Date();
+    setViewDate(now);
+    setSelectedTime({ hours: now.getHours(), minutes: now.getMinutes() });
+    onChange?.(now);
+  };
+  const formatDateTime = (date) => {
+    if (!date) return "";
+    return date.toLocaleString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: true
+    });
+  };
+  const formatTime = (hours, minutes) => {
+    const period = hours >= 12 ? "PM" : "AM";
+    const displayHours = hours % 12 || 12;
+    const displayMinutes = minutes.toString().padStart(2, "0");
+    return `${displayHours}:${displayMinutes} ${period}`;
+  };
+  const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500 cursor-pointer";
+  const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+  const picker = isOpen && mounted && pickerPosition ? /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      ref: pickerRef,
+      className: "fixed z-[9999] bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-4",
+      style: {
+        top: `${pickerPosition.top}px`,
+        left: `${pickerPosition.left}px`,
+        minWidth: "360px"
+      },
+      children: [
+        /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsx54(
+            "button",
+            {
+              onClick: handlePrevMonth,
+              className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+              "aria-label": "Previous month",
+              children: /* @__PURE__ */ jsx54("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs20("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
+              MONTHS2[month],
+              " ",
+              year
+            ] }),
+            /* @__PURE__ */ jsx54(
+              "button",
+              {
+                onClick: handleToday,
+                className: "px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+                children: "Now"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx54(
+            "button",
+            {
+              onClick: handleNextMonth,
+              className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+              "aria-label": "Next month",
+              children: /* @__PURE__ */ jsx54("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS2.map((day) => /* @__PURE__ */ jsx54("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
+        /* @__PURE__ */ jsx54("div", { className: "grid grid-cols-7 gap-1 mb-4", children: calendarDays.map((date, index) => {
+          const isCurrentMonthDay = isCurrentMonth(date);
+          const isTodayDay = isToday(date);
+          const isSelectedDay = isSelected(date);
+          const isDisabledDay = isDisabled(date);
+          return /* @__PURE__ */ jsx54(
+            "button",
+            {
+              onClick: () => handleDateClick(date),
+              disabled: isDisabledDay,
+              className: `
+                aspect-square p-1 rounded-lg text-sm font-medium transition-all
+                ${!isCurrentMonthDay ? "text-gray-400 dark:text-gray-600" : "text-gray-900 dark:text-gray-100"}
+                ${isTodayDay && !isSelectedDay ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold" : ""}
+                ${isSelectedDay ? "bg-blue-600 text-white hover:bg-blue-700" : ""}
+                ${!isSelectedDay && !isDisabledDay ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                ${isDisabledDay ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}
+              `,
+              children: date.getDate()
+            },
+            index
+          );
+        }) }),
+        /* @__PURE__ */ jsxs20("div", { className: "border-t border-gray-200 dark:border-gray-700 pt-4", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-center gap-4 mb-4", children: [
+            /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx54("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Hour" }),
+              /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ jsx54(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleTimeChange((selectedTime.hours + 1) % 24, selectedTime.minutes),
+                    className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
+                    children: /* @__PURE__ */ jsx54("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx54(
+                  "input",
+                  {
+                    type: "number",
+                    min: "0",
+                    max: "23",
+                    value: selectedTime.hours,
+                    onChange: (e) => {
+                      const val = parseInt(e.target.value);
+                      if (!isNaN(val) && val >= 0 && val <= 23) {
+                        handleTimeChange(val, selectedTime.minutes);
+                      }
+                    },
+                    className: "w-16 px-2 py-2 text-center border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  }
+                ),
+                /* @__PURE__ */ jsx54(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleTimeChange((selectedTime.hours - 1 + 24) % 24, selectedTime.minutes),
+                    className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
+                    children: /* @__PURE__ */ jsx54("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx54("span", { className: "text-2xl font-bold text-gray-600 dark:text-gray-400 mt-8", children: ":" }),
+            /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx54("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Minute" }),
+              /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ jsx54(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleTimeChange(selectedTime.hours, (selectedTime.minutes + 1) % 60),
+                    className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
+                    children: /* @__PURE__ */ jsx54("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx54(
+                  "input",
+                  {
+                    type: "number",
+                    min: "0",
+                    max: "59",
+                    value: selectedTime.minutes,
+                    onChange: (e) => {
+                      const val = parseInt(e.target.value);
+                      if (!isNaN(val) && val >= 0 && val <= 59) {
+                        handleTimeChange(selectedTime.hours, val);
+                      }
+                    },
+                    className: "w-16 px-2 py-2 text-center border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 text-lg font-semibold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  }
+                ),
+                /* @__PURE__ */ jsx54(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleTimeChange(selectedTime.hours, (selectedTime.minutes - 1 + 60) % 60),
+                    className: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors",
+                    children: /* @__PURE__ */ jsx54("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx54("div", { className: "text-center text-sm text-gray-600 dark:text-gray-400 mb-4", children: formatTime(selectedTime.hours, selectedTime.minutes) }),
+          /* @__PURE__ */ jsx54(
+            "button",
+            {
+              onClick: handleDone,
+              className: "w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium",
+              children: "Done"
+            }
+          )
+        ] })
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs20("div", { className, children: [
+    label && /* @__PURE__ */ jsx54("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsxs20(
+      "div",
+      {
+        ref: inputRef,
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
+        children: [
+          /* @__PURE__ */ jsx54("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDateTime(value) : placeholder }),
+          /* @__PURE__ */ jsx54("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx54("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx54("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx54("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    mounted && createPortal3(picker, document.body)
+  ] });
+};
+DateTimePicker.displayName = "DateTimePicker";
+
+// src/components/Calendar.tsx
+import { useState as useState10 } from "react";
+import { jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
+var DAYS3 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTHS3 = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var Calendar = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const [currentDate, setCurrentDate] = useState10(value || /* @__PURE__ */ new Date());
+  const [viewDate, setViewDate] = useState10(value || /* @__PURE__ */ new Date());
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDayOfMonth = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevMonth = new Date(year, month, 0).getDate();
+  const calendarDays = [];
+  for (let i = firstDayOfMonth - 1; i >= 0; i--) {
+    calendarDays.push(new Date(year, month - 1, daysInPrevMonth - i));
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    calendarDays.push(new Date(year, month, i));
+  }
+  const remainingDays = 42 - calendarDays.length;
+  for (let i = 1; i <= remainingDays; i++) {
+    calendarDays.push(new Date(year, month + 1, i));
+  }
+  const isSameDay = (date1, date2) => {
+    return date1.getDate() === date2.getDate() && date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+  };
+  const isToday = (date) => {
+    return isSameDay(date, /* @__PURE__ */ new Date());
+  };
+  const isSelected = (date) => {
+    return value && isSameDay(date, value);
+  };
+  const isCurrentMonth = (date) => {
+    return date.getMonth() === month;
+  };
+  const isDisabled = (date) => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+  const handleDateClick = (date) => {
+    if (isDisabled(date)) return;
+    setCurrentDate(date);
+    onChange?.(date);
+  };
+  const handlePrevMonth = () => {
+    setViewDate(new Date(year, month - 1, 1));
+  };
+  const handleNextMonth = () => {
+    setViewDate(new Date(year, month + 1, 1));
+  };
+  const handleToday = () => {
+    const today = /* @__PURE__ */ new Date();
+    setViewDate(today);
+    setCurrentDate(today);
+    onChange?.(today);
+  };
+  return /* @__PURE__ */ jsxs21("div", { className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx55(
+        "button",
+        {
+          onClick: handlePrevMonth,
+          className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+          "aria-label": "Previous month",
+          children: /* @__PURE__ */ jsx55("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx55("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs21("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: [
+          MONTHS3[month],
+          " ",
+          year
+        ] }),
+        /* @__PURE__ */ jsx55(
+          "button",
+          {
+            onClick: handleToday,
+            className: "px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors",
+            children: "Today"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx55(
+        "button",
+        {
+          onClick: handleNextMonth,
+          className: "p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors",
+          "aria-label": "Next month",
+          children: /* @__PURE__ */ jsx55("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx55("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx55("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS3.map((day) => /* @__PURE__ */ jsx55(
+      "div",
+      {
+        className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsx55("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+      if (!date) return /* @__PURE__ */ jsx55("div", {}, index);
+      const isCurrentMonthDay = isCurrentMonth(date);
+      const isTodayDay = isToday(date);
+      const isSelectedDay = isSelected(date);
+      const isDisabledDay = isDisabled(date);
+      return /* @__PURE__ */ jsx55(
+        "button",
+        {
+          onClick: () => handleDateClick(date),
+          disabled: isDisabledDay,
+          className: `
+                aspect-square p-2 rounded-lg text-sm font-medium transition-all
+                ${!isCurrentMonthDay ? "text-gray-400 dark:text-gray-600" : "text-gray-900 dark:text-gray-100"}
+                ${isTodayDay && !isSelectedDay ? "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-bold" : ""}
+                ${isSelectedDay ? "bg-blue-600 text-white hover:bg-blue-700" : ""}
+                ${!isSelectedDay && !isDisabledDay ? "hover:bg-gray-100 dark:hover:bg-gray-700" : ""}
+                ${isDisabledDay ? "opacity-30 cursor-not-allowed" : "cursor-pointer"}
+              `,
+          children: date.getDate()
+        },
+        index
+      );
+    }) })
+  ] });
+};
+
+// src/components/Radio.tsx
+import React17 from "react";
+import { jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
+var Radio = ({
+  name,
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  disabled = false,
+  orientation = "vertical",
+  className = ""
+}) => {
+  const [internalValue, setInternalValue] = React17.useState(defaultValue || "");
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const handleChange = (optionValue) => {
+    if (disabled) return;
+    setInternalValue(optionValue);
+    onChange?.(optionValue);
+  };
+  const containerClass = orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-2";
+  return /* @__PURE__ */ jsx56("div", { className: `${containerClass} ${className}`, role: "radiogroup", children: options.map((option) => {
+    const isDisabled = disabled || option.disabled;
+    const isChecked = value === option.value;
+    const id = `${name}-${option.value}`;
+    return /* @__PURE__ */ jsxs22(
+      "label",
+      {
+        htmlFor: id,
+        className: `flex items-center gap-2 cursor-pointer group ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs22("div", { className: "relative inline-flex items-center", children: [
+            /* @__PURE__ */ jsx56(
+              "input",
+              {
+                type: "radio",
+                id,
+                name,
+                value: option.value,
+                checked: isChecked,
+                onChange: () => handleChange(option.value),
+                disabled: isDisabled,
+                className: "sr-only peer"
+              }
+            ),
+            /* @__PURE__ */ jsx56("div", { className: `w-4 h-4 rounded-full border-2 transition-all duration-200 flex items-center justify-center
+                border-gray-300 dark:border-gray-600
+                ${isDisabled ? "bg-gray-100 dark:bg-gray-800" : "peer-hover:border-gray-400 dark:peer-hover:border-gray-500"}
+                ${isChecked ? "border-blue-600 bg-white dark:bg-gray-900" : ""}
+                peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2
+              `, children: /* @__PURE__ */ jsx56("div", { className: `w-2 h-2 rounded-full bg-blue-600 transition-all duration-200 ${isChecked ? "scale-100" : "scale-0"}` }) })
+          ] }),
+          /* @__PURE__ */ jsx56("span", { className: `text-sm font-medium text-gray-900 dark:text-gray-300 ${!isDisabled && "group-hover:text-gray-700 dark:group-hover:text-gray-100"}`, children: option.label })
+        ]
+      },
+      option.value
+    );
+  }) });
+};
+
+// src/components/ProgressBar.tsx
+import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
+var ProgressBar = ({
+  value,
+  max = 100,
+  size = "md",
+  variant = "default",
+  showLabel = false,
+  label,
+  className = ""
+}) => {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const sizeClasses7 = {
+    sm: "h-1",
+    md: "h-2",
+    lg: "h-3"
+  };
+  const variantClasses = {
+    default: "bg-blue-600 dark:bg-blue-500",
+    success: "bg-green-600 dark:bg-green-500",
+    warning: "bg-yellow-500 dark:bg-yellow-400",
+    danger: "bg-red-600 dark:bg-red-500"
+  };
+  return /* @__PURE__ */ jsxs23("div", { className: `w-full ${className}`, children: [
+    (showLabel || label) && /* @__PURE__ */ jsxs23("div", { className: "flex justify-between items-center mb-1", children: [
+      label && /* @__PURE__ */ jsx57("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      showLabel && /* @__PURE__ */ jsxs23("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx57(
+      "div",
+      {
+        className: `w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden ${sizeClasses7[size]}`,
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        children: /* @__PURE__ */ jsx57(
+          "div",
+          {
+            className: `${sizeClasses7[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/components/Slider.tsx
+import React18, { useRef as useRef6 } from "react";
+import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
+var Slider = ({
+  value: controlledValue,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  disabled = false,
+  showValue = false,
+  label,
+  className = "",
+  range = false,
+  rangeValue: controlledRangeValue,
+  defaultRangeValue = [25, 75],
+  onRangeChange
+}) => {
+  const [internalValue, setInternalValue] = React18.useState(defaultValue);
+  const [internalRangeValue, setInternalRangeValue] = React18.useState(defaultRangeValue);
+  const trackRef = useRef6(null);
+  const [isDragging, setIsDragging] = React18.useState(null);
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const rangeValue = controlledRangeValue !== void 0 ? controlledRangeValue : internalRangeValue;
+  const handleChange = (e) => {
+    const newValue = Number(e.target.value);
+    setInternalValue(newValue);
+    onChange?.(newValue);
+  };
+  const handleRangeMouseDown = (e, handle) => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(handle);
+  };
+  const handleRangeMouseMove = (e) => {
+    if (!isDragging || !trackRef.current || disabled) return;
+    const rect = trackRef.current.getBoundingClientRect();
+    const percentage2 = Math.max(0, Math.min(100, (e.clientX - rect.left) / rect.width * 100));
+    const newValue = Math.round(percentage2 / 100 * (max - min) / step) * step + min;
+    if (isDragging === "min") {
+      const newMin = Math.min(newValue, rangeValue[1] - step);
+      const newRange = [newMin, rangeValue[1]];
+      setInternalRangeValue(newRange);
+      onRangeChange?.(newRange);
+    } else {
+      const newMax = Math.max(newValue, rangeValue[0] + step);
+      const newRange = [rangeValue[0], newMax];
+      setInternalRangeValue(newRange);
+      onRangeChange?.(newRange);
+    }
+  };
+  const handleRangeMouseUp = () => {
+    setIsDragging(null);
+  };
+  React18.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleRangeMouseMove);
+      document.addEventListener("mouseup", handleRangeMouseUp);
+      return () => {
+        document.removeEventListener("mousemove", handleRangeMouseMove);
+        document.removeEventListener("mouseup", handleRangeMouseUp);
+      };
+    }
+  }, [isDragging, rangeValue]);
+  const percentage = (value - min) / (max - min) * 100;
+  const minPercentage = (rangeValue[0] - min) / (max - min) * 100;
+  const maxPercentage = (rangeValue[1] - min) / (max - min) * 100;
+  if (range) {
+    return /* @__PURE__ */ jsxs24("div", { className: `w-full ${className}`, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs24("div", { className: "flex justify-between items-center mb-2", children: [
+        label && /* @__PURE__ */ jsx58("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+        showValue && /* @__PURE__ */ jsxs24("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+          rangeValue[0],
+          " - ",
+          rangeValue[1]
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs24("div", { className: "relative h-10 flex items-center", ref: trackRef, children: [
+        /* @__PURE__ */ jsx58("div", { className: "absolute w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full" }),
+        /* @__PURE__ */ jsx58(
+          "div",
+          {
+            className: "absolute h-2 bg-blue-600 dark:bg-blue-500 rounded-full pointer-events-none",
+            style: {
+              left: `${minPercentage}%`,
+              width: `${maxPercentage - minPercentage}%`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx58(
+          "div",
+          {
+            className: `absolute w-4 h-4 -ml-2 rounded-sm bg-white dark:bg-gray-800 border-2 border-blue-600 shadow-md cursor-pointer z-10
+              ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+            `,
+            style: { left: `${minPercentage}%` },
+            onMouseDown: (e) => handleRangeMouseDown(e, "min"),
+            role: "slider",
+            "aria-label": `${label ? label + " " : ""}minimum value`,
+            "aria-valuemin": min,
+            "aria-valuemax": rangeValue[1],
+            "aria-valuenow": rangeValue[0],
+            tabIndex: disabled ? -1 : 0
+          }
+        ),
+        /* @__PURE__ */ jsx58(
+          "div",
+          {
+            className: `absolute w-4 h-4 -ml-2 rounded-sm bg-white dark:bg-gray-800 border-2 border-blue-600 shadow-md cursor-pointer z-10
+              ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+            `,
+            style: { left: `${maxPercentage}%` },
+            onMouseDown: (e) => handleRangeMouseDown(e, "max"),
+            role: "slider",
+            "aria-label": `${label ? label + " " : ""}maximum value`,
+            "aria-valuemin": rangeValue[0],
+            "aria-valuemax": max,
+            "aria-valuenow": rangeValue[1],
+            tabIndex: disabled ? -1 : 0
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs24("div", { className: `w-full ${className}`, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs24("div", { className: "flex justify-between items-center mb-2", children: [
+      label && /* @__PURE__ */ jsx58("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      showValue && /* @__PURE__ */ jsx58("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: value })
+    ] }),
+    /* @__PURE__ */ jsxs24("div", { className: "relative h-10 flex items-center", children: [
+      /* @__PURE__ */ jsx58("div", { className: "absolute w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full" }),
+      /* @__PURE__ */ jsx58(
+        "div",
+        {
+          className: "absolute h-2 bg-blue-600 dark:bg-blue-500 rounded-full pointer-events-none",
+          style: { width: `${percentage}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx58(
+        "div",
+        {
+          className: `absolute w-4 h-4 -ml-2 rounded-sm bg-white dark:bg-gray-800 border-2 border-blue-600 shadow-md pointer-events-none z-10
+            ${disabled ? "opacity-50" : ""}
+          `,
+          style: { left: `${percentage}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx58(
+        "input",
+        {
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: handleChange,
+          disabled,
+          className: "relative w-full h-10 bg-transparent appearance-none cursor-pointer disabled:cursor-not-allowed z-20\n            [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4\n            [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:bg-transparent [&::-webkit-slider-thumb]:cursor-pointer\n            [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-sm\n            [&::-moz-range-thumb]:bg-transparent [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none",
+          "aria-label": label,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/components/Avatar.tsx
+import React19 from "react";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Avatar = ({
+  src,
+  alt,
+  name,
+  size = "md",
+  shape = "circle",
+  className = "",
+  fallbackColor = "bg-blue-600"
+}) => {
+  const [imageError, setImageError] = React19.useState(false);
+  const sizeClasses7 = {
+    xs: "w-6 h-6 text-xs",
+    sm: "w-8 h-8 text-sm",
+    md: "w-10 h-10 text-base",
+    lg: "w-12 h-12 text-lg",
+    xl: "w-16 h-16 text-2xl"
+  };
+  const shapeClass = shape === "circle" ? "rounded-full" : "rounded-md";
+  const getInitials = (name2) => {
+    const parts = name2.trim().split(" ");
+    if (parts.length >= 2) {
+      return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+    }
+    return name2.slice(0, 2).toUpperCase();
+  };
+  const showImage = src && !imageError;
+  const showInitials = !showImage && name;
+  return /* @__PURE__ */ jsx59(
+    "div",
+    {
+      className: `${sizeClasses7[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-gray-200 dark:bg-gray-700" : `${fallbackColor} text-white`} ${className}`,
+      children: showImage ? /* @__PURE__ */ jsx59(
+        "img",
+        {
+          src,
+          alt: alt || name || "Avatar",
+          className: "w-full h-full object-cover",
+          onError: () => setImageError(true)
+        }
+      ) : showInitials ? /* @__PURE__ */ jsx59("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ jsx59(
+        "svg",
+        {
+          className: "w-full h-full text-gray-400 dark:text-gray-600",
+          fill: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx59("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+        }
+      )
+    }
+  );
+};
+
+// src/components/Textarea.tsx
+import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+var Textarea = ({
+  label,
+  error,
+  helperText,
+  size = "md",
+  resize = "vertical",
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const sizeClasses7 = {
+    sm: "px-3 py-1.5 text-sm min-h-[80px]",
+    md: "px-4 py-2 text-base min-h-[100px]",
+    lg: "px-4 py-3 text-lg min-h-[120px]"
+  };
+  const resizeClasses = {
+    none: "resize-none",
+    vertical: "resize-y",
+    horizontal: "resize-x",
+    both: "resize"
+  };
+  const baseClasses = `w-full rounded-lg border transition-colors duration-150 focus:outline-none focus:ring-2
+    ${error ? "border-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:focus:ring-blue-400"}
+    bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
+    placeholder:text-gray-500 dark:placeholder:text-gray-400
+    disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 dark:disabled:bg-gray-900`;
+  return /* @__PURE__ */ jsxs25("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx60("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsx60(
+      "textarea",
+      {
+        className: `${baseClasses} ${sizeClasses7[size]} ${resizeClasses[resize]}`,
+        disabled,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx60("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx60("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
+
+// src/components/RichTextEditor.tsx
+import { useRef as useRef7, useCallback, useState as useState12, useEffect as useEffect8, useLayoutEffect } from "react";
+import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+var RichTextEditor = ({
+  value = "",
+  onChange,
+  placeholder = "Start typing...",
+  className = "",
+  minHeight = "200px",
+  maxHeight = "500px",
+  disabled = false,
+  label,
+  error,
+  helperText
+}) => {
+  const { themeName } = useTheme();
+  const editorRef = useRef7(null);
+  const [isFocused, setIsFocused] = useState12(false);
+  const [activeFormats, setActiveFormats] = useState12(/* @__PURE__ */ new Set());
+  const [showLinkModal, setShowLinkModal] = useState12(false);
+  const [linkUrl, setLinkUrl] = useState12("");
+  const [showImageModal, setShowImageModal] = useState12(false);
+  const [imageUrl, setImageUrl] = useState12("");
+  const [imageAlt, setImageAlt] = useState12("");
+  useLayoutEffect(() => {
+    const styleId = "rich-text-editor-styles";
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `
+        [contenteditable]:empty:before {
+          content: attr(data-placeholder);
+          color: #9ca3af;
+          pointer-events: none;
+        }
+        [contenteditable] h1 {
+          font-size: 2em;
+          font-weight: bold;
+          margin: 0.67em 0;
+        }
+        [contenteditable] h2 {
+          font-size: 1.5em;
+          font-weight: bold;
+          margin: 0.75em 0;
+        }
+        [contenteditable] h3 {
+          font-size: 1.17em;
+          font-weight: bold;
+          margin: 0.83em 0;
+        }
+        [contenteditable] ul, [contenteditable] ol {
+          margin: 1em 0;
+          padding-left: 2em;
+        }
+        [contenteditable] a {
+          color: #3b82f6;
+          text-decoration: underline;
+        }
+        .dark [contenteditable] a {
+          color: #60a5fa;
+        }
+        [contenteditable] img {
+          max-width: 100%;
+          height: auto;
+          border-radius: 0.5rem;
+          margin: 1em 0;
+        }
+        [contenteditable] video {
+          max-width: 100%;
+          height: auto;
+          border-radius: 0.5rem;
+          margin: 1em 0;
+        }
+      `;
+      document.head.appendChild(style);
+    }
+  }, []);
+  const isInitialRender = useRef7(true);
+  useEffect8(() => {
+    if (!isInitialRender.current && editorRef.current && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value;
+    }
+    isInitialRender.current = false;
+  }, [value]);
+  const updateActiveFormats = useCallback(() => {
+    const formats = /* @__PURE__ */ new Set();
+    if (document.queryCommandState("bold")) formats.add("bold");
+    if (document.queryCommandState("italic")) formats.add("italic");
+    if (document.queryCommandState("underline")) formats.add("underline");
+    if (document.queryCommandState("strikeThrough")) formats.add("strikeThrough");
+    if (document.queryCommandState("insertUnorderedList")) formats.add("ul");
+    if (document.queryCommandState("insertOrderedList")) formats.add("ol");
+    const parentNode = window.getSelection()?.anchorNode?.parentElement;
+    if (parentNode) {
+      const tagName = parentNode.tagName.toLowerCase();
+      if (["h1", "h2", "h3"].includes(tagName)) {
+        formats.add(tagName);
+      }
+    }
+    setActiveFormats(formats);
+  }, []);
+  const handleInput = useCallback(() => {
+    if (editorRef.current && onChange) {
+      onChange(editorRef.current.innerHTML);
+    }
+    updateActiveFormats();
+  }, [onChange, updateActiveFormats]);
+  const handleFormat = useCallback((command) => {
+    if (disabled) return;
+    document.execCommand(command, false);
+    editorRef.current?.focus();
+    updateActiveFormats();
+    handleInput();
+  }, [disabled, updateActiveFormats, handleInput]);
+  const handleList = useCallback((command) => {
+    if (disabled) return;
+    document.execCommand(command, false);
+    editorRef.current?.focus();
+    updateActiveFormats();
+    handleInput();
+  }, [disabled, updateActiveFormats, handleInput]);
+  const handleHeading = useCallback((level) => {
+    if (disabled) return;
+    document.execCommand("formatBlock", false, level);
+    editorRef.current?.focus();
+    updateActiveFormats();
+    handleInput();
+  }, [disabled, updateActiveFormats, handleInput]);
+  const handleLink = useCallback(() => {
+    if (disabled) return;
+    setShowLinkModal(true);
+  }, [disabled]);
+  const insertLink = useCallback(() => {
+    if (linkUrl) {
+      document.execCommand("createLink", false, linkUrl);
+      setShowLinkModal(false);
+      setLinkUrl("");
+      editorRef.current?.focus();
+      handleInput();
+    }
+  }, [linkUrl, handleInput]);
+  const handleCode = useCallback(() => {
+    if (disabled) return;
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const code = document.createElement("code");
+      code.className = "bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm font-mono";
+      try {
+        range.surroundContents(code);
+        handleInput();
+      } catch (e) {
+        console.warn("Could not apply code formatting");
+      }
+    }
+    editorRef.current?.focus();
+  }, [disabled, handleInput]);
+  const handleImage = useCallback(() => {
+    if (disabled) return;
+    setShowImageModal(true);
+  }, [disabled]);
+  const insertImage = useCallback(() => {
+    if (!imageUrl) return;
+    const img = document.createElement("img");
+    img.src = imageUrl;
+    img.alt = imageAlt || "";
+    img.style.maxWidth = "100%";
+    img.style.height = "auto";
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      range.deleteContents();
+      range.insertNode(img);
+      range.setStartAfter(img);
+      range.setEndAfter(img);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    } else if (editorRef.current) {
+      editorRef.current.appendChild(img);
+    }
+    setShowImageModal(false);
+    setImageUrl("");
+    setImageAlt("");
+    editorRef.current?.focus();
+    handleInput();
+  }, [imageUrl, imageAlt, handleInput, disabled]);
+  const getButtonClass = (isActive) => {
+    const baseClass = themeName === "minimalistic" ? "border border-white text-white transition-colors" : "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 transition-colors";
+    const activeClass = themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-400";
+    const hoverClass = themeName === "minimalistic" ? "hover:bg-white hover:text-black" : "hover:bg-gray-100 dark:hover:bg-gray-700";
+    const disabledClass = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
+    return `px-2.5 py-1.5 rounded text-sm font-medium ${baseClass} ${isActive ? activeClass : hoverClass} ${disabledClass}`;
+  };
+  const editorBaseClass = themeName === "minimalistic" ? "bg-transparent border-2 border-white text-white placeholder:text-gray-500" : "bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100";
+  const focusClass = isFocused && !disabled ? themeName === "minimalistic" ? "border-white" : "border-blue-500 dark:border-blue-400 ring-2 ring-blue-500/20" : "";
+  const errorClass = error ? "border-red-500 dark:border-red-400" : "";
+  return /* @__PURE__ */ jsxs26("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx61("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
+    /* @__PURE__ */ jsxs26("div", { className: `rounded-t-lg border-b ${editorBaseClass} p-2 flex flex-wrap gap-1`, children: [
+      /* @__PURE__ */ jsxs26("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFormat("bold"),
+            className: getButtonClass(activeFormats.has("bold")),
+            disabled,
+            title: "Bold (Ctrl+B)",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("path", { d: "M12.78 4c1.09 0 2.04.38 2.84 1.14.8.76 1.2 1.74 1.2 2.94 0 .9-.25 1.68-.76 2.36-.51.68-1.2 1.14-2.04 1.38v.08c1.06.22 1.89.7 2.48 1.44.59.74.88 1.64.88 2.7 0 1.34-.47 2.43-1.41 3.27C14.96 19.77 13.74 20 12.24 20H4V4h8.78zm-.66 7.14c.62 0 1.12-.18 1.5-.54.38-.36.57-.84.57-1.44 0-.6-.19-1.08-.57-1.44-.38-.36-.88-.54-1.5-.54H7.5v3.96h4.62zm.24 6.86c.68 0 1.24-.19 1.68-.57.44-.38.66-.9.66-1.56 0-.66-.22-1.18-.66-1.56-.44-.38-1-.57-1.68-.57H7.5v4.26h4.86z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFormat("italic"),
+            className: getButtonClass(activeFormats.has("italic")),
+            disabled,
+            title: "Italic (Ctrl+I)",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("path", { d: "M11.59 4H16v2h-1.71l-3.58 8H13v2H8v-2h1.71l3.58-8H11.59V4z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFormat("underline"),
+            className: getButtonClass(activeFormats.has("underline")),
+            disabled,
+            title: "Underline (Ctrl+U)",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("path", { d: "M10 16c-2.21 0-4-1.79-4-4V4h2v8c0 1.1.9 2 2 2s2-.9 2-2V4h2v8c0 2.21-1.79 4-4 4zM4 18h12v2H4v-2z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFormat("strikeThrough"),
+            className: getButtonClass(activeFormats.has("strikeThrough")),
+            disabled,
+            title: "Strikethrough",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("path", { d: "M10 4c-2 0-3.5.5-4.5 1.5S4 7.5 4 9h2c0-.7.2-1.2.6-1.6.4-.4 1-.6 1.9-.6.8 0 1.4.2 1.8.5.4.3.7.8.7 1.4 0 .5-.2.9-.5 1.2-.3.3-.9.6-1.8.9l-.7.2c-1.2.3-2.1.7-2.7 1.2C4.2 12.7 4 13.5 4 14.5c0 1.1.4 2 1.1 2.6.7.6 1.7.9 3 .9 2.1 0 3.6-.5 4.6-1.5.9-1 1.3-2.3 1.3-3.8h-2c0 .9-.2 1.6-.7 2.1-.5.5-1.2.7-2.2.7-.8 0-1.4-.2-1.8-.5-.4-.3-.6-.8-.6-1.4 0-.5.2-.9.5-1.2.3-.3.9-.6 1.8-.9l.7-.2c1.2-.3 2.1-.7 2.7-1.2.6-.5.9-1.3.9-2.3 0-1.2-.4-2.1-1.2-2.8-.8-.7-1.9-1-3.3-1zM2 10h16v1H2v-1z" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx61("div", { className: "w-px bg-gray-300 dark:bg-gray-600 mx-1" }),
+      /* @__PURE__ */ jsxs26("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleHeading("h1"),
+            className: getButtonClass(activeFormats.has("h1")),
+            disabled,
+            title: "Heading 1",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H1" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleHeading("h2"),
+            className: getButtonClass(activeFormats.has("h2")),
+            disabled,
+            title: "Heading 2",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H2" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleHeading("h3"),
+            className: getButtonClass(activeFormats.has("h3")),
+            disabled,
+            title: "Heading 3",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H3" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx61("div", { className: "w-px bg-gray-300 dark:bg-gray-600 mx-1" }),
+      /* @__PURE__ */ jsxs26("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleList("insertUnorderedList"),
+            className: getButtonClass(activeFormats.has("ul")),
+            disabled,
+            title: "Bullet List",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("path", { d: "M4 4h2v2H4V4zm4 0h8v2H8V4zM4 8h2v2H4V8zm4 0h8v2H8V8zm-4 4h2v2H4v-2zm4 0h8v2H8v-2zm-4 4h2v2H4v-2zm4 0h8v2H8v-2z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleList("insertOrderedList"),
+            className: getButtonClass(activeFormats.has("ol")),
+            disabled,
+            title: "Numbered List",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx61("path", { d: "M4 4h1v3H4V4zm0 4h1v1H3V8h2v1H4zm1 2H3v1h2v1H3v1h2v-3zM8 4h8v2H8V4zm0 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h8v2H8v-2z" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx61("div", { className: "w-px bg-gray-300 dark:bg-gray-600 mx-1" }),
+      /* @__PURE__ */ jsxs26("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: handleLink,
+            className: getButtonClass(false),
+            disabled,
+            title: "Insert Link",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx61("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: handleImage,
+            className: getButtonClass(false),
+            disabled,
+            title: "Insert Image/Video",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx61("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx61(
+          "button",
+          {
+            type: "button",
+            onClick: handleCode,
+            className: getButtonClass(false),
+            disabled,
+            title: "Code",
+            children: /* @__PURE__ */ jsx61("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx61("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx61(
+      "div",
+      {
+        ref: editorRef,
+        contentEditable: !disabled,
+        onInput: handleInput,
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        onMouseUp: updateActiveFormats,
+        onKeyUp: updateActiveFormats,
+        dangerouslySetInnerHTML: { __html: value },
+        className: `
+          w-full px-4 py-3 rounded-b-lg outline-none overflow-y-auto
+          ${editorBaseClass} ${focusClass} ${errorClass}
+          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+          prose prose-sm dark:prose-invert max-w-none
+        `,
+        style: {
+          minHeight,
+          maxHeight
+        },
+        "data-placeholder": placeholder,
+        suppressContentEditableWarning: true
+      }
+    ),
+    error && /* @__PURE__ */ jsx61("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx61("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    /* @__PURE__ */ jsx61(
+      Modal,
+      {
+        isOpen: showLinkModal,
+        onClose: () => {
+          setShowLinkModal(false);
+          setLinkUrl("");
+        },
+        title: "Insert Link",
+        size: "sm",
+        children: /* @__PURE__ */ jsxs26("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx61(
+            TextInput,
+            {
+              label: "URL",
+              value: linkUrl,
+              onChange: (e) => setLinkUrl(e.target.value),
+              placeholder: "https://example.com",
+              autoFocus: true,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  insertLink();
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs26("div", { className: "flex gap-2 justify-end", children: [
+            /* @__PURE__ */ jsx61(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => {
+                  setShowLinkModal(false);
+                  setLinkUrl("");
+                },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx61(
+              Button,
+              {
+                variant: "primary",
+                onClick: insertLink,
+                disabled: !linkUrl,
+                children: "Insert"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx61(
+      Modal,
+      {
+        isOpen: showImageModal,
+        onClose: () => {
+          setShowImageModal(false);
+          setImageUrl("");
+          setImageAlt("");
+        },
+        title: "Insert Image",
+        size: "sm",
+        children: /* @__PURE__ */ jsxs26("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx61(
+            TextInput,
+            {
+              label: "Image URL",
+              value: imageUrl,
+              onChange: (e) => setImageUrl(e.target.value),
+              placeholder: "https://example.com/image.jpg",
+              autoFocus: true,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  insertImage();
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx61(
+            TextInput,
+            {
+              label: "Alt Text (optional)",
+              value: imageAlt,
+              onChange: (e) => setImageAlt(e.target.value),
+              placeholder: "Describe the image"
+            }
+          ),
+          /* @__PURE__ */ jsxs26("div", { className: "flex gap-2 justify-end", children: [
+            /* @__PURE__ */ jsx61(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => {
+                  setShowImageModal(false);
+                  setImageUrl("");
+                  setImageAlt("");
+                },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx61(
+              Button,
+              {
+                variant: "primary",
+                onClick: insertImage,
+                disabled: !imageUrl,
+                children: "Insert"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/Toast.tsx
+import { createContext as createContext3, useContext as useContext3, useState as useState13, useCallback as useCallback2 } from "react";
+import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
+var ToastContext = createContext3(void 0);
+var useToast = () => {
+  const context = useContext3(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var ToastProvider = ({ children, position = "top-right" }) => {
+  const [toasts, setToasts] = useState13([]);
+  const addToast = useCallback2((toast2) => {
+    const id = Math.random().toString(36).substring(7);
+    const newToast = { ...toast2, id };
+    setToasts((prev) => [...prev, newToast]);
+    const duration = toast2.duration || 5e3;
+    setTimeout(() => {
+      removeToast(id);
+    }, duration);
+  }, []);
+  const removeToast = useCallback2((id) => {
+    setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
+  }, []);
+  const positionClasses2 = {
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-center": "top-4 left-1/2 -translate-x-1/2",
+    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+  };
+  return /* @__PURE__ */ jsxs27(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+    children,
+    /* @__PURE__ */ jsx62("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ jsx62(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) })
+  ] });
+};
+var ToastItem = ({ toast: toast2, onClose }) => {
+  const typeStyles = {
+    success: "bg-green-50 dark:bg-green-900/30 border-green-500 text-green-800 dark:text-green-200",
+    error: "bg-red-50 dark:bg-red-900/30 border-red-500 text-red-800 dark:text-red-200",
+    warning: "bg-yellow-50 dark:bg-yellow-900/30 border-yellow-500 text-yellow-800 dark:text-yellow-200",
+    info: "bg-blue-50 dark:bg-blue-900/30 border-blue-500 text-blue-800 dark:text-blue-200"
+  };
+  const typeIcons = {
+    success: /* @__PURE__ */ jsx62(CheckIcon, { size: "sm", className: "text-green-600 dark:text-green-400" }),
+    error: /* @__PURE__ */ jsx62(CloseIcon, { size: "sm", className: "text-red-600 dark:text-red-400" }),
+    warning: /* @__PURE__ */ jsx62("svg", { className: "w-4 h-4 text-yellow-600 dark:text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx62("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+    info: /* @__PURE__ */ jsx62("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx62("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
+  };
+  const type = toast2.type || "info";
+  return /* @__PURE__ */ jsxs27(
+    "div",
+    {
+      className: `flex items-start gap-3 p-4 rounded-lg border-l-4 shadow-lg backdrop-blur-sm ${typeStyles[type]} animate-slide-in`,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx62("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
+        /* @__PURE__ */ jsx62("p", { className: "flex-1 text-sm font-medium", children: toast2.message }),
+        /* @__PURE__ */ jsx62(
+          "button",
+          {
+            onClick: onClose,
+            className: "flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx62(CloseIcon, { size: "sm" })
+          }
+        )
+      ]
+    }
+  );
+};
+var toast = {
+  success: (message, duration) => ({
+    message,
+    type: "success",
+    duration
+  }),
+  error: (message, duration) => ({
+    message,
+    type: "error",
+    duration
+  }),
+  warning: (message, duration) => ({
+    message,
+    type: "warning",
+    duration
+  }),
+  info: (message, duration) => ({
+    message,
+    type: "info",
+    duration
+  })
+};
+
+// src/components/Stepper.tsx
+import React22 from "react";
+import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
+var Stepper = ({
+  steps,
+  currentStep,
+  orientation = "horizontal",
+  className = ""
+}) => {
+  const isHorizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx63("div", { className: `${isHorizontal ? "flex items-center" : "flex flex-col"} ${className}`, children: steps.map((step, index) => {
+    const stepNumber = index + 1;
+    const isActive = stepNumber === currentStep;
+    const isCompleted = stepNumber < currentStep;
+    const isLast = index === steps.length - 1;
+    return /* @__PURE__ */ jsxs28(React22.Fragment, { children: [
+      /* @__PURE__ */ jsxs28("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-row items-start"} ${isHorizontal ? "" : "flex-1"}`, children: [
+        /* @__PURE__ */ jsx63("div", { className: "flex items-center", children: /* @__PURE__ */ jsx63(
+          "div",
+          {
+            className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500" : isActive ? "border-blue-600 bg-white dark:border-blue-500 dark:bg-gray-800" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800"}`,
+            children: isCompleted ? /* @__PURE__ */ jsx63(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ jsx63(
+              "span",
+              {
+                className: `text-sm font-semibold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`,
+                children: stepNumber
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs28("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
+          /* @__PURE__ */ jsx63(
+            "p",
+            {
+              className: `text-sm font-medium ${isActive || isCompleted ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400"}`,
+              children: step.label
+            }
+          ),
+          step.description && /* @__PURE__ */ jsx63("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
+        ] })
+      ] }),
+      !isLast && /* @__PURE__ */ jsx63(
+        "div",
+        {
+          className: `${isHorizontal ? "flex-1 h-0.5 mx-4" : "w-0.5 h-full ml-5 -mt-8"} ${isCompleted || isActive && stepNumber < currentStep ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
+        }
+      )
+    ] }, index);
+  }) });
+};
+
+// src/components/Divider.tsx
+import { jsx as jsx64, jsxs as jsxs29 } from "react/jsx-runtime";
+var Divider = ({
+  orientation = "horizontal",
+  variant = "solid",
+  className = "",
+  label,
+  labelPosition = "center"
+}) => {
+  const variantClasses = {
+    solid: "border-solid",
+    dashed: "border-dashed",
+    dotted: "border-dotted"
+  };
+  if (label && orientation === "horizontal") {
+    const alignmentClasses = {
+      left: "justify-start",
+      center: "justify-center",
+      right: "justify-end"
+    };
+    return /* @__PURE__ */ jsxs29("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
+      labelPosition !== "left" && /* @__PURE__ */ jsx64("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` }),
+      /* @__PURE__ */ jsx64("span", { className: "px-4 text-sm text-gray-500 dark:text-gray-400", children: label }),
+      labelPosition !== "right" && /* @__PURE__ */ jsx64("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` })
+    ] });
+  }
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx64(
+      "div",
+      {
+        className: `inline-block h-full border-l ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
+        role: "separator",
+        "aria-orientation": "vertical"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx64(
+    "hr",
+    {
+      className: `border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
+      role: "separator"
+    }
+  );
+};
+
+// src/components/FileUpload.tsx
+import { useRef as useRef8, useState as useState14 } from "react";
+import { jsx as jsx65, jsxs as jsxs30 } from "react/jsx-runtime";
+var FileUpload = ({
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles = 10,
+  disabled = false,
+  onChange,
+  onError,
+  className = "",
+  label,
+  helperText
+}) => {
+  const [files, setFiles] = useState14([]);
+  const [isDragging, setIsDragging] = useState14(false);
+  const fileInputRef = useRef8(null);
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  };
+  const validateFiles = (fileList) => {
+    const validFiles = [];
+    const filesArray = Array.from(fileList);
+    if (filesArray.length + files.length > maxFiles) {
+      onError?.(`Maximum ${maxFiles} files allowed`);
+      return validFiles;
+    }
+    for (const file of filesArray) {
+      if (maxSize && file.size > maxSize) {
+        onError?.(`File ${file.name} exceeds maximum size of ${formatFileSize(maxSize)}`);
+        continue;
+      }
+      validFiles.push(file);
+    }
+    return validFiles;
+  };
+  const handleFiles = (fileList) => {
+    if (!fileList || disabled) return;
+    const validFiles = validateFiles(fileList);
+    if (validFiles.length > 0) {
+      const newFiles = multiple ? [...files, ...validFiles] : validFiles;
+      setFiles(newFiles);
+      onChange?.(newFiles);
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleClick = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+  const handleRemoveFile = (index) => {
+    const newFiles = files.filter((_, i) => i !== index);
+    setFiles(newFiles);
+    onChange?.(newFiles);
+  };
+  return /* @__PURE__ */ jsxs30("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx65("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
+    /* @__PURE__ */ jsxs30(
+      "div",
+      {
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onClick: handleClick,
+        className: `relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all ${isDragging ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx65(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: (e) => handleFiles(e.target.files),
+              disabled,
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ jsxs30("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx65("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsx65(UploadIcon, { size: "lg", className: "text-gray-400 dark:text-gray-500" }) }),
+            /* @__PURE__ */ jsxs30("div", { children: [
+              /* @__PURE__ */ jsxs30("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+                /* @__PURE__ */ jsx65("span", { className: "text-blue-600 dark:text-blue-400", children: "Click to upload" }),
+                " or drag and drop"
+              ] }),
+              /* @__PURE__ */ jsxs30("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
+                accept ? `Accepted: ${accept}` : "Any file type",
+                maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx65("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    files.length > 0 && /* @__PURE__ */ jsx65("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ jsxs30(
+      "div",
+      {
+        className: "flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700",
+        children: [
+          /* @__PURE__ */ jsxs30("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx65("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: file.name }),
+            /* @__PURE__ */ jsx65("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatFileSize(file.size) })
+          ] }),
+          /* @__PURE__ */ jsx65(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveFile(index);
+              },
+              className: "ml-4 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors",
+              "aria-label": "Remove file",
+              children: /* @__PURE__ */ jsx65(CloseIcon, { size: "sm" })
+            }
+          )
+        ]
+      },
+      index
+    )) })
   ] });
 };
 
@@ -315,12 +3718,76 @@ function getThemeScript() {
   return themeScript;
 }
 export {
+  ActionMenu,
+  Alert,
+  AppShell,
+  AppleIcon,
+  Avatar,
+  Badge,
+  BellIcon,
   Button,
+  Calendar,
+  CalendarIcon,
+  CameraIcon,
+  Card,
+  CheckIcon,
+  Checkbox,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  DatePicker,
+  DateTimePicker,
+  Divider,
+  DownloadIcon,
+  Drawer,
+  EditIcon,
+  FacebookIcon,
+  FileUpload,
+  GitHubIcon,
+  GoogleIcon,
+  HeartIcon,
+  HomeIcon,
+  LinkedInIcon,
+  LockIcon,
+  MailIcon,
+  MenuIcon,
+  Modal,
+  Navbar,
+  NumberInput,
+  Pagination,
+  PlusIcon,
+  ProgressBar,
+  Radio,
+  RichTextEditor,
+  SearchIcon,
   Select,
+  SettingsIcon,
+  Sidebar,
+  SidebarProvider,
+  SlackIcon,
+  Slider,
+  Spinner,
+  StarIcon,
+  Stepper,
+  Table,
+  Tabs,
+  TextInput,
+  Textarea,
   ThemeProvider,
+  TimePicker,
+  ToastProvider,
+  Toggle,
+  TrashIcon,
+  TwitterIcon,
+  UploadIcon,
+  UserIcon,
+  YouTubeIcon,
   getThemeScript,
   themeScript,
   themes,
-  useTheme
+  toast,
+  useSidebar,
+  useTheme,
+  useToast
 };
 //# sourceMappingURL=index.mjs.map