@marcoschwartz/lite-ui 0.4.1 → 0.6.0

package/dist/index.mjs

@@ -1102,41 +1102,270 @@ var DateTimePicker = forwardRef6(
 );
 DateTimePicker.displayName = "DateTimePicker";
 
-// src/utils/theme-script.ts
-var themeScript = `
-(function() {
-  try {
-    // Get stored preferences
-    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';
-    const storedColorMode = localStorage.getItem('lite-ui-color-mode');
+// src/components/Radio.tsx
+import React14 from "react";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var Radio = ({
+  name,
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  disabled = false,
+  orientation = "vertical",
+  className = ""
+}) => {
+  const [internalValue, setInternalValue] = React14.useState(defaultValue || "");
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const handleChange = (optionValue) => {
+    if (disabled) return;
+    setInternalValue(optionValue);
+    onChange?.(optionValue);
+  };
+  const containerClass = orientation === "horizontal" ? "flex flex-wrap gap-4" : "flex flex-col gap-2";
+  return /* @__PURE__ */ jsx23("div", { className: `${containerClass} ${className}`, role: "radiogroup", children: options.map((option) => {
+    const isDisabled = disabled || option.disabled;
+    const isChecked = value === option.value;
+    const id = `${name}-${option.value}`;
+    return /* @__PURE__ */ jsxs17(
+      "label",
+      {
+        htmlFor: id,
+        className: `flex items-center gap-2 cursor-pointer ${isDisabled ? "opacity-50 cursor-not-allowed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx23(
+            "input",
+            {
+              type: "radio",
+              id,
+              name,
+              value: option.value,
+              checked: isChecked,
+              onChange: () => handleChange(option.value),
+              disabled: isDisabled,
+              className: "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer disabled:cursor-not-allowed"
+            }
+          ),
+          /* @__PURE__ */ jsx23("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: option.label })
+        ]
+      },
+      option.value
+    );
+  }) });
+};
 
