elahi-ui 1.0.0

package/dist/index.js

@@ -0,0 +1,1714 @@
+import { c as clsx, a as cn, g as generateId } from "./index-Bxv2g5GP.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { f as useRipple, u as useClickOutside, d as useLockBodyScroll, c as useFocusTrap, K as KEYBOARD_KEYS, A as ANIMATION_DURATION, h as useTableSort, g as useTablePagination } from "./useTablePagination-CKuaTNxN.js";
+import { a, b, e } from "./useTablePagination-CKuaTNxN.js";
+import React, { forwardRef, useState, useMemo, useRef, useEffect, useCallback, useContext, createContext } from "react";
+const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config) => (props) => {
+  var _config_compoundVariants;
+  if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key, value] = param;
+    if (value === void 0) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+const SpinnerIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    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"
+        }
+      )
+    ]
+  }
+);
+const CloseIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+);
+const ChevronDownIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+  }
+);
+const CheckIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
+const AlertCircleIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+      /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+    ]
+  }
+);
+const AlertTriangleIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ]
+  }
+);
+const InfoIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    className,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+    ]
+  }
+);
+const SortAscIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" })
+  }
+);
+const SortDescIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  }
+);
+const ChevronRightIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+  }
+);
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 relative overflow-hidden",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        danger: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        success: "bg-success text-success-foreground hover:bg-success/90",
+        warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        xs: "h-7 px-2 text-xs",
+        sm: "h-9 px-3",
+        md: "h-10 px-4 py-2",
+        lg: "h-11 px-8",
+        xl: "h-12 px-10 text-base",
+        icon: "h-10 w-10"
+      },
+      fullWidth: {
+        true: "w-full"
+      },
+      rounded: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        full: "rounded-full"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      rounded: "md"
+    }
+  }
+);
+const Button = forwardRef(
+  ({
+    as,
+    variant,
+    size,
+    fullWidth,
+    rounded,
+    loading = false,
+    leftIcon,
+    rightIcon,
+    enableRipple = true,
+    className,
+    children,
+    disabled,
+    onClick,
+    ...props
+  }, ref) => {
+    const Component = as || "button";
+    const { ripples, createRipple } = useRipple();
+    const handleClick = (e2) => {
+      if (enableRipple && !disabled && !loading) {
+        createRipple(e2);
+      }
+      onClick == null ? void 0 : onClick(e2);
+    };
+    return /* @__PURE__ */ jsxs(
+      Component,
+      {
+        ref,
+        className: cn(
+          buttonVariants({ variant, size, fullWidth, rounded }),
+          className
+        ),
+        disabled: disabled || loading,
+        onClick: handleClick,
+        ...props,
+        children: [
+          enableRipple && ripples.map((ripple) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute animate-ripple rounded-full bg-white/30",
+              style: {
+                left: ripple.x,
+                top: ripple.y,
+                width: 10,
+                height: 10,
+                transform: "translate(-50%, -50%)"
+              }
+            },
+            ripple.id
+          )),
+          loading && /* @__PURE__ */ jsx(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
+          !loading && leftIcon && /* @__PURE__ */ jsx("span", { children: leftIcon }),
+          children,
+          !loading && rightIcon && /* @__PURE__ */ jsx("span", { children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+const inputVariants = cva(
+  "flex w-full rounded-md border bg-background text-sm transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        outlined: "border-input focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        filled: "border-transparent bg-muted focus-visible:bg-background",
+        underlined: "rounded-none border-x-0 border-t-0 border-b-2 px-0 focus-visible:border-primary"
+      },
+      inputSize: {
+        sm: "h-8 px-3 py-1 text-xs",
+        md: "h-10 px-3 py-2",
+        lg: "h-12 px-4 py-3 text-base"
+      },
+      state: {
+        default: "",
+        error: "border-destructive focus-visible:ring-destructive",
+        success: "border-success focus-visible:ring-success"
+      }
+    },
+    defaultVariants: {
+      variant: "outlined",
+      inputSize: "md",
+      state: "default"
+    }
+  }
+);
+const Input = forwardRef(
+  ({
+    className,
+    wrapperClassName,
+    variant,
+    inputSize,
+    state,
+    label,
+    helperText,
+    error,
+    prefix,
+    suffix,
+    floatingLabel = false,
+    showCount = false,
+    maxLength,
+    value,
+    onChange,
+    id,
+    ...props
+  }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [charCount, setCharCount] = useState(
+      value ? String(value).length : 0
+    );
+    const inputId = useMemo(() => id || generateId("input"), [id]);
+    const hasValue = value !== void 0 && value !== "";
+    const showFloatingLabel = floatingLabel && (isFocused || hasValue);
+    const handleChange = (e2) => {
+      setCharCount(e2.target.value.length);
+      onChange == null ? void 0 : onChange(e2);
+    };
+    const finalState = error ? "error" : state;
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", wrapperClassName), children: [
+      label && !floatingLabel && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "mb-2 block text-sm font-medium text-foreground",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        floatingLabel && label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(
+              "pointer-events-none absolute left-3 transition-all duration-200",
+              showFloatingLabel ? "top-0 -translate-y-1/2 bg-background px-1 text-xs font-medium text-primary" : "top-1/2 -translate-y-1/2 text-sm text-muted-foreground"
+            ),
+            children: label
+          }
+        ),
+        prefix && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            value,
+            onChange: handleChange,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            maxLength,
+            className: cn(
+              inputVariants({ variant, inputSize, state: finalState }),
+              prefix && "pl-10",
+              suffix && "pr-10",
+              floatingLabel && "pt-3",
+              className
+            ),
+            ...props
+          }
+        ),
+        suffix && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: suffix })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", role: "alert", children: error }),
+          !error && helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helperText })
+        ] }),
+        showCount && maxLength && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          charCount,
+          "/",
+          maxLength
+        ] })
+      ] })
+    ] });
+  }
+);
+Input.displayName = "Input";
+const Textarea = forwardRef(
+  ({
+    className,
+    wrapperClassName,
+    label,
+    helperText,
+    error,
+    autoResize = false,
+    showCount = false,
+    maxLength,
+    value,
+    onChange,
+    id,
+    ...props
+  }, ref) => {
+    const textareaRef = useRef(null);
+    const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
+    const charCount = value ? String(value).length : 0;
+    useEffect(() => {
+      if (autoResize && textareaRef.current) {
+        textareaRef.current.style.height = "auto";
+        textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+      }
+    }, [value, autoResize]);
+    const handleRef = (node) => {
+      textareaRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", wrapperClassName), children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: textareaId,
+          className: "mb-2 block text-sm font-medium text-foreground",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: handleRef,
+          id: textareaId,
+          value,
+          onChange,
+          maxLength,
+          className: cn(
+            inputVariants({
+              variant: "outlined",
+              inputSize: "md",
+              state: error ? "error" : "default"
+            }),
+            "min-h-[80px] resize-none",
+            !autoResize && "resize-y",
+            className
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", role: "alert", children: error }),
+          !error && helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helperText })
+        ] }),
+        showCount && maxLength && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          charCount,
+          "/",
+          maxLength
+        ] })
+      ] })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+const Checkbox = forwardRef(
+  ({ className, label, helperText, error, id, ...props }, ref) => {
+    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            id: checkboxId,
+            className: cn(
+              // Base styles
+              "peer h-5 w-5 shrink-0 cursor-pointer appearance-none rounded border-2 border-primary/60",
+              "transition-all duration-200",
+              // Focus styles
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2",
+              // Hover styles
+              "hover:border-primary",
+              // Checked state
+              "checked:border-primary checked:bg-primary",
+              // Checkmark via background SVG
+              'checked:bg-[url("data:image/svg+xml,%3csvg%20viewBox=%270%200%2016%2016%27%20fill=%27white%27%20xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath%20d=%27M12.207%204.793a1%201%200%20010%201.414l-5%205a1%201%200%2001-1.414%200l-2-2a1%201%200%20011.414-1.414L6.5%209.086l4.293-4.293a1%201%200%20011.414%200z%27/%3e%3c/svg%3e")]',
+              "checked:bg-center checked:bg-no-repeat checked:bg-[length:80%]",
+              // Disabled state
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              // Error state
+              error && "border-destructive checked:border-destructive checked:bg-destructive",
+              className
+            ),
+            ...props
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: checkboxId,
+            className: "cursor-pointer text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            children: label
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", role: "alert", children: error }),
+      !error && helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helperText })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+const Switch = forwardRef(
+  ({
+    className,
+    label,
+    helperText,
+    labelPosition = "right",
+    checked: controlledChecked,
+    onCheckedChange,
+    onChange,
+    id,
+    ...props
+  }, ref) => {
+    const [internalChecked, setInternalChecked] = useState(false);
+    const isControlled = controlledChecked !== void 0;
+    const checked = isControlled ? controlledChecked : internalChecked;
+    const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
+    const handleChange = (e2) => {
+      const newChecked = e2.target.checked;
+      if (!isControlled) {
+        setInternalChecked(newChecked);
+      }
+      onCheckedChange == null ? void 0 : onCheckedChange(newChecked);
+      onChange == null ? void 0 : onChange(e2);
+    };
+    const switchElement = /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          id: switchId,
+          checked,
+          onChange: handleChange,
+          role: "switch",
+          "aria-checked": checked,
+          className: cn("peer sr-only", className),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: switchId,
+          className: cn(
+            // Switch track
+            "flex h-6 w-11 cursor-pointer items-center rounded-full p-0.5 transition-colors duration-200",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/20 focus-visible:ring-offset-2",
+            // Unchecked state
+            "bg-input",
+            // Checked state (peer-checked = when checkbox is checked)
+            "peer-checked:bg-primary",
+            // Hover
+            "hover:bg-input/80 peer-checked:hover:bg-primary/90",
+            // Disabled state
+            "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg transition-transform duration-200",
+                // Unchecked position
+                "translate-x-0",
+                // Checked position
+                checked && "translate-x-5"
+              )
+            }
+          )
+        }
+      )
+    ] });
+    if (!label) {
+      return switchElement;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-3",
+            labelPosition === "left" && "flex-row-reverse justify-end"
+          ),
+          children: [
+            switchElement,
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: switchId,
+                className: "cursor-pointer text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+                children: label
+              }
+            )
+          ]
+        }
+      ),
+      helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: helperText })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+const Select = forwardRef(
+  ({
+    options,
+    value,
+    onChange,
+    placeholder = "Select...",
+    label,
+    helperText,
+    error,
+    disabled = false,
+    searchable = false,
+    className,
+    ...props
+  }, ref) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const containerRef = useRef(null);
+    const searchInputRef = useRef(null);
+    useClickOutside(containerRef, () => setIsOpen(false));
+    const selectedOption = options.find((opt) => opt.value === value);
+    const filteredOptions = searchable ? options.filter(
+      (opt) => opt.label.toLowerCase().includes(searchQuery.toLowerCase())
+    ) : options;
+    const handleSelect = (optionValue) => {
+      onChange == null ? void 0 : onChange(optionValue);
+      setIsOpen(false);
+      setSearchQuery("");
+    };
+    const handleKeyDown = (e2) => {
+      if (e2.key === "Escape") {
+        setIsOpen(false);
+      } else if (e2.key === "ArrowDown" && !isOpen) {
+        setIsOpen(true);
+      }
+    };
+    useEffect(() => {
+      if (isOpen && searchable && searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    }, [isOpen, searchable]);
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), ...props, children: [
+      label && /* @__PURE__ */ jsx("label", { className: "mb-2 block text-sm font-medium text-foreground", children: label }),
+      /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            onKeyDown: handleKeyDown,
+            disabled,
+            className: cn(
+              "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm",
+              "ring-offset-background transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              error && "border-destructive",
+              isOpen && "ring-2 ring-ring ring-offset-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: selectedOption ? "text-foreground" : "text-muted-foreground", children: (selectedOption == null ? void 0 : selectedOption.label) || placeholder }),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: cn(
+                    "h-4 w-4 transition-transform",
+                    isOpen && "rotate-180"
+                  ),
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-md border border-input bg-popover shadow-lg animate-scale-in", children: [
+          searchable && /* @__PURE__ */ jsx("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: searchInputRef,
+              type: "text",
+              value: searchQuery,
+              onChange: (e2) => setSearchQuery(e2.target.value),
+              placeholder: "Search...",
+              className: "w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-60 overflow-y-auto p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No options found" }) : filteredOptions.map((option) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => !option.disabled && handleSelect(option.value),
+              disabled: option.disabled,
+              className: cn(
+                "flex w-full items-center rounded-sm px-3 py-2 text-left text-sm transition-colors",
+                "hover:bg-accent hover:text-accent-foreground",
+                "focus-visible:bg-accent focus-visible:outline-none",
+                "disabled:pointer-events-none disabled:opacity-50",
+                option.value === value && "bg-accent font-medium"
+              ),
+              children: [
+                option.label,
+                option.value === value && /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "ml-auto h-4 w-4",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+                  }
+                )
+              ]
+            },
+            option.value
+          )) })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", role: "alert", children: error }),
+      !error && helperText && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: helperText })
+    ] });
+  }
+);
+Select.displayName = "Select";
+const Modal = forwardRef(
+  ({
+    open,
+    onClose,
+    size = "md",
+    showClose = true,
+    preventClose = false,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const modalRef = useRef(null);
+    useLockBodyScroll(open);
+    useFocusTrap(modalRef, open, true);
+    useEffect(() => {
+      if (!open) return;
+      const handleEsc = (e2) => {
+        if (e2.key === KEYBOARD_KEYS.ESCAPE && !preventClose) {
+          onClose();
+        }
+      };
+      document.addEventListener("keydown", handleEsc);
+      return () => document.removeEventListener("keydown", handleEsc);
+    }, [open, onClose, preventClose]);
+    if (!open) return null;
+    const sizeClasses = {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      full: "max-w-full mx-4"
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center",
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 bg-black/50 animate-fade-in",
+              onClick: () => !preventClose && onClose()
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: (node) => {
+                if (typeof ref === "function") {
+                  ref(node);
+                } else if (ref) {
+                  ref.current = node;
+                }
+                if (modalRef.current !== node) {
+                  modalRef.current = node;
+                }
+              },
+              className: cn(
+                "relative z-10 w-full rounded-lg bg-popover border border-border p-6 shadow-xl animate-scale-in",
+                sizeClasses[size],
+                className
+              ),
+              onClick: (e2) => e2.stopPropagation(),
+              ...props,
+              children: [
+                showClose && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    "aria-label": "Close modal",
+                    children: [
+                      /* @__PURE__ */ jsx(CloseIcon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                    ]
+                  }
+                ),
+                children
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+const ModalHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4 space-y-2", className), ...props }));
+ModalHeader.displayName = "ModalHeader";
+const ModalTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h2",
+  {
+    ref,
+    className: cn("text-xl font-semibold text-foreground leading-none", className),
+    ...props
+  }
+));
+ModalTitle.displayName = "ModalTitle";
+const ModalDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground leading-relaxed", className),
+    ...props
+  }
+));
+ModalDescription.displayName = "ModalDescription";
+const ModalFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("mt-6 flex items-center justify-end gap-3", className),
+    ...props
+  }
+));
+ModalFooter.displayName = "ModalFooter";
+const ToastContext = createContext(void 0);
+const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
+  return context;
+};
+const ToastProvider = ({
+  children
+}) => {
+  const [toasts, setToasts] = useState([]);
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
+  }, []);
+  const addToast = useCallback((toast2) => {
+    const id = generateId("toast");
+    const newToast = { ...toast2, id };
+    setToasts((prev) => [...prev, newToast]);
+    const duration = toast2.duration ?? ANIMATION_DURATION.TOAST_DEFAULT;
+    if (duration > 0) {
+      setTimeout(() => {
+        removeToast(id);
+      }, duration);
+    }
+  }, [removeToast]);
+  useEffect(() => {
+    const handleToastEvent = (e2) => {
+      const customEvent = e2;
+      addToast(customEvent.detail);
+    };
+    window.addEventListener("toast", handleToastEvent);
+    return () => window.removeEventListener("toast", handleToastEvent);
+  }, [addToast]);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+    children,
+    /* @__PURE__ */ jsx(ToastContainer, {})
+  ] });
+};
+const ToastContainer = () => {
+  const { toasts, removeToast } = useToast();
+  return /* @__PURE__ */ jsx("div", { className: "fixed bottom-4 right-4 z-50 flex flex-col gap-2 w-full max-w-sm pointer-events-none", children: toasts.map((toast2) => /* @__PURE__ */ jsx(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) });
+};
+const ToastItem = ({ toast: toast2, onClose }) => {
+  const variantStyles = {
+    default: "bg-popover border-border backdrop-blur-sm shadow-xl",
+    success: "bg-popover border-green-300 dark:border-green-700 backdrop-blur-sm shadow-xl",
+    error: "bg-popover border-red-300 dark:border-red-700 backdrop-blur-sm shadow-xl",
+    warning: "bg-popover border-amber-300 dark:border-amber-700 backdrop-blur-sm shadow-xl",
+    info: "bg-popover border-blue-300 dark:border-blue-700 backdrop-blur-sm shadow-xl"
+  };
+  const iconContainerStyles = {
+    success: "bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400",
+    error: "bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400",
+    warning: "bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400",
+    info: "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400"
+  };
+  const variantIcons = {
+    success: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" }),
+    error: /* @__PURE__ */ jsx(AlertCircleIcon, { className: "h-4 w-4" }),
+    warning: /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "h-4 w-4" }),
+    info: /* @__PURE__ */ jsx(InfoIcon, { className: "h-4 w-4" })
+  };
+  const variant = toast2.variant || "default";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "pointer-events-auto flex items-start gap-3 rounded-xl border p-4 shadow-lg shadow-black/5 animate-slide-in-from-bottom",
+        variantStyles[variant]
+      ),
+      children: [
+        variant !== "default" && iconContainerStyles[variant] && /* @__PURE__ */ jsx("div", { className: cn(
+          "shrink-0 rounded-lg p-1.5",
+          iconContainerStyles[variant]
+        ), children: variantIcons[variant] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 pt-0.5", children: [
+          toast2.title && /* @__PURE__ */ jsx("div", { className: "font-medium text-sm text-foreground leading-none", children: toast2.title }),
+          toast2.description && /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-sm text-muted-foreground leading-snug", children: toast2.description })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: onClose,
+            className: "shrink-0 rounded-md p-1 text-foreground/40 transition-colors hover:text-foreground/60 hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1",
+            "aria-label": "Close notification",
+            children: [
+              /* @__PURE__ */ jsx(CloseIcon, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const toast = {
+  success: (title, description) => {
+    const event = new CustomEvent("toast", {
+      detail: { title, description, variant: "success" }
+    });
+    window.dispatchEvent(event);
+  },
+  error: (title, description) => {
+    const event = new CustomEvent("toast", {
+      detail: { title, description, variant: "error" }
+    });
+    window.dispatchEvent(event);
+  },
+  warning: (title, description) => {
+    const event = new CustomEvent("toast", {
+      detail: { title, description, variant: "warning" }
+    });
+    window.dispatchEvent(event);
+  },
+  info: (title, description) => {
+    const event = new CustomEvent("toast", {
+      detail: { title, description, variant: "info" }
+    });
+    window.dispatchEvent(event);
+  },
+  message: (title, description) => {
+    const event = new CustomEvent("toast", {
+      detail: { title, description, variant: "default" }
+    });
+    window.dispatchEvent(event);
+  }
+};
+const TabsContext = createContext(void 0);
+const useTabsContext = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs compound components must be used within Tabs");
+  }
+  return context;
+};
+const Tabs = forwardRef(
+  ({ defaultValue, value: controlledValue, onValueChange, className, children, ...props }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const activeTab = isControlled ? controlledValue : internalValue;
+    const setActiveTab = (newValue) => {
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      onValueChange == null ? void 0 : onValueChange(newValue);
+    };
+    return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, setActiveTab }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), ...props, children }) });
+  }
+);
+Tabs.displayName = "Tabs";
+const TabsList = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+        className
+      ),
+      role: "tablist",
+      ...props
+    }
+  )
+);
+TabsList.displayName = "TabsList";
+const TabsTrigger = forwardRef(
+  ({ value, className, ...props }, ref) => {
+    const { activeTab, setActiveTab } = useTabsContext();
+    const isActive = activeTab === value;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "tab",
+        "aria-selected": isActive,
+        onClick: () => setActiveTab(value),
+        className: cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium",
+          "ring-offset-background transition-all",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:pointer-events-none disabled:opacity-50",
+          isActive ? "bg-background text-foreground shadow-sm" : "hover:bg-background/50 hover:text-foreground",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+const TabsContent = forwardRef(
+  ({ value, className, ...props }, ref) => {
+    const { activeTab } = useTabsContext();
+    const isActive = activeTab === value;
+    if (!isActive) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        className: cn("mt-4 ring-offset-background", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className),
+        ...props
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+const Tooltip = forwardRef(
+  ({ content, position = "top", delay = 200, className, children, ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [coords, setCoords] = useState({ x: 0, y: 0 });
+    const timeoutRef = useRef();
+    const triggerRef = useRef(null);
+    const showTooltip = () => {
+      timeoutRef.current = setTimeout(() => {
+        setIsVisible(true);
+        updatePosition();
+      }, delay);
+    };
+    const hideTooltip = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      setIsVisible(false);
+    };
+    const updatePosition = () => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      const offset = 8;
+      const positions = {
+        top: {
+          x: rect.left + rect.width / 2,
+          y: rect.top - offset
+        },
+        bottom: {
+          x: rect.left + rect.width / 2,
+          y: rect.bottom + offset
+        },
+        left: {
+          x: rect.left - offset,
+          y: rect.top + rect.height / 2
+        },
+        right: {
+          x: rect.right + offset,
+          y: rect.top + rect.height / 2
+        }
+      };
+      setCoords(positions[position]);
+    };
+    useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+    const positionClasses = {
+      top: "-translate-x-1/2 -translate-y-full",
+      bottom: "-translate-x-1/2",
+      left: "-translate-x-full -translate-y-1/2",
+      right: "-translate-y-1/2"
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: triggerRef,
+          onMouseEnter: showTooltip,
+          onMouseLeave: hideTooltip,
+          onFocus: showTooltip,
+          onBlur: hideTooltip,
+          className: "inline-block",
+          children
+        }
+      ),
+      isVisible && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: "tooltip",
+          style: {
+            position: "fixed",
+            left: `${coords.x}px`,
+            top: `${coords.y}px`
+          },
+          className: cn(
+            "z-50 rounded-md bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md border border-border",
+            "pointer-events-none animate-fade-in",
+            positionClasses[position],
+            className
+          ),
+          ...props,
+          children: [
+            content,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute h-2 w-2 rotate-45 bg-popover",
+                  position === "top" && "bottom-[-4px] left-1/2 -translate-x-1/2",
+                  position === "bottom" && "top-[-4px] left-1/2 -translate-x-1/2",
+                  position === "left" && "right-[-4px] top-1/2 -translate-y-1/2",
+                  position === "right" && "left-[-4px] top-1/2 -translate-y-1/2"
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+Tooltip.displayName = "Tooltip";
+const cardVariants = cva(
+  "rounded-lg border bg-card text-card-foreground shadow-sm transition-all",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "border-2",
+        elevated: "shadow-lg",
+        ghost: "border-transparent shadow-none"
+      },
+      hoverable: {
+        true: "hover:shadow-md cursor-pointer"
+      },
+      padding: {
+        none: "",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      padding: "md"
+    }
+  }
+);
+const Card = forwardRef(
+  ({ className, variant, hoverable, padding, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(cardVariants({ variant, hoverable, padding }), className),
+        ...props
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+const CardHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 pb-4", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+const CardTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn("text-2xl font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+const CardDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+const CardContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("py-4 first:pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+const CardFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center pt-4", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        success: "border-transparent bg-success text-success-foreground",
+        warning: "border-transparent bg-warning text-warning-foreground",
+        outline: "border-border text-foreground"
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-0.5 text-sm",
+        lg: "px-3 py-1 text-base"
+      },
+      dot: {
+        true: "gap-1.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const Badge = forwardRef(
+  ({ className, variant, size, showDot, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(badgeVariants({ variant, size, dot: showDot }), className),
+        ...props,
+        children: [
+          showDot && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-pulse" }),
+          children
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+const avatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-muted font-medium text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8 text-xs",
+        md: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        xl: "h-16 w-16 text-lg",
+        "2xl": "h-20 w-20 text-xl"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-md"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle"
+    }
+  }
+);
+const Avatar = forwardRef(
+  ({ className, size, shape, src, alt, fallback, status, ...props }, ref) => {
+    const [imageError, setImageError] = useState(false);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const statusColors = {
+      online: "bg-success",
+      offline: "bg-muted-foreground",
+      away: "bg-warning",
+      busy: "bg-destructive"
+    };
+    const shouldShowImage = src && !imageError;
+    const shouldShowFallback = !shouldShowImage || !imageLoaded;
+    const initials = fallback || (alt == null ? void 0 : alt.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2)) || "?";
+    return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn(avatarVariants({ size, shape }), className),
+          ...props,
+          children: [
+            shouldShowImage && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src,
+                alt,
+                onError: () => setImageError(true),
+                onLoad: () => setImageLoaded(true),
+                className: cn(
+                  "aspect-square h-full w-full object-cover",
+                  !imageLoaded && "hidden"
+                )
+              }
+            ),
+            shouldShowFallback && /* @__PURE__ */ jsx("span", { children: initials })
+          ]
+        }
+      ),
+      status && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "absolute bottom-0 right-0 block rounded-full border-2 border-background",
+            statusColors[status],
+            size === "sm" && "h-2 w-2",
+            size === "md" && "h-2.5 w-2.5",
+            size === "lg" && "h-3 w-3",
+            size === "xl" && "h-4 w-4",
+            size === "2xl" && "h-5 w-5"
+          ),
+          "aria-label": `Status: ${status}`
+        }
+      )
+    ] });
+  }
+);
+Avatar.displayName = "Avatar";
+const TablePagination = ({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalItems,
+  onPageChange,
+  canGoNext,
+  canGoPrevious
+}) => {
+  const startItem = (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+  return /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      "Showing ",
+      startItem,
+      " to ",
+      endItem,
+      " of ",
+      totalItems,
+      " results"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage - 1),
+          disabled: !canGoPrevious,
+          className: cn(
+            "rounded-md border border-border px-3 py-1 text-sm transition-colors",
+            !canGoPrevious ? "cursor-not-allowed opacity-50" : "hover:bg-muted"
+          ),
+          "aria-label": "Previous page",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        "Page ",
+        currentPage,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => onPageChange(currentPage + 1),
+          disabled: !canGoNext,
+          className: cn(
+            "rounded-md border border-border px-3 py-1 text-sm transition-colors",
+            !canGoNext ? "cursor-not-allowed opacity-50" : "hover:bg-muted"
+          ),
+          "aria-label": "Next page",
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+};
+const Table = forwardRef(
+  ({
+    columns,
+    data,
+    striped = false,
+    hoverable = true,
+    size = "md",
+    sortable = false,
+    defaultSortKey,
+    defaultSortDirection = "asc",
+    onSortChange,
+    expandable = false,
+    renderExpanded,
+    pagination = false,
+    pageSize = 10,
+    currentPage,
+    onPageChange,
+    loading = false,
+    emptyMessage = "No data available",
+    className,
+    ...props
+  }, ref) => {
+    const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
+    const { sortedData, sortKey, sortDirection, handleSort } = useTableSort({
+      data,
+      columns,
+      defaultSortKey,
+      defaultSortDirection,
+      onSortChange
+    });
+    const {
+      paginatedData,
+      currentPage: page,
+      totalPages,
+      handlePageChange,
+      canGoNext,
+      canGoPrevious
+    } = useTablePagination({
+      data: sortedData,
+      pageSize,
+      currentPage,
+      onPageChange
+    });
+    const toggleExpanded = (index) => {
+      const newExpanded = new Set(expandedRows);
+      if (newExpanded.has(index)) {
+        newExpanded.delete(index);
+      } else {
+        newExpanded.add(index);
+      }
+      setExpandedRows(newExpanded);
+    };
+    const sizeClasses = {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base"
+    };
+    const cellPadding = {
+      sm: "px-3 py-2",
+      md: "px-4 py-3",
+      lg: "px-6 py-4"
+    };
+    const displayData = pagination ? paginatedData : sortedData;
+    return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border border-border", children: /* @__PURE__ */ jsxs(
+        "table",
+        {
+          ref,
+          className: cn("w-full border-collapse", sizeClasses[size], className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("thead", { className: "bg-muted/50", children: /* @__PURE__ */ jsxs("tr", { children: [
+              expandable && /* @__PURE__ */ jsx("th", { className: cn("w-12", cellPadding[size]) }),
+              columns.map((column) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  className: cn(
+                    cellPadding[size],
+                    "text-left font-semibold text-foreground",
+                    column.align === "center" && "text-center",
+                    column.align === "right" && "text-right",
+                    sortable && column.sortable !== false && "cursor-pointer select-none hover:bg-muted",
+                    column.width && `w-[${column.width}]`
+                  ),
+                  onClick: () => sortable && column.sortable !== false && handleSort(column.key),
+                  style: { width: column.width },
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    column.header,
+                    sortable && column.sortable !== false && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: sortKey === column.key ? sortDirection === "asc" ? /* @__PURE__ */ jsx(SortAscIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(SortDescIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx("div", { className: "h-4 w-4" }) })
+                  ] })
+                },
+                column.key
+              ))
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+              "td",
+              {
+                colSpan: columns.length + (expandable ? 1 : 0),
+                className: cn(cellPadding[size], "text-center text-muted-foreground"),
+                children: "Loading..."
+              }
+            ) }) : displayData.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+              "td",
+              {
+                colSpan: columns.length + (expandable ? 1 : 0),
+                className: cn(cellPadding[size], "text-center text-muted-foreground"),
+                children: emptyMessage
+              }
+            ) }) : displayData.map((row, rowIndex) => {
+              const isExpanded = expandedRows.has(rowIndex);
+              return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    className: cn(
+                      "border-t border-border",
+                      striped && rowIndex % 2 === 1 && "bg-muted/30",
+                      hoverable && "hover:bg-muted/50 transition-colors",
+                      expandable && "cursor-pointer"
+                    ),
+                    onClick: expandable ? () => toggleExpanded(rowIndex) : void 0,
+                    children: [
+                      expandable && /* @__PURE__ */ jsx("td", { className: cellPadding[size], children: /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "flex items-center justify-center text-muted-foreground hover:text-foreground transition-all",
+                          "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                          children: /* @__PURE__ */ jsx(
+                            ChevronRightIcon,
+                            {
+                              className: cn(
+                                "h-4 w-4 transition-transform duration-200",
+                                isExpanded && "rotate-90"
+                              )
+                            }
+                          )
+                        }
+                      ) }),
+                      columns.map((column) => {
+                        const value = column.accessor ? column.accessor(row) : row[column.key];
+                        return /* @__PURE__ */ jsx(
+                          "td",
+                          {
+                            className: cn(
+                              cellPadding[size],
+                              "text-foreground",
+                              column.align === "center" && "text-center",
+                              column.align === "right" && "text-right"
+                            ),
+                            children: value
+                          },
+                          column.key
+                        );
+                      })
+                    ]
+                  }
+                ),
+                expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { className: "border-t border-border bg-muted/20", children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + 1, className: cellPadding[size], children: renderExpanded(row, rowIndex) }) })
+              ] }, rowIndex);
+            }) })
+          ]
+        }
+      ) }),
+      pagination && !loading && displayData.length > 0 && /* @__PURE__ */ jsx(
+        TablePagination,
+        {
+          currentPage: page,
+          totalPages,
+          pageSize,
+          totalItems: sortedData.length,
+          onPageChange: handlePageChange,
+          canGoNext,
+          canGoPrevious
+        }
+      )
+    ] });
+  }
+);
+Table.displayName = "Table";
+export {
+  ANIMATION_DURATION,
+  AlertCircleIcon,
+  AlertTriangleIcon,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  CheckIcon,
+  Checkbox,
+  ChevronDownIcon,
+  CloseIcon,
+  InfoIcon,
+  Input,
+  KEYBOARD_KEYS,
+  Modal,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  Select,
+  SpinnerIcon,
+  Switch,
+  Table,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  ToastProvider,
+  Tooltip,
+  avatarVariants,
+  badgeVariants,
+  buttonVariants,
+  cardVariants,
+  cn,
+  generateId,
+  inputVariants,
+  toast,
+  useClickOutside,
+  a as useControllableState,
+  b as useDisclosure,
+  useFocusTrap,
+  useLockBodyScroll,
+  e as useMediaQuery,
+  useRipple,
+  useToast
+};
+//# sourceMappingURL=index.js.map