@marcoschwartz/lite-ui 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,8 +1,10 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,18 +18,127 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ActionMenu: () => ActionMenu,
+  Alert: () => Alert,
+  AlertCircleIcon: () => AlertCircleIcon,
+  AppShell: () => AppShell,
+  AppleIcon: () => AppleIcon,
+  ArrowLeftIcon: () => ArrowLeftIcon,
+  ArrowRightIcon: () => ArrowRightIcon,
+  AudioPlayer: () => AudioPlayer,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  BeakerIcon: () => BeakerIcon,
+  BellIcon: () => BellIcon,
+  BookIcon: () => BookIcon,
+  BrainIcon: () => BrainIcon,
   Button: () => Button,
+  Calendar: () => Calendar,
+  CalendarIcon: () => CalendarIcon,
+  CameraIcon: () => CameraIcon,
+  Card: () => Card,
+  ChatIcon: () => ChatIcon,
+  CheckCircleIcon: () => CheckCircleIcon,
+  CheckIcon: () => CheckIcon,
+  Checkbox: () => Checkbox,
+  ChevronDownIcon: () => ChevronDownIcon,
+  ChevronLeftIcon: () => ChevronLeftIcon,
+  ChevronRightIcon: () => ChevronRightIcon,
+  ChevronUpIcon: () => ChevronUpIcon,
+  CloseIcon: () => CloseIcon,
+  CloudIcon: () => CloudIcon,
+  CodeIcon: () => CodeIcon,
+  CopyIcon: () => CopyIcon,
+  DatabaseIcon: () => DatabaseIcon,
+  DatePicker: () => DatePicker,
+  DateTimePicker: () => DateTimePicker,
+  Divider: () => Divider,
+  DownloadIcon: () => DownloadIcon,
+  Drawer: () => Drawer,
+  EditIcon: () => EditIcon,
+  ExternalLinkIcon: () => ExternalLinkIcon,
+  EyeIcon: () => EyeIcon,
+  EyeOffIcon: () => EyeOffIcon,
+  FacebookIcon: () => FacebookIcon,
+  FileIcon: () => FileIcon,
+  FileUpload: () => FileUpload,
+  FolderIcon: () => FolderIcon,
+  GitHubIcon: () => GitHubIcon,
+  GlobeIcon: () => GlobeIcon,
+  GoogleIcon: () => GoogleIcon,
+  HeartIcon: () => HeartIcon,
+  HomeIcon: () => HomeIcon,
+  ImageIcon: () => ImageIcon,
+  InfoCircleIcon: () => InfoCircleIcon,
+  KeyIcon: () => KeyIcon,
+  LinkedInIcon: () => LinkedInIcon,
+  LockIcon: () => LockIcon,
+  MailIcon: () => MailIcon,
+  MenuIcon: () => MenuIcon,
+  Modal: () => Modal,
+  Navbar: () => Navbar,
+  NumberInput: () => NumberInput,
+  Pagination: () => Pagination,
+  PauseIcon: () => PauseIcon,
+  PlayIcon: () => PlayIcon,
+  PlugIcon: () => PlugIcon,
+  PlusIcon: () => PlusIcon,
+  ProgressBar: () => ProgressBar,
+  Radio: () => Radio,
+  RefreshIcon: () => RefreshIcon,
+  RichTextEditor: () => RichTextEditor,
+  SaveIcon: () => SaveIcon,
+  SearchIcon: () => SearchIcon,
   Select: () => Select,
+  SettingsIcon: () => SettingsIcon,
+  ShieldIcon: () => ShieldIcon,
+  Sidebar: () => Sidebar,
+  SidebarProvider: () => SidebarProvider,
+  SkipBackIcon: () => SkipBackIcon,
+  SkipForwardIcon: () => SkipForwardIcon,
+  SlackIcon: () => SlackIcon,
+  Slider: () => Slider,
+  SparklesIcon: () => SparklesIcon,
+  Spinner: () => Spinner,
+  StarIcon: () => StarIcon,
+  Stepper: () => Stepper,
+  StopIcon: () => StopIcon,
+  Table: () => Table,
+  Tabs: () => Tabs,
+  TerminalIcon: () => TerminalIcon,
+  TextInput: () => TextInput,
+  Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
+  TimePicker: () => TimePicker,
+  ToastProvider: () => ToastProvider,
+  Toggle: () => Toggle,
+  TrashIcon: () => TrashIcon,
+  TwitterIcon: () => TwitterIcon,
+  UploadIcon: () => UploadIcon,
+  UserIcon: () => UserIcon,
+  VolumeOffIcon: () => VolumeOffIcon,
+  VolumeUpIcon: () => VolumeUpIcon,
+  YouTubeIcon: () => YouTubeIcon,
   getThemeScript: () => getThemeScript,
   themeScript: () => themeScript,
   themes: () => themes,
-  useTheme: () => useTheme
+  toast: () => toast,
+  useSidebar: () => useSidebar,
+  useTheme: () => useTheme,
+  useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -39,7 +150,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",
@@ -49,15 +160,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",
@@ -70,7 +181,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",
@@ -80,15 +191,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",
@@ -106,7 +217,20 @@ var ThemeContext = (0, import_react.createContext)(void 0);
 function useTheme() {
   const context = (0, import_react.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;
 }
@@ -154,6 +278,13 @@ function ThemeProvider({
       document.documentElement.classList.remove("dark");
     }
   };
+  const toggleColorMode = () => {
+    if (colorMode === "system") {
+      setColorMode(resolvedColorMode === "dark" ? "light" : "dark");
+    } else {
+      setColorMode(colorMode === "dark" ? "light" : "dark");
+    }
+  };
   (0, import_react.useEffect)(() => {
     if (!mounted) return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -178,6 +309,7 @@ function ThemeProvider({
     setTheme,
     colorMode,
     setColorMode,
+    toggleColorMode,
     resolvedColorMode
   }, children });
 }
@@ -190,21 +322,29 @@ var Button = ({
   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__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       className: classes,
       disabled,
       ...props,
-      children
+      children: iconOnly ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-flex shrink-0", children: leftIcon }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-flex items-center", children }),
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "inline-flex shrink-0", children: rightIcon })
+      ] })
     }
   );
 };