-    // Determine color mode (system, light, or dark)
-    let colorMode = storedColorMode;
-    if (!colorMode || colorMode === 'system') {
-      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
+// src/components/ProgressBar.tsx
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var ProgressBar = ({
+  value,
+  max = 100,
+  size = "md",
+  variant = "default",
+  showLabel = false,
+  label,
+  className = ""
+}) => {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  const sizeClasses6 = {
+    sm: "h-1",
+    md: "h-2",
+    lg: "h-3"
+  };
+  const variantClasses = {
+    default: "bg-blue-600 dark:bg-blue-500",
+    success: "bg-green-600 dark:bg-green-500",
+    warning: "bg-yellow-500 dark:bg-yellow-400",
+    danger: "bg-red-600 dark:bg-red-500"
+  };
+  return /* @__PURE__ */ jsxs18("div", { className: `w-full ${className}`, children: [
+    (showLabel || label) && /* @__PURE__ */ jsxs18("div", { className: "flex justify-between items-center mb-1", children: [
+      label && /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      showLabel && /* @__PURE__ */ jsxs18("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+        Math.round(percentage),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx24(
+      "div",
+      {
+        className: `w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden ${sizeClasses6[size]}`,
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        children: /* @__PURE__ */ jsx24(
+          "div",
+          {
+            className: `${sizeClasses6[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    )
+  ] });
+};
 
-    // Set attributes before render
-    document.documentElement.setAttribute('data-theme', storedTheme);
-    document.documentElement.setAttribute('data-color-mode', colorMode);
+// src/components/Slider.tsx
+import React15 from "react";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+var Slider = ({
+  value: controlledValue,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  disabled = false,
+  showValue = false,
+  label,
+  className = ""
+}) => {
+  const [internalValue, setInternalValue] = React15.useState(defaultValue);
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const handleChange = (e) => {
+    const newValue = Number(e.target.value);
+    setInternalValue(newValue);
+    onChange?.(newValue);
+  };
+  const percentage = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs19("div", { className: `w-full ${className}`, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs19("div", { className: "flex justify-between items-center mb-2", children: [
+      label && /* @__PURE__ */ jsx25("label", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: label }),
+      showValue && /* @__PURE__ */ jsx25("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: value })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx25("div", { className: "absolute inset-0 h-2 bg-gray-200 dark:bg-gray-700 rounded-full top-1/2 -translate-y-1/2" }),
+      /* @__PURE__ */ jsx25(
+        "div",
+        {
+          className: "absolute h-2 bg-blue-600 dark:bg-blue-500 rounded-full top-1/2 -translate-y-1/2 pointer-events-none",
+          style: { width: `${percentage}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx25(
+        "input",
+        {
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: handleChange,
+          disabled,
+          className: "relative w-full h-2 bg-transparent appearance-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50\n            [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4\n            [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-600 [&::-webkit-slider-thumb]:cursor-pointer\n            [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md\n            [&::-webkit-slider-thumb]:hover:bg-blue-700 [&::-webkit-slider-thumb]:active:scale-110 [&::-webkit-slider-thumb]:transition-all\n            [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full\n            [&::-moz-range-thumb]:bg-blue-600 [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-2\n            [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:hover:bg-blue-700\n            [&::-moz-range-thumb]:active:scale-110 [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:border-none",
+          "aria-label": label,
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value
+        }
+      )
+    ] })
+  ] });
+};
 
-    // Add dark class for Tailwind
-    if (colorMode === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
+// src/components/Avatar.tsx
+import React16 from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var Avatar = ({
+  src,
+  alt,
+  name,
+  size = "md",
+  shape = "circle",
+  className = "",
+  fallbackColor = "bg-blue-600"
+}) => {
+  const [imageError, setImageError] = React16.useState(false);
+  const sizeClasses6 = {
+    xs: "w-6 h-6 text-xs",
+    sm: "w-8 h-8 text-sm",
+    md: "w-10 h-10 text-base",
+    lg: "w-12 h-12 text-lg",
+    xl: "w-16 h-16 text-2xl"
+  };
+  const shapeClass = shape === "circle" ? "rounded-full" : "rounded-md";
+  const getInitials = (name2) => {
+    const parts = name2.trim().split(" ");
+    if (parts.length >= 2) {
+      return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
     }
-  } catch (e) {
-    console.error('Failed to initialize theme:', e);
-  }
-})();
-`;
-function getThemeScript() {
-  return themeScript;
-}
+    return name2.slice(0, 2).toUpperCase();
+  };
+  const showImage = src && !imageError;
+  const showInitials = !showImage && name;
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      className: `${sizeClasses6[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-gray-200 dark:bg-gray-700" : `${fallbackColor} text-white`} ${className}`,
+      children: showImage ? /* @__PURE__ */ jsx26(
+        "img",
+        {
+          src,
+          alt: alt || name || "Avatar",
+          className: "w-full h-full object-cover",
+          onError: () => setImageError(true)
+        }
+      ) : showInitials ? /* @__PURE__ */ jsx26("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ jsx26(
+        "svg",
+        {
+          className: "w-full h-full text-gray-400 dark:text-gray-600",
+          fill: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx26("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+        }
+      )
+    }
+  );
+};
+
+// src/components/Textarea.tsx
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+var Textarea = ({
+  label,
+  error,
+  helperText,
+  size = "md",
+  resize = "vertical",
+  className = "",
+  disabled,
+  ...props
+}) => {
+  const sizeClasses6 = {
+    sm: "px-3 py-1.5 text-sm min-h-[80px]",
+    md: "px-4 py-2 text-base min-h-[100px]",
+    lg: "px-4 py-3 text-lg min-h-[120px]"
+  };
+  const resizeClasses = {
+    none: "resize-none",
+    vertical: "resize-y",
+    horizontal: "resize-x",
+    both: "resize"
+  };
+  const baseClasses = `w-full rounded-lg border transition-colors duration-150 focus:outline-none focus:ring-2
+    ${error ? "border-red-500 focus:ring-red-500 focus:border-red-500 dark:border-red-400 dark:focus:ring-red-400" : "border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:focus:ring-blue-400"}
+    bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
+    placeholder:text-gray-500 dark:placeholder:text-gray-400
+    disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 dark:disabled:bg-gray-900`;
+  return /* @__PURE__ */ jsxs20("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx27("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }),
+    /* @__PURE__ */ jsx27(
+      "textarea",
+      {
+        className: `${baseClasses} ${sizeClasses6[size]} ${resizeClasses[resize]}`,
+        disabled,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx27("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx27("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText })
+  ] });
+};
 
-// src/icons/Icon.tsx
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+// src/components/Toast.tsx
+import { createContext as createContext3, useContext as useContext3, useState as useState6, useCallback } from "react";
+
+// src/icons/icon-utils.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
 var sizeClasses5 = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -1147,7 +1376,7 @@ var sizeClasses5 = {
 var createIcon = (displayName, path, filled = false) => {
   const Icon = ({ size = "md", className = "", color = "currentColor" }) => {
     const sizeClass = sizeClasses5[size];
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx28(
       "svg",
       {
         className: `${sizeClass} ${className}`,
@@ -1162,140 +1391,595 @@ var createIcon = (displayName, path, filled = false) => {
   Icon.displayName = displayName;
   return Icon;
 };
+
+// src/icons/HomeIcon.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx29("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" })
 );
+
+// src/icons/UserIcon.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx30("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" })
 );
+
+// src/icons/SearchIcon.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx31("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" })
 );
+
+// src/icons/BellIcon.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" })
 );
+
+// src/icons/SettingsIcon.tsx
+import { Fragment as Fragment3, jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsxs21(Fragment3, { children: [
+    /* @__PURE__ */ jsx33("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__ */ jsx33("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" })
   ] })
 );
+
+// src/icons/MenuIcon.tsx
+import { jsx as jsx34 } from "react/jsx-runtime";
 var MenuIcon = createIcon(
   "MenuIcon",
-  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })
+  /* @__PURE__ */ jsx34("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })
 );
+
+// src/icons/CloseIcon.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
 var CloseIcon = createIcon(
   "CloseIcon",
-  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+  /* @__PURE__ */ jsx35("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
 );
+
+// src/icons/ChevronDownIcon.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
 var ChevronDownIcon = createIcon(
   "ChevronDownIcon",
-  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+  /* @__PURE__ */ jsx36("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
 );
+
+// src/icons/ChevronRightIcon.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
 var ChevronRightIcon = createIcon(
   "ChevronRightIcon",
-  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+  /* @__PURE__ */ jsx37("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
 );
+
+// src/icons/CheckIcon.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
 var CheckIcon = createIcon(
   "CheckIcon",
-  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })
+  /* @__PURE__ */ jsx38("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })
 );
+
+// src/icons/PlusIcon.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
 var PlusIcon = createIcon(
   "PlusIcon",
-  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })
+  /* @__PURE__ */ jsx39("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })
 );
+
+// src/icons/TrashIcon.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx40("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" })
 );
+
+// src/icons/EditIcon.tsx
+import { jsx as jsx41 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx41("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" })
 );
+
+// src/icons/MailIcon.tsx
+import { jsx as jsx42 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx42("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" })
 );
+
+// src/icons/StarIcon.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
 var StarIcon = createIcon(
   "StarIcon",
-  /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" })
+  /* @__PURE__ */ jsx43("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" })
 );
+
+// src/icons/HeartIcon.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx44("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" })
 );
