@gamecp/ui 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1276 @@
+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 { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+
+// src/Button.tsx
+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",
+  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"
+};
+var sizeClasses = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base"
+};
+var Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    isLoading = false,
+    leftIcon,
+    rightIcon,
+    fullWidth = false,
+    className = "",
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const baseClasses = "inline-flex items-center justify-center gap-2 font-medium rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+    const classes = [
+      baseClasses,
+      variantClasses[variant],
+      variant !== "link" ? sizeClasses[size] : "",
+      fullWidth ? "w-full" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        className: classes,
+        disabled: disabled || isLoading,
+        ...props,
+        children: [
+          isLoading && /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "animate-spin h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          !isLoading && leftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: leftIcon }),
+          children,
+          !isLoading && rightIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+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",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8",
+  "2": "w-2 h-2",
+  "3": "w-3 h-3",
+  "4": "w-4 h-4",
+  "5": "w-5 h-5",
+  "6": "w-6 h-6"
+};
+var colorClasses = {
+  default: "text-muted-foreground hover:text-muted-foreground",
+  gray: "text-muted-foreground hover:text-muted-foreground",
+  primary: "text-ring hover:text-primary-foreground",
+  secondary: "text-secondary-foreground hover:text-foreground"
+};
+function DropDownArrow({
+  isOpen,
+  disabled = false,
+  size = "sm",
+  color = "default",
+  className = "",
+  "aria-hidden": ariaHidden
+}) {
+  const baseClasses = `${sizeClasses2[size]} flex-shrink-0 transition-transform`;
+  const rotationClasses = isOpen ? "rotate-180" : "";
+  const colorClassesApplied = disabled ? "text-muted-foreground" : colorClasses[color];
+  const combinedClasses = `${baseClasses} ${rotationClasses} ${colorClassesApplied} ${className}`.trim();
+  return /* @__PURE__ */ jsx(RiArrowDownSLine, { className: combinedClasses, "aria-hidden": ariaHidden });
+}
+var paddingClasses = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8"
+};
+var borderAccentClasses = {
+  none: "",
+  green: "border-l-4 border-l-green-500",
+  blue: "border-l-4 border-l-ring",
+  red: "border-l-4 border-l-red-500",
+  yellow: "border-l-4 border-l-yellow-500",
+  purple: "border-l-4 border-l-purple-500",
+  orange: "border-l-4 border-l-orange-500",
+  gray: "border-l-4 border-l-gray-500"
+};
+var variantClasses2 = {
+  default: "card",
+  elevated: "card shadow-lg border border-border",
+  outlined: "card rounded-lg border-2 border-border",
+  filled: "bg-muted rounded-lg border border-border"
+};
+var iconColorClasses = {
+  green: "text-success",
+  blue: "text-primary",
+  red: "text-destructive",
+  yellow: "text-yellow-600",
+  purple: "text-purple-600",
+  orange: "text-orange-600",
+  gray: "text-muted-foreground",
+  indigo: "text-indigo-600",
+  pink: "text-pink-600"
+};
+var iconSizeClasses = {
+  sm: "w-4 h-4",
+  md: "w-6 h-6",
+  lg: "w-8 h-8"
+};
+var statusClasses = {
+  success: "bg-success-light border-success-light",
+  warning: "bg-yellow-50 border-yellow-200",
+  error: "bg-destructive border-destructive",
+  info: "bg-primary border-primary",
+  neutral: "bg-muted border-border"
+};
+function Card({
+  children,
+  className = "",
+  onClick,
+  disabled = false,
+  padding = "md",
+  borderAccent = "none",
+  variant = "default",
+  overflow = "visible",
+  minHeight,
+  maxHeight,
+  hover = false,
+  clickable = false,
+  title,
+  subtitle,
+  description,
+  icon: Icon,
+  iconColor = "blue",
+  iconSize = "md",
+  actionButton,
+  headerClassName = "",
+  accordion = false,
+  defaultExpanded = true,
+  onToggle,
+  contentClassName = "",
+  status,
+  statusIcon,
+  statusText
+}) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const baseClasses = [
+    variantClasses2[variant],
+    paddingClasses[padding],
+    borderAccentClasses[borderAccent],
+    overflow !== "visible" ? `overflow-${overflow}` : "",
+    hover ? "hover:shadow-md transition-shadow" : "",
+    clickable || onClick ? "cursor-pointer" : "",
+    disabled ? "opacity-50 cursor-not-allowed" : "",
+    status ? statusClasses[status] : ""
+  ].filter(Boolean).join(" ");
+  const style = {};
+  if (minHeight) style.minHeight = minHeight;
+  if (maxHeight) style.maxHeight = maxHeight;
+  const handleClick = () => {
+    if (disabled) return;
+    onClick?.();
+  };
+  const handleToggle = () => {
+    if (accordion) {
+      const newExpanded = !isExpanded;
+      setIsExpanded(newExpanded);
+      onToggle?.(newExpanded);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${baseClasses} ${className}`,
+      style,
+      onClick: clickable || onClick ? handleClick : void 0,
+      children: [
+        (title || subtitle || description || Icon || actionButton || status) && /* @__PURE__ */ jsx("div", { className: `${headerClassName}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [
+            Icon && /* @__PURE__ */ jsx("div", { className: `${iconColorClasses[iconColor]} flex-shrink-0`, children: /* @__PURE__ */ jsx(Icon, { className: iconSizeClasses[iconSize] }) }),
+            statusIcon && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: statusIcon }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground truncate", children: title }),
+              subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground truncate", children: subtitle }),
+              description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: description }),
+              statusText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: statusText })
+            ] })
+          ] }),
+          actionButton && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 ml-4", children: actionButton }),
+          accordion && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleToggle();
+              },
+              "aria-expanded": isExpanded,
+              "aria-label": `${isExpanded ? "Hide" : "Show"} ${title || "content"}`,
+              className: "flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors ml-4",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "mr-1", children: isExpanded ? "Hide" : "Show" }),
+                /* @__PURE__ */ jsx(
+                  DropDownArrow,
+                  {
+                    isOpen: isExpanded,
+                    size: "sm",
+                    color: "gray",
+                    "aria-hidden": true
+                  }
+                )
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${contentClassName} ${accordion && !isExpanded ? "hidden" : ""}`,
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function SimpleCard({
+  children,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Card, { className, ...props, children });
+}
+function HeaderCard({
+  title,
+  subtitle,
+  description,
+  icon,
+  iconColor,
+  iconSize,
+  actionButton,
+  children,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      title,
+      subtitle,
+      description,
+      icon,
+      iconColor,
+      iconSize,
+      actionButton,
+      className,
+      ...props,
+      children
+    }
+  );
+}
+function StatusCard({
+  status,
+  statusIcon,
+  statusText,
+  children,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      status,
+      statusIcon,
+      statusText,
+      className,
+      ...props,
+      children
+    }
+  );
+}
+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
+        }
+      );
+    }
+    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,
+  autoComplete,
+  description,
+  footerDescription,
+  autoFocus = false,
+  onKeyDown,
+  onBlur,
+  icon,
+  rows = 3,
+  showHidePassword = false,
+  onGeneratePassword,
+  copyable = false,
+  readOnly = false,
+  clearable = true
+}) {
+  const [showPassword, setShowPassword] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(String(value));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const shouldShowIcons = (inputType) => {
+    return inputType !== "checkbox" && inputType !== "textarea";
+  };
+  const getIconConfig = (iconProp) => {
+    if (!iconProp) return { left: null, right: null };
+    if (React4.isValidElement(iconProp)) {
+      return { left: iconProp, right: null };
+    }
+    if (typeof iconProp === "object" && iconProp !== null && ("left" in iconProp || "right" in iconProp)) {
+      return { left: iconProp.left || null, right: iconProp.right || null };
+    }
+    return {
+      left: React4.isValidElement(iconProp) ? iconProp : null,
+      right: null
+    };
+  };
+  const renderIcon = (iconNode, position) => {
+    if (!iconNode) return null;
+    const rightPositionClass = position === "right" && type === "number" ? "right-4 pr-3" : position === "right" ? "right-0 pr-3" : "left-0 pl-3";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute inset-y-0 ${rightPositionClass} flex items-center pointer-events-none`,
+        children: /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: iconNode })
+      }
+    );
+  };
+  const getInputPaddingClasses = (inputType, iconConfig) => {
+    if (!shouldShowIcons(inputType)) return "";
+    const paddingClasses2 = [];
+    if (iconConfig.left) paddingClasses2.push("pl-10");
+    if (iconConfig.right) {
+      paddingClasses2.push(inputType === "number" ? "pr-12" : "pr-10");
+    }
+    return paddingClasses2.join(" ");
+  };
+  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: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: name,
+        name,
+        type: "checkbox",
+        checked: Boolean(value),
+        onChange: (e) => {
+          const newValue = e.target.checked;
+          const syntheticEvent = {
+            target: {
+              name: e.target.name,
+              value: newValue,
+              checked: newValue
+            },
+            currentTarget: {
+              name: e.target.name,
+              value: newValue,
+              checked: newValue
+            }
+          };
+          onChange(syntheticEvent);
+        },
+        required,
+        disabled,
+        onKeyDown,
+        className: "sr-only",
+        "aria-label": label,
+        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+        "aria-invalid": error ? "true" : "false"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          if (!disabled) {
+            const checkbox = document.getElementById(
+              name
+            );
+            if (checkbox) {
+              checkbox.click();
+            }
+          }
+        },
+        disabled,
+        className: `
+              relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
+              ${Boolean(value) ? "bg-primary" : "bg-muted"}
+              ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+              ${error ? "ring-2 ring-destructive" : ""}
+            `,
+        "aria-label": `${label}${required ? " (required)" : ""}`,
+        "aria-describedby": name,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `
+                inline-block h-4 w-4 transform rounded-full bg-background border border-border transition duration-200 ease-in-out
+                ${Boolean(value) ? "translate-x-6" : "translate-x-1"}
+              `
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: name,
+          className: "text-sm font-medium text-foreground cursor-pointer",
+          onClick: () => {
+            if (!disabled) {
+              const checkbox = document.getElementById(
+                name
+              );
+              if (checkbox) {
+                checkbox.click();
+              }
+            }
+          },
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", "aria-label": "required", children: "*" })
+          ]
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        "span",
+        {
+          id: `${name}-description`,
+          className: "text-xs text-muted-foreground",
+          children: description
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { id: `${name}-error`, className: "form-error", role: "alert", children: typeof error === "string" ? /* @__PURE__ */ jsx("p", { children: error }) : error })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor: name, className: "form-label", children: [
+      label,
+      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(
+      "textarea",
+      {
+        id: name,
+        name,
+        value,
+        onChange,
+        placeholder,
+        required,
+        disabled,
+        autoFocus,
+        onKeyDown,
+        onBlur,
+        rows,
+        maxLength,
+        "aria-invalid": error ? "true" : "false",
+        "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+        className: `form-input ${error ? "form-input-error" : ""} ${inputClassName}`
+      }
+    ) : type === "color" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative w-10 h-10 border border-input rounded-md overflow-hidden bg-card", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: name,
+            name,
+            type: "color",
+            value,
+            onChange,
+            required,
+            disabled,
+            className: "absolute inset-0 w-full h-full cursor-pointer opacity-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-full h-full rounded-md",
+            style: { backgroundColor: value }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${name}-text`,
+            name: `${name}-text`,
+            type: "text",
+            value,
+            onChange,
+            placeholder,
+            required,
+            disabled,
+            maxLength,
+            autoComplete,
+            autoFocus,
+            onKeyDown,
+            onBlur,
+            className: `form-input max-w-24 ${error ? "form-input-error" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`,
+            "aria-label": `${label} text input`
+          }
+        ),
+        shouldShowIcons(type) && (() => {
+          const iconConfig = getIconConfig(icon);
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderIcon(iconConfig.left, "left"),
+            renderIcon(iconConfig.right, "right")
+          ] });
+        })()
+      ] })
+    ] }) : showHidePassword && type === "password" ? /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: name,
+          name,
+          type: showPassword ? "text" : "password",
+          value,
+          onChange,
+          placeholder,
+          required,
+          disabled: disabled || readOnly,
+          readOnly,
+          maxLength,
+          autoComplete,
+          autoFocus,
+          onKeyDown,
+          onBlur,
+          "aria-invalid": error ? "true" : "false",
+          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-20" : "pr-10"} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
+        }
+      ),
+      shouldShowIcons(type) && (() => {
+        const iconConfig = getIconConfig(icon);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderIcon(iconConfig.left, "left"),
+          renderIcon(iconConfig.right, "right")
+        ] });
+      })(),
+      copyable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: "absolute inset-y-0 right-8 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
+          "aria-label": `Copy ${label}`,
+          title: copied ? "Copied!" : `Copy ${label}`,
+          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword(!showPassword),
+          className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10",
+          "aria-label": showPassword ? "Hide password" : "Show password",
+          title: showPassword ? "Hide password" : "Show password",
+          children: showPassword ? /* @__PURE__ */ jsx(RiEyeOffLine, { className: "w-4 h-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiEyeLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      ),
+      onGeneratePassword && !readOnly && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onGeneratePassword,
+          className: `absolute inset-y-0 ${copyable ? "right-16" : "right-8"} flex items-center pr-3 text-muted-foreground hover:text-foreground transition-colors duration-200 z-10`,
+          "aria-label": "Generate new password",
+          title: "Generate new password",
+          children: /* @__PURE__ */ jsx(RiRefreshLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: name,
+          name,
+          type,
+          value,
+          onChange,
+          placeholder,
+          required,
+          disabled: disabled || readOnly,
+          readOnly,
+          min,
+          max,
+          step,
+          maxLength,
+          autoComplete,
+          autoFocus,
+          onKeyDown,
+          onBlur,
+          "aria-invalid": error ? "true" : "false",
+          "aria-describedby": error ? `${name}-error` : description ? `${name}-description` : void 0,
+          className: `form-input ${error ? "form-input-error" : ""} ${readOnly ? "bg-muted cursor-default" : ""} ${copyable ? "pr-10" : ""} ${getInputPaddingClasses(type, getIconConfig(icon))} ${inputClassName}`
+        }
+      ),
+      shouldShowIcons(type) && (() => {
+        const iconConfig = getIconConfig(icon);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderIcon(iconConfig.left, "left"),
+          renderIcon(iconConfig.right, "right")
+        ] });
+      })(),
+      copyable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCopy,
+          className: `absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground hover:text-foreground transition-all duration-200 z-10`,
+          "aria-label": `Copy ${label}`,
+          title: copied ? "Copied!" : `Copy ${label}`,
+          children: copied ? /* @__PURE__ */ jsx(RiCheckLine, { className: "w-4 h-4 text-green-500", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      ),
+      clearable && !copyable && value !== "" && value !== null && value !== void 0 && !disabled && !readOnly && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const syntheticEvent = {
+              target: { name, value: "" }
+            };
+            onChange(syntheticEvent);
+          },
+          className: `absolute inset-y-0 ${type === "number" ? "right-4" : "right-0"} flex items-center pr-3 text-muted-foreground hover:text-muted-foreground transition-all duration-200 z-10 opacity-0 group-hover:opacity-100`,
+          "aria-label": `Clear ${label}`,
+          title: `Clear ${label}`,
+          children: /* @__PURE__ */ jsx(RiCloseLine, { className: "w-4 h-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    footerDescription && /* @__PURE__ */ jsx("p", { className: "text-xs mt-1", children: footerDescription }),
+    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,
+  description,
+  className = "",
+  size = "md"
+}) {
+  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 })
+    ] })
+  ] });
+}
+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,
+  title,
+  header,
+  blocking = false,
+  size = "md",
+  className = "",
+  footer,
+  fullScreen = false,
+  noPadding = false,
+  footerBg = "gray",
+  variant = "default",
+  scrollable = true,
+  "aria-describedby": ariaDescribedBy,
+  customStyles = {}
+}) {
+  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 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
+  );
+}
+var LoadingSpinner = ({
+  message = "Initializing...",
+  className,
+  showMessage = false
+}) => {
+  const containerClasses = className !== void 0 ? className : "flex items-center justify-center h-screen min-h-screen";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": message,
+      children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-center space-x-2 mb-6",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0s]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.2s]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-8 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.4s]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-12 bg-gradient-to-t from-primary-600 to-primary-400 rounded-full shadow-sm [animation:wave_1.2s_ease-in-out_infinite] [animation-delay:0.6s]" })
+            ]
+          }
+        ),
+        showMessage && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-sm text-secondary-foreground animate-pulse",
+            "aria-live": "polite",
+            children: message
+          }
+        ) })
+      ] })
+    }
+  );
+};
+var LoadingSpinner_default = LoadingSpinner;
+function PageHeader({
+  icon: Icon,
+  title,
+  subtitle,
+  rightContent,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `mb-6 lg:mb-8 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "header-layout", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { className: "w-6 h-6 lg:w-8 lg:h-8 flex-shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-xl lg:text-3xl font-bold text-foreground  truncate", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm lg:text-base text-muted-foreground", children: subtitle })
+      ] })
+    ] }),
+    rightContent && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-2 lg:space-x-3 flex-shrink-0", children: rightContent })
+  ] }) });
+}
+function FormSection({
+  title,
+  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 = ""
+}) {
+  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 gapClasses = {
+    1: "gap-1",
+    2: "gap-2",
+    3: "gap-3",
+    4: "gap-4",
+    6: "gap-6",
+    8: "gap-8"
+  };
+  return /* @__PURE__ */ jsx("div", { className: `grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`, children });
+}
+function GridItem({
+  children,
+  span = 1,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx("div", { className: `col-span-${span} ${className}`, 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 };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map