@@ -221,19 +361,30 @@ var Select = ({
   value: controlledValue,
   defaultValue,
   onChange,
+  label,
+  error,
+  helperText,
+  searchable = false,
+  searchPlaceholder = "Search...",
   ...props
 }) => {
   const { theme, themeName } = useTheme();
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   const [internalValue, setInternalValue] = (0, import_react2.useState)(defaultValue || "");
+  const [searchQuery, setSearchQuery] = (0, import_react2.useState)("");
   const dropdownRef = (0, import_react2.useRef)(null);
+  const searchInputRef = (0, import_react2.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;
   (0, import_react2.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
+        setSearchQuery("");
       }
     };
     if (isOpen) {
@@ -241,11 +392,17 @@ var Select = ({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isOpen]);
+  (0, import_react2.useEffect)(() => {
+    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) {
@@ -253,9 +410,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";
@@ -265,51 +423,4029 @@ var Select = ({
     lg: "px-4 py-3 text-lg",
     xl: "px-5 py-4 text-xl"
   }[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "button",
-      {
-        type: "button",
-        className: buttonClasses,
-        onClick: handleToggle,
-        disabled,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: !selectedOption && placeholder ? "opacity-50" : "", children: displayText })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "button",
+        {
+          type: "button",
+          className: buttonClasses,
+          onClick: handleToggle,
+          disabled,
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: !selectedOption && placeholder ? "opacity-50" : "", children: displayText })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "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__ */ (0, import_jsx_runtime3.jsx)(
+            "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__ */ (0, import_jsx_runtime3.jsxs)(
+        "div",
+        {
+          className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`,
+          children: [
+            searchable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
+              "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__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "select-dropdown-scroll",
+                style: { maxHeight: "300px", overflowY: "auto" },
+                children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "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__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${optionSizeStyles} ${themeName === "minimalistic" ? "text-gray-500" : "text-gray-500 dark:text-gray-400"} text-center`, children: "No results found" })
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
+
+// src/components/Modal.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("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();
+  (0, import_react3.useEffect)(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
       }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    };
+    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__ */ (0, import_jsx_runtime4.jsx)(
+    "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__ */ (0, import_jsx_runtime4.jsxs)(
+        "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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { id: "modal-title", className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+              showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "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__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-6", children })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/Navbar.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Navbar = ({
+  logo,
+  children,
+  className = "",
+  sticky = false
+}) => {
+  const { theme } = useTheme();
+  const baseClasses = sticky ? "sticky top-0 z-40" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 ${baseClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
+    logo && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center", children: logo }),
+    children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-6", children })
+  ] }) }) });
+};
+
+// src/components/Sidebar.tsx
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsx)(
+    "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
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var SidebarContext = (0, import_react4.createContext)(void 0);
+var SidebarProvider = ({
+  children,
+  defaultOpen = false
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(defaultOpen);
+  const [isMobile, setIsMobile] = (0, import_react4.useState)(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const toggle = () => setIsOpen((prev) => !prev);
+  const value = {
+    isOpen,
+    isMobile,
+    open,
+    close,
+    toggle,
+    setIsMobile
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SidebarContext.Provider, { value, children });
+};
+var useSidebar = () => {
+  const context = (0, import_react4.useContext)(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+
+// src/components/AppShell.tsx
+var import_react5 = require("react");
+
+// src/icons/icon-utils.tsx
+var import_jsx_runtime8 = require("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__ */ (0, import_jsx_runtime8.jsx)(
       "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__ */ (0, import_jsx_runtime3.jsx)(
-          "path",
+        children: path
+      }
+    );
+  };
+  Icon.displayName = displayName;
+  return Icon;
+};
+
+// src/icons/HomeIcon.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var HomeIcon = createIcon(
+  "HomeIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var UserIcon = createIcon(
+  "UserIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SearchIcon = createIcon(
+  "SearchIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var BellIcon = createIcon(
+  "BellIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SettingsIcon = createIcon(
+  "SettingsIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+  ] })
+);
+
+// src/icons/MenuIcon.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var MenuIcon = createIcon(
+  "MenuIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })
+);
+
+// src/icons/CloseIcon.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var CloseIcon = createIcon(
+  "CloseIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+);
+
+// src/icons/PlusIcon.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var PlusIcon = createIcon(
+  "PlusIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })
+);
+
+// src/icons/ArrowLeftIcon.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ArrowLeftIcon = createIcon(
+  "ArrowLeftIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 19l-7-7m0 0l7-7m-7 7h18" })
+);
+
+// src/icons/ArrowRightIcon.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ArrowRightIcon = createIcon(
+  "ArrowRightIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 5l7 7m0 0l-7 7m7-7H3" })
+);
+
+// src/icons/ChevronDownIcon.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ChevronDownIcon = createIcon(
+  "ChevronDownIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+);
+
+// src/icons/ChevronUpIcon.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ChevronUpIcon = createIcon(
+  "ChevronUpIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" })
+);
+
+// src/icons/ChevronLeftIcon.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ChevronLeftIcon = createIcon(
+  "ChevronLeftIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" })
+);
+
+// src/icons/ChevronRightIcon.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ChevronRightIcon = createIcon(
+  "ChevronRightIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+);
+
+// src/icons/ExternalLinkIcon.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ExternalLinkIcon = createIcon(
+  "ExternalLinkIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" })
+);
+
+// src/icons/CheckIcon.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var CheckIcon = createIcon(
+  "CheckIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })
+);
+
+// src/icons/CheckCircleIcon.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var CheckCircleIcon = createIcon(
+  "CheckCircleIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" })
+);
+
+// src/icons/AlertCircleIcon.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var AlertCircleIcon = createIcon(
+  "AlertCircleIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
+);
+
+// src/icons/InfoCircleIcon.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var InfoCircleIcon = createIcon(
+  "InfoCircleIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
+);
+
+// src/icons/TrashIcon.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var TrashIcon = createIcon(
+  "TrashIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var EditIcon = createIcon(
+  "EditIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("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/CopyIcon.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var CopyIcon = createIcon(
+  "CopyIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" })
+);
+
+// src/icons/SaveIcon.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var SaveIcon = createIcon(
+  "SaveIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" })
+);
+
+// src/icons/DownloadIcon.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var DownloadIcon = createIcon(
+  "DownloadIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var UploadIcon = createIcon(
+  "UploadIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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/RefreshIcon.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var RefreshIcon = createIcon(
+  "RefreshIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })
+);
+
+// src/icons/EyeIcon.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var EyeIcon = createIcon(
+  "EyeIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })
+);
+
+// src/icons/EyeOffIcon.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var EyeOffIcon = createIcon(
+  "EyeOffIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" })
+);
+
+// src/icons/PlayIcon.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var PlayIcon = createIcon(
+  "PlayIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M8 5v14l11-7z" }),
+  true
+);
+
+// src/icons/PauseIcon.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var PauseIcon = createIcon(
+  "PauseIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })
+  ] }),
+  true
+);
+
+// src/icons/StopIcon.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var StopIcon = createIcon(
+  "StopIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
+);
+
+// src/icons/SkipBackIcon.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var SkipBackIcon = createIcon(
+  "SkipBackIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z" }) }),
+  false
+);
+
+// src/icons/SkipForwardIcon.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var SkipForwardIcon = createIcon(
+  "SkipForwardIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_jsx_runtime41.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z" }) }),
+  false
+);
+
+// src/icons/VolumeUpIcon.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var VolumeUpIcon = createIcon(
+  "VolumeUpIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_jsx_runtime42.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" }) }),
+  false
+);
+
+// src/icons/VolumeOffIcon.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var VolumeOffIcon = createIcon(
+  "VolumeOffIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z", clipRule: "evenodd" }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2" })
+  ] }),
+  false
+);
+
+// src/icons/MailIcon.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var MailIcon = createIcon(
+  "MailIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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/ChatIcon.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var ChatIcon = createIcon(
+  "ChatIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" })
+);
+
+// src/icons/StarIcon.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var StarIcon = createIcon(
+  "StarIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("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
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var HeartIcon = createIcon(
+  "HeartIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("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/CameraIcon.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var CameraIcon = createIcon(
+  "CameraIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z" })
+  ] })
+);
+
+// src/icons/CalendarIcon.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var CalendarIcon = createIcon(
+  "CalendarIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("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/BookIcon.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var BookIcon = createIcon(
+  "BookIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" })
+);
+
+// src/icons/FileIcon.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var FileIcon = createIcon(
+  "FileIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" })
+);
+
+// src/icons/FolderIcon.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var FolderIcon = createIcon(
+  "FolderIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" })
+);
+
+// src/icons/ImageIcon.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var ImageIcon = createIcon(
+  "ImageIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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" })
+);
+
+// src/icons/CodeIcon.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var CodeIcon = createIcon(
+  "CodeIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" })
+);
+
+// src/icons/TerminalIcon.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var TerminalIcon = createIcon(
+  "TerminalIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })
+);
+
+// src/icons/DatabaseIcon.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var DatabaseIcon = createIcon(
+  "DatabaseIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" })
+);
+
+// src/icons/CloudIcon.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var CloudIcon = createIcon(
+  "CloudIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" })
+);
+
+// src/icons/PlugIcon.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var PlugIcon = createIcon(
+  "PlugIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" })
+);
+
+// src/icons/KeyIcon.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var KeyIcon = createIcon(
+  "KeyIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" })
+);
+
+// src/icons/LockIcon.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var LockIcon = createIcon(
+  "LockIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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/ShieldIcon.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var ShieldIcon = createIcon(
+  "ShieldIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" })
+);
+
+// src/icons/SparklesIcon.tsx
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var SparklesIcon = createIcon(
+  "SparklesIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" })
+);
+
+// src/icons/BrainIcon.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var BrainIcon = createIcon(
+  "BrainIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" })
+);
+
+// src/icons/GlobeIcon.tsx
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var GlobeIcon = createIcon(
+  "GlobeIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
+);
+
+// src/icons/BeakerIcon.tsx
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var BeakerIcon = createIcon(
+  "BeakerIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" })
+);
+
+// src/icons/GoogleIcon.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var GoogleIcon = createIcon(
+  "GoogleIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("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
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var GitHubIcon = createIcon(
+  "GitHubIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("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
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var TwitterIcon = createIcon(
+  "TwitterIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("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
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var FacebookIcon = createIcon(
+  "FacebookIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("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
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var AppleIcon = createIcon(
+  "AppleIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("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
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var LinkedInIcon = createIcon(
+  "LinkedInIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("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
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var YouTubeIcon = createIcon(
+  "YouTubeIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("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
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var SlackIcon = createIcon(
+  "SlackIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("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
+var import_jsx_runtime74 = require("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] = (0, import_react5.useState)(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__ */ (0, import_jsx_runtime74.jsxs)("div", { className: `min-h-screen flex flex-col ${className}`, children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "w-full", children: header }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("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__ */ (0, import_jsx_runtime74.jsx)("main", { className: "flex-1 overflow-y-auto", children })
+      ] })
+    ] });
+  }
+  if (!responsive) {
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: `min-h-screen flex flex-col ${className}`, children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "w-full", children: header }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("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__ */ (0, import_jsx_runtime74.jsxs)("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("nav", { className: "sticky top-0 z-30 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex items-center", children: navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: `hidden ${desktopNavClass} items-center gap-6`, children: navbar.content }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          "button",
+          {
+            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__ */ (0, import_jsx_runtime74.jsx)(MenuIcon, { size: "md" })
+          }
+        )
+      ] }) }) }),
+      header && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "w-full", children: header }),
+      isMobileNavbarOpen && /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          "div",
           {
-            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} fixed inset-0 z-40 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200`,
+            onClick: () => setIsMobileNavbarOpen(false)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("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__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [
+            navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+              "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__ */ (0, import_jsx_runtime74.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            "div",
+            {
+              className: "p-4 flex flex-col gap-4",
+              onClick: () => setIsMobileNavbarOpen(false),
+              children: navbar.content
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("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__ */ (0, import_jsx_runtime74.jsxs)("div", { className: `min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("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__ */ (0, import_jsx_runtime74.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          "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__ */ (0, import_jsx_runtime74.jsx)(MenuIcon, { size: "md" })
           }
         )
