@marcoschwartz/lite-ui 0.1.0 → 0.3.1

package/dist/index.js

@@ -21,12 +21,53 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ActionMenu: () => ActionMenu,
+  Alert: () => Alert,
+  Badge: () => Badge,
+  BellIcon: () => BellIcon,
   Button: () => Button,
+  CalendarIcon: () => CalendarIcon,
+  CameraIcon: () => CameraIcon,
+  Card: () => Card,
+  CheckIcon: () => CheckIcon,
+  Checkbox: () => Checkbox,
+  ChevronDownIcon: () => ChevronDownIcon,
+  ChevronRightIcon: () => ChevronRightIcon,
+  CloseIcon: () => CloseIcon,
+  DatePicker: () => DatePicker,
+  DateTimePicker: () => DateTimePicker,
+  DownloadIcon: () => DownloadIcon,
+  Drawer: () => Drawer,
+  EditIcon: () => EditIcon,
+  HeartIcon: () => HeartIcon,
+  HomeIcon: () => HomeIcon,
+  LockIcon: () => LockIcon,
+  MailIcon: () => MailIcon,
+  MenuIcon: () => MenuIcon,
+  Modal: () => Modal,
+  Navbar: () => Navbar,
+  Pagination: () => Pagination,
+  PlusIcon: () => PlusIcon,
+  SearchIcon: () => SearchIcon,
   Select: () => Select,
+  SettingsIcon: () => SettingsIcon,
+  Sidebar: () => Sidebar,
+  SidebarProvider: () => SidebarProvider,
+  Spinner: () => Spinner,
+  StarIcon: () => StarIcon,
+  Table: () => Table,
+  Tabs: () => Tabs,
+  TextInput: () => TextInput,
   ThemeProvider: () => ThemeProvider,
+  TimePicker: () => TimePicker,
+  Toggle: () => Toggle,
+  TrashIcon: () => TrashIcon,
+  UploadIcon: () => UploadIcon,
+  UserIcon: () => UserIcon,
   getThemeScript: () => getThemeScript,
   themeScript: () => themeScript,
   themes: () => themes,
+  useSidebar: () => useSidebar,
   useTheme: () => useTheme
 });
 module.exports = __toCommonJS(index_exports);
@@ -194,10 +235,10 @@ var Button = ({
 }) => {
   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 classes = `${baseStyles} ${variantStyles3} ${sizeStyles2} ${disabledStyles} ${className}`.trim();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
@@ -253,9 +294,9 @@ 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 buttonClasses = `${baseStyles} ${sizeStyles2} ${disabledStyles} ${className}`.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";
@@ -313,6 +354,818 @@ var Select = ({
   ] });
 };
 
