@marcoschwartz/lite-ui 0.3.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,13 +152,16 @@ 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();
@@ -166,21 +169,26 @@ var Button = ({
   const variantStyles3 = theme.button.variants[variant];
   const sizeStyles2 = theme.button.sizes[size];
   const disabledStyles = disabled ? theme.button.disabled : "";
-  const classes = `${baseStyles} ${variantStyles3} ${sizeStyles2} ${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",
@@ -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",
       {
@@ -284,7 +292,7 @@ var Select = ({
 
 // src/components/Modal.tsx
 import { useEffect as useEffect3 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var sizeClasses = {
   sm: "max-w-md",
   md: "max-w-lg",
@@ -325,13 +333,13 @@ var Modal = ({
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": title ? "modal-title" : void 0,
-      children: /* @__PURE__ */ jsxs2(
+      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__ */ jsxs2("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", 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",
@@ -352,7 +360,7 @@ var Modal = ({
 };
 
 // src/components/Navbar.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var Navbar = ({
   logo,
   children,
@@ -361,7 +369,7 @@ var Navbar = ({
 }) => {
   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__ */ jsxs3("div", { className: "flex justify-between items-center h-16", children: [
+  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 })
   ] }) }) });
@@ -424,7 +432,7 @@ var useSidebar = () => {
 
 // src/components/Drawer.tsx
 import { useEffect as useEffect4 } from "react";
-import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var sizeClasses2 = {
   left: {
     sm: "w-64",
@@ -487,7 +495,7 @@ var Drawer = ({
   if (!isOpen) return null;
   const sizeClass = sizeClasses2[position][size];
   const positionClass = positionClasses[position];
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx8(
       "div",
       {
@@ -495,12 +503,12 @@ var Drawer = ({
         onClick: onClose
       }
     ),
-    /* @__PURE__ */ jsxs4(
+    /* @__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__ */ jsxs4("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", 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",
@@ -521,7 +529,7 @@ var Drawer = ({
 
 // src/components/TextInput.tsx
 import { forwardRef } from "react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+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",
@@ -547,9 +555,9 @@ var TextInput = forwardRef(
     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__ */ jsxs5("div", { className: `${widthStyle} ${className}`, children: [
+    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__ */ jsxs5("div", { className: "relative", children: [
+      /* @__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",
@@ -571,7 +579,7 @@ 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 jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var ActionMenu = ({
   items,
   trigger,
@@ -608,14 +616,14 @@ var ActionMenu = ({
   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__ */ jsxs6("div", { className: "relative inline-block", ref: menuRef, children: [
+  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__ */ jsxs6(
+        children: items.map((item, index) => /* @__PURE__ */ jsxs7(
           "button",
           {
             onClick: () => handleItemClick(item),
@@ -660,7 +668,7 @@ var Card = ({
 };
 
 // src/components/Alert.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+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",
@@ -683,14 +691,14 @@ var Alert = ({
   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__ */ jsxs7("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsxs7("div", { className: `flex-shrink-0 ${iconClass}`, children: [
+  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__ */ jsxs7("div", { className: "flex-1", children: [
+    /* @__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 })
     ] }),
@@ -708,12 +716,12 @@ var Alert = ({
 
 // src/components/Checkbox.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+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__ */ jsxs8("div", { className, children: [
-      /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
+    return /* @__PURE__ */ jsxs9("div", { className, children: [
+      /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 cursor-pointer group", children: [
         /* @__PURE__ */ jsx13(
           "input",
           {
@@ -734,7 +742,7 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/Toggle.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+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();
@@ -753,8 +761,8 @@ var Toggle = forwardRef3(
       }
     };
     const currentSize = toggleClasses[size];
-    return /* @__PURE__ */ jsxs9("label", { className: `inline-flex items-center gap-3 cursor-pointer ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`, children: [
-      /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+    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",
           {
@@ -846,7 +854,7 @@ var Spinner = ({
 
 // src/components/Tabs.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var Tabs = ({
   tabs,
   defaultIndex = 0,
@@ -860,7 +868,7 @@ var Tabs = ({
     setActiveIndex(index);
     onChange?.(index);
   };
-  return /* @__PURE__ */ jsxs10("div", { className, children: [
+  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",
       {
@@ -877,7 +885,7 @@ var Tabs = ({
 };
 
 // src/components/Table.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function Table({
   columns,
   data,
@@ -887,8 +895,8 @@ function Table({
   className = ""
 }) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsxs11("div", { className: `overflow-x-auto ${className}`, children: [
-    /* @__PURE__ */ jsxs11("table", { className: "w-full text-left", children: [
+  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",
         {
@@ -922,7 +930,7 @@ function Table({
 }
 
 // src/components/Pagination.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 var Pagination = ({
   currentPage,
   totalPages,
@@ -963,7 +971,7 @@ var Pagination = ({
     return range(1, totalPages);
   };
   const pages = paginationRange();
-  return /* @__PURE__ */ jsxs12("nav", { className: `flex items-center gap-1 ${className}`, "aria-label": "Pagination", children: [
+  return /* @__PURE__ */ jsxs13("nav", { className: `flex items-center gap-1 ${className}`, "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx19(
       "button",
       {
@@ -1012,14 +1020,14 @@ var Pagination = ({
 
 // src/components/DatePicker.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+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__ */ jsxs13("div", { className, children: [
+    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",
@@ -1040,14 +1048,14 @@ DatePicker.displayName = "DatePicker";
 
 // src/components/TimePicker.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+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__ */ jsxs14("div", { className, children: [
+    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",
@@ -1068,14 +1076,14 @@ TimePicker.displayName = "TimePicker";
 
 // src/components/DateTimePicker.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+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__ */ jsxs15("div", { className, children: [
+    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",
@@ -1128,7 +1136,7 @@ function getThemeScript() {
 }
 
 // src/icons/Icon.tsx
-import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+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",
@@ -1136,16 +1144,16 @@ var sizeClasses5 = {
   lg: "w-6 h-6",
   xl: "w-8 h-8"
 };
-var createIcon = (displayName, path) => {
+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: "none",
+        fill: filled ? color : "none",
         viewBox: "0 0 24 24",
-        stroke: color,
+        stroke: filled ? "none" : color,
         "aria-hidden": "true",
         children: path
       }
@@ -1172,7 +1180,7 @@ var BellIcon = createIcon(
 );
 var SettingsIcon = createIcon(
   "SettingsIcon",
-  /* @__PURE__ */ jsxs16(Fragment2, { children: [
+  /* @__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" })
   ] })
@@ -1231,7 +1239,7 @@ var UploadIcon = createIcon(
 );
 var CameraIcon = createIcon(
   "CameraIcon",
-  /* @__PURE__ */ jsxs16(Fragment2, { children: [
+  /* @__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" })
   ] })
@@ -1244,9 +1252,50 @@ 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,
@@ -1263,8 +1312,12 @@ export {
   DownloadIcon,
   Drawer,
   EditIcon,
+  FacebookIcon,
+  GitHubIcon,
+  GoogleIcon,
   HeartIcon,
   HomeIcon,
+  LinkedInIcon,
   LockIcon,
   MailIcon,
   MenuIcon,
@@ -1277,6 +1330,7 @@ export {
   SettingsIcon,
   Sidebar,
   SidebarProvider,
+  SlackIcon,
   Spinner,
   StarIcon,
   Table,
@@ -1286,8 +1340,10 @@ export {
   TimePicker,
   Toggle,
   TrashIcon,
+  TwitterIcon,
   UploadIcon,
   UserIcon,
+  YouTubeIcon,
   getThemeScript,
   themeScript,
   themes,