@gamecp/ui 0.1.0 → 0.1.13

package/dist/index.mjs

@@ -1,15 +1,69 @@
-import React4, { forwardRef, useState, useRef, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { RiCheckLine, RiFileCopyLine, RiEyeOffLine, RiEyeLine, RiRefreshLine, RiCloseLine, RiArrowDownSLine } from 'react-icons/ri';
-import NextLink from 'next/link';
+import React4, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
+import { RiCloseLine, RiCheckLine, RiLoader4Line, RiFileCopyLine, RiEyeOffLine, RiEyeLine, RiRefreshLine, RiArrowDownSLine } from 'react-icons/ri';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
+import NextLink from 'next/link';
 
-// src/Button.tsx
+// src/Badge.tsx
+var badgeVariants = {
+  default: "bg-gray-100 text-foreground border-border",
+  primary: "bg-primary-100 text-primary-800 border-primary-200",
+  secondary: "bg-gray-100 text-foreground border-border",
+  success: "bg-success text-success-dark border-success-light",
+  warning: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  error: "bg-red-100 text-red-800 border-red-200",
+  info: "bg-muted text-muted-foreground border-ring",
+  gray: "bg-gray-100 text-foreground border-border",
+  purple: "bg-purple-100 text-purple-800 border-purple-200",
+  pink: "bg-pink-100 text-pink-800 border-pink-200",
+  indigo: "bg-indigo-100 text-indigo-800 border-indigo-200",
+  yellow: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  orange: "bg-orange-100 text-orange-800 border-orange-200",
+  teal: "bg-teal-100 text-teal-800 border-teal-200",
+  cyan: "bg-cyan-100 text-cyan-800 border-cyan-200",
+  lime: "bg-lime-100 text-lime-800 border-lime-200",
+  emerald: "bg-emerald-100 text-emerald-800 border-emerald-200",
+  rose: "bg-rose-100 text-rose-800 border-rose-200",
+  sky: "bg-sky-100 text-sky-800 border-sky-200",
+  violet: "bg-violet-100 text-violet-800 border-violet-200",
+  fuchsia: "bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200",
+  amber: "bg-amber-100 text-amber-800 border-amber-200"
+};
+var badgeSizes = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-0.5 text-xs",
+  lg: "px-3 py-1 text-sm"
+};
+function Badge({
+  children,
+  variant = "default",
+  size = "md",
+  className = "",
+  customColors
+}) {
+  const baseClasses = "inline-flex items-center font-medium rounded-full border";
+  const variantClasses5 = variant === "custom" ? "" : badgeVariants[variant];
+  const sizeClasses5 = badgeSizes[size];
+  const customStyles = variant === "custom" && customColors ? {
+    backgroundColor: customColors.background,
+    color: customColors.text,
+    borderColor: customColors.border || customColors.background
+  } : {};
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `${baseClasses} ${variantClasses5} ${sizeClasses5} ${className}`,
+      style: customStyles,
+      children
+    }
+  );
+}
 var variantClasses = {
   primary: "bg-primary text-primary-foreground hover:bg-primary/90 border-transparent",
   secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
   destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 border-transparent",
+  danger: "bg-red-600 text-white hover:bg-red-700 border-transparent",
   ghost: "bg-transparent hover:bg-muted hover:text-foreground border-transparent",
   link: "bg-transparent text-primary underline-offset-4 hover:underline border-transparent p-0",
   outline: "bg-transparent border-border hover:bg-muted hover:text-foreground"
@@ -88,73 +142,6 @@ var Button = forwardRef(
 );
 Button.displayName = "Button";
 var Button_default = Button;
-var badgeVariants = {
-  default: "bg-gray-100 text-foreground border-border",
-  primary: "bg-primary-100 text-primary-800 border-primary-200",
-  secondary: "bg-gray-100 text-foreground border-border",
-  success: "bg-success text-success-dark border-success-light",
-  warning: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  error: "bg-red-100 text-red-800 border-red-200",
-  info: "bg-muted text-muted-foreground border-ring",
-  gray: "bg-gray-100 text-foreground border-border",
-  purple: "bg-purple-100 text-purple-800 border-purple-200",
-  pink: "bg-pink-100 text-pink-800 border-pink-200",
-  indigo: "bg-indigo-100 text-indigo-800 border-indigo-200",
-  yellow: "bg-yellow-100 text-yellow-800 border-yellow-200",
-  orange: "bg-orange-100 text-orange-800 border-orange-200",
-  teal: "bg-teal-100 text-teal-800 border-teal-200",
-  cyan: "bg-cyan-100 text-cyan-800 border-cyan-200",
-  lime: "bg-lime-100 text-lime-800 border-lime-200",
-  emerald: "bg-emerald-100 text-emerald-800 border-emerald-200",
-  rose: "bg-rose-100 text-rose-800 border-rose-200",
-  sky: "bg-sky-100 text-sky-800 border-sky-200",
-  violet: "bg-violet-100 text-violet-800 border-violet-200",
-  fuchsia: "bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200",
-  amber: "bg-amber-100 text-amber-800 border-amber-200"
-};
-var badgeSizes = {
-  sm: "px-2 py-0.5 text-xs",
-  md: "px-2.5 py-0.5 text-xs",
-  lg: "px-3 py-1 text-sm"
-};
-function Badge({
-  children,
-  variant = "default",
-  size = "md",
-  className = "",
-  customColors
-}) {
-  const baseClasses = "inline-flex items-center font-medium rounded-full border";
-  const variantClasses4 = variant === "custom" ? "" : badgeVariants[variant];
-  const sizeClasses4 = badgeSizes[size];
-  const customStyles = variant === "custom" && customColors ? {
-    backgroundColor: customColors.background,
-    color: customColors.text,
-    borderColor: customColors.border || customColors.background
-  } : {};
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: `${baseClasses} ${variantClasses4} ${sizeClasses4} ${className}`,
-      style: customStyles,
-      children
-    }
-  );
-}
-var SuccessBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "success" });
-var WarningBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "warning" });
-var ErrorBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "error" });
-var InfoBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "info" });
-var PrimaryBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "primary" });
-var GrayBadge = (props) => /* @__PURE__ */ jsx(Badge, { ...props, variant: "gray" });
-function StatusBadge({
-  isActive,
-  activeText = "Active",
-  inactiveText = "Inactive",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Badge, { ...props, variant: isActive ? "success" : "error", children: isActive ? activeText : inactiveText });
-}
 var sizeClasses2 = {
   xs: "w-3 h-3",
   sm: "w-4 h-4",
@@ -260,7 +247,8 @@ function Card({
   contentClassName = "",
   status,
   statusIcon,
-  statusText
+  statusText,
+  id
 }) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
   const baseClasses = [
@@ -290,6 +278,7 @@ function Card({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
       className: `${baseClasses} ${className}`,
       style,
       onClick: clickable || onClick ? handleClick : void 0,
@@ -343,133 +332,1033 @@ function Card({
     }
   );
 }
-function SimpleCard({
+var sizeClasses3 = {
+  sm: "max-w-md",
+  md: "max-w-2xl",
+  lg: "max-w-4xl",
+  xl: "max-w-6xl",
+  full: "max-w-full mx-4"
+};
+function Modal({
+  isOpen,
+  onClose,
   children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Card, { className, ...props, children });
-}
-function HeaderCard({
   title,
-  subtitle,
-  description,
-  icon,
-  iconColor,
-  iconSize,
-  actionButton,
-  children,
+  header,
+  blocking = false,
+  size = "md",
   className = "",
-  ...props
+  footer,
+  fullScreen = false,
+  noPadding = false,
+  footerBg = "gray",
+  variant = "default",
+  scrollable = true,
+  "aria-describedby": ariaDescribedBy,
+  customStyles = {}
 }) {
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      title,
-      subtitle,
-      description,
-      icon,
-      iconColor,
-      iconSize,
-      actionButton,
-      className,
-      ...props,
-      children
+  const modalContentRef = useRef(null);
+  const previousActiveElementRef = useRef(null);
+  const hasPerformedInitialFocusRef = useRef(false);
+  const getFocusableElements = () => {
+    if (!modalContentRef.current) return [];
+    const focusableSelectors = [
+      "button:not([disabled])",
+      "a[href]",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(", ");
+    return Array.from(
+      modalContentRef.current.querySelectorAll(focusableSelectors)
+    );
+  };
+  useEffect(() => {
+    if (!isOpen) {
+      hasPerformedInitialFocusRef.current = false;
+      return;
     }
-  );
-}
-function StatusCard({
-  status,
-  statusIcon,
-  statusText,
-  children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      status,
-      statusIcon,
-      statusText,
-      className,
-      ...props,
-      children
+    if (!hasPerformedInitialFocusRef.current) {
+      previousActiveElementRef.current = document.activeElement;
     }
-  );
-}
-function ClickableCard({
-  onClick,
-  children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Card, { onClick, clickable: true, hover: true, className, ...props, children });
-}
-function AccordionCard({
-  accordion = true,
-  children,
-  className = "",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Card, { accordion, className, ...props, children });
-}
-var variantClasses3 = {
-  default: "text-foreground hover:text-primary",
-  primary: "text-primary hover:text-primary/80",
-  muted: "text-muted-foreground hover:text-foreground"
-};
-var Link = forwardRef(
-  ({
-    href,
-    variant = "default",
-    underline = false,
-    external = false,
-    className = "",
-    children,
-    ...props
-  }, ref) => {
-    const classes = [
-      "transition-colors",
-      variantClasses3[variant],
-      underline ? "underline underline-offset-4" : "hover:underline hover:underline-offset-4",
-      className
-    ].filter(Boolean).join(" ");
-    if (external || href.startsWith("http")) {
-      return /* @__PURE__ */ jsx(
-        "a",
-        {
-          ref,
-          href,
-          className: classes,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          ...props,
-          children
+    let timeoutId = null;
+    if (!hasPerformedInitialFocusRef.current) {
+      const focusableElements = getFocusableElements();
+      const firstFocusable = focusableElements[0];
+      timeoutId = setTimeout(() => {
+        const activeElement = document.activeElement;
+        const isHTMLElement = activeElement instanceof HTMLElement;
+        const isUserTyping = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || isHTMLElement && activeElement.isContentEditable);
+        const isFocusInModal = modalContentRef.current?.contains(activeElement);
+        if (!isUserTyping && !isFocusInModal) {
+          if (firstFocusable) {
+            firstFocusable.focus();
+            hasPerformedInitialFocusRef.current = true;
+          } else if (modalContentRef.current) {
+            modalContentRef.current.focus();
+            hasPerformedInitialFocusRef.current = true;
+          }
+        } else if (isFocusInModal) {
+          hasPerformedInitialFocusRef.current = true;
         }
-      );
+      }, 100);
     }
-    return /* @__PURE__ */ jsx(NextLink, { ref, href, className: classes, ...props, children });
-  }
-);
-Link.displayName = "Link";
-var Link_default = Link;
-function FormInput({
-  label,
-  name,
-  type = "text",
-  value,
-  onChange,
-  placeholder,
-  required = false,
-  disabled = false,
-  error,
-  className = "",
-  inputClassName = "",
-  min,
-  max,
-  step,
-  maxLength,
+    const handleTab = (event) => {
+      if (event.key !== "Tab") return;
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+    };
+    const handleEsc = (event) => {
+      if (event.key === "Escape" && !blocking) {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleTab);
+    document.addEventListener("keydown", handleEsc);
+    document.body.style.overflow = "hidden";
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      document.removeEventListener("keydown", handleTab);
+      document.removeEventListener("keydown", handleEsc);
+      document.body.style.overflow = "unset";
+      if (!isOpen && previousActiveElementRef.current) {
+        previousActiveElementRef.current.focus();
+      }
+    };
+  }, [isOpen, onClose, blocking]);
+  const modalRoot = (() => {
+    if (typeof document === "undefined") return null;
+    let root = document.getElementById("modal-root");
+    if (!root) {
+      root = document.createElement("div");
+      root.id = "modal-root";
+      document.body.appendChild(root);
+    }
+    return root;
+  })();
+  if (!modalRoot) {
+    return null;
+  }
+  const backdropVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 }
+  };
+  const modalVariants = {
+    hidden: {
+      opacity: 0,
+      scale: 0.95,
+      y: 20
+    },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      y: 0,
+      transition: {
+        duration: 0.2,
+        ease: "easeOut"
+      }
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.9,
+      y: 100,
+      // Slide down much further for reverse effect
+      transition: {
+        duration: 0.3,
+        ease: "easeIn"
+      }
+    }
+  };
+  if (!isOpen) return null;
+  if (variant === "plain") {
+    return createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: `modal-backdrop fixed inset-0 w-screen h-screen flex items-center ${customStyles.backdrop?.includes("justify-") ? customStyles.backdrop : customStyles.backdrop ? `${customStyles.backdrop} justify-center` : "justify-center bg-black/10"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
+          variants: backdropVariants,
+          initial: "hidden",
+          animate: isOpen ? "visible" : "hidden",
+          exit: "hidden",
+          onClick: blocking ? void 0 : onClose,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              ref: modalContentRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": title ? "modal-title-plain" : void 0,
+              "aria-describedby": ariaDescribedBy || "modal-content-plain",
+              tabIndex: -1,
+              className: `w-full flex flex-col overflow-hidden relative z-[1000000] ${customStyles.container || "bg-card shadow-xl"} ${fullScreen ? "h-full rounded-none" : `rounded-lg ${className} ${sizeClasses3[size]} max-h-[90vh]`}`,
+              variants: modalVariants,
+              initial: "hidden",
+              animate: isOpen ? "visible" : "exit",
+              exit: "exit",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: "modal-content-plain",
+                  className: `flex-1 ${customStyles.content || ""}`,
+                  children
+                }
+              )
+            },
+            "modal-content"
+          )
+        },
+        "modal-backdrop"
+      ) }),
+      modalRoot
+    );
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: `modal-backdrop fixed inset-0 w-screen h-screen bg-black/10 flex items-center ${customStyles.backdrop || "justify-center"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
+        variants: backdropVariants,
+        initial: "hidden",
+        animate: isOpen ? "visible" : "hidden",
+        exit: "hidden",
+        onClick: blocking ? void 0 : onClose,
+        children: /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            ref: modalContentRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? "modal-title" : void 0,
+            "aria-describedby": ariaDescribedBy || "modal-content",
+            tabIndex: -1,
+            className: `bg-card border border-border shadow-xl w-full flex flex-col overflow-hidden relative z-[1000000] ${fullScreen ? "h-full rounded-none" : `rounded-lg ${customStyles.container || className || sizeClasses3[size]} max-h-[90vh]`}`,
+            variants: modalVariants,
+            initial: "hidden",
+            animate: isOpen ? "visible" : "exit",
+            exit: "exit",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              header ? /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: header }) : title ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `px-6 py-4 border-b border-border flex justify-between items-center flex-shrink-0 ${customStyles.header || ""}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        id: "modal-title",
+                        className: "text-xl font-semibold text-foreground",
+                        children: title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors",
+                        title: "Close",
+                        "aria-label": "Close modal",
+                        disabled: blocking,
+                        children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-5 h-5", "aria-hidden": "true" })
+                      }
+                    )
+                  ]
+                }
+              ) : null,
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: "modal-content",
+                  className: `bg-background text-foreground flex-1 ${scrollable ? "overflow-y-auto" : ""} ${fullScreen || noPadding ? "p-0" : "px-6 py-4"}`,
+                  children
+                }
+              ),
+              footer && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `flex-shrink-0 px-6 py-4 border-t border-border ${footerBg === "white" ? "bg-card" : "bg-muted"} ${customStyles.footer || ""}`,
+                  children: footer
+                }
+              )
+            ]
+          },
+          "modal-content"
+        )
+      },
+      "modal-backdrop"
+    ) }),
+    modalRoot
+  );
+}
+function ConfirmDialog({ isOpen, options, onConfirm, onCancel }) {
+  const { title, message, confirmText, cancelText = "Cancel", confirmButtonColor = "blue" } = options;
+  const getConfirmVariant = () => {
+    switch (confirmButtonColor) {
+      case "red":
+        return "danger";
+      case "green":
+        return "primary";
+      case "blue":
+      default:
+        return "primary";
+    }
+  };
+  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose: onCancel, title, children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-foreground", children: message }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 justify-end", children: [
+      /* @__PURE__ */ jsx(Button_default, { variant: "secondary", onClick: onCancel, children: cancelText }),
+      /* @__PURE__ */ jsx(Button_default, { variant: getConfirmVariant(), onClick: onConfirm, children: confirmText })
+    ] })
+  ] }) });
+}
+function useConfirmDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [options, setOptions] = useState({
+    title: "",
+    message: "",
+    confirmText: "Confirm"
+  });
+  const [resolver, setResolver] = useState(null);
+  const confirm = (opts) => {
+    setOptions(opts);
+    setIsOpen(true);
+    return new Promise((resolve) => {
+      setResolver(() => resolve);
+    });
+  };
+  const handleConfirm = () => {
+    setIsOpen(false);
+    if (resolver) {
+      resolver(true);
+      setResolver(null);
+    }
+  };
+  const handleCancel = () => {
+    setIsOpen(false);
+    if (resolver) {
+      resolver(false);
+      setResolver(null);
+    }
+  };
+  const dialog = /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      isOpen,
+      options,
+      onConfirm: handleConfirm,
+      onCancel: handleCancel
+    }
+  );
+  return { confirm, dialog };
+}
+var ConfirmDialog_default = ConfirmDialog;
+var paddingClasses2 = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+function Container({
+  children,
+  className = "",
+  padding = "md",
+  id
+}) {
+  return /* @__PURE__ */ jsx("div", { id, className: `${paddingClasses2[padding]} ${className}`, children });
+}
+var EmptyState = ({
+  icon: Icon,
+  title,
+  subtitle,
+  action,
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `text-center py-12 text-secondary-foreground p-6 lg:p-12 ${className}`,
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "w-12 h-12 mx-auto mb-3 text-muted-foreground",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-1", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-4", children: subtitle }),
+        action && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: action })
+      ]
+    }
+  );
+};
+var EmptyState_default = EmptyState;
+function useKeyboardNavigation({
+  isOpen,
+  optionsLength,
+  onSelect,
+  onClose,
+  onOpen
+}) {
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const resetFocus = useCallback(() => {
+    setFocusedIndex(-1);
+  }, []);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!isOpen) {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+          e.preventDefault();
+          onOpen?.();
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setFocusedIndex((prev) => prev < optionsLength - 1 ? prev + 1 : 0);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setFocusedIndex((prev) => prev > 0 ? prev - 1 : optionsLength - 1);
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (focusedIndex >= 0 && focusedIndex < optionsLength) {
+            onSelect(focusedIndex);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          onClose();
+          resetFocus();
+          break;
+        case "Tab":
+          onClose();
+          resetFocus();
+          break;
+      }
+    },
+    [isOpen, optionsLength, focusedIndex, onSelect, onClose, onOpen, resetFocus]
+  );
+  return {
+    focusedIndex,
+    handleKeyDown,
+    resetFocus,
+    setFocusedIndex
+  };
+}
+function SmartDropdown({
+  isOpen,
+  onClose,
+  trigger,
+  children,
+  className = "",
+  width = 384,
+  maxHeight = 450,
+  offset = 8,
+  margin = 16,
+  id = "dropdown-listbox",
+  position = "auto"
+}) {
+  const [dropdownPosition, setDropdownPosition] = useState({
+    top: 0,
+    left: 0,
+    right: void 0,
+    width: 0,
+    maxHeight: 0,
+    isAbove: false
+  });
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const calculateDropdownPosition = useCallback(() => {
+    if (!triggerRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const spaceAbove = triggerRect.top - margin;
+    const spaceBelow = viewportHeight - triggerRect.bottom - margin;
+    let calculatedWidth;
+    if (width === "fit-content") {
+      calculatedWidth = triggerRect.width;
+    } else if (width === "auto") {
+      calculatedWidth = triggerRect.width;
+    } else if (typeof width === "number") {
+      calculatedWidth = Math.min(width, viewportWidth - margin * 2);
+    } else {
+      calculatedWidth = triggerRect.width;
+    }
+    const calculatedMaxHeight = Math.min(
+      maxHeight,
+      Math.max(spaceAbove, spaceBelow)
+    );
+    let left = triggerRect.left;
+    let right = void 0;
+    if (position === "top-right" || position === "bottom-right") {
+      left = triggerRect.right - calculatedWidth;
+    } else if (position === "top-left" || position === "bottom-left") {
+      left = triggerRect.left;
+    } else if (position === "top-left-aligned" || position === "bottom-left-aligned") {
+      const availableLeftSpace = triggerRect.left - margin;
+      const dynamicOffset = Math.max(20, availableLeftSpace * 0.2);
+      right = viewportWidth - triggerRect.left + dynamicOffset;
+      left = 0;
+      calculatedWidth = Math.min(
+        calculatedWidth,
+        triggerRect.left - dynamicOffset - margin
+      );
+    } else {
+      if (left + calculatedWidth > viewportWidth - margin) {
+        left = triggerRect.right - calculatedWidth;
+      }
+    }
+    if (left !== void 0 && left < margin) {
+      left = margin;
+    }
+    let top = triggerRect.bottom + offset;
+    let finalMaxHeight = calculatedMaxHeight;
+    let isAbove = false;
+    if (spaceAbove > spaceBelow && top + calculatedMaxHeight > viewportHeight - margin) {
+      isAbove = true;
+      top = triggerRect.top - calculatedMaxHeight - offset;
+      finalMaxHeight = Math.min(calculatedMaxHeight, spaceAbove);
+      if (top < margin) {
+        top = margin;
+        finalMaxHeight = triggerRect.top - margin - offset;
+      }
+    } else {
+      finalMaxHeight = Math.min(calculatedMaxHeight, spaceBelow);
+      if (top + finalMaxHeight > viewportHeight - margin) {
+        top = viewportHeight - margin - finalMaxHeight;
+      }
+    }
+    if (position === "top-right") {
+      left = triggerRect.right - calculatedWidth;
+      top = triggerRect.top - offset;
+      isAbove = true;
+      finalMaxHeight = Math.min(maxHeight, spaceAbove);
+    } else if (position === "top-left") {
+      left = triggerRect.left;
+      top = triggerRect.top - offset;
+      isAbove = true;
+      finalMaxHeight = Math.min(maxHeight, spaceAbove);
+    } else if (position === "bottom-right") {
+      left = triggerRect.right - calculatedWidth;
+      top = triggerRect.bottom + offset;
+      isAbove = false;
+      finalMaxHeight = Math.min(maxHeight, spaceBelow);
+    } else if (position === "bottom-left") {
+      left = triggerRect.left;
+      top = triggerRect.bottom + offset;
+      isAbove = false;
+      finalMaxHeight = Math.min(maxHeight, spaceBelow);
+    } else if (position === "top-left-aligned") {
+      right = viewportWidth - triggerRect.right;
+      left = 0;
+      top = triggerRect.top - offset;
+      isAbove = true;
+      finalMaxHeight = Math.min(maxHeight, spaceAbove);
+    } else if (position === "bottom-left-aligned") {
+      right = viewportWidth - triggerRect.right;
+      left = 0;
+      top = triggerRect.bottom + offset;
+      isAbove = false;
+      finalMaxHeight = Math.min(maxHeight, spaceBelow);
+    }
+    setDropdownPosition({
+      top,
+      left,
+      right,
+      width: calculatedWidth,
+      maxHeight: finalMaxHeight,
+      isAbove
+    });
+  }, [width, maxHeight, margin, offset, position]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isInsideDropdown = dropdownRef.current?.contains(target);
+      const isInsideTrigger = triggerRef.current?.contains(target);
+      if (!isInsideDropdown && !isInsideTrigger) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  useEffect(() => {
+    if (isOpen) {
+      calculateDropdownPosition();
+    }
+  }, [isOpen, calculateDropdownPosition]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleResize = () => {
+      calculateDropdownPosition();
+    };
+    const handleScroll = () => {
+      calculateDropdownPosition();
+    };
+    window.addEventListener("resize", handleResize);
+    window.addEventListener("scroll", handleScroll, true);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [isOpen, calculateDropdownPosition]);
+  useEffect(() => {
+    if (!isOpen || !dropdownRef.current || !triggerRef.current) return;
+    if (dropdownPosition.isAbove) {
+      const adjustPosition = () => {
+        const dropdownRect = dropdownRef.current?.getBoundingClientRect();
+        const triggerRect = triggerRef.current?.getBoundingClientRect();
+        if (!dropdownRect || !triggerRect) return;
+        const actualHeight = dropdownRect.height;
+        const newTop = triggerRect.top - actualHeight - offset;
+        if (newTop !== dropdownPosition.top && newTop >= margin) {
+          setDropdownPosition((prev) => ({
+            ...prev,
+            top: newTop
+          }));
+        }
+      };
+      const resizeObserver = new ResizeObserver(() => {
+        setTimeout(adjustPosition, 0);
+      });
+      resizeObserver.observe(dropdownRef.current);
+      adjustPosition();
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [isOpen, dropdownPosition.isAbove, dropdownPosition.top, offset, margin]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: "w-full",
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": "dropdown-listbox",
+        children: trigger
+      }
+    ),
+    isOpen && typeof window !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: dropdownRef,
+          id,
+          "data-smart-dropdown": true,
+          role: "listbox",
+          "aria-label": "Dropdown options",
+          className: `fixed z-[1000001] card overflow-hidden`,
+          style: {
+            top: dropdownPosition.top,
+            ...dropdownPosition.left !== void 0 ? { left: dropdownPosition.left } : {},
+            ...dropdownPosition.right !== void 0 ? { right: dropdownPosition.right } : {},
+            width: width === "fit-content" ? "auto" : dropdownPosition.width,
+            maxHeight: dropdownPosition.maxHeight
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: className ? className : "overflow-y-auto",
+              style: { maxHeight: dropdownPosition.maxHeight },
+              children: typeof children === "function" ? children({ isAbove: dropdownPosition.isAbove }) : children
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function SmartSelect({
+  options,
+  value,
+  onChange,
+  placeholder = "Select option...",
+  className = "",
+  description,
+  disabled = false,
+  multiple = false,
+  width,
+  searchable = false,
+  keepOpen = false,
+  clearable = true,
+  // API integration props
+  onOpen,
+  onClose,
+  onSearch,
+  isLoading = false
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [triggerWidth, setTriggerWidth] = useState(
+    void 0
+  );
+  const [searchTerm, setSearchTerm] = useState("");
+  const [displayValue, setDisplayValue] = useState("");
+  const inputRef = useRef(null);
+  const buttonRef = useRef(null);
+  const selectedValues = multiple ? value || [] : [value];
+  const selectedOptions = options.filter(
+    (opt) => selectedValues.includes(opt.value)
+  );
+  const hasSelection = multiple ? selectedValues.length > 0 : value && value !== "";
+  const filteredOptions = searchable && searchTerm.trim() ? options.filter(
+    (option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()) || option.value.toLowerCase().includes(searchTerm.toLowerCase()) || option.description?.toLowerCase().includes(searchTerm.toLowerCase())
+  ) : options;
+  const { focusedIndex, handleKeyDown, resetFocus } = useKeyboardNavigation({
+    isOpen,
+    optionsLength: filteredOptions.length,
+    onSelect: (index) => handleSelect(filteredOptions[index].value),
+    onClose: () => setIsOpen(false),
+    onOpen: () => setIsOpen(true)
+  });
+  useEffect(() => {
+    if (selectedOptions.length > 0) {
+      if (multiple) {
+        setDisplayValue(selectedOptions.map((opt) => opt.label).join(", "));
+      } else {
+        setDisplayValue(selectedOptions[0].label);
+      }
+    } else {
+      setDisplayValue("");
+    }
+  }, [selectedOptions, multiple]);
+  const handleSelect = (optionValue) => {
+    if (multiple) {
+      const currentValues = value || [];
+      const newValues = currentValues.includes(optionValue) ? currentValues.filter((v) => v !== optionValue) : [...currentValues, optionValue];
+      onChange(newValues);
+    } else {
+      onChange(optionValue);
+      setSearchTerm("");
+      setIsOpen(false);
+    }
+  };
+  const currentTriggerRef = searchable ? inputRef : buttonRef;
+  useEffect(() => {
+    if (currentTriggerRef.current) {
+      const rect = currentTriggerRef.current.getBoundingClientRect();
+      setTriggerWidth(rect.width);
+    }
+  }, [isOpen, currentTriggerRef]);
+  useEffect(() => {
+    if (!currentTriggerRef.current) return;
+    const resizeObserver = new ResizeObserver(() => {
+      if (currentTriggerRef.current) {
+        const rect = currentTriggerRef.current.getBoundingClientRect();
+        setTriggerWidth(rect.width);
+      }
+    });
+    resizeObserver.observe(currentTriggerRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [currentTriggerRef]);
+  useEffect(() => {
+    if (isOpen && searchable && inputRef.current) {
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 0);
+    } else if (!isOpen) {
+      setSearchTerm("");
+      resetFocus();
+    }
+  }, [isOpen, searchable, resetFocus]);
+  const handleOpen = () => {
+    setIsOpen(true);
+    onOpen?.();
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+  const handleSearchChange = (search) => {
+    setSearchTerm(search);
+    onSearch?.(search);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", "data-smart-select": true, children: [
+    description && /* @__PURE__ */ jsx("p", { className: "form-description", children: description }),
+    /* @__PURE__ */ jsx(
+      SmartDropdown,
+      {
+        isOpen,
+        onClose: handleClose,
+        width: width !== void 0 ? width : triggerWidth,
+        maxHeight: 200,
+        trigger: searchable ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: isOpen ? searchTerm : displayValue,
+              onChange: (e) => {
+                if (isOpen) {
+                  handleSearchChange(e.target.value);
+                  resetFocus();
+                }
+              },
+              onFocus: () => !disabled && handleOpen(),
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && handleOpen();
+              },
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-controls": "dropdown-listbox",
+              "aria-autocomplete": "list",
+              "aria-activedescendant": focusedIndex >= 0 ? `option-${focusedIndex}` : void 0,
+              className: `form-input truncate ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`
+            }
+          ),
+          hasSelection && clearable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange(multiple ? [] : "");
+              },
+              className: "absolute right-6 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-colors",
+              "aria-label": "Clear selection",
+              title: "Clear selection",
+              children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-4 h-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && setIsOpen(!isOpen);
+              },
+              className: `absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-colors ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+              disabled,
+              "aria-label": isOpen ? "Close dropdown" : "Open dropdown",
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ jsx(
+                DropDownArrow,
+                {
+                  isOpen,
+                  disabled,
+                  size: "sm",
+                  color: "gray",
+                  "aria-hidden": true
+                }
+              )
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: buttonRef,
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && (isOpen ? handleClose() : handleOpen());
+              },
+              onKeyDown: handleKeyDown,
+              disabled,
+              role: "combobox",
+              "aria-expanded": isOpen,
+              "aria-haspopup": "listbox",
+              "aria-controls": "dropdown-listbox",
+              "aria-label": placeholder,
+              "aria-activedescendant": focusedIndex >= 0 ? `option-${focusedIndex}` : void 0,
+              className: `form-input flex items-center justify-between text-left ${hasSelection ? "pr-12" : "pr-8"} ${disabled ? "opacity-60 cursor-not-allowed" : ""} ${className}`,
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `flex items-center gap-2 min-w-0 flex-1 ${selectedOptions.length > 0 ? "" : "text-muted-foreground opacity-60"}`,
+                  children: multiple ? selectedOptions.length > 0 ? (() => {
+                    const displayText = selectedOptions.map((opt) => opt.label).join(", ");
+                    return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+                      selectedOptions[0].icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: selectedOptions[0].icon }),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: displayText })
+                    ] });
+                  })() : /* @__PURE__ */ jsx("span", { className: "truncate", children: placeholder }) : selectedOptions[0] ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 min-w-0 flex-1", children: [
+                    selectedOptions[0].icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: selectedOptions[0].icon }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOptions[0].label })
+                  ] }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: placeholder })
+                }
+              )
+            }
+          ),
+          hasSelection && clearable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange(multiple ? [] : "");
+              },
+              className: "absolute right-6 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-all duration-200 opacity-0 group-hover:opacity-100",
+              "aria-label": "Clear selection",
+              title: "Clear selection",
+              children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-4 h-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                !disabled && setIsOpen(!isOpen);
+              },
+              className: `absolute right-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground hover:text-muted-foreground transition-colors ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+              disabled,
+              "aria-label": isOpen ? "Close dropdown" : "Open dropdown",
+              "aria-expanded": isOpen,
+              children: /* @__PURE__ */ jsx(
+                DropDownArrow,
+                {
+                  isOpen,
+                  disabled,
+                  size: "sm",
+                  color: "gray",
+                  "aria-hidden": true
+                }
+              )
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsx("div", { className: "py-2", children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: `option-${index}`,
+            type: "button",
+            role: "option",
+            "aria-selected": selectedValues.includes(option.value),
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleSelect(option.value);
+            },
+            className: `w-full px-3 py-2 text-left text-sm hover:bg-accent flex items-center justify-between min-h-[40px] transition-colors ${selectedValues.includes(option.value) ? "bg-accent border-l-2 border-l-ring" : index === focusedIndex ? "bg-muted ring-2 ring-ring" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+                option.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: option.icon }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground truncate", children: option.label }),
+                    option.metadata?.isDefault && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium success-badge flex-shrink-0", children: "Default" })
+                  ] }),
+                  option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate", children: option.description }),
+                  option.metadata?.args && option.metadata.args.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-xs text-secondary-foreground mb-1", children: "Arguments:" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+                      option.metadata.args.slice(0, 3).map((arg, argIndex) => /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono bg-muted text-muted-foreground",
+                          children: arg
+                        },
+                        argIndex
+                      )),
+                      option.metadata.args.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-secondary-foreground", children: [
+                        "+",
+                        option.metadata.args.length - 3,
+                        " more"
+                      ] })
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              multiple ? /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedValues.includes(option.value),
+                  onChange: () => {
+                  },
+                  className: "w-4 h-4 text-primary bg-muted border-border rounded focus:ring-primary focus:ring-2"
+                }
+              ) : selectedValues.includes(option.value) && /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-primary flex-shrink-0" })
+            ]
+          },
+          option.value
+        )) : /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-secondary-foreground flex items-center gap-2", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(RiLoader4Line, { className: "w-4 h-4 animate-spin" }),
+          /* @__PURE__ */ jsx("span", { children: "Loading..." })
+        ] }) : searchTerm.trim() ? /* @__PURE__ */ jsx("span", { children: "No results found" }) : /* @__PURE__ */ jsx("span", { children: "No options available" }) }) })
+      }
+    )
+  ] });
+}
+function Skeleton({ className = "", children }) {
+  return /* @__PURE__ */ jsx("div", { className: `animate-pulse ${className}`, children });
+}
+function SkeletonItem({
+  className = "",
+  width = "w-full",
+  height = "h-4",
+  rounded = true,
+  animate = true
+}) {
+  const isArbitraryHeight = height.includes("[") && height.includes("]");
+  const baseClasses = isArbitraryHeight ? `bg-muted ${width}` : `${height} bg-muted ${width}`;
+  const roundedClasses = rounded ? "rounded" : "";
+  const animateClasses = animate ? "animate-pulse" : "";
+  const style = isArbitraryHeight ? { height: height.replace("h-[", "").replace("]", "") } : {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${baseClasses} ${roundedClasses} ${animateClasses} ${className}`,
+      style
+    }
+  );
+}
+function FormInput({
+  label,
+  name,
+  type = "text",
+  value,
+  onChange,
+  placeholder,
+  required = false,
+  disabled = false,
+  error,
+  className = "",
+  inputClassName = "",
+  min,
+  max,
+  step,
+  maxLength,
   autoComplete,
   description,
   footerDescription,
@@ -477,12 +1366,17 @@ function FormInput({
   onKeyDown,
   onBlur,
   icon,
+  options = [],
+  multiSelect = false,
+  selectWidth,
+  searchable = false,
+  clearable = true,
   rows = 3,
   showHidePassword = false,
   onGeneratePassword,
+  isLoading = false,
   copyable = false,
-  readOnly = false,
-  clearable = true
+  readOnly = false
 }) {
   const [showPassword, setShowPassword] = useState(false);
   const [copied, setCopied] = useState(false);
@@ -524,14 +1418,82 @@ function FormInput({
   };
   const getInputPaddingClasses = (inputType, iconConfig) => {
     if (!shouldShowIcons(inputType)) return "";
-    const paddingClasses2 = [];
-    if (iconConfig.left) paddingClasses2.push("pl-10");
+    const paddingClasses3 = [];
+    if (iconConfig.left) paddingClasses3.push("pl-10");
     if (iconConfig.right) {
-      paddingClasses2.push(inputType === "number" ? "pr-12" : "pr-10");
+      paddingClasses3.push(inputType === "number" ? "pr-12" : "pr-10");
+    }
+    return paddingClasses3.join(" ");
+  };
+  const SkeletonInput = () => {
+    const iconConfig = getIconConfig(icon);
+    const hasLeftIcon = iconConfig.left;
+    const hasRightIcon = iconConfig.right;
+    if (type === "checkbox") {
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center p-2 space-x-3 h-full", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative inline-flex h-6 w-11 items-center rounded-full bg-muted", children: /* @__PURE__ */ jsx("span", { className: "inline-block h-4 w-4 transform rounded-full bg-white border border-border translate-x-1" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description })
+        ] })
+      ] });
+    }
+    if (type === "textarea") {
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
+        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            width: "w-full",
+            height: "h-24",
+            className: `rounded-md`
+          }
+        ) }),
+        footerDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: footerDescription })
+      ] });
     }
-    return paddingClasses2.join(" ");
+    if (type === "color") {
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+          /* @__PURE__ */ jsx(SkeletonItem, { width: "w-10", height: "h-10", className: "rounded-md" }),
+          /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-24", height: "h-10", className: "rounded-md" }) })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { className: "form-label", children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
+      ] }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: description }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          SkeletonItem,
+          {
+            width: "w-full",
+            height: "h-10",
+            className: `rounded-md ${hasLeftIcon ? "pl-10" : ""} ${hasRightIcon ? "pr-10" : ""}`
+          }
+        ),
+        hasLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-5", height: "h-5", className: "rounded-full" }) }),
+        hasRightIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center", children: /* @__PURE__ */ jsx(SkeletonItem, { width: "w-5", height: "h-5", className: "rounded-full" }) })
+      ] }),
+      footerDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-secondary-foreground", children: footerDescription })
+    ] });
   };
-  return /* @__PURE__ */ jsx("div", { className: `form-group ${className}`, children: type === "checkbox" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center p-2 space-x-3 h-full", children: [
+  return /* @__PURE__ */ jsx("div", { className: `form-group ${className}`, children: isLoading ? /* @__PURE__ */ jsx(SkeletonInput, {}) : type === "checkbox" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center p-2 space-x-3 h-full", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -636,7 +1598,45 @@ function FormInput({
       required && /* @__PURE__ */ jsx("span", { className: "form-label-required", children: "*" })
     ] }),
     description && /* @__PURE__ */ jsx("p", { id: `${name}-description`, className: "form-description", children: description }),
-    type === "textarea" ? /* @__PURE__ */ jsx(
+    type === "select" ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        SmartSelect,
+        {
+          value: multiSelect ? Array.isArray(value) ? value : value ? String(value).split(",") : [] : String(value),
+          onChange: multiSelect ? (selectedValue) => {
+            const syntheticEvent = {
+              target: {
+                name,
+                value: Array.isArray(selectedValue) ? selectedValue.join(",") : selectedValue
+              }
+            };
+            onChange(syntheticEvent);
+          } : (selectedValue) => {
+            const syntheticEvent = {
+              target: {
+                name,
+                value: selectedValue
+              }
+            };
+            onChange(syntheticEvent);
+          },
+          options,
+          placeholder: placeholder || "Select an option...",
+          className: `form-input ${error ? "form-input-error" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`,
+          multiple: multiSelect,
+          width: selectWidth,
+          searchable,
+          clearable
+        }
+      ),
+      shouldShowIcons(type) && (() => {
+        const iconConfig = getIconConfig(icon);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderIcon(iconConfig.left, "left"),
+          renderIcon(iconConfig.right, "right")
+        ] });
+      })()
+    ] }) : type === "textarea" ? /* @__PURE__ */ jsx(
       "textarea",
       {
         id: name,
@@ -835,337 +1835,85 @@ function FormInput({
     error && /* @__PURE__ */ jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsx("p", { children: error }) : error })
   ] }) });
 }
-function Switch({
-  checked,
-  onChange,
-  disabled = false,
-  label,
+function FormSection({
+  title,
   description,
-  className = "",
-  size = "md"
+  children,
+  className = ""
 }) {
-  const toggle = () => {
-    if (!disabled) {
-      onChange(!checked);
-    }
-  };
-  const sizes = {
-    sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
-    md: { track: "w-11 h-6", thumb: "w-5 h-5", translate: "translate-x-5" },
-    lg: { track: "w-14 h-8", thumb: "w-7 h-7", translate: "translate-x-6" }
-  };
-  const currentSize = sizes[size];
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-start ${className}`, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        role: "switch",
-        "aria-checked": checked,
-        disabled,
-        onClick: toggle,
-        className: `
-          relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
-          transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
-          ${checked ? "bg-primary" : "bg-muted"}
-          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
-          ${currentSize.track}
-        `,
-        children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: `
-            pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 
-            transition duration-200 ease-in-out
-            ${checked ? currentSize.translate : "translate-x-0"}
-            ${currentSize.thumb}
-          `
-          }
-        )
-      }
-    ),
-    (label || description) && /* @__PURE__ */ jsxs("div", { className: "ml-3 text-sm leading-6", children: [
-      label && /* @__PURE__ */ jsx("label", { className: "font-medium text-foreground cursor-pointer", onClick: toggle, children: label }),
-      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
-    ] })
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium ", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-4", children })
   ] });
 }
