@mci-ui/mci-ui 0.0.0

package/dist/index.js

@@ -0,0 +1,1157 @@
+// src/shared/ui/breadcrumb/Breadcrumb.tsx
+import { ChevronRight } from "lucide-react";
+
+// src/shared/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function useEscapeKey(callback) {
+  const handleEscape = (e) => {
+    if (e.key === "Escape") callback();
+  };
+  return { handleEscape };
+}
+function useClickOutside(ref, callback) {
+  const handleClick = (e) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+  return { handleClick };
+}
+
+// src/shared/ui/breadcrumb/Breadcrumb.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Breadcrumb({
+  items,
+  className,
+  separatorIcon = /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-gray-400 dark:text-gray-500" })
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "flex items-center space-x-2 text-sm font-medium text-gray-600 dark:text-gray-300",
+        className
+      ),
+      "aria-label": "Breadcrumb",
+      children: items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          item.href ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: item.href,
+              onClick: item.onClick,
+              className: cn(
+                "hover:text-primary-600 dark:hover:text-primary-400 transition-colors",
+                isLast && "text-primary-600 dark:text-primary-400"
+              ),
+              children: item.label
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                isLast ? "text-primary-600 dark:text-primary-400" : "text-gray-500 dark:text-gray-400"
+              ),
+              children: item.label
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx("span", { className: "mx-2 flex items-center", children: separatorIcon })
+        ] }, index);
+      })
+    }
+  );
+}
+
+// src/shared/ui/button/Button.tsx
+import { Loader } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Button({
+  text,
+  icon,
+  iconPosition = "left",
+  size = "md",
+  variant = "accent",
+  loading = false,
+  disabled = false,
+  onClick,
+  className
+}) {
+  const sizes2 = {
+    sm: "h-[38px] px-3 text-sm gap-2",
+    md: "h-[48px] px-4 text-base gap-2.5",
+    lg: "h-[56px] px-5 text-lg gap-3"
+  };
+  const variants2 = {
+    primary: `
+			bg-secondary-500
+			hover:bg-secondary-600
+			active:bg-secondary-700
+			hover:shadow-lg
+			hover:shadow-secondary-500/30
+			active:scale-[0.98]
+			text-white
+		`,
+    secondary: `
+			bg-secondary-50
+			hover:bg-secondary-100
+			active:bg-secondary-200
+			hover:shadow-md
+			hover:shadow-secondary-500/10
+			active:scale-[0.98]
+			text-secondary-700
+			border border-secondary-200
+			hover:border-secondary-300
+		`,
+    accent: `
+			bg-accent-500
+			hover:bg-accent-600
+			active:bg-accent-700
+			hover:shadow-lg
+			hover:shadow-accent-500/30
+			active:scale-[0.98]
+			text-white
+		`
+  };
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      onClick,
+      disabled: disabled || loading,
+      className: cn(
+        "inline-flex items-center justify-center rounded-[7px] font-medium",
+        "transition-all duration-300 ease-in-out",
+        "transform hover:-translate-y-0.5",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:hover:shadow-none",
+        "focus:outline-none focus:ring-2 focus:ring-offset-2",
+        variant === "primary" && "focus:ring-secondary-500",
+        variant === "secondary" && "focus:ring-secondary-400",
+        variant === "accent" && "focus:ring-accent-500",
+        variants2[variant],
+        sizes2[size],
+        className
+      ),
+      children: [
+        icon && iconPosition === "left" && /* @__PURE__ */ jsx2("span", { className: "flex items-center justify-center transition-transform duration-300 ease-in-out group-hover:scale-110", children: loading ? /* @__PURE__ */ jsx2(Loader, { className: "animate-spin", size: 20 }) : icon }),
+        text && /* @__PURE__ */ jsx2("span", { className: "transition-all duration-300", children: text }),
+        icon && iconPosition === "right" && /* @__PURE__ */ jsx2("span", { className: "flex items-center justify-center transition-transform duration-300 ease-in-out group-hover:scale-110", children: loading ? /* @__PURE__ */ jsx2(Loader, { className: "animate-spin", size: 20 }) : icon }),
+        loading && /* @__PURE__ */ jsx2(Loader, { className: "animate-spin", size: 20 })
+      ]
+    }
+  );
+}
+
+// src/shared/ui/collapse/Collapse.tsx
+import { ChevronDownIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Collapse({
+  title,
+  children,
+  defaultOpen = false,
+  icon,
+  variant = "primary",
+  className,
+  titleClassName,
+  contentClassName
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [contentHeight, setContentHeight] = useState(0);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(isOpen ? contentRef.current.scrollHeight : 0);
+    }
+  }, [isOpen]);
+  const variantClasses = {
+    primary: {
+      title: "bg-secondary-50 hover:bg-secondary-100 border-secondary-200 text-secondary-800",
+      content: "bg-secondary-25 border-secondary-100"
+    },
+    secondary: {
+      title: "bg-accent-50 hover:bg-accent-100 border-accent-200 text-accent-800",
+      content: "bg-accent-25 border-accent-100"
+    },
+    accent: {
+      title: "bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-800",
+      content: "bg-gray-25 border-gray-100"
+    }
+  };
+  const variantConfig = variantClasses[variant];
+  return /* @__PURE__ */ jsxs3("div", { className: cn("border rounded-lg overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        className: cn(
+          "w-full flex items-center justify-between p-4 transition-all duration-300",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500",
+          "border-b",
+          variantConfig.title
+        ),
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+            icon && /* @__PURE__ */ jsx3("span", { className: "flex-shrink-0", children: icon }),
+            /* @__PURE__ */ jsx3("span", { className: cn("font-medium text-left", titleClassName), children: title })
+          ] }),
+          /* @__PURE__ */ jsx3(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "w-5 h-5 transition-transform duration-300 flex-shrink-0",
+                isOpen && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: cn(
+          "transition-all duration-300 ease-out overflow-hidden",
+          variantConfig.content
+        ),
+        style: {
+          height: `${contentHeight}px`
+        },
+        children: /* @__PURE__ */ jsx3("div", { ref: contentRef, className: cn("p-4", contentClassName), children })
+      }
+    )
+  ] });
+}
+
+// src/shared/ui/inputMain/InputMain.tsx
+import { Eye, EyeOff } from "lucide-react";
+import { useMemo, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function InputMain({
+  label,
+  placeholder,
+  type = "text",
+  icon,
+  iconPosition = "left",
+  size = "md",
+  error,
+  success,
+  disabled = false,
+  required = false,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  className
+}) {
+  const [isFocused, setIsFocused] = useState2(false);
+  const [internalValue, setInternalValue] = useState2("");
+  const [showPassword, setShowPassword] = useState2(false);
+  const [autoFilled, setAutoFilled] = useState2(false);
+  const currentValue = value ?? internalValue;
+  const hasValue = Boolean(currentValue) || autoFilled;
+  const isPassword = type === "password";
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur?.();
+  };
+  const handleChange = (e) => {
+    if (value === void 0) setInternalValue(e.target.value);
+    onChange?.(e);
+  };
+  const togglePassword = () => setShowPassword((p) => !p);
+  const sizes2 = useMemo(
+    () => ({
+      sm: {
+        input: "h-[38px] text-sm",
+        padding: icon ? iconPosition === "left" ? "pl-10 pr-3" : "pl-3 pr-10" : "px-3",
+        icon: "w-4 h-4",
+        iconWrapper: iconPosition === "left" ? "left-3" : "right-3",
+        labelFont: "text-xs"
+      },
+      md: {
+        input: "h-[48px] text-base",
+        padding: icon ? iconPosition === "left" ? "pl-12 pr-4" : "pl-4 pr-12" : "px-4",
+        icon: "w-5 h-5",
+        iconWrapper: iconPosition === "left" ? "left-3.5" : "right-3.5",
+        labelFont: "text-sm"
+      },
+      lg: {
+        input: "h-[56px] text-lg",
+        padding: icon ? iconPosition === "left" ? "pl-14 pr-5" : "pl-5 pr-14" : "px-5",
+        icon: "w-6 h-6",
+        iconWrapper: iconPosition === "left" ? "left-4" : "right-4",
+        labelFont: "text-base"
+      }
+    }),
+    [icon, iconPosition]
+  );
+  const stateStyles = useMemo(() => {
+    if (error)
+      return "border-error-500 focus:border-error-600 focus:ring-error-500/20";
+    if (success)
+      return "border-success-500 focus:border-success-600 focus:ring-success-500/20";
+    return "border-gray-300 hover:border-gray-400 focus:border-accent-500 focus:ring-accent-500/20";
+  }, [error, success]);
+  const handleAutoFill = (e) => {
+    if (e.animationName === "onAutoFillStart") {
+      setAutoFilled(true);
+    } else if (e.animationName === "onAutoFillCancel") {
+      setAutoFilled(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs4("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          type: isPassword && showPassword ? "text" : type,
+          value: currentValue,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onAnimationStart: handleAutoFill,
+          disabled,
+          placeholder: label ? "" : placeholder,
+          required,
+          className: cn(
+            "w-full rounded-[7px] border bg-white font-medium outline-none transition-all duration-300 ease-in-out",
+            "focus:ring-4 disabled:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60 autofill:shadow-[inset_0_0_0px_1000px_white]",
+            sizes2[size].input,
+            sizes2[size].padding,
+            stateStyles
+          ),
+          autoComplete: "on"
+        }
+      ),
+      label && /* @__PURE__ */ jsxs4(
+        "label",
+        {
+          className: cn(
+            "absolute pointer-events-none transition-all duration-300 ease-in-out font-medium",
+            icon && iconPosition === "left" && !hasValue && !isFocused ? sizes2[size].padding : "left-4",
+            isFocused || hasValue ? cn(
+              "top-0 -translate-y-1/2 bg-white px-2",
+              sizes2[size].labelFont,
+              error ? "text-error-600" : success ? "text-success-600" : "text-accent-600"
+            ) : cn(
+              "top-1/2 -translate-y-1/2 text-gray-500",
+              sizes2[size].input.includes("38") && "text-sm",
+              sizes2[size].input.includes("48") && "text-base",
+              sizes2[size].input.includes("56") && "text-lg"
+            )
+          ),
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx4("span", { className: "text-error-500 ml-1", children: "*" })
+          ]
+        }
+      ),
+      icon && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: cn(
+            "absolute top-1/2 -translate-y-1/2 flex items-center transition-all duration-300",
+            sizes2[size].iconWrapper,
+            error ? "text-error-500" : success ? "text-success-500" : isFocused ? "text-accent-500" : "text-gray-400"
+          ),
+          children: /* @__PURE__ */ jsx4("span", { className: cn(sizes2[size].icon, "mr-2"), children: icon })
+        }
+      ),
+      isPassword && /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          onClick: togglePassword,
+          className: cn(
+            "absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-gray-400 hover:text-gray-600 transition-all",
+            "right-3"
+          ),
+          children: showPassword ? /* @__PURE__ */ jsx4(EyeOff, { className: cn(sizes2[size].icon) }) : /* @__PURE__ */ jsx4(Eye, { className: cn(sizes2[size].icon) })
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx4("p", { className: "mt-1.5 text-sm text-error-600 flex items-center gap-1 animate-[slideDown_0.3s_ease-out]", children: error }),
+    success && !error && /* @__PURE__ */ jsx4("p", { className: "mt-1.5 text-sm text-success-600 flex items-center gap-1 animate-[slideDown_0.3s_ease-out]", children: success }),
+    /* @__PURE__ */ jsx4("style", { children: `
+				input {
+					animation-name: onAutoFillCancel;
+				}
+				input:-webkit-autofill {
+					animation-name: onAutoFillStart;
+				}
+				@keyframes onAutoFillStart {}
+				@keyframes onAutoFillCancel {}
+			` })
+  ] });
+}
+
+// src/shared/ui/mciTable/MciTable.tsx
+import { ArrowUpDown, Box, ChevronDown, ChevronUp } from "lucide-react";
+import { useMemo as useMemo2, useState as useState6 } from "react";
+
+// src/shared/ui/modal/Modal.tsx
+import { X } from "lucide-react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Modal({
+  show,
+  setShow,
+  title,
+  Header,
+  Body,
+  footer
+}) {
+  const modalRef = useRef2(null);
+  const { handleEscape } = useEscapeKey(() => setShow(false));
+  useEffect2(() => {
+    if (show) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [show, handleEscape]);
+  const { handleClick } = useClickOutside(modalRef, () => setShow(false));
+  useEffect2(() => {
+    if (show) document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [show, handleClick]);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-50 flex items-center justify-center p-4 bg-secondary-100/50 backdrop-blur-sm transition-all duration-500 ease-in-out",
+        show ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+      ),
+      children: /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          ref: modalRef,
+          className: cn(
+            "relative w-full max-w-lg rounded-[7px] shadow-xl bg-secondary-50 text-gray-800",
+            "transform transition-all duration-500 ease-out",
+            show ? "opacity-100 scale-100" : "opacity-0 scale-90"
+          ),
+          children: [
+            (Header || title) && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-6 py-4 border-b border-secondary-300", children: [
+              Header || /* @__PURE__ */ jsx5("h2", { className: "text-xl font-semibold text-gray-800", children: title }),
+              /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  onClick: () => setShow(false),
+                  className: "text-gray-800 hover:text-secondary-300 active:animate-spin transition",
+                  children: /* @__PURE__ */ jsx5(X, { className: "w-5 h-5" })
+                }
+              )
+            ] }),
+            Body && /* @__PURE__ */ jsx5("div", { className: "px-6 py-4 max-h-96 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300", children: Body }),
+            footer && /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-secondary-300", children: footer })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/shared/ui/pagination/Pagination.tsx
+import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function Pagination({
+  totalItems,
+  currentPage,
+  perPage,
+  onPageChange,
+  onPerPageChange,
+  siblingCount = 1,
+  perPageOptions = [10, 20, 30],
+  showPerPage = true
+}) {
+  const totalPages = Math.ceil(totalItems / perPage);
+  const createPageRange = () => {
+    const totalPageNumbers = siblingCount * 2 + 5;
+    if (totalPages <= totalPageNumbers) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 2);
+    const rightSiblingIndex = Math.min(
+      currentPage + siblingCount,
+      totalPages - 1
+    );
+    const showLeftDots = leftSiblingIndex > 2;
+    const showRightDots = rightSiblingIndex < totalPages - 1;
+    const range = [1];
+    if (showLeftDots) range.push("...");
+    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+      range.push(i);
+    }
+    if (showRightDots) range.push("...");
+    range.push(totalPages);
+    return range;
+  };
+  const pages = createPageRange();
+  const handlePrev = () => {
+    if (currentPage > 1) onPageChange(currentPage - 1);
+  };
+  const handleNext = () => {
+    if (currentPage < totalPages) onPageChange(currentPage + 1);
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "w-full flex flex-col md:flex-row md:justify-between md:items-center gap-4 py-4", children: [
+    showPerPage && onPerPageChange && /* @__PURE__ */ jsx6("div", { className: "flex justify-center md:justify-start w-full md:w-auto", children: /* @__PURE__ */ jsx6(
+      "select",
+      {
+        value: perPage,
+        onChange: (e) => onPerPageChange(Number(e.target.value)),
+        className: "border rounded-lg px-3 py-2 text-sm bg-white\n                       hover:border-secondary-500 \n                       focus:outline-none focus:ring-2 focus:ring-secondary-500\n                       transition-all duration-200",
+        children: perPageOptions.map((option) => /* @__PURE__ */ jsxs6("option", { value: option, children: [
+          option,
+          " / page"
+        ] }, option))
+      }
+    ) }),
+    /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-center md:justify-end w-full", children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: handlePrev,
+          disabled: currentPage === 1,
+          className: `flex items-center justify-center rounded-xl border px-3 py-2 transition-all duration-200
+            ${currentPage === 1 ? "opacity-40 cursor-not-allowed" : "hover:bg-secondary-100 hover:text-secondary-700"}`,
+          children: /* @__PURE__ */ jsx6(ChevronLeft, { size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsx6("div", { className: "flex items-center gap-1 mx-2", children: pages.map((page, idx) => /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: () => typeof page === "number" && onPageChange(page),
+          disabled: page === "...",
+          className: `min-w-[40px] rounded-xl border px-3 py-2 text-sm font-medium transition-all duration-200
+                ${page === currentPage ? "bg-secondary-500 text-white shadow-md" : page === "..." ? "cursor-default border-none text-gray-400" : "bg-white text-secondary-700 hover:bg-secondary-100"}`,
+          children: page
+        },
+        idx
+      )) }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: handleNext,
+          disabled: currentPage === totalPages,
+          className: `flex items-center justify-center rounded-xl border px-3 py-2 transition-all duration-200
+            ${currentPage === totalPages ? "opacity-40 cursor-not-allowed" : "hover:bg-secondary-100 hover:text-secondary-700"}`,
+          children: /* @__PURE__ */ jsx6(ChevronRight2, { size: 18 })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/shared/ui/skeleton/Skeleton.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Skeleton({
+  className,
+  variant = "default",
+  width = "100%",
+  height = "1rem"
+}) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden bg-secondary-200 dark:bg-secondary-800",
+        "rounded-sm",
+        variant === "circle" && "rounded-full",
+        variant === "rounded" && "rounded-md",
+        className
+      ),
+      style: {
+        width: typeof width === "number" ? `${width}px` : width,
+        height: typeof height === "number" ? `${height}px` : height
+      },
+      children: /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 shimmer-mask" })
+    }
+  );
+}
+
+// src/shared/ui/tabs/Tabs.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function Tabs({
+  tabs,
+  defaultTab,
+  position = "top",
+  variant = "primary",
+  className,
+  onChange
+}) {
+  const [activeTab, setActiveTab] = useState3(defaultTab || tabs[0]?.id);
+  const [indicatorStyle, setIndicatorStyle] = useState3({});
+  const tabsRef = useRef3([]);
+  useEffect3(() => {
+    const activeIndex = tabs.findIndex((tab) => tab.id === activeTab);
+    const activeTabElement = tabsRef.current[activeIndex];
+    if (activeTabElement) {
+      const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = activeTabElement;
+      setIndicatorStyle({
+        left: offsetLeft,
+        top: offsetTop,
+        width: offsetWidth,
+        height: offsetHeight,
+        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+      });
+    }
+  }, [activeTab, position, tabs]);
+  const containerClasses = {
+    top: "flex-col",
+    bottom: "flex-col-reverse",
+    left: "flex-row",
+    right: "flex-row-reverse"
+  };
+  const tabsContainerClasses = {
+    top: "flex-row",
+    bottom: "flex-row",
+    left: "flex-col",
+    right: "flex-col"
+  };
+  const contentClasses = {
+    top: "mt-6",
+    bottom: "mb-6",
+    left: "ml-6",
+    right: "mr-6"
+  };
+  const variantClasses = {
+    primary: {
+      active: "text-secondary-600",
+      inactive: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300",
+      disabled: "text-gray-300 dark:text-gray-600 cursor-not-allowed",
+      bg: "bg-secondary-100 dark:bg-secondary-900"
+    },
+    secondary: {
+      active: "text-accent-600",
+      inactive: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300",
+      disabled: "text-gray-300 dark:text-gray-600 cursor-not-allowed",
+      bg: "bg-accent-100 dark:bg-accent-900"
+    },
+    accent: {
+      active: "text-gray-800 dark:text-gray-200",
+      inactive: "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300",
+      disabled: "text-gray-300 dark:text-gray-600 cursor-not-allowed",
+      bg: "bg-gray-100 dark:bg-gray-800"
+    }
+  };
+  const isVertical = position === "left" || position === "right";
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex w-full", containerClasses[position], className), children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cn(
+          "flex relative bg-gray-50 dark:bg-gray-900 rounded-lg p-1",
+          tabsContainerClasses[position],
+          isVertical ? "min-w-48" : "w-full"
+        ),
+        children: [
+          /* @__PURE__ */ jsx8(
+            "div",
+            {
+              className: cn(
+                "absolute rounded-md transition-all duration-300 ease-out",
+                variantClasses[variant].bg,
+                isVertical ? "w-full" : "h-full"
+              ),
+              style: indicatorStyle
+            }
+          ),
+          tabs.map((tab, index) => {
+            const isActive = activeTab === tab.id;
+            const variantConfig = variantClasses[variant];
+            return /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                ref: (el) => {
+                  tabsRef.current[index] = el;
+                },
+                onClick: () => {
+                  if (!tab.disabled) {
+                    setActiveTab(tab.id);
+                    onChange?.(tab.id);
+                  }
+                },
+                disabled: tab.disabled,
+                className: cn(
+                  "relative flex items-center justify-center gap-2 px-4 py-3 font-medium",
+                  "text-sm whitespace-nowrap transition-all duration-200 z-10",
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500",
+                  "rounded-md",
+                  isActive ? [variantConfig.active, "font-semibold"] : [
+                    variantConfig.inactive,
+                    "hover:bg-white/50 dark:hover:bg-gray-800/50"
+                  ],
+                  tab.disabled && variantConfig.disabled,
+                  isVertical ? "w-full justify-start" : "flex-1"
+                ),
+                children: [
+                  tab.icon && /* @__PURE__ */ jsx8(
+                    "span",
+                    {
+                      className: cn(
+                        "flex-shrink-0 transition-transform duration-200",
+                        isActive && "scale-110"
+                      ),
+                      children: tab.icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsx8("span", { className: "relative z-10", children: tab.label })
+                ]
+              },
+              tab.id
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8("div", { className: cn("flex-1 overflow-hidden", contentClasses[position]), children: /* @__PURE__ */ jsx8("div", { className: "animate-fade-in", children: tabs.find((tab) => tab.id === activeTab)?.content }, activeTab) })
+  ] });
+}
+function TabPanel({ children, className }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: cn(
+        "p-6 rounded-lg bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/shared/ui/tag/Tag.tsx
+import { X as X2 } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var sizes = {
+  sm: "text-xs px-2 py-0.5",
+  md: "text-sm px-3 py-1",
+  lg: "text-base px-4 py-1.5"
+};
+var iconSizes = {
+  sm: "w-3 h-3",
+  md: "w-4 h-4",
+  lg: "w-5 h-5"
+};
+var variants = {
+  default: "bg-gray-100 text-gray-800 border border-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:border-gray-700",
+  secondary: "bg-secondary-100 text-secondary-800 border border-secondary-200 dark:bg-secondary-800 dark:text-secondary-50 dark:border-secondary-700",
+  success: "bg-success-100 text-success-800 border border-success-200 dark:bg-success-800 dark:text-success-50 dark:border-success-700",
+  error: "bg-error-100 text-error-800 border border-error-200 dark:bg-error-800 dark:text-error-50 dark:border-error-700",
+  info: "bg-info-100 text-info-800 border border-info-200 dark:bg-info-800 dark:text-info-50 dark:border-info-700",
+  accent: "bg-accent-100 text-accent-800 border border-accent-200 dark:bg-accent-800 dark:text-accent-50 dark:border-accent-700"
+};
+function Tag({
+  children,
+  variant = "default",
+  size = "md",
+  icon,
+  iconPosition = "left",
+  closable = false,
+  onClose,
+  className
+}) {
+  return /* @__PURE__ */ jsxs8(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center font-medium animate-[fadeIn_0.3s_ease-out] rounded-[7px]",
+        sizes[size],
+        variants[variant],
+        icon && "gap-1.5",
+        className
+      ),
+      children: [
+        icon && iconPosition === "left" && /* @__PURE__ */ jsx9("span", { className: `flex items-center ${cn(iconSizes[size])}`, children: icon }),
+        /* @__PURE__ */ jsx9("span", { children }),
+        icon && iconPosition === "right" && /* @__PURE__ */ jsx9("span", { className: `flex items-center ${cn(iconSizes[size])}`, children: icon }),
+        closable && /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "ml-1 rounded-full p-0.5 hover:bg-black/10 dark:hover:bg-white/10 transition-colors",
+            children: /* @__PURE__ */ jsx9(X2, { className: cn(iconSizes[size]) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/shared/ui/textarea/Textarea.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function Textarea({
+  label,
+  placeholder,
+  value = "",
+  onChange,
+  required = false,
+  disabled = false,
+  error,
+  className,
+  rows = 4
+}) {
+  const [focused, setFocused] = useState4(false);
+  const isFloating = focused || value.length > 0;
+  return /* @__PURE__ */ jsxs9("div", { className: "relative w-full", children: [
+    label && /* @__PURE__ */ jsxs9(
+      "label",
+      {
+        className: cn(
+          "absolute left-3 top-2 text-gray-500 dark:text-gray-400 transition-all duration-200 pointer-events-none",
+          isFloating ? "text-xs -translate-y-3 bg-white dark:bg-gray-900 px-1" : "text-sm translate-y-0"
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx10("span", { className: "text-error-500 ml-0.5", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      "textarea",
+      {
+        rows,
+        placeholder: label ? void 0 : placeholder,
+        value,
+        onChange: (e) => onChange?.(e.target.value),
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        disabled,
+        className: cn(
+          "w-full rounded-md border border-gray-300 dark:border-gray-700 bg-transparent text-gray-900 dark:text-gray-100 px-3 py-2 outline-none transition-all resize-none",
+          "focus:border-primary-500 focus:ring-1 focus:ring-primary-500",
+          disabled && "opacity-50 cursor-not-allowed",
+          error && "border-error-500 focus:ring-error-500 focus:border-error-500",
+          label && "pt-5",
+          className
+        )
+      }
+    ),
+    error && /* @__PURE__ */ jsx10("p", { className: "mt-1 text-sm text-error-500", children: error })
+  ] });
+}
+
+// src/shared/ui/toast/Toast.tsx
+import {
+  AlertCircle,
+  CheckCircle2,
+  Info,
+  Loader2,
+  X as X3,
+  XCircle
+} from "lucide-react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function Toast({
+  id = Math.random().toString(36),
+  title,
+  description,
+  type = "info",
+  duration = 5e3,
+  position = "top-right",
+  onClose,
+  action
+}) {
+  const [isVisible, setIsVisible] = useState5(false);
+  const [isLeaving, setIsLeaving] = useState5(false);
+  useEffect4(() => {
+    const showTimer = setTimeout(() => setIsVisible(true), 100);
+    if (duration !== Infinity) {
+      const closeTimer = setTimeout(() => handleClose(), duration);
+      return () => {
+        clearTimeout(showTimer);
+        clearTimeout(closeTimer);
+      };
+    }
+    return () => clearTimeout(showTimer);
+  }, [duration]);
+  const handleClose = () => {
+    setIsLeaving(true);
+    setTimeout(() => {
+      setIsVisible(false);
+      onClose?.(id);
+    }, 300);
+  };
+  const handleAction = () => {
+    action?.onClick();
+    handleClose();
+  };
+  const icons = {
+    success: /* @__PURE__ */ jsx11(CheckCircle2, { className: "w-5 h-5" }),
+    error: /* @__PURE__ */ jsx11(XCircle, { className: "w-5 h-5" }),
+    warning: /* @__PURE__ */ jsx11(AlertCircle, { className: "w-5 h-5" }),
+    info: /* @__PURE__ */ jsx11(Info, { className: "w-5 h-5" }),
+    loading: /* @__PURE__ */ jsx11(Loader2, { className: "w-5 h-5 animate-spin" })
+  };
+  const variantClasses = {
+    success: "bg-success-50 border-success-200 text-success-800",
+    error: "bg-error-50 border-error-200 text-error-800",
+    warning: "bg-secondary-50 border-secondary-200 text-secondary-800",
+    info: "bg-info-50 border-info-200 text-info-800",
+    loading: "bg-gray-50 border-gray-200 text-gray-800"
+  };
+  const iconColors = {
+    success: "text-success-600",
+    error: "text-error-600",
+    warning: "text-secondary-600",
+    info: "text-info-600",
+    loading: "text-gray-600"
+  };
+  const positionClasses = {
+    "top-right": "top-4 right-4",
+    "top-left": "top-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "top-center": "top-4 left-1/2 -translate-x-1/2",
+    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
+  };
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      className: cn(
+        "fixed z-50 transform transition-all duration-300",
+        positionClasses[position],
+        isLeaving ? "opacity-0 scale-95" : "opacity-100 scale-100",
+        position.includes("top") && !isLeaving && "animate-slide-down",
+        position.includes("bottom") && !isLeaving && "animate-slide-up"
+      ),
+      children: /* @__PURE__ */ jsxs10(
+        "div",
+        {
+          className: cn(
+            "flex items-start gap-3 p-4 rounded-lg border shadow-lg max-w-sm",
+            "backdrop-blur-sm bg-white/95",
+            variantClasses[type]
+          ),
+          children: [
+            /* @__PURE__ */ jsx11("div", { className: cn("flex-shrink-0 mt-0.5", iconColors[type]), children: icons[type] }),
+            /* @__PURE__ */ jsxs10("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx11("h4", { className: "font-semibold text-sm mb-1", children: title }),
+              description && /* @__PURE__ */ jsx11("p", { className: "text-sm opacity-90", children: description }),
+              action && /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  onClick: handleAction,
+                  className: "mt-2 text-sm font-medium underline underline-offset-2 hover:no-underline",
+                  children: action.label
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx11(
+              "button",
+              {
+                onClick: handleClose,
+                className: "flex-shrink-0 p-1 rounded-full hover:bg-black/5 transition-colors",
+                children: /* @__PURE__ */ jsx11(X3, { className: "w-4 h-4" })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/shared/ui/toast/ToastContainer.tsx
+import { Fragment, jsx as jsx12 } from "react/jsx-runtime";
+function ToastContainer({
+  toasts,
+  onRemove,
+  position = "top-right"
+}) {
+  return /* @__PURE__ */ jsx12(Fragment, { children: toasts.map((t) => /* @__PURE__ */ jsx12(Toast, { ...t, onClose: onRemove, position }, t.id)) });
+}
+
+// src/shared/ui/tooltip/Tooltip.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  children,
+  position = "top",
+  delay = 200,
+  className
+}) {
+  const positionClasses = {
+    top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 -translate-y-1/2 ml-2"
+  };
+  const arrowClasses = {
+    top: "left-1/2 -translate-x-1/2 top-full",
+    bottom: "left-1/2 -translate-x-1/2 bottom-full",
+    left: "top-1/2 -translate-y-1/2 left-full",
+    right: "top-1/2 -translate-y-1/2 right-full"
+  };
+  return /* @__PURE__ */ jsxs11("div", { className: "relative inline-block group", children: [
+    children,
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: cn(
+          "absolute z-50 whitespace-nowrap rounded-md bg-gray-800 text-white text-xs px-2 py-1 shadow-md dark:bg-gray-900",
+          "transition-all opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100",
+          "group-hover:delay-200 duration-200 ease-out",
+          positionClasses[position],
+          className
+        ),
+        style: { transitionDelay: `${delay}ms` },
+        children: [
+          content,
+          /* @__PURE__ */ jsx13(
+            "span",
+            {
+              className: cn(
+                "absolute w-2 h-2 bg-gray-800 dark:bg-gray-900 rotate-45",
+                arrowClasses[position]
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/shared/ui/mciTable/MciTable.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function MciTable({
+  columns,
+  data,
+  loading = false,
+  variant = "clean",
+  skeletonRows = 5,
+  actions,
+  noDataText
+}) {
+  const [sortConfig, setSortConfig] = useState6(null);
+  const sortedData = useMemo2(() => {
+    if (!sortConfig || !sortConfig.direction) return data;
+    return [...data].sort((a, b) => {
+      const aVal = a[sortConfig.key];
+      const bVal = b[sortConfig.key];
+      if (aVal < bVal) return sortConfig.direction === "asc" ? -1 : 1;
+      if (aVal > bVal) return sortConfig.direction === "asc" ? 1 : -1;
+      return 0;
+    });
+  }, [data, sortConfig]);
+  const handleSort = (col) => {
+    if (!col.sortable) return;
+    setSortConfig((prev) => {
+      if (!prev || prev.key !== col.key) {
+        return { key: col.key, direction: "asc" };
+      }
+      if (prev.direction === "asc") return { key: col.key, direction: "desc" };
+      if (prev.direction === "desc") return { key: col.key, direction: null };
+      return null;
+    });
+  };
+  const getSortIcon = (col) => {
+    if (!col.sortable) return null;
+    if (!sortConfig || sortConfig.key !== col.key || !sortConfig.direction) {
+      return /* @__PURE__ */ jsx14(ArrowUpDown, { size: 15, className: "opacity-40" });
+    }
+    return sortConfig.direction === "asc" ? /* @__PURE__ */ jsx14(ChevronUp, { size: 15 }) : /* @__PURE__ */ jsx14(ChevronDown, { size: 15 });
+  };
+  const variantStyle = cn(
+    "w-full border-separate border-spacing-0 transition-all duration-300",
+    variant === "clean" && "bg-white",
+    variant === "elevated" && "bg-white  shadow-lg",
+    variant === "bordered" && "border border-secondary-200 rounded-lg"
+  );
+  const headerCell = (col) => cn(
+    "bg-secondary-50 text-secondary-800 text-sm font-semibold py-3 px-4 select-none",
+    "border-b border-secondary-200 transition-colors",
+    col.align === "center" && "text-center",
+    col.align === "right" && "text-right",
+    col.sortable && "cursor-pointer hover:bg-secondary-100/70"
+  );
+  return /* @__PURE__ */ jsxs12("div", { className: "w-full space-y-3", children: [
+    actions && /* @__PURE__ */ jsx14("div", { className: "flex justify-between items-center mb-2", children: actions }),
+    /* @__PURE__ */ jsx14("div", { className: "w-full overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxs12("table", { className: variantStyle, children: [
+      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsx14("tr", { children: columns.map((col, idx) => /* @__PURE__ */ jsx14(
+        "th",
+        {
+          onClick: () => handleSort(col),
+          className: cn(
+            headerCell(col),
+            idx === 0 && "rounded-tl-lg",
+            idx === columns.length - 1 && "rounded-tr-lg"
+          ),
+          style: { width: col.width },
+          children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx14("span", { className: "truncate", children: col.title }),
+            getSortIcon(col)
+          ] })
+        },
+        String(col.key)
+      )) }) }),
+      /* @__PURE__ */ jsx14("tbody", { children: loading ? Array.from({ length: skeletonRows }).map((_, idx) => /* @__PURE__ */ jsx14("tr", { children: columns.map((_2, i) => /* @__PURE__ */ jsx14("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx14(Skeleton, { height: 18, variant: "rounded" }) }, i)) }, idx)) : sortedData.map((row, idx) => /* @__PURE__ */ jsx14(
+        "tr",
+        {
+          className: cn(
+            "border-b border-secondary-100  transition-all duration-200"
+          ),
+          children: columns.map((col, i) => /* @__PURE__ */ jsx14(
+            "td",
+            {
+              className: cn(
+                "px-4 py-3 text-sm text-gray-800",
+                col.align === "center" && "text-center",
+                col.align === "right" && "text-right"
+              ),
+              children: col.render ? col.render(row[col.key], row) : String(row[col.key])
+            },
+            i
+          ))
+        },
+        idx
+      )) })
+    ] }) }),
+    !loading && sortedData.length === 0 && /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center py-10 text-gray-500 dark:text-gray-400 animate-[fadeIn_0.4s_ease-in-out]", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx14(
+          Box,
+          {
+            size: 64,
+            className: "mb-3 text-secondary-400 dark:text-secondary-500 opacity-80 animate-[float_2.5s_ease-in-out_infinite]"
+          }
+        ),
+        /* @__PURE__ */ jsx14("div", { className: "absolute inset-0 blur-2xl bg-secondary-200/20 dark:bg-secondary-700/20 rounded-full scale-75 animate-[pulse_3s_ease-in-out_infinite]" })
+      ] }),
+      /* @__PURE__ */ jsx14("p", { className: "text-sm font-medium animate-[fadeUp_0.6s_ease-out]", children: noDataText })
+    ] })
+  ] });
+}
+export {
+  Breadcrumb,
+  Button,
+  Collapse,
+  InputMain,
+  MciTable,
+  Modal,
+  Pagination,
+  Skeleton,
+  TabPanel,
+  Tabs,
+  Tag,
+  Textarea,
+  ToastContainer,
+  Tooltip
+};
+//# sourceMappingURL=index.js.map