+
+// src/icons/DownloadIcon.tsx
+import { jsx as jsx45 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx45("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" })
 );
+
+// src/icons/UploadIcon.tsx
+import { jsx as jsx46 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx46("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" })
 );
+
+// src/icons/CameraIcon.tsx
+import { Fragment as Fragment4, jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsxs22(Fragment4, { children: [
+    /* @__PURE__ */ jsx47("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__ */ jsx47("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 13a3 3 0 11-6 0 3 3 0 016 0z" })
   ] })
 );
+
+// src/icons/LockIcon.tsx
+import { jsx as jsx48 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx48("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" })
 );
+
+// src/icons/CalendarIcon.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
 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" })
+  /* @__PURE__ */ jsx49("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })
 );
+
+// src/icons/GoogleIcon.tsx
+import { jsx as jsx50 } from "react/jsx-runtime";
 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" }),
+  /* @__PURE__ */ jsx50("path", { d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" }),
   true
 );
+
+// src/icons/GitHubIcon.tsx
+import { jsx as jsx51 } from "react/jsx-runtime";
 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" }),
+  /* @__PURE__ */ jsx51("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" }),
   true
 );
+
+// src/icons/TwitterIcon.tsx
+import { jsx as jsx52 } from "react/jsx-runtime";
 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" }),
+  /* @__PURE__ */ jsx52("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }),
   true
 );
+
+// src/icons/FacebookIcon.tsx
+import { jsx as jsx53 } from "react/jsx-runtime";
 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" }),