-var sizeClasses3 = {
-  sm: "max-w-md",
-  md: "max-w-2xl",
-  lg: "max-w-4xl",
-  xl: "max-w-6xl",
-  full: "max-w-full mx-4"
-};
-function Modal({
-  isOpen,
-  onClose,
+function Grid({
   children,
-  title,
-  header,
-  blocking = false,
-  size = "md",
-  className = "",
-  footer,
-  fullScreen = false,
-  noPadding = false,
-  footerBg = "gray",
-  variant = "default",
-  scrollable = true,
-  "aria-describedby": ariaDescribedBy,
-  customStyles = {}
+  cols = 1,
+  gap = 4,
+  className = ""
 }) {
-  const modalContentRef = useRef(null);
-  const previousActiveElementRef = useRef(null);
-  const hasPerformedInitialFocusRef = useRef(false);
-  const getFocusableElements = () => {
-    if (!modalContentRef.current) return [];
-    const focusableSelectors = [
-      "button:not([disabled])",
-      "a[href]",
-      "input:not([disabled])",
-      "select:not([disabled])",
-      "textarea:not([disabled])",
-      '[tabindex]:not([tabindex="-1"])'
-    ].join(", ");
-    return Array.from(
-      modalContentRef.current.querySelectorAll(focusableSelectors)
-    );
-  };
-  useEffect(() => {
-    if (!isOpen) {
-      hasPerformedInitialFocusRef.current = false;
-      return;
-    }
-    if (!hasPerformedInitialFocusRef.current) {
-      previousActiveElementRef.current = document.activeElement;
-    }
-    let timeoutId = null;
-    if (!hasPerformedInitialFocusRef.current) {
-      const focusableElements = getFocusableElements();
-      const firstFocusable = focusableElements[0];
-      timeoutId = setTimeout(() => {
-        const activeElement = document.activeElement;
-        const isHTMLElement = activeElement instanceof HTMLElement;
-        const isUserTyping = activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || isHTMLElement && activeElement.isContentEditable);
-        const isFocusInModal = modalContentRef.current?.contains(activeElement);
-        if (!isUserTyping && !isFocusInModal) {
-          if (firstFocusable) {
-            firstFocusable.focus();
-            hasPerformedInitialFocusRef.current = true;
-          } else if (modalContentRef.current) {
-            modalContentRef.current.focus();
-            hasPerformedInitialFocusRef.current = true;
-          }
-        } else if (isFocusInModal) {
-          hasPerformedInitialFocusRef.current = true;
-        }
-      }, 100);
-    }
-    const handleTab = (event) => {
-      if (event.key !== "Tab") return;
-      const focusableElements = getFocusableElements();
-      if (focusableElements.length === 0) return;
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
-      if (event.shiftKey) {
-        if (document.activeElement === firstElement) {
-          event.preventDefault();
-          lastElement.focus();
-        }
-      } else {
-        if (document.activeElement === lastElement) {
-          event.preventDefault();
-          firstElement.focus();
-        }
-      }
-    };
-    const handleEsc = (event) => {
-      if (event.key === "Escape" && !blocking) {
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleTab);
-    document.addEventListener("keydown", handleEsc);
-    document.body.style.overflow = "hidden";
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      document.removeEventListener("keydown", handleTab);
-      document.removeEventListener("keydown", handleEsc);
-      document.body.style.overflow = "unset";
-      if (!isOpen && previousActiveElementRef.current) {
-        previousActiveElementRef.current.focus();
-      }
-    };
-  }, [isOpen, onClose, blocking]);
-  const modalRoot = (() => {
-    if (typeof document === "undefined") return null;
-    let root = document.getElementById("modal-root");
-    if (!root) {
-      root = document.createElement("div");
-      root.id = "modal-root";
-      document.body.appendChild(root);
-    }
-    return root;
-  })();
-  if (!modalRoot) {
-    return null;
-  }
-  const backdropVariants = {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1 }
+  const colClasses = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+    5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
+    6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
+    12: "grid-cols-12"
   };
-  const modalVariants = {
-    hidden: {
-      opacity: 0,
-      scale: 0.95,
-      y: 20
-    },
-    visible: {
-      opacity: 1,
-      scale: 1,
-      y: 0,
-      transition: {
-        duration: 0.2,
-        ease: "easeOut"
-      }
-    },
-    exit: {
-      opacity: 0,
-      scale: 0.9,
-      y: 100,
-      // Slide down much further for reverse effect
-      transition: {
-        duration: 0.3,
-        ease: "easeIn"
-      }
-    }
+  const gapClasses = {
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    6: "gap-6",
+    8: "gap-8"
   };
-  if (!isOpen) return null;
-  if (variant === "plain") {
-    return createPortal(
-      /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
-        motion.div,
+  return /* @__PURE__ */ jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`, children });
+}
+var variantClasses3 = {
+  default: "text-foreground hover:text-primary",
+  primary: "text-primary hover:text-primary/80",
+  muted: "text-muted-foreground hover:text-foreground"
+};
+var Link = forwardRef(
+  ({
+    href,
+    variant = "default",
+    underline = false,
+    external = false,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const classes = [
+      "transition-colors",
+      variantClasses3[variant],
+      underline ? "underline underline-offset-4" : "hover:underline hover:underline-offset-4",
+      className
+    ].filter(Boolean).join(" ");
+    if (external || href.startsWith("http")) {
+      return /* @__PURE__ */ jsx(
+        "a",
         {
-          className: `modal-backdrop fixed inset-0 w-screen h-screen flex items-center ${customStyles.backdrop?.includes("justify-") ? customStyles.backdrop : customStyles.backdrop ? `${customStyles.backdrop} justify-center` : "justify-center bg-black/10"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
-          variants: backdropVariants,
-          initial: "hidden",
-          animate: isOpen ? "visible" : "hidden",
-          exit: "hidden",
-          onClick: blocking ? void 0 : onClose,
-          children: /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              ref: modalContentRef,
-              role: "dialog",
-              "aria-modal": "true",
-              "aria-labelledby": title ? "modal-title-plain" : void 0,
-              "aria-describedby": ariaDescribedBy || "modal-content-plain",
-              tabIndex: -1,
-              className: `w-full flex flex-col overflow-hidden relative z-[1000000] ${customStyles.container || "bg-card shadow-xl"} ${fullScreen ? "h-full rounded-none" : `rounded-lg ${className} ${sizeClasses3[size]} max-h-[90vh]`}`,
-              variants: modalVariants,
-              initial: "hidden",
-              animate: isOpen ? "visible" : "exit",
-              exit: "exit",
-              onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  id: "modal-content-plain",
-                  className: `flex-1 ${customStyles.content || ""}`,
-                  children
-                }
-              )
-            },
-            "modal-content"
-          )
-        },
-        "modal-backdrop"
-      ) }),
-      modalRoot
-    );
+          ref,
+          href,
+          className: classes,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(NextLink, { ref, href, className: classes, ...props, children });
   }
