@marcoschwartz/lite-ui 0.1.1 → 0.4.0

package/dist/index.mjs

@@ -8,7 +8,7 @@ var themes = {
   default: {
     name: "default",
     button: {
-      base: "font-semibold rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95",
+      base: "font-semibold rounded-lg transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95 gap-2",
       variants: {
         primary: "bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white shadow-sm hover:shadow-md dark:bg-blue-500 dark:hover:bg-blue-600 dark:active:bg-blue-700",
         secondary: "bg-gray-600 hover:bg-gray-700 active:bg-gray-800 text-white shadow-sm hover:shadow-md dark:bg-gray-500 dark:hover:bg-gray-600 dark:active:bg-gray-700",
@@ -18,10 +18,10 @@ 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"
     },
@@ -39,7 +39,7 @@ var themes = {
   minimalistic: {
     name: "minimalistic",
     button: {
-      base: "font-normal rounded-none transition-colors duration-200 focus:outline-none border-2",
+      base: "font-normal rounded-none transition-colors duration-200 focus:outline-none border-2 gap-2",
       variants: {
         primary: "bg-transparent border-white text-white hover:bg-white hover:text-black",
         secondary: "bg-transparent border-gray-400 text-gray-400 hover:bg-gray-400 hover:text-black",
@@ -49,10 +49,10 @@ 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"
     },
@@ -152,35 +152,43 @@ function ThemeProvider({
 }
 
 // src/components/Button.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Button = ({
   variant = "primary",
   size = "md",
   className = "",
   children,
   disabled,
+  leftIcon,
+  rightIcon,
+  iconOnly = false,
   ...props
 }) => {
   const { theme } = useTheme();
   const baseStyles = theme.button.base;
-  const variantStyles = theme.button.variants[variant];
-  const sizeStyles = theme.button.sizes[size];
+  const variantStyles3 = theme.button.variants[variant];
+  const sizeStyles2 = theme.button.sizes[size];
   const disabledStyles = disabled ? theme.button.disabled : "";
-  const classes = `${baseStyles} ${variantStyles} ${sizeStyles} ${disabledStyles} ${className}`.trim();
+  const iconOnlyStyles = iconOnly ? "!p-0 aspect-square" : "";
+  const classes = `inline-flex items-center justify-center ${baseStyles} ${variantStyles3} ${sizeStyles2} ${disabledStyles} ${iconOnlyStyles} ${className}`.trim();
   return /* @__PURE__ */ jsx2(
     "button",
     {
       className: classes,
       disabled,
       ...props,
-      children
+      children: iconOnly ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        leftIcon && /* @__PURE__ */ jsx2("span", { className: "inline-flex shrink-0", children: leftIcon }),
+        children && /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center", children }),
+        rightIcon && /* @__PURE__ */ jsx2("span", { className: "inline-flex shrink-0", children: rightIcon })
+      ] })
     }
   );
 };
 
 // src/components/Select.tsx
 import { useState as useState2, useRef, useEffect as useEffect2 } from "react";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Select = ({
   options,
   size = "md",
@@ -222,9 +230,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";
@@ -234,7 +242,7 @@ var Select = ({
     lg: "px-4 py-3 text-lg",
     xl: "px-5 py-4 text-xl"
   }[size];
-  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "relative inline-block w-full", ref: dropdownRef, ...props, children: [
     /* @__PURE__ */ jsx3(
       "button",
       {
@@ -282,6 +290,818 @@ var Select = ({
   ] });
 };
 
+// src/components/Modal.tsx
+import { useEffect as useEffect3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl"
+};
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  showCloseButton = true
+}) => {
+  const { theme } = useTheme();
+  useEffect3(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const sizeClass = sizeClasses[size];
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-all duration-200",
+      onClick: onClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": title ? "modal-title" : void 0,
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: `relative w-full ${sizeClass} bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform transition-all duration-200 scale-100 animate-in`,
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            (title || showCloseButton) && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+              title && /* @__PURE__ */ jsx4("h3", { id: "modal-title", className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+              showCloseButton && /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "ml-auto text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                  "aria-label": "Close modal",
+                  children: /* @__PURE__ */ jsx4("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx4("div", { className: "p-6", children })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/Navbar.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Navbar = ({
+  logo,
+  children,
+  className = "",
+  sticky = false
+}) => {
+  const { theme } = useTheme();
+  const baseClasses = sticky ? "sticky top-0 z-40" : "";
+  return /* @__PURE__ */ jsx5("nav", { className: `bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 ${baseClasses} ${className}`, children: /* @__PURE__ */ jsx5("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-center h-16", children: [
+    logo && /* @__PURE__ */ jsx5("div", { className: "flex items-center", children: logo }),
+    children && /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-6", children })
+  ] }) }) });
+};
+
+// src/components/Sidebar.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var widthClasses = {
+  sm: "w-48",
+  md: "w-64",
+  lg: "w-80"
+};
+var Sidebar = ({
+  children,
+  className = "",
+  width = "md",
+  position = "left"
+}) => {
+  const { theme } = useTheme();
+  const widthClass = widthClasses[width];
+  return /* @__PURE__ */ jsx6(
+    "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
+import { createContext as createContext2, useContext as useContext2, useState as useState3 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var SidebarContext = createContext2(void 0);
+var SidebarProvider = ({
+  children,
+  defaultOpen = false
+}) => {
+  const [isOpen, setIsOpen] = useState3(defaultOpen);
+  const [isMobile, setIsMobile] = useState3(false);
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const toggle = () => setIsOpen((prev) => !prev);
+  const value = {
+    isOpen,
+    isMobile,
+    open,
+    close,
+    toggle,
+    setIsMobile
+  };
+  return /* @__PURE__ */ jsx7(SidebarContext.Provider, { value, children });
+};
+var useSidebar = () => {
+  const context = useContext2(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  }
+  return context;
+};
+
+// src/components/Drawer.tsx
+import { useEffect as useEffect4 } from "react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "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();
+  useEffect4(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const sizeClass = sizeClasses2[position][size];
+  const positionClass = positionClasses[position];
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-all duration-200",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs5(
+      "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__ */ jsxs5("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+            title && /* @__PURE__ */ jsx8("h3", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100", children: title }),
+            showCloseButton && /* @__PURE__ */ jsx8(
+              "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__ */ jsx8("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 p-6 overflow-y-auto", children })
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/TextInput.tsx
+import { forwardRef } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "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 = 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__ */ jsxs6("div", { className: `${widthStyle} ${className}`, children: [
+      label && /* @__PURE__ */ jsx9("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+        leftIcon && /* @__PURE__ */ jsx9("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500", children: leftIcon }),
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            ref,
+            className: `${baseStyles} ${sizeStyle} ${errorStyles} ${disabledStyles} ${paddingWithIcon}`.trim(),
+            disabled,
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx9("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500", children: rightIcon })
+      ] }),
+      error && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+TextInput.displayName = "TextInput";
+
+// src/components/ActionMenu.tsx
+import { useState as useState4, useRef as useRef2, useEffect as useEffect5 } from "react";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var ActionMenu = ({
+  items,
+  trigger,
+  position = "right"
+}) => {
+  const { themeName } = useTheme();
+  const [isOpen, setIsOpen] = useState4(false);
+  const menuRef = useRef2(null);
+  useEffect5(() => {
+    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__ */ jsx10(
+    "button",
+    {
+      className: "p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+      "aria-label": "Open menu",
+      children: /* @__PURE__ */ jsx10("svg", { className: "w-5 h-5 text-gray-600 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10("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__ */ jsxs7("div", { className: "relative inline-block", ref: menuRef, children: [
+    /* @__PURE__ */ jsx10("div", { onClick: () => setIsOpen(!isOpen), children: trigger || defaultTrigger }),
+    isOpen && /* @__PURE__ */ jsx10(
+      "div",
+      {
+        className: `absolute ${positionClass} mt-2 w-56 rounded-lg ${menuBaseStyles} z-50 overflow-hidden`,
+        style: { minWidth: "14rem" },
+        children: items.map((item, index) => /* @__PURE__ */ jsxs7(
+          "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__ */ jsx10("span", { className: "flex-shrink-0", children: item.icon }),
+              /* @__PURE__ */ jsx10("span", { className: "flex-1", children: item.label })
+            ]
+          },
+          index
+        ))
+      }
+    )
+  ] });
+};
+
+// src/components/Card.tsx
+import { jsx as jsx11 } from "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__ */ jsx11(
+    "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
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var variantStyles = {
+  info: "bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-900 dark:text-blue-100",
+  success: "bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-900 dark:text-green-100",
+  warning: "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-900 dark:text-yellow-100",
+  error: "bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-900 dark:text-red-100"
+};
+var iconStyles = {
+  info: "text-blue-600 dark:text-blue-400",
+  success: "text-green-600 dark:text-green-400",
+  warning: "text-yellow-600 dark:text-yellow-400",
+  error: "text-red-600 dark:text-red-400"
+};
+var Alert = ({
+  variant = "info",
+  title,
+  children,
+  onClose,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const variantClass = variantStyles[variant];
+  const iconClass = iconStyles[variant];
+  return /* @__PURE__ */ jsx12("div", { className: `rounded-lg border p-4 ${variantClass} ${className}`, role: "alert", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsxs8("div", { className: `flex-shrink-0 ${iconClass}`, children: [
+      variant === "info" && /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("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__ */ jsx12("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("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__ */ jsx12("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("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__ */ jsx12("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("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__ */ jsxs8("div", { className: "flex-1", children: [
+      title && /* @__PURE__ */ jsx12("h3", { className: "font-semibold mb-1", children: title }),
+      /* @__PURE__ */ jsx12("div", { className: "text-sm", children })
+    ] }),
+    onClose && /* @__PURE__ */ jsx12(
+      "button",
+      {
+        onClick: onClose,
+        className: `flex-shrink-0 ${iconClass} hover:opacity-70 transition-opacity`,
+        "aria-label": "Close alert",
+        children: /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+      }
+    )
+  ] }) });
+};
+
+// src/components/Checkbox.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var Checkbox = forwardRef2(
+  ({ label, error, className = "", disabled, ...props }, ref) => {
+    const { theme } = useTheme();
+    return /* @__PURE__ */ jsxs9("div", { className, children: [
+      /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
+        /* @__PURE__ */ jsx13(
+          "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__ */ jsx13("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__ */ jsx13("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/Toggle.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var Toggle = forwardRef3(
+  ({ label, size = "md", className = "", disabled, checked, ...props }, ref) => {
+    const { theme } = useTheme();
+    const toggleClasses = {
+      sm: {
+        switch: "w-9 h-5",
+        thumb: "w-4 h-4 peer-checked:translate-x-4"
+      },
+      md: {
+        switch: "w-11 h-6",
+        thumb: "w-5 h-5 peer-checked:translate-x-5"
+      },
+      lg: {
+        switch: "w-14 h-7",
+        thumb: "w-6 h-6 peer-checked:translate-x-7"
+      }
+    };
+    const currentSize = toggleClasses[size];
+    return /* @__PURE__ */ jsxs10("label", { className: `inline-flex items-center gap-3 cursor-pointer ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`, children: [
+      /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx14(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: "sr-only peer",
+            disabled,
+            checked,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx14(
+          "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__ */ jsx14(
+          "div",
+          {
+            className: `${currentSize.thumb} bg-white rounded-full shadow-md absolute top-0.5 left-0.5 transition-transform`
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ jsx14("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label })
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+
+// src/components/Badge.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var variantStyles2 = {
+  default: "bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200",
+  primary: "bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200",
+  success: "bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200",
+  warning: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200",
+  error: "bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200",
+  info: "bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-200"
+};
+var sizeStyles = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-1 text-sm",
+  lg: "px-3 py-1.5 text-base"
+};
+var Badge = ({
+  children,
+  variant = "default",
+  size = "md",
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const variantClass = variantStyles2[variant];
+  const sizeClass = sizeStyles[size];
+  return /* @__PURE__ */ jsx15("span", { className: `inline-flex items-center font-medium rounded-full ${variantClass} ${sizeClass} ${className}`, children });
+};
+
+// src/components/Spinner.tsx
+import { jsx as jsx16 } from "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__ */ jsx16(
+    "div",
+    {
+      className: `inline-block rounded-full animate-spin ${sizeClass} ${colorClass} ${className}`,
+      role: "status",
+      "aria-label": "Loading",
+      children: /* @__PURE__ */ jsx16("span", { className: "sr-only", children: "Loading..." })
+    }
+  );
+};
+
+// src/components/Tabs.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+var Tabs = ({
+  tabs,
+  defaultIndex = 0,
+  onChange,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const [activeIndex, setActiveIndex] = useState5(defaultIndex);
+  const handleTabClick = (index) => {
+    if (tabs[index].disabled) return;
+    setActiveIndex(index);
+    onChange?.(index);
+  };
+  return /* @__PURE__ */ jsxs11("div", { className, children: [
+    /* @__PURE__ */ jsx17("div", { className: "border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx17("nav", { className: "flex gap-8 px-6", "aria-label": "Tabs", children: tabs.map((tab, index) => /* @__PURE__ */ jsx17(
+      "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__ */ jsx17("div", { children: tabs[activeIndex]?.content })
+  ] });
+};
+
+// src/components/Table.tsx
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function Table({
+  columns,
+  data,
+  keyField = "id",
+  striped = false,
+  hoverable = true,
+  className = ""
+}) {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsxs12("div", { className: `overflow-x-auto ${className}`, children: [
+    /* @__PURE__ */ jsxs12("table", { className: "w-full text-left", children: [
+      /* @__PURE__ */ jsx18("thead", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx18("tr", { children: columns.map((column) => /* @__PURE__ */ jsx18(
+        "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__ */ jsx18("tbody", { className: "bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700", children: data.map((row, rowIndex) => /* @__PURE__ */ jsx18(
+        "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__ */ jsx18(
+            "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__ */ jsx18("div", { className: "text-center py-8 text-gray-500 dark:text-gray-400", children: "No data available" })
+  ] });
+}
+
+// src/components/Pagination.tsx
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className = ""
+}) => {
+  const { theme } = useTheme();
+  const range = (start, end) => {
+    const length = end - start + 1;
+    return Array.from({ length }, (_, idx) => idx + start);
+  };
+  const paginationRange = () => {
+    const totalPageNumbers = siblingCount + 5;
+    if (totalPageNumbers >= totalPages) {
+      return range(1, totalPages);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPages;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = 3 + 2 * siblingCount;
+      const leftRange = range(1, leftItemCount);
+      return [...leftRange, "...", totalPages];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = 3 + 2 * siblingCount;
+      const rightRange = range(totalPages - rightItemCount + 1, totalPages);
+      return [firstPageIndex, "...", ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, "...", ...middleRange, "...", lastPageIndex];
+    }
+    return range(1, totalPages);
+  };
+  const pages = paginationRange();
+  return /* @__PURE__ */ jsxs13("nav", { className: `flex items-center gap-1 ${className}`, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx19(
+      "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__ */ jsx19(
+          "span",
+          {
+            className: "px-3 py-2 text-gray-700 dark:text-gray-300",
+            children: "..."
+          },
+          `dots-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsx19(
+        "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__ */ jsx19(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        className: "px-3 py-2 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+        "aria-label": "Next page",
+        children: "Next"
+      }
+    )
+  ] });
+};
+
+// src/components/DatePicker.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+var DatePicker = forwardRef4(
+  ({ label, error, helperText, className = "", disabled, ...props }, ref) => {
+    const { theme } = useTheme();
+    const baseStyles = "w-full appearance-none rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 text-base transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm hover:border-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:hover:border-gray-500";
+    const errorStyles = error ? "border-red-500 focus:ring-red-500 dark:border-red-500" : "";
+    const disabledStyles = disabled ? "opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-900" : "";
+    return /* @__PURE__ */ jsxs14("div", { className, children: [
+      label && /* @__PURE__ */ jsx20("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ jsx20(
+        "input",
+        {
+          ref,
+          type: "date",
+          disabled,
+          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx20("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx20("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+// src/components/TimePicker.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var TimePicker = forwardRef5(
+  ({ 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__ */ jsxs15("div", { className, children: [
+      label && /* @__PURE__ */ jsx21("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ jsx21(
+        "input",
+        {
+          ref,
+          type: "time",
+          disabled,
+          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx21("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx21("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+    ] });
+  }
+);
+TimePicker.displayName = "TimePicker";
+
+// src/components/DateTimePicker.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var DateTimePicker = forwardRef6(
+  ({ 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__ */ jsxs16("div", { className, children: [
+      label && /* @__PURE__ */ jsx22("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+      /* @__PURE__ */ jsx22(
+        "input",
+        {
+          ref,
+          type: "datetime-local",
+          disabled,
+          className: `${baseStyles} ${errorStyles} ${disabledStyles}`.trim(),
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx22("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx22("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() {
@@ -314,13 +1134,220 @@ var themeScript = `
 function getThemeScript() {
   return themeScript;
 }
+
+// src/icons/Icon.tsx
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs17 } from "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, filled = false) => {
+  const Icon = ({ size = "md", className = "", color = "currentColor" }) => {
+    const sizeClass = sizeClasses5[size];
+    return /* @__PURE__ */ jsx23(
+      "svg",
+      {
+        className: `${sizeClass} ${className}`,
+        fill: filled ? color : "none",
+        viewBox: "0 0 24 24",
+        stroke: filled ? "none" : color,
+        "aria-hidden": "true",
+        children: path
+      }
+    );
+  };
+  Icon.displayName = displayName;
+  return Icon;
+};
+var HomeIcon = createIcon(
+  "HomeIcon",
+  /* @__PURE__ */ jsx23("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__ */ jsx23("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__ */ jsx23("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__ */ jsx23("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__ */ jsxs17(Fragment3, { children: [
+    /* @__PURE__ */ jsx23("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__ */ jsx23("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__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })
+);
+var CloseIcon = createIcon(
+  "CloseIcon",
+  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+);
+var ChevronDownIcon = createIcon(
+  "ChevronDownIcon",
+  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+);
+var ChevronRightIcon = createIcon(
+  "ChevronRightIcon",
+  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+);
+var CheckIcon = createIcon(
+  "CheckIcon",
+  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })
+);
+var PlusIcon = createIcon(
+  "PlusIcon",
+  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })
+);
+var TrashIcon = createIcon(
+  "TrashIcon",
+  /* @__PURE__ */ jsx23("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__ */ jsx23("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__ */ jsx23("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__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" })
+);
+var HeartIcon = createIcon(
+  "HeartIcon",
+  /* @__PURE__ */ jsx23("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__ */ jsx23("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__ */ jsx23("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__ */ jsxs17(Fragment3, { children: [
+    /* @__PURE__ */ jsx23("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__ */ jsx23("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__ */ jsx23("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__ */ jsx23("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" })
+);
+var GoogleIcon = createIcon(
+  "GoogleIcon",
+  /* @__PURE__ */ jsx23("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
+);
+var GitHubIcon = createIcon(
+  "GitHubIcon",
+  /* @__PURE__ */ jsx23("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
+);
+var TwitterIcon = createIcon(
+  "TwitterIcon",
+  /* @__PURE__ */ jsx23("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
+);
+var FacebookIcon = createIcon(
+  "FacebookIcon",
+  /* @__PURE__ */ jsx23("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
+);
+var AppleIcon = createIcon(
+  "AppleIcon",
+  /* @__PURE__ */ jsx23("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
+);
+var LinkedInIcon = createIcon(
+  "LinkedInIcon",
+  /* @__PURE__ */ jsx23("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
+);
+var YouTubeIcon = createIcon(
+  "YouTubeIcon",
+  /* @__PURE__ */ jsx23("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
+);
+var SlackIcon = createIcon(
+  "SlackIcon",
+  /* @__PURE__ */ jsx23("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
+);
 export {
+  ActionMenu,
+  Alert,
+  AppleIcon,
+  Badge,
+  BellIcon,
   Button,
+  CalendarIcon,
+  CameraIcon,
+  Card,
+  CheckIcon,
+  Checkbox,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  DatePicker,
+  DateTimePicker,
+  DownloadIcon,
+  Drawer,
+  EditIcon,
+  FacebookIcon,
+  GitHubIcon,
+  GoogleIcon,
+  HeartIcon,
+  HomeIcon,
+  LinkedInIcon,
+  LockIcon,
+  MailIcon,
+  MenuIcon,
+  Modal,
+  Navbar,
+  Pagination,
+  PlusIcon,
+  SearchIcon,
   Select,
+  SettingsIcon,
+  Sidebar,
+  SidebarProvider,
+  SlackIcon,
+  Spinner,
+  StarIcon,
+  Table,
+  Tabs,
+  TextInput,
   ThemeProvider,
+  TimePicker,
+  Toggle,
+  TrashIcon,
+  TwitterIcon,
+  UploadIcon,
+  UserIcon,
+  YouTubeIcon,
   getThemeScript,
   themeScript,
   themes,
+  useSidebar,
   useTheme
 };
 //# sourceMappingURL=index.mjs.map