+  /* @__PURE__ */ jsx53("path", { d: "M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" }),
   true
 );
+
+// src/icons/AppleIcon.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
 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" }),
+  /* @__PURE__ */ jsx54("path", { d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }),
   true
 );
+
+// src/icons/LinkedInIcon.tsx
+import { jsx as jsx55 } from "react/jsx-runtime";
 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" }),
+  /* @__PURE__ */ jsx55("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }),
   true
 );
+
+// src/icons/YouTubeIcon.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
 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" }),
+  /* @__PURE__ */ jsx56("path", { d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }),
   true
 );
+
+// src/icons/SlackIcon.tsx
+import { jsx as jsx57 } from "react/jsx-runtime";
 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" }),
+  /* @__PURE__ */ jsx57("path", { d: "M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.268a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" }),
   true
 );
+
+// src/components/Toast.tsx
+import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
+var ToastContext = createContext3(void 0);
+var useToast = () => {
+  const context = useContext3(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var ToastProvider = ({ children, position = "top-right" }) => {
+  const [toasts, setToasts] = useState6([]);
+  const addToast = useCallback((toast2) => {
+    const id = Math.random().toString(36).substring(7);
+    const newToast = { ...toast2, id };
+    setToasts((prev) => [...prev, newToast]);
+    const duration = toast2.duration || 5e3;
+    setTimeout(() => {
+      removeToast(id);
+    }, duration);
+  }, []);
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
+  }, []);
+  const positionClasses2 = {
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-center": "top-4 left-1/2 -translate-x-1/2",
+    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+  };
+  return /* @__PURE__ */ jsxs23(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+    children,
+    /* @__PURE__ */ jsx58("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ jsx58(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) })
+  ] });
+};
+var ToastItem = ({ toast: toast2, onClose }) => {
+  const typeStyles = {
+    success: "bg-green-50 dark:bg-green-900/30 border-green-500 text-green-800 dark:text-green-200",
+    error: "bg-red-50 dark:bg-red-900/30 border-red-500 text-red-800 dark:text-red-200",
+    warning: "bg-yellow-50 dark:bg-yellow-900/30 border-yellow-500 text-yellow-800 dark:text-yellow-200",
+    info: "bg-blue-50 dark:bg-blue-900/30 border-blue-500 text-blue-800 dark:text-blue-200"
+  };
+  const typeIcons = {
+    success: /* @__PURE__ */ jsx58(CheckIcon, { size: "sm", className: "text-green-600 dark:text-green-400" }),
+    error: /* @__PURE__ */ jsx58(CloseIcon, { size: "sm", className: "text-red-600 dark:text-red-400" }),
+    warning: /* @__PURE__ */ jsx58("svg", { className: "w-4 h-4 text-yellow-600 dark:text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx58("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+    info: /* @__PURE__ */ jsx58("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx58("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
+  };
+  const type = toast2.type || "info";
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: `flex items-start gap-3 p-4 rounded-lg border-l-4 shadow-lg backdrop-blur-sm ${typeStyles[type]} animate-slide-in`,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx58("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
+        /* @__PURE__ */ jsx58("p", { className: "flex-1 text-sm font-medium", children: toast2.message }),
+        /* @__PURE__ */ jsx58(
+          "button",
+          {
+            onClick: onClose,
+            className: "flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx58(CloseIcon, { size: "sm" })
+          }
+        )
+      ]
+    }
+  );
+};
+var toast = {
+  success: (message, duration) => ({
+    message,
+    type: "success",
+    duration
+  }),
+  error: (message, duration) => ({
+    message,
+    type: "error",
+    duration
+  }),
+  warning: (message, duration) => ({
+    message,
+    type: "warning",
+    duration
+  }),
+  info: (message, duration) => ({
+    message,
+    type: "info",
+    duration
+  })
+};
+
+// src/components/Stepper.tsx
+import React18 from "react";
+import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
+var Stepper = ({
+  steps,
+  currentStep,
+  orientation = "horizontal",
+  className = ""
+}) => {
+  const isHorizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsx59("div", { className: `${isHorizontal ? "flex items-center" : "flex flex-col"} ${className}`, children: steps.map((step, index) => {
+    const stepNumber = index + 1;
+    const isActive = stepNumber === currentStep;
+    const isCompleted = stepNumber < currentStep;
+    const isLast = index === steps.length - 1;
+    return /* @__PURE__ */ jsxs24(React18.Fragment, { children: [
+      /* @__PURE__ */ jsxs24("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-row items-start"} ${isHorizontal ? "" : "flex-1"}`, children: [
+        /* @__PURE__ */ jsx59("div", { className: "flex items-center", children: /* @__PURE__ */ jsx59(
+          "div",
+          {
+            className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-blue-600 border-blue-600 dark:bg-blue-500 dark:border-blue-500" : isActive ? "border-blue-600 bg-white dark:border-blue-500 dark:bg-gray-800" : "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800"}`,
+            children: isCompleted ? /* @__PURE__ */ jsx59(CheckIcon, { size: "sm", className: "text-white" }) : /* @__PURE__ */ jsx59(
+              "span",
+              {
+                className: `text-sm font-semibold ${isActive ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"}`,
+                children: stepNumber
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs24("div", { className: `${isHorizontal ? "mt-2 text-center" : "ml-4 pb-8"} ${isLast && !isHorizontal ? "pb-0" : ""}`, children: [
+          /* @__PURE__ */ jsx59(
+            "p",
+            {
+              className: `text-sm font-medium ${isActive || isCompleted ? "text-gray-900 dark:text-gray-100" : "text-gray-500 dark:text-gray-400"}`,
+              children: step.label
+            }
+          ),
+          step.description && /* @__PURE__ */ jsx59("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: step.description })
+        ] })
+      ] }),
+      !isLast && /* @__PURE__ */ jsx59(
+        "div",
+        {
+          className: `${isHorizontal ? "flex-1 h-0.5 mx-4" : "w-0.5 h-full ml-5 -mt-8"} ${isCompleted || isActive && stepNumber < currentStep ? "bg-blue-600 dark:bg-blue-500" : "bg-gray-300 dark:bg-gray-600"}`
+        }
+      )
+    ] }, index);
+  }) });
+};
+
+// src/components/Divider.tsx
+import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+var Divider = ({
+  orientation = "horizontal",
+  variant = "solid",
+  className = "",
+  label,
+  labelPosition = "center"
+}) => {
+  const variantClasses = {
+    solid: "border-solid",
+    dashed: "border-dashed",
+    dotted: "border-dotted"
+  };
+  if (label && orientation === "horizontal") {
+    const alignmentClasses = {
+      left: "justify-start",
+      center: "justify-center",
+      right: "justify-end"
+    };
+    return /* @__PURE__ */ jsxs25("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
+      labelPosition !== "left" && /* @__PURE__ */ jsx60("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` }),
+      /* @__PURE__ */ jsx60("span", { className: "px-4 text-sm text-gray-500 dark:text-gray-400", children: label }),
+      labelPosition !== "right" && /* @__PURE__ */ jsx60("div", { className: `flex-1 border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600` })
+    ] });
+  }
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx60(
+      "div",
+      {
+        className: `inline-block h-full border-l ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
+        role: "separator",
+        "aria-orientation": "vertical"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx60(
+    "hr",
+    {
+      className: `border-t ${variantClasses[variant]} border-gray-300 dark:border-gray-600 ${className}`,
+      role: "separator"
+    }
+  );
+};
+
+// src/components/FileUpload.tsx
+import { useRef as useRef3, useState as useState7 } from "react";
+import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+var FileUpload = ({
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles = 10,
+  disabled = false,
+  onChange,
+  onError,
+  className = "",
+  label,
+  helperText
+}) => {
+  const [files, setFiles] = useState7([]);
+  const [isDragging, setIsDragging] = useState7(false);
+  const fileInputRef = useRef3(null);
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
+  };
+  const validateFiles = (fileList) => {
+    const validFiles = [];
+    const filesArray = Array.from(fileList);
+    if (filesArray.length + files.length > maxFiles) {
+      onError?.(`Maximum ${maxFiles} files allowed`);
+      return validFiles;
+    }
+    for (const file of filesArray) {
+      if (maxSize && file.size > maxSize) {
+        onError?.(`File ${file.name} exceeds maximum size of ${formatFileSize(maxSize)}`);
+        continue;
+      }
+      validFiles.push(file);
+    }
+    return validFiles;
+  };
+  const handleFiles = (fileList) => {
+    if (!fileList || disabled) return;
+    const validFiles = validateFiles(fileList);
+    if (validFiles.length > 0) {
+      const newFiles = multiple ? [...files, ...validFiles] : validFiles;
+      setFiles(newFiles);
+      onChange?.(newFiles);
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled) {
+      setIsDragging(true);
+    }
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+  const handleClick = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+  const handleRemoveFile = (index) => {
+    const newFiles = files.filter((_, i) => i !== index);
+    setFiles(newFiles);
+    onChange?.(newFiles);
+  };
+  return /* @__PURE__ */ jsxs26("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx61("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: label }),
+    /* @__PURE__ */ jsxs26(
+      "div",
+      {
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onClick: handleClick,
+        className: `relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all ${isDragging ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx61(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: (e) => handleFiles(e.target.files),
+              disabled,
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx61("div", { className: "w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center", children: /* @__PURE__ */ jsx61(UploadIcon, { size: "lg", className: "text-gray-400 dark:text-gray-500" }) }),
+            /* @__PURE__ */ jsxs26("div", { children: [
+              /* @__PURE__ */ jsxs26("p", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
+                /* @__PURE__ */ jsx61("span", { className: "text-blue-600 dark:text-blue-400", children: "Click to upload" }),
+                " or drag and drop"
+              ] }),
+              /* @__PURE__ */ jsxs26("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: [
+                accept ? `Accepted: ${accept}` : "Any file type",
+                maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    helperText && /* @__PURE__ */ jsx61("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: helperText }),
+    files.length > 0 && /* @__PURE__ */ jsx61("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ jsxs26(
+      "div",
+      {
+        className: "flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700",
+        children: [
+          /* @__PURE__ */ jsxs26("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx61("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: file.name }),
+            /* @__PURE__ */ jsx61("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatFileSize(file.size) })
+          ] }),
+          /* @__PURE__ */ jsx61(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRemoveFile(index);
+              },
+              className: "ml-4 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors",
+              "aria-label": "Remove file",
+              children: /* @__PURE__ */ jsx61(CloseIcon, { size: "sm" })
+            }
+          )
+        ]
+      },
+      index
+    )) })
+  ] });
+};
+
+// src/utils/theme-script.ts
+var themeScript = `
+(function() {
+  try {
+    // Get stored preferences
+    const storedTheme = localStorage.getItem('lite-ui-theme') || 'default';
+    const storedColorMode = localStorage.getItem('lite-ui-color-mode');
+
+    // Determine color mode (system, light, or dark)
+    let colorMode = storedColorMode;
+    if (!colorMode || colorMode === 'system') {
+      colorMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    // Set attributes before render
+    document.documentElement.setAttribute('data-theme', storedTheme);
+    document.documentElement.setAttribute('data-color-mode', colorMode);
+
+    // Add dark class for Tailwind
+    if (colorMode === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  } catch (e) {
+    console.error('Failed to initialize theme:', e);
+  }
+})();
+`;
+function getThemeScript() {
+  return themeScript;
+}
 export {
   ActionMenu,
   Alert,
   AppleIcon,
+  Avatar,
   Badge,
   BellIcon,
   Button,
@@ -1309,10 +1993,12 @@ export {
   CloseIcon,
   DatePicker,
   DateTimePicker,
+  Divider,
   DownloadIcon,
   Drawer,
   EditIcon,
   FacebookIcon,
+  FileUpload,
   GitHubIcon,
   GoogleIcon,
   HeartIcon,
@@ -1325,19 +2011,25 @@ export {
   Navbar,
   Pagination,
   PlusIcon,
+  ProgressBar,
+  Radio,
   SearchIcon,
   Select,
   SettingsIcon,
   Sidebar,
   SidebarProvider,
   SlackIcon,
+  Slider,
   Spinner,
   StarIcon,
+  Stepper,
   Table,
   Tabs,
   TextInput,
+  Textarea,
   ThemeProvider,
   TimePicker,
+  ToastProvider,
   Toggle,
   TrashIcon,
   TwitterIcon,
@@ -1347,7 +2039,9 @@ export {
   getThemeScript,
   themeScript,
   themes,
+  toast,
   useSidebar,
-  useTheme
+  useTheme,
+  useToast
 };
 //# sourceMappingURL=index.mjs.map