-  return createPortal(
-    /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        className: `modal-backdrop fixed inset-0 w-screen h-screen bg-black/10 flex items-center ${customStyles.backdrop || "justify-center"} z-[999999] m-0 ${fullScreen ? "p-0" : "p-4"}`,
-        variants: backdropVariants,
-        initial: "hidden",
-        animate: isOpen ? "visible" : "hidden",
-        exit: "hidden",
-        onClick: blocking ? void 0 : onClose,
-        children: /* @__PURE__ */ jsxs(
-          motion.div,
-          {
-            ref: modalContentRef,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": title ? "modal-title" : void 0,
-            "aria-describedby": ariaDescribedBy || "modal-content",
-            tabIndex: -1,
-            className: `bg-card border border-border shadow-xl w-full flex flex-col overflow-hidden relative z-[1000000] ${fullScreen ? "h-full rounded-none" : `rounded-lg ${customStyles.container || className || sizeClasses3[size]} max-h-[90vh]`}`,
-            variants: modalVariants,
-            initial: "hidden",
-            animate: isOpen ? "visible" : "exit",
-            exit: "exit",
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              header ? /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: header }) : title ? /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: `px-6 py-4 border-b border-border flex justify-between items-center flex-shrink-0 ${customStyles.header || ""}`,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "h2",
-                      {
-                        id: "modal-title",
-                        className: "text-xl font-semibold text-foreground",
-                        children: title
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        onClick: onClose,
-                        className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-full transition-colors",
-                        title: "Close",
-                        "aria-label": "Close modal",
-                        disabled: blocking,
-                        children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-5 h-5", "aria-hidden": "true" })
-                      }
-                    )
-                  ]
-                }
-              ) : null,
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  id: "modal-content",
-                  className: `bg-background text-foreground flex-1 ${scrollable ? "overflow-y-auto" : ""} ${fullScreen || noPadding ? "p-0" : "px-6 py-4"}`,
-                  children
-                }
-              ),
-              footer && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `flex-shrink-0 px-6 py-4 border-t border-border ${footerBg === "white" ? "bg-card" : "bg-muted"} ${customStyles.footer || ""}`,
-                  children: footer
-                }
-              )
-            ]
-          },
-          "modal-content"
-        )
-      },
-      "modal-backdrop"
-    ) }),
-    modalRoot
-  );
-}
+);
+Link.displayName = "Link";
+var Link_default = Link;
 var LoadingSpinner = ({
   message = "Initializing...",
   className,
@@ -1224,53 +1972,90 @@ function PageHeader({
     rightContent && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2 lg:space-x-3 flex-shrink-0", children: rightContent })
   ] }) });
 }
-function FormSection({
-  title,
+function Switch({
+  checked,
+  onChange,
+  disabled = false,
+  label,
   description,
-  children,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium ", children: title }),
-      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-4", children })
-  ] });
-}
-function Grid({
-  children,
-  cols = 1,
-  gap = 4,
-  className = ""
+  className = "",
+  size = "md"
 }) {
-  const colClasses = {
-    1: "grid-cols-1",
-    2: "grid-cols-1 md:grid-cols-2",
-    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
-    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
-    5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5",
-    6: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
-    12: "grid-cols-12"
+  const toggle = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
   };
-  const gapClasses = {
-    1: "gap-1",
-    2: "gap-2",
-    3: "gap-3",
-    4: "gap-4",
-    6: "gap-6",
-    8: "gap-8"
+  const sizes = {
+    sm: { track: "w-8 h-4", thumb: "w-3 h-3", translate: "translate-x-4" },
+    md: { track: "w-11 h-6", thumb: "w-5 h-5", translate: "translate-x-5" },
+    lg: { track: "w-14 h-8", thumb: "w-7 h-7", translate: "translate-x-6" }
   };
-  return /* @__PURE__ */ jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`, children });
+  const currentSize = sizes[size];
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-start ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        disabled,
+        onClick: toggle,
+        className: `
+          relative inline-flex flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
+          transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
+          ${checked ? "bg-primary" : "bg-muted"}
+          ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+          ${currentSize.track}
+        `,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: `
+            pointer-events-none inline-block transform rounded-full bg-white shadow ring-0 
+            transition duration-200 ease-in-out
+            ${checked ? currentSize.translate : "translate-x-0"}
+            ${currentSize.thumb}
+          `
+          }
+        )
+      }
+    ),
+    (label || description) && /* @__PURE__ */ jsxs("div", { className: "ml-3 text-sm leading-6", children: [
+      label && /* @__PURE__ */ jsx("label", { className: "font-medium text-foreground cursor-pointer", onClick: toggle, children: label }),
+      description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: description })
+    ] })
+  ] });
 }
-function GridItem({
+var variantClasses4 = {
+  default: "text-foreground",
+  muted: "text-muted-foreground",
+  bold: "font-semibold"
+};
+var sizeClasses4 = {
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl"
+};
+function Typography({
+  as: Element = "p",
+  variant = "default",
+  size = "base",
   children,
-  span = 1,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx("div", { className: `col-span-${span} ${className}`, children });
+  const classes = `${variantClasses4[variant]} ${sizeClasses4[size]} ${className}`;
+  return /* @__PURE__ */ jsx(Element, { className: classes, children });
 }
 
-export { AccordionCard, Badge, Button_default as Button, Card, ClickableCard, ErrorBadge, FormInput, FormSection, GrayBadge, Grid, GridItem, HeaderCard, InfoBadge, Link_default as Link, LoadingSpinner_default as LoadingSpinner, Modal, PageHeader, PrimaryBadge, SimpleCard, StatusBadge, StatusCard, SuccessBadge, Switch, WarningBadge };
+// src/index.ts
+var VERSION = "0.1.3";
+
+export { Badge, Button_default as Button, Card, ConfirmDialog_default as ConfirmDialog, Container, EmptyState_default as EmptyState, FormInput, FormSection, Grid, Link_default as Link, LoadingSpinner_default as LoadingSpinner, Modal, PageHeader, Skeleton, SkeletonItem, SmartDropdown, SmartSelect, Switch, Typography, VERSION, useConfirmDialog };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map