+      ] }),
+      header && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "w-full", children: header }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "flex flex-1 min-h-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("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__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            "div",
+            {
+              className: `${mobileDrawerClass} fixed inset-0 z-40 bg-black/60 backdrop-blur-sm animate-in fade-in duration-200`,
+              onClick: () => setIsMobileNavbarOpen(false)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("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__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between", children: [
+              navbarLogo ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { children: navbarLogo }) : navbarTitle ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-xl font-bold text-gray-900 dark:text-gray-100", children: navbarTitle }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                "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__ */ (0, import_jsx_runtime74.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+              "div",
+              {
+                className: "overflow-y-auto h-[calc(100vh-73px)]",
+                onClick: () => setIsMobileNavbarOpen(false),
+                children: navbar.content
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("main", { className: "flex-1 overflow-y-auto min-h-screen", children })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: `min-h-screen flex flex-col ${className}`, children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "w-full", children: header }),
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("main", { className: "flex-1 overflow-y-auto", children })
+  ] });
+};
+
+// src/components/Drawer.tsx
+var import_react6 = require("react");
+var import_jsx_runtime75 = require("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();
+  (0, import_react6.useEffect)(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
       }
-    ) }),
-    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    };
+    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__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       "div",
       {
-        className: `absolute z-50 w-full mt-1 ${dropdownBaseStyles} rounded-lg overflow-hidden`,
-        style: { maxHeight: "300px", overflowY: "auto" },
-        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "div",
+        className: "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-all duration-200",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+      "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__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("h3", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+              "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__ */ (0, import_jsx_runtime75.jsx)("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "flex-1 p-6 overflow-y-auto", children })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/TextInput.tsx
+var import_react7 = require("react");
+var import_jsx_runtime76 = require("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 = (0, import_react7.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__ */ (0, import_jsx_runtime76.jsxs)("div", { className: `${widthStyle} ${className}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500", children: leftIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          "input",
+          {
+            ref,
+            className: `${baseStyles} ${sizeStyle} ${errorStyles} ${disabledStyles} ${paddingWithIcon}`.trim(),
+            disabled,
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500", children: rightIcon })
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/components/NumberInput.tsx
+var import_react8 = require("react");
+var import_jsx_runtime77 = require("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 = (0, import_react8.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react8.useState)(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__ */ (0, import_jsx_runtime77.jsxs)("div", { className: `${widthStyle} ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        "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__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          "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__ */ (0, import_jsx_runtime77.jsx)("svg", { className: "w-3 h-3 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 15l7-7 7 7" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          "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__ */ (0, import_jsx_runtime77.jsx)("svg", { className: "w-3 h-3 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M19 9l-7 7-7-7" }) })
+          }
+        )
+      ] })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
+NumberInput.displayName = "NumberInput";
+
+// src/components/ActionMenu.tsx
+var import_react9 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var ActionMenu = ({
+  items,
+  trigger,
+  position = "right",
+  placement = "bottom"
+}) => {
+  const { themeName } = useTheme();
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, import_react9.useState)(null);
+  const [mounted, setMounted] = (0, import_react9.useState)(false);
+  const menuRef = (0, import_react9.useRef)(null);
+  const triggerRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  (0, import_react9.useEffect)(() => {
+    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]);
+  (0, import_react9.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime78.jsx)(
+    "button",
+    {
+      className: "p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+      "aria-label": "Open menu",
+      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("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__ */ (0, import_jsx_runtime78.jsx)(
+    "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__ */ (0, import_jsx_runtime78.jsx)(
+            "div",
+            {
+              className: "my-1 border-t border-gray-200 dark:border-gray-700"
+            },
+            index
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+          "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__ */ (0, import_jsx_runtime78.jsx)("span", { className: "flex-shrink-0", children: item.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "flex-1", children: item.label })
+            ]
           },
-          option.value
-        ))
+          index
+        );
+      })
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "relative inline-block", ref: triggerRef, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }) }),
+    mounted && (0, import_react_dom.createPortal)(menu, document.body)
+  ] });
+};
+
+// src/components/Card.tsx
+var import_jsx_runtime79 = require("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__ */ (0, import_jsx_runtime79.jsx)(
+    "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
+var import_jsx_runtime80 = require("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__ */ (0, import_jsx_runtime80.jsx)("div", { className: `rounded-lg border p-4 ${variantClass} ${className}`, role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: `flex-shrink-0 ${iconClass}`, children: [
+      variant === "info" && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("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__ */ (0, import_jsx_runtime80.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("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__ */ (0, import_jsx_runtime80.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("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__ */ (0, import_jsx_runtime80.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("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__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex-1", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("h3", { className: "font-semibold mb-1", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "text-sm", children })
+    ] }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      "button",
+      {
+        onClick: onClose,
+        className: `flex-shrink-0 ${iconClass} hover:opacity-70 transition-opacity`,
+        "aria-label": "Close alert",
+        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
       }
     )
+  ] }) });
+};
+
+// src/components/Checkbox.tsx
+var import_react10 = require("react");
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var Checkbox = (0, import_react10.forwardRef)(
+  ({ label, error, className = "", disabled, checked, ...props }, ref) => {
+    const { theme } = useTheme();
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "relative inline-flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              disabled,
+              checked,
+              className: "sr-only peer",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("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__ */ (0, import_jsx_runtime81.jsx)(
+            "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__ */ (0, import_jsx_runtime81.jsx)(
+                "path",
+                {
+                  d: "M10 3L4.5 8.5L2 6",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ) })
+        ] }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("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__ */ (0, import_jsx_runtime81.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/Toggle.tsx
+var import_react11 = require("react");
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var Toggle = (0, import_react11.forwardRef)(
+  ({ 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__ */ (0, import_jsx_runtime82.jsxs)("label", { className: `inline-flex items-center gap-3 cursor-pointer ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: "sr-only peer",
+            disabled,
+            checked,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          "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__ */ (0, import_jsx_runtime82.jsx)(
+          "div",
+          {
+            className: `${currentSize.thumb} bg-white rounded-full shadow-md absolute top-0.5 left-0.5 transition-transform`
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label })
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+
+// src/components/Badge.tsx
+var import_jsx_runtime83 = require("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__ */ (0, import_jsx_runtime83.jsx)("span", { className: `inline-flex items-center font-medium rounded-full ${variantClass} ${sizeClass} ${className}`, children });
+};
+
+// src/components/Spinner.tsx
+var import_jsx_runtime84 = require("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__ */ (0, import_jsx_runtime84.jsx)(
+    "div",
+    {
+      className: `inline-block rounded-full animate-spin ${sizeClass} ${colorClass} ${className}`,
+      role: "status",
+      "aria-label": "Loading",
+      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+};
+
+// src/components/Tabs.tsx
+var import_react12 = require("react");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var Tabs = ({
+  tabs,
+  defaultIndex = 0,
+  onChange,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const [activeIndex, setActiveIndex] = (0, import_react12.useState)(defaultIndex);
+  const handleTabClick = (index) => {
+    if (tabs[index].disabled) return;
+    setActiveIndex(index);
+    onChange?.(index);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("nav", { className: "flex gap-8 px-6", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      "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__ */ (0, import_jsx_runtime85.jsx)("div", { children: tabs[activeIndex]?.content })
+  ] });
+};
+
+// src/components/Table.tsx
+var import_jsx_runtime86 = require("react/jsx-runtime");
+function Table({
+  columns,
+  data,
+  keyField = "id",
+  striped = false,
+  hoverable = true,
+  className = ""
+}) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: `overflow-x-auto ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("table", { className: "w-full text-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("tr", { children: columns.map((column, colIndex) => {
+        const isLast = colIndex === columns.length - 1;
+        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          "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__ */ (0, import_jsx_runtime86.jsx)("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__ */ (0, import_jsx_runtime86.jsx)(
+          "tr",
+          {
+            className: rowClasses,
+            children: columns.map((column, colIndex) => {
+              const isLast = colIndex === columns.length - 1;
+              return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                "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__ */ (0, import_jsx_runtime86.jsx)("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
+  ] });
+}
+
+// src/components/Pagination.tsx
+var import_jsx_runtime87 = require("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__ */ (0, import_jsx_runtime87.jsxs)("nav", { className: `flex items-center gap-1 ${className}`, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      "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__ */ (0, import_jsx_runtime87.jsx)(
+          "span",
+          {
+            className: "px-3 py-2 text-gray-700 dark:text-gray-300",
+            children: "..."
+          },
+          `dots-${index}`
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        "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__ */ (0, import_jsx_runtime87.jsx)(
+      "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
+var import_react13 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime88 = require("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] = (0, import_react13.useState)(false);
+  const [viewDate, setViewDate] = (0, import_react13.useState)(value || /* @__PURE__ */ new Date());
+  const [mounted, setMounted] = (0, import_react13.useState)(false);
+  const [calendarPosition, setCalendarPosition] = (0, import_react13.useState)(null);
+  const inputRef = (0, import_react13.useRef)(null);
+  const calendarRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    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]);
+  (0, import_react13.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime88.jsxs)(
+    "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__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+            "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__ */ (0, import_jsx_runtime88.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
+              MONTHS[month],
+              " ",
+              year
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+              "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__ */ (0, import_jsx_runtime88.jsx)(
+            "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__ */ (0, import_jsx_runtime88.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("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__ */ (0, import_jsx_runtime88.jsx)(
+            "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__ */ (0, import_jsx_runtime88.jsxs)("div", { className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+      "div",
+      {
+        ref: inputRef,
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDate(value) : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("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__ */ (0, import_jsx_runtime88.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    mounted && (0, import_react_dom2.createPortal)(calendar, document.body)
+  ] });
+};
+DatePicker.displayName = "DatePicker";
+
+// src/components/TimePicker.tsx
+var import_react14 = require("react");
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var TimePicker = (0, import_react14.forwardRef)(
+  ({ 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__ */ (0, import_jsx_runtime89.jsxs)("div", { className, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        "input",
+        {
+          ref,
+          type: "time",
+          disabled,
+          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+TimePicker.displayName = "TimePicker";
+
+// src/components/DateTimePicker.tsx
+var import_react15 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_jsx_runtime90 = require("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] = (0, import_react15.useState)(false);
+  const [viewDate, setViewDate] = (0, import_react15.useState)(value || /* @__PURE__ */ new Date());
+  const [selectedTime, setSelectedTime] = (0, import_react15.useState)(
+    value ? { hours: value.getHours(), minutes: value.getMinutes() } : { hours: 12, minutes: 0 }
+  );
+  const [mounted, setMounted] = (0, import_react15.useState)(false);
+  const [pickerPosition, setPickerPosition] = (0, import_react15.useState)(null);
+  const inputRef = (0, import_react15.useRef)(null);
+  const pickerRef = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  (0, import_react15.useEffect)(() => {
+    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]);
+  (0, import_react15.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime90.jsxs)(
+    "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__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "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__ */ (0, import_jsx_runtime90.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("h2", { className: "text-base font-semibold text-gray-900 dark:text-gray-100", children: [
+              MONTHS2[month],
+              " ",
+              year
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              "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__ */ (0, import_jsx_runtime90.jsx)(
+            "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__ */ (0, import_jsx_runtime90.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS2.map((day) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-1", children: day }, day)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("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__ */ (0, import_jsx_runtime90.jsx)(
+            "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__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "border-t border-gray-200 dark:border-gray-700 pt-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex items-center justify-center gap-4 mb-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Hour" }),
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "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__ */ (0, import_jsx_runtime90.jsx)("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "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__ */ (0, import_jsx_runtime90.jsx)(
+                  "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__ */ (0, import_jsx_runtime90.jsx)("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "text-2xl font-bold text-gray-600 dark:text-gray-400 mt-8", children: ":" }),
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("label", { className: "text-xs font-semibold text-gray-600 dark:text-gray-400 mb-2", children: "Minute" }),
+              /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "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__ */ (0, import_jsx_runtime90.jsx)("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "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__ */ (0, import_jsx_runtime90.jsx)(
+                  "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__ */ (0, import_jsx_runtime90.jsx)("svg", { className: "w-4 h-4 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-center text-sm text-gray-600 dark:text-gray-400 mb-4", children: formatTime(selectedTime.hours, selectedTime.minutes) }),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "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__ */ (0, import_jsx_runtime90.jsxs)("div", { className, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+      "div",
+      {
+        ref: inputRef,
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDateTime(value) : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("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__ */ (0, import_jsx_runtime90.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    mounted && (0, import_react_dom3.createPortal)(picker, document.body)
+  ] });
+};
+DateTimePicker.displayName = "DateTimePicker";
+
+// src/components/Calendar.tsx
+var import_react16 = require("react");
+var import_jsx_runtime91 = require("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] = (0, import_react16.useState)(value || /* @__PURE__ */ new Date());
+  const [viewDate, setViewDate] = (0, import_react16.useState)(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__ */ (0, import_jsx_runtime91.jsxs)("div", { className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        "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__ */ (0, import_jsx_runtime91.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("h2", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: [
+          MONTHS3[month],
+          " ",
+          year
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          "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__ */ (0, import_jsx_runtime91.jsx)(
+        "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__ */ (0, import_jsx_runtime91.jsx)("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS3.map((day) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      "div",
+      {
+        className: "text-center text-xs font-semibold text-gray-600 dark:text-gray-400 py-2",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "grid grid-cols-7 gap-1", children: calendarDays.map((date, index) => {
+      if (!date) return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", {}, index);
+      const isCurrentMonthDay = isCurrentMonth(date);
+      const isTodayDay = isToday(date);
+      const isSelectedDay = isSelected(date);
+      const isDisabledDay = isDisabled(date);
+      return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        "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
+var import_react17 = __toESM(require("react"));
+var import_jsx_runtime92 = require("react/jsx-runtime");
+var Radio = ({
+  name,
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  disabled = false,
+  orientation = "vertical",
+  className = ""
+}) => {
+  const [internalValue, setInternalValue] = import_react17.default.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__ */ (0, import_jsx_runtime92.jsx)("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__ */ (0, import_jsx_runtime92.jsxs)(
+      "label",
+      {
+        htmlFor: id,
+        className: `flex items-center gap-2 cursor-pointer group ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "relative inline-flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+              "input",
+              {
+                type: "radio",
+                id,
+                name,
+                value: option.value,
+                checked: isChecked,
+                onChange: () => handleChange(option.value),
+                disabled: isDisabled,
+                className: "sr-only peer"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("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__ */ (0, import_jsx_runtime92.jsx)("div", { className: `w-2 h-2 rounded-full bg-blue-600 transition-all duration-200 ${isChecked ? "scale-100" : "scale-0"}` }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("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
+var import_jsx_runtime93 = require("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__ */ (0, import_jsx_runtime93.jsxs)("div", { className: `w-full ${className}`, children: [
+    (showLabel || label) && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex justify-between items-center mb-1", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      showLabel && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      "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__ */ (0, import_jsx_runtime93.jsx)(
+          "div",
+          {
+            className: `${sizeClasses7[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/components/Slider.tsx
+var import_react18 = __toESM(require("react"));
+var import_jsx_runtime94 = require("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] = import_react18.default.useState(defaultValue);
+  const [internalRangeValue, setInternalRangeValue] = import_react18.default.useState(defaultRangeValue);
+  const trackRef = (0, import_react18.useRef)(null);
+  const [isDragging, setIsDragging] = import_react18.default.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);
+  };
+  import_react18.default.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__ */ (0, import_jsx_runtime94.jsxs)("div", { className: `w-full ${className}`, children: [
+      (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+          rangeValue[0],
+          " - ",
+          rangeValue[1]
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "relative h-10 flex items-center", ref: trackRef, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "absolute w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          "div",
+          {
+            className: "absolute h-2 bg-blue-600 dark:bg-blue-500 rounded-full pointer-events-none",
+            style: {
+              left: `${minPercentage}%`,
+              width: `${maxPercentage - minPercentage}%`
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          "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__ */ (0, import_jsx_runtime94.jsx)(
+          "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__ */ (0, import_jsx_runtime94.jsxs)("div", { className: `w-full ${className}`, children: [
+    (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex justify-between items-center mb-2", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: value })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "relative h-10 flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "absolute w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        "div",
+        {
+          className: "absolute h-2 bg-blue-600 dark:bg-blue-500 rounded-full pointer-events-none",
+          style: { width: `${percentage}%` }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        "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__ */ (0, import_jsx_runtime94.jsx)(
+        "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
+var import_react19 = __toESM(require("react"));
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var Avatar = ({
+  src,
+  alt,
+  name,
+  size = "md",
+  shape = "circle",
+  className = "",
+  fallbackColor = "bg-blue-600"
+}) => {
+  const [imageError, setImageError] = import_react19.default.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__ */ (0, import_jsx_runtime95.jsx)(
+    "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__ */ (0, import_jsx_runtime95.jsx)(
+        "img",
+        {
+          src,
+          alt: alt || name || "Avatar",
+          className: "w-full h-full object-cover",
+          onError: () => setImageError(true)
+        }
+      ) : showInitials ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+        "svg",
+        {
+          className: "w-full h-full text-gray-400 dark:text-gray-600",
+          fill: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("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
+var import_jsx_runtime96 = require("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__ */ (0, import_jsx_runtime96.jsxs)("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      "textarea",
+      {
+        className: `${baseClasses} ${sizeClasses7[size]} ${resizeClasses[resize]}`,
+        disabled,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
+
+// src/components/RichTextEditor.tsx
+var import_react20 = require("react");
+var import_jsx_runtime97 = require("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 = (0, import_react20.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react20.useState)(false);
+  const [activeFormats, setActiveFormats] = (0, import_react20.useState)(/* @__PURE__ */ new Set());
+  const [showLinkModal, setShowLinkModal] = (0, import_react20.useState)(false);
+  const [linkUrl, setLinkUrl] = (0, import_react20.useState)("");
+  const [showImageModal, setShowImageModal] = (0, import_react20.useState)(false);
+  const [imageUrl, setImageUrl] = (0, import_react20.useState)("");
+  const [imageAlt, setImageAlt] = (0, import_react20.useState)("");
+  (0, import_react20.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 = (0, import_react20.useRef)(true);
+  (0, import_react20.useEffect)(() => {
+    if (!isInitialRender.current && editorRef.current && editorRef.current.innerHTML !== value) {
+      editorRef.current.innerHTML = value;
+    }
+    isInitialRender.current = false;
+  }, [value]);
+  const updateActiveFormats = (0, import_react20.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 = (0, import_react20.useCallback)(() => {
+    if (editorRef.current && onChange) {
+      onChange(editorRef.current.innerHTML);
+    }
+    updateActiveFormats();
+  }, [onChange, updateActiveFormats]);
+  const handleFormat = (0, import_react20.useCallback)((command) => {
+    if (disabled) return;
+    document.execCommand(command, false);
+    editorRef.current?.focus();
+    updateActiveFormats();
+    handleInput();
+  }, [disabled, updateActiveFormats, handleInput]);
+  const handleList = (0, import_react20.useCallback)((command) => {
+    if (disabled) return;
+    document.execCommand(command, false);
+    editorRef.current?.focus();
+    updateActiveFormats();
+    handleInput();
+  }, [disabled, updateActiveFormats, handleInput]);
+  const handleHeading = (0, import_react20.useCallback)((level) => {
+    if (disabled) return;
+    document.execCommand("formatBlock", false, level);
+    editorRef.current?.focus();
+    updateActiveFormats();
+    handleInput();
+  }, [disabled, updateActiveFormats, handleInput]);
+  const handleLink = (0, import_react20.useCallback)(() => {
+    if (disabled) return;
+    setShowLinkModal(true);
+  }, [disabled]);
+  const insertLink = (0, import_react20.useCallback)(() => {
+    if (linkUrl) {
+      document.execCommand("createLink", false, linkUrl);
+      setShowLinkModal(false);
+      setLinkUrl("");
+      editorRef.current?.focus();
+      handleInput();
+    }
+  }, [linkUrl, handleInput]);
+  const handleCode = (0, import_react20.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 = (0, import_react20.useCallback)(() => {
+    if (disabled) return;
+    setShowImageModal(true);
+  }, [disabled]);
+  const insertImage = (0, import_react20.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__ */ (0, import_jsx_runtime97.jsxs)("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: `rounded-t-lg border-b ${editorBaseClass} p-2 flex flex-wrap gap-1`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFormat("bold"),
+            className: getButtonClass(activeFormats.has("bold")),
+            disabled,
+            title: "Bold (Ctrl+B)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("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__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFormat("italic"),
+            className: getButtonClass(activeFormats.has("italic")),
+            disabled,
+            title: "Italic (Ctrl+I)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("path", { d: "M11.59 4H16v2h-1.71l-3.58 8H13v2H8v-2h1.71l3.58-8H11.59V4z" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFormat("underline"),
+            className: getButtonClass(activeFormats.has("underline")),
+            disabled,
+            title: "Underline (Ctrl+U)",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("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__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleFormat("strikeThrough"),
+            className: getButtonClass(activeFormats.has("strikeThrough")),
+            disabled,
+            title: "Strikethrough",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("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__ */ (0, import_jsx_runtime97.jsx)("div", { className: "w-px bg-gray-300 dark:bg-gray-600 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleHeading("h1"),
+            className: getButtonClass(activeFormats.has("h1")),
+            disabled,
+            title: "Heading 1",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H1" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleHeading("h2"),
+            className: getButtonClass(activeFormats.has("h2")),
+            disabled,
+            title: "Heading 2",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H2" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleHeading("h3"),
+            className: getButtonClass(activeFormats.has("h3")),
+            disabled,
+            title: "Heading 3",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H3" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "w-px bg-gray-300 dark:bg-gray-600 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleList("insertUnorderedList"),
+            className: getButtonClass(activeFormats.has("ul")),
+            disabled,
+            title: "Bullet List",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("path", { d: "M4 4h2v2H4V4zm4 0h8v2H8V4zM4 8h2v2H4V8zm4 0h8v2H8V8zm-4 4h2v2H4v-2zm4 0h8v2H8v-2zm-4 4h2v2H4v-2zm4 0h8v2H8v-2z" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleList("insertOrderedList"),
+            className: getButtonClass(activeFormats.has("ol")),
+            disabled,
+            title: "Numbered List",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("path", { d: "M4 4h1v3H4V4zm0 4h1v1H3V8h2v1H4zm1 2H3v1h2v1H3v1h2v-3zM8 4h8v2H8V4zm0 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h8v2H8v-2z" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { className: "w-px bg-gray-300 dark:bg-gray-600 mx-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleLink,
+            className: getButtonClass(false),
+            disabled,
+            title: "Insert Link",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("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__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleImage,
+            className: getButtonClass(false),
+            disabled,
+            title: "Insert Image/Video",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("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__ */ (0, import_jsx_runtime97.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: handleCode,
+            className: getButtonClass(false),
+            disabled,
+            title: "Code",
+            children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+      "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__ */ (0, import_jsx_runtime97.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+      Modal,
+      {
+        isOpen: showLinkModal,
+        onClose: () => {
+          setShowLinkModal(false);
+          setLinkUrl("");
+        },
+        title: "Insert Link",
+        size: "sm",
+        children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            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__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex gap-2 justify-end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => {
+                  setShowLinkModal(false);
+                  setLinkUrl("");
+                },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+              Button,
+              {
+                variant: "primary",
+                onClick: insertLink,
+                disabled: !linkUrl,
+                children: "Insert"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+      Modal,
+      {
+        isOpen: showImageModal,
+        onClose: () => {
+          setShowImageModal(false);
+          setImageUrl("");
+          setImageAlt("");
+        },
+        title: "Insert Image",
+        size: "sm",
+        children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+            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__ */ (0, import_jsx_runtime97.jsx)(
+            TextInput,
+            {
+              label: "Alt Text (optional)",
+              value: imageAlt,
+              onChange: (e) => setImageAlt(e.target.value),
+              placeholder: "Describe the image"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex gap-2 justify-end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => {
+                  setShowImageModal(false);
+                  setImageUrl("");
+                  setImageAlt("");
+                },
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+              Button,
+              {
+                variant: "primary",
+                onClick: insertImage,
+                disabled: !imageUrl,
+                children: "Insert"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/Toast.tsx
+var import_react21 = require("react");
+var import_jsx_runtime98 = require("react/jsx-runtime");
+var ToastContext = (0, import_react21.createContext)(void 0);
+var useToast = () => {
+  const context = (0, import_react21.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var ToastProvider = ({ children, position = "top-right" }) => {
+  const [toasts, setToasts] = (0, import_react21.useState)([]);
+  const addToast = (0, import_react21.useCallback)((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 = (0, import_react21.useCallback)((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__ */ (0, import_jsx_runtime98.jsxs)(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(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__ */ (0, import_jsx_runtime98.jsx)(CheckIcon, { size: "sm", className: "text-green-600 dark:text-green-400" }),
+    error: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CloseIcon, { size: "sm", className: "text-red-600 dark:text-red-400" }),
+    warning: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("svg", { className: "w-4 h-4 text-yellow-600 dark:text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("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__ */ (0, import_jsx_runtime98.jsx)("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("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__ */ (0, import_jsx_runtime98.jsxs)(
+    "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__ */ (0, import_jsx_runtime98.jsx)("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { className: "flex-1 text-sm font-medium", children: toast2.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+          "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__ */ (0, import_jsx_runtime98.jsx)(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
+var import_react22 = __toESM(require("react"));
+var import_jsx_runtime99 = require("react/jsx-runtime");
+var Stepper = ({
+  steps,
+  currentStep,
+  orientation = "horizontal",
+  className = ""
+}) => {
+  const isHorizontal = orientation === "horizontal";
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("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__ */ (0, import_jsx_runtime99.jsxs)(import_react22.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-row items-start"} ${isHorizontal ? "" : "flex-1"}`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+          "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__ */ (0, import_jsx_runtime99.jsx)(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+              "span",
+              {
+                className: `text-sm font-semibold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`,
+                children: stepNumber
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+            "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__ */ (0, import_jsx_runtime99.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
+        ] })
+      ] }),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+        "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
+var import_jsx_runtime100 = require("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__ */ (0, import_jsx_runtime100.jsxs)("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
+      labelPosition !== "left" && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` }),
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { className: "px-4 text-sm text-gray-500 dark:text-gray-400", children: label }),
+      labelPosition !== "right" && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` })
+    ] });
+  }
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+      "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__ */ (0, import_jsx_runtime100.jsx)(
+    "hr",
+    {
+      className: `border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
+      role: "separator"
+    }
+  );
+};
+
+// src/components/FileUpload.tsx
+var import_react23 = require("react");
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var FileUpload = ({
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles = 10,
+  disabled = false,
+  onChange,
+  onError,
+  className = "",
+  label,
+  helperText
+}) => {
+  const [files, setFiles] = (0, import_react23.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react23.useState)(false);
+  const fileInputRef = (0, import_react23.useRef)(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__ */ (0, import_jsx_runtime101.jsxs)("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
+      "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__ */ (0, import_jsx_runtime101.jsx)(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: (e) => handleFiles(e.target.files),
+              disabled,
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(UploadIcon, { size: "lg", className: "text-gray-400 dark:text-gray-500" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "text-blue-600 dark:text-blue-400", children: "Click to upload" }),
+                " or drag and drop"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("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__ */ (0, import_jsx_runtime101.jsx)("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
+      "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__ */ (0, import_jsx_runtime101.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: file.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatFileSize(file.size) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+            "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__ */ (0, import_jsx_runtime101.jsx)(CloseIcon, { size: "sm" })
+            }
+          )
+        ]
+      },
+      index
+    )) })
+  ] });
+};
+
+// src/components/AudioPlayer.tsx
+var import_react24 = require("react");
+var import_jsx_runtime102 = require("react/jsx-runtime");
+var AudioPlayer = ({
+  src,
+  title,
+  artist,
+  album,
+  coverArt,
+  variant = "default",
+  autoPlay = false,
+  loop = false,
+  preload = "metadata",
+  onPlay,
+  onPause,
+  onEnded,
+  onTimeUpdate,
+  className = "",
+  showSkipButtons = false,
+  onSkipBack,
+  onSkipForward
+}) => {
+  const audioRef = (0, import_react24.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react24.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react24.useState)(0);
+  const [duration, setDuration] = (0, import_react24.useState)(0);
+  const [volume, setVolume] = (0, import_react24.useState)(1);
+  const [isMuted, setIsMuted] = (0, import_react24.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react24.useState)(true);
+  (0, import_react24.useEffect)(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const handleLoadedMetadata = () => {
+      setDuration(audio.duration);
+      setIsLoading(false);
+    };
+    const handleCanPlay = () => {
+      setIsLoading(false);
+    };
+    const handleTimeUpdate = () => {
+      setCurrentTime(audio.currentTime);
+      onTimeUpdate?.(audio.currentTime);
+    };
+    const handleEnded = () => {
+      setIsPlaying(false);
+      onEnded?.();
+    };
+    const handlePlay = () => {
+      setIsPlaying(true);
+      onPlay?.();
+    };
+    const handlePause = () => {
+      setIsPlaying(false);
+      onPause?.();
+    };
+    const handleError = (e) => {
+      console.error("Audio error:", e);
+      setIsPlaying(false);
+      setIsLoading(false);
+    };
+    const handleLoadStart = () => {
+      setIsLoading(true);
+    };
+    audio.addEventListener("loadstart", handleLoadStart);
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+    audio.addEventListener("canplay", handleCanPlay);
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("ended", handleEnded);
+    audio.addEventListener("play", handlePlay);
+    audio.addEventListener("pause", handlePause);
+    audio.addEventListener("error", handleError);
+    if (audio.readyState >= 2) {
+      setIsLoading(false);
+      setDuration(audio.duration);
+    }
+    return () => {
+      audio.removeEventListener("loadstart", handleLoadStart);
+      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      audio.removeEventListener("canplay", handleCanPlay);
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("ended", handleEnded);
+      audio.removeEventListener("play", handlePlay);
+      audio.removeEventListener("pause", handlePause);
+      audio.removeEventListener("error", handleError);
+    };
+  }, [onPlay, onPause, onEnded, onTimeUpdate]);
+  (0, import_react24.useEffect)(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.load();
+  }, [src]);
+  const togglePlayPause = async () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    try {
+      if (isPlaying) {
+        audio.pause();
+      } else {
+        await audio.play();
+      }
+    } catch (error) {
+      console.error("Playback error:", error);
+      setIsPlaying(false);
+    }
+  };
+  const handleSeek = (e) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const time = parseFloat(e.target.value);
+    audio.currentTime = time;
+    setCurrentTime(time);
+  };
+  const handleVolumeChange = (e) => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    const vol = parseFloat(e.target.value);
+    audio.volume = vol;
+    setVolume(vol);
+    setIsMuted(vol === 0);
+  };
+  const toggleMute = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (isMuted) {
+      audio.volume = volume || 0.5;
+      setIsMuted(false);
+    } else {
+      audio.volume = 0;
+      setIsMuted(true);
+    }
+  };
+  const formatTime = (time) => {
+    if (!isFinite(time)) return "0:00";
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  };
+  const handleSkipBack = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (onSkipBack) {
+      onSkipBack();
+    } else {
+      audio.currentTime = Math.max(0, audio.currentTime - 10);
+    }
+  };
+  const handleSkipForward = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (onSkipForward) {
+      onSkipForward();
+    } else {
+      audio.currentTime = Math.min(duration, audio.currentTime + 10);
+    }
+  };
+  const progress = duration > 0 ? currentTime / duration * 100 : 0;
+  if (variant === "mini") {
+    return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: `flex items-center gap-2 p-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("audio", { ref: audioRef, src, preload, loop, autoPlay }),
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+        Button,
+        {
+          iconOnly: true,
+          size: "sm",
+          variant: "primary",
+          onClick: togglePlayPause,
+          disabled: isLoading,
+          "aria-label": isPlaying ? "Pause" : "Play",
+          children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PauseIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PlayIcon, { size: "sm" })
+        }
+      ),
+      title && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 truncate", children: title })
+    ] });
+  }
+  if (variant === "compact") {
+    return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: `flex items-center gap-3 p-3 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("audio", { ref: audioRef, src, preload, loop, autoPlay }),
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+        Button,
+        {
+          iconOnly: true,
+          size: "md",
+          variant: "primary",
+          onClick: togglePlayPause,
+          disabled: isLoading,
+          "aria-label": isPlaying ? "Pause" : "Play",
+          children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PauseIcon, { size: "md" }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PlayIcon, { size: "md" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: title }),
+        artist && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "text-xs text-gray-500 dark:text-gray-400 truncate", children: artist })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "text-xs text-gray-500 dark:text-gray-400 tabular-nums", children: formatTime(currentTime) }),
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "relative flex-1 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+            "div",
+            {
+              className: "absolute h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all",
+              style: { width: `${progress}%` }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: duration || 0,
+              value: currentTime,
+              onChange: handleSeek,
+              disabled: isLoading,
+              className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed",
+              "aria-label": "Seek"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { className: "text-xs text-gray-500 dark:text-gray-400 tabular-nums", children: formatTime(duration) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          "button",
+          {
+            onClick: toggleMute,
+            className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+            "aria-label": isMuted ? "Unmute" : "Mute",
+            children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(VolumeOffIcon, { size: "sm" }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(VolumeUpIcon, { size: "sm" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            value: isMuted ? 0 : volume,
+            onChange: handleVolumeChange,
+            className: "w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full appearance-none cursor-pointer\n              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3\n              [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:cursor-pointer\n              [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full\n              [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none",
+            "aria-label": "Volume"
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-md overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("audio", { ref: audioRef, src, preload, loop, autoPlay }),
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-4 p-4 border-b border-gray-200 dark:border-gray-700", children: [
+      coverArt && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-gray-100 dark:bg-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+        "img",
+        {
+          src: coverArt,
+          alt: `${title || "Track"} cover art`,
+          className: "w-full h-full object-cover"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 truncate", children: title }),
+        artist && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: artist }),
+        album && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("p", { className: "text-xs text-gray-500 dark:text-gray-500 truncate", children: album })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "px-4 pt-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          "div",
+          {
+            className: "absolute h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all",
+            style: { width: `${progress}%` }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: duration || 0,
+            value: currentTime,
+            onChange: handleSeek,
+            disabled: isLoading,
+            className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed",
+            "aria-label": "Seek"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex justify-between items-center mt-1 text-xs text-gray-500 dark:text-gray-400 tabular-nums", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { children: formatTime(currentTime) }),
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("span", { children: formatTime(duration) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center justify-between px-4 py-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-2 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          "button",
+          {
+            onClick: toggleMute,
+            className: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors",
+            "aria-label": isMuted ? "Unmute" : "Mute",
+            children: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(VolumeOffIcon, { size: "md" }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(VolumeUpIcon, { size: "md" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            value: isMuted ? 0 : volume,
+            onChange: handleVolumeChange,
+            className: "w-20 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full appearance-none cursor-pointer\n              [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3\n              [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:cursor-pointer\n              [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full\n              [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-none",
+            "aria-label": "Volume"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { className: "flex items-center gap-2", children: [
+        showSkipButtons && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          Button,
+          {
+            iconOnly: true,
+            size: "md",
+            variant: "secondary",
+            onClick: handleSkipBack,
+            disabled: isLoading,
+            "aria-label": "Skip back 10 seconds",
+            children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(SkipBackIcon, { size: "md" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          Button,
+          {
+            iconOnly: true,
+            size: "lg",
+            variant: "primary",
+            onClick: togglePlayPause,
+            disabled: isLoading,
+            "aria-label": isPlaying ? "Pause" : "Play",
+            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PauseIcon, { size: "lg" }) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(PlayIcon, { size: "lg" })
+          }
+        ),
+        showSkipButtons && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+          Button,
+          {
+            iconOnly: true,
+            size: "md",
+            variant: "secondary",
+            onClick: handleSkipForward,
+            disabled: isLoading,
+            "aria-label": "Skip forward 10 seconds",
+            children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(SkipForwardIcon, { size: "md" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "flex-1" })
+    ] })
   ] });
 };
 
@@ -347,12 +4483,113 @@ function getThemeScript() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionMenu,
+  Alert,
+  AlertCircleIcon,
+  AppShell,
+  AppleIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  AudioPlayer,
+  Avatar,
+  Badge,
+  BeakerIcon,
+  BellIcon,
+  BookIcon,
+  BrainIcon,
   Button,
+  Calendar,
+  CalendarIcon,
+  CameraIcon,
+  Card,
+  ChatIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  Checkbox,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  CloseIcon,
+  CloudIcon,
+  CodeIcon,
+  CopyIcon,
+  DatabaseIcon,
+  DatePicker,
+  DateTimePicker,
+  Divider,
+  DownloadIcon,
+  Drawer,
+  EditIcon,
+  ExternalLinkIcon,
+  EyeIcon,
+  EyeOffIcon,
+  FacebookIcon,
+  FileIcon,
+  FileUpload,
+  FolderIcon,
+  GitHubIcon,
+  GlobeIcon,
+  GoogleIcon,
+  HeartIcon,
+  HomeIcon,
+  ImageIcon,
+  InfoCircleIcon,
+  KeyIcon,
+  LinkedInIcon,
+  LockIcon,
+  MailIcon,
+  MenuIcon,
+  Modal,
+  Navbar,
+  NumberInput,
+  Pagination,
+  PauseIcon,
+  PlayIcon,
+  PlugIcon,
+  PlusIcon,
+  ProgressBar,
+  Radio,
+  RefreshIcon,
+  RichTextEditor,
+  SaveIcon,
+  SearchIcon,
   Select,
+  SettingsIcon,
+  ShieldIcon,
+  Sidebar,
+  SidebarProvider,
+  SkipBackIcon,
+  SkipForwardIcon,
+  SlackIcon,
+  Slider,
+  SparklesIcon,
+  Spinner,
+  StarIcon,
+  Stepper,
+  StopIcon,
+  Table,
+  Tabs,
+  TerminalIcon,
+  TextInput,
+  Textarea,
   ThemeProvider,
+  TimePicker,
+  ToastProvider,
+  Toggle,
+  TrashIcon,
+  TwitterIcon,
+  UploadIcon,
+  UserIcon,
+  VolumeOffIcon,
+  VolumeUpIcon,
+  YouTubeIcon,
   getThemeScript,
   themeScript,
   themes,
-  useTheme
+  toast,
+  useSidebar,
+  useTheme,
+  useToast
 });
 //# sourceMappingURL=index.js.map