+// 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();
+      }
+    };
+    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];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "aside",
+    {
+      className: `${widthClass} bg-white dark:bg-gray-800 border-${position === "left" ? "r" : "l"} 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/Drawer.tsx
+var import_react5 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var sizeClasses2 = {
+  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_react5.useEffect)(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const sizeClass = sizeClasses2[position][size];
+  const positionClass = positionClasses[position];
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-all duration-200",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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_runtime8.jsx)("h3", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 p-6 overflow-y-auto", children })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/TextInput.tsx
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var sizeClasses3 = {
+  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_react6.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 = sizeClasses3[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_runtime9.jsxs)("div", { className: `${widthStyle} ${className}`, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(
+          "input",
+          {
+            ref,
+            className: `${baseStyles} ${sizeStyle} ${errorStyles} ${disabledStyles} ${paddingWithIcon}`.trim(),
+            disabled,
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/components/ActionMenu.tsx
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ActionMenu = ({
+  items,
+  trigger,
+  position = "right"
+}) => {
+  const { themeName } = useTheme();
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+  const menuRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  const handleItemClick = (item) => {
+    if (!item.disabled) {
+      item.onClick();
+      setIsOpen(false);
+    }
+  };
+  const defaultTrigger = /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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 positionClass = position === "left" ? "left-0" : "right-0";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative inline-block", ref: menuRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        className: `absolute ${positionClass} mt-2 w-56 rounded-lg ${menuBaseStyles} z-50 overflow-hidden`,
+        style: { minWidth: "14rem" },
+        children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "button",
+          {
+            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_runtime10.jsx)("span", { className: "flex-shrink-0", children: item.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1", children: item.label })
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] });
+};
+
+// src/components/Card.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var paddingClasses = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+var Card = ({
+  children,
+  className = "",
+  padding = "md",
+  hover = false
+}) => {
+  const { theme } = useTheme();
+  const paddingClass = paddingClasses[padding];
+  const hoverClass = hover ? "hover:shadow-lg transition-shadow duration-200" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      className: `bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 ${paddingClass} ${hoverClass} ${className}`,
+      children
+    }
+  );
+};
+
+// src/components/Alert.tsx
+var import_jsx_runtime12 = 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_runtime12.jsx)("div", { className: `rounded-lg border p-4 ${variantClass} ${className}`, role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex-shrink-0 ${iconClass}`, children: [
+      variant === "info" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsxs)("div", { className: "flex-1", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "font-semibold mb-1", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "text-sm", children })
+    ] }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
+      {
+        onClick: onClose,
+        className: `flex-shrink-0 ${iconClass} hover:opacity-70 transition-opacity`,
+        "aria-label": "Close alert",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+      }
+    )
+  ] }) });
+};
+
+// src/components/Checkbox.tsx
+var import_react8 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Checkbox = (0, import_react8.forwardRef)(
+  ({ label, error, className = "", disabled, ...props }, ref) => {
+    const { theme } = useTheme();
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            disabled,
+            className: `w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-offset-0 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${error ? "border-red-500 dark:border-red-500" : ""}`,
+            ...props
+          }
+        ),
+        label && /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.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_react9 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Toggle = (0, import_react9.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_runtime14.jsxs)("label", { className: `inline-flex items-center gap-3 cursor-pointer ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: "sr-only peer",
+            disabled,
+            checked,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.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_runtime14.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_runtime15 = 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_runtime15.jsx)("span", { className: `inline-flex items-center font-medium rounded-full ${variantClass} ${sizeClass} ${className}`, children });
+};
+
+// src/components/Spinner.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var sizeClasses4 = {
+  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 = sizeClasses4[size];
+  const colorClass = colorClasses[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: `inline-block rounded-full animate-spin ${sizeClass} ${colorClass} ${className}`,
+      role: "status",
+      "aria-label": "Loading",
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+};
+
+// src/components/Tabs.tsx
+var import_react10 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Tabs = ({
+  tabs,
+  defaultIndex = 0,
+  onChange,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(defaultIndex);
+  const handleTabClick = (index) => {
+    if (tabs[index].disabled) return;
+    setActiveIndex(index);
+    onChange?.(index);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("nav", { className: "flex gap-8 px-6", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsx)("div", { children: tabs[activeIndex]?.content })
+  ] });
+};
+
+// src/components/Table.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Table({
+  columns,
+  data,
+  keyField = "id",
+  striped = false,
+  hoverable = true,
+  className = ""
+}) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `overflow-x-auto ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("table", { className: "w-full text-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("tr", { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "th",
+        {
+          className: "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_runtime18.jsx)("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "tr",
+        {
+          className: `
+                ${striped && rowIndex % 2 === 1 ? "bg-gray-50 dark:bg-gray-800/50" : ""}
+                ${hoverable ? "hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors" : ""}
+              `,
+          children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "td",
+            {
+              className: "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_runtime18.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_runtime19 = 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_runtime19.jsxs)("nav", { className: `flex items-center gap-1 ${className}`, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsx)(
+          "span",
+          {
+            className: "px-3 py-2 text-gray-700 dark:text-gray-300",
+            children: "..."
+          },
+          `dots-${index}`
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.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_react11 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var DatePicker = (0, import_react11.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_runtime20.jsxs)("div", { className, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "input",
+        {
+          ref,
+          type: "date",
+          disabled,
+          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+// src/components/TimePicker.tsx
+var import_react12 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var TimePicker = (0, import_react12.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_runtime21.jsxs)("div", { className, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "input",
+        {
+          ref,
+          type: "time",
+          disabled,
+          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime21.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_react13 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var DateTimePicker = (0, import_react13.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_runtime22.jsxs)("div", { className, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "input",
+        {
+          ref,
+          type: "datetime-local",
+          disabled,
+          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+DateTimePicker.displayName = "DateTimePicker";
+
 // src/utils/theme-script.ts
 var themeScript = `
 (function() {
@@ -345,14 +1198,173 @@ var themeScript = `
 function getThemeScript() {
   return themeScript;
 }
+
+// src/icons/Icon.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var sizeClasses5 = {
+  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) => {
+  const Icon = ({ size = "md", className = "", color = "currentColor" }) => {
+    const sizeClass = sizeClasses5[size];
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "svg",
+      {
+        className: `${sizeClass} ${className}`,
+        fill: "none",
+        viewBox: "0 0 24 24",
+        stroke: color,
+        "aria-hidden": "true",
+        children: path
+      }
+    );
+  };
+  Icon.displayName = displayName;
+  return Icon;
+};
+var HomeIcon = createIcon(
+  "HomeIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var UserIcon = createIcon(
+  "UserIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var SearchIcon = createIcon(
+  "SearchIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
+);
+var BellIcon = createIcon(
+  "BellIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var SettingsIcon = createIcon(
+  "SettingsIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
+  ] })
+);
+var MenuIcon = createIcon(
+  "MenuIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })
+);
+var CloseIcon = createIcon(
+  "CloseIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+);
+var ChevronDownIcon = createIcon(
+  "ChevronDownIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+);
+var ChevronRightIcon = createIcon(
+  "ChevronRightIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+);
+var CheckIcon = createIcon(
+  "CheckIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })
+);
+var PlusIcon = createIcon(
+  "PlusIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })
+);
+var TrashIcon = createIcon(
+  "TrashIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var EditIcon = createIcon(
+  "EditIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var MailIcon = createIcon(
+  "MailIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var StarIcon = createIcon(
+  "StarIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var HeartIcon = createIcon(
+  "HeartIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var DownloadIcon = createIcon(
+  "DownloadIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var UploadIcon = createIcon(
+  "UploadIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var CameraIcon = createIcon(
+  "CameraIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z" })
+  ] })
+);
+var LockIcon = createIcon(
+  "LockIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
+var CalendarIcon = createIcon(
+  "CalendarIcon",
+  /* @__PURE__ */ (0, import_jsx_runtime23.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" })
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionMenu,
+  Alert,
+  Badge,
+  BellIcon,
   Button,
+  CalendarIcon,
+  CameraIcon,
+  Card,
+  CheckIcon,
+  Checkbox,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  DatePicker,
+  DateTimePicker,
+  DownloadIcon,
+  Drawer,
+  EditIcon,
+  HeartIcon,
+  HomeIcon,
+  LockIcon,
+  MailIcon,
+  MenuIcon,
+  Modal,
+  Navbar,
+  Pagination,
+  PlusIcon,
+  SearchIcon,
   Select,
+  SettingsIcon,
+  Sidebar,
+  SidebarProvider,
+  Spinner,
+  StarIcon,
+  Table,
+  Tabs,
+  TextInput,
   ThemeProvider,
+  TimePicker,
+  Toggle,
+  TrashIcon,
+  UploadIcon,
+  UserIcon,
   getThemeScript,
   themeScript,
   themes,
+  useSidebar,
   useTheme
 });
 //# sourceMappingURL=index.js.map