@farmzone/fz-react-ui 1.0.7 → 1.0.9

package/dist/index.cjs

@@ -499,12 +499,10 @@ function Input2(props) {
   const actualType = type === "password" && showPassword ? "text" : type;
   const handlePasswordToggle = () => setShowPassword((prev) => !prev);
   const finalRightIcon = rightIcon || (shouldShowPasswordToggle ? /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    "div",
     {
-      type: "button",
       onClick: handlePasswordToggle,
       className: "text-muted-foreground hover:text-foreground cursor-pointer transition-colors",
-      disabled,
       children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-4 w-4" })
     }
   ) : null);
@@ -3480,36 +3478,100 @@ var MODAL_ICONS = {
   delete: lucideReact.Trash2,
   warning: lucideReact.TriangleAlert
 };
+var VARIANT_CONFIG = {
+  default: {
+    container: "bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-100",
+    iconBg: "bg-blue-100 rounded-full",
+    iconColor: "text-main",
+    titleColor: "text-gray-900",
+    descColor: "text-gray-500",
+    closeBtn: "text-gray-400 group-hover:text-gray-600"
+  },
+  "system-light": {
+    container: "bg-gray-50 border-gray-200",
+    iconBg: "bg-white border border-gray-200 shadow-sm rounded-lg",
+    iconColor: "text-slate-600",
+    titleColor: "text-gray-900",
+    descColor: "text-gray-500",
+    closeBtn: "text-gray-400 group-hover:text-gray-600"
+  },
+  "system-dark": {
+    container: "bg-slate-800 border-slate-700",
+    iconBg: "bg-slate-700 border border-slate-600 shadow-sm rounded-lg",
+    iconColor: "text-slate-300",
+    titleColor: "text-slate-100",
+    descColor: "text-slate-400",
+    closeBtn: "text-slate-500 group-hover:text-slate-300"
+  }
+};
+var SIZE_CONFIG = {
+  md: {
+    padding: "px-6 py-5",
+    iconBox: "w-10 h-10",
+    iconSize: 20,
+    gap: "gap-3",
+    titleSize: "text-xl font-bold",
+    descSize: "text-sm mt-0.5",
+    closeBtnBox: "w-10 h-10",
+    closeIconSize: 20
+  },
+  sm: {
+    padding: "px-4 py-4",
+    iconBox: "w-8 h-8",
+    iconSize: 16,
+    gap: "gap-2.5",
+    titleSize: "text-lg font-bold",
+    descSize: "text-sm mt-0.5",
+    closeBtnBox: "w-8 h-8",
+    closeIconSize: 16
+  }
+};
 function ModalIconHeader(props) {
-  const { type, title, description, onClose, className } = props;
+  const {
+    type,
+    title,
+    description,
+    onClose,
+    action,
+    variant = "default",
+    size: size2 = "md",
+    primaryColor,
+    className
+  } = props;
   const Icon2 = MODAL_ICONS[type];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ModalHeader,
-    {
-      className: cn(
-        "bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-100 p-0 text-left space-y-0",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-5", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 20, className: "text-main" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-gray-900", children: title }),
-            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-600 mt-0.5", children: description })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onClose,
-            className: "flex items-center justify-center w-10 h-10 rounded-full transition-colors group cursor-pointer hover:bg-black/5 shrink-0",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20, className: "text-gray-400 group-hover:text-gray-600 transition-colors" })
-          }
-        )
+  const v = VARIANT_CONFIG[variant];
+  const s = SIZE_CONFIG[size2];
+  const hasColor = !!primaryColor;
+  const isDark = variant === "system-dark";
+  const containerStyle = hasColor && variant === "default" ? {
+    background: `linear-gradient(to right, color-mix(in srgb, ${primaryColor} 6%, white), color-mix(in srgb, ${primaryColor} 12%, white))`,
+    borderColor: `color-mix(in srgb, ${primaryColor} 25%, transparent)`
+  } : void 0;
+  const iconBgStyle = hasColor ? {
+    backgroundColor: isDark ? `color-mix(in srgb, ${primaryColor} 20%, #334155)` : `color-mix(in srgb, ${primaryColor} 15%, white)`
+  } : void 0;
+  const iconColorStyle = hasColor && !isDark ? { color: primaryColor } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { className: cn("p-0 text-left space-y-0", v.container, className), style: containerStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between", s.padding), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center", s.gap), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-center shrink-0", s.iconBox, v.iconBg), style: iconBgStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: s.iconSize, className: hasColor && !isDark ? void 0 : v.iconColor, style: iconColorStyle }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn(s.titleSize, v.titleColor), children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(s.descSize, v.descColor), children: description })
       ] })
-    }
-  );
+    ] }),
+    action ?? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        className: cn(
+          "flex items-center justify-center rounded-full transition-colors group cursor-pointer hover:bg-black/5 shrink-0",
+          s.closeBtnBox
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: s.closeIconSize, className: cn("transition-colors", v.closeBtn) })
+      }
+    )
+  ] }) });
 }
 function Modal(props) {
   const {
@@ -3963,8 +4025,6 @@ function ArrowIcon(props) {
     }
   );
 }
-var DEFAULT_SORT_KEY = "";
-var DEFAULT_SORT_ORDER = "asc";
 var DEFAULT_SORT_OPTIONS = {
   visibleType: "always",
   sortKey: "",
@@ -4013,27 +4073,18 @@ function TableHeader(props) {
     if (onSortChange) {
       const isActive = sortOption?.sortKey === columnKey;
       const currentOrder = sortOption?.sortOrder;
-      if (isActive) {
-        if (currentOrder === "desc") {
-          onSortChange(columnKey, "asc");
-        } else if (currentOrder === "asc") {
-          onSortChange(DEFAULT_SORT_KEY, DEFAULT_SORT_ORDER);
-        } else {
-          onSortChange(columnKey, "desc");
-        }
+      if (isActive && currentOrder === "desc") {
+        onSortChange(columnKey, "asc");
       } else {
         onSortChange(columnKey, "desc");
       }
       return;
     }
     setInternalSortState((prev) => {
-      if (prev.columnKey !== columnKey) {
-        return { columnKey, order: "desc" };
-      }
-      if (prev.order === "desc") {
+      if (prev.columnKey === columnKey && prev.order === "desc") {
         return { columnKey, order: "asc" };
       }
-      return { columnKey: null, order: null };
+      return { columnKey, order: "desc" };
     });
   };
   const renderSortIcon = (columnKey) => {
@@ -4669,9 +4720,11 @@ function Table(props) {
     paginationInfo,
     renderFooter,
     tooltipConfig = "overflow",
-    isDynamicHeight = true
+    isDynamicHeight = true,
+    showHorizontalDivider = true,
+    showVerticalDivider = true
   } = props;
-  const { fixed = false, onSelectionChange, selectedKeys = [] } = checkboxInfo ?? {};
+  const { fixed = false, onSelectionChange, selectedKeys = [], disabledKeys = [], disabledTooltip } = checkboxInfo ?? {};
   const scrollRef = React6.useRef(null);
   const footerRef = React6.useRef(null);
   const [tableHeight, setTableHeight] = React6.useState(500);
@@ -4713,11 +4766,14 @@ function Table(props) {
     const footerH = footerRef.current?.getBoundingClientRect().height ?? 0;
     setTableHeight(window.innerHeight - top - footerH - 24);
   }, [showSkeleton, showEmpty]);
-  const isAllSelected = data.length > 0 && selectedKeys.length === data.length;
   const selectedKeysRef = React6.useRef(selectedKeys);
   selectedKeysRef.current = selectedKeys;
   const onSelectionChangeRef = React6.useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
+  const disabledKeysRef = React6.useRef(disabledKeys);
+  disabledKeysRef.current = disabledKeys;
+  const disabledTooltipRef = React6.useRef(disabledTooltip);
+  disabledTooltipRef.current = disabledTooltip;
   const dataRef = React6.useRef(data);
   dataRef.current = data;
   const onRowClickRef = React6.useRef(onRowClick);
@@ -4732,6 +4788,8 @@ function Table(props) {
     },
     [rowKey]
   );
+  const selectableKeys = data.map((record, index) => getRowKey(record, index)).filter((key) => !disabledKeys.includes(key));
+  const isAllSelected = selectableKeys.length > 0 && selectableKeys.every((key) => selectedKeys.includes(key));
   const allColumns = React6.useMemo(() => {
     const checkboxCol = {
       key: "__checkbox__",
@@ -4746,19 +4804,24 @@ function Table(props) {
           checked: isAllSelected,
           onChange: () => {
             if (!onSelectionChangeRef.current) return;
-            const allKeys = dataRef.current.map((record, index) => getRowKey(record, index));
+            const allKeys = dataRef.current.map((record, index) => getRowKey(record, index)).filter((key) => !disabledKeysRef.current.includes(key));
             onSelectionChangeRef.current(isAllSelected ? [] : allKeys);
           }
         }
       ),
       render: (_value, record, rowIdx) => {
         const key = getRowKey(record, rowIdx);
+        const isDisabled = disabledKeysRef.current.includes(key);
+        const tooltip = disabledTooltipRef.current;
+        const tooltipContent = isDisabled && tooltip ? typeof tooltip === "function" ? tooltip(key) : tooltip : void 0;
         return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,
           {
             checked: selectedKeysRef.current.includes(key),
+            disabled: isDisabled,
+            tooltipConfig: tooltipContent ? { content: tooltipContent, position: "bottom" } : void 0,
             onChange: () => {
-              if (!onSelectionChangeRef.current) return;
+              if (!onSelectionChangeRef.current || isDisabled) return;
               const cur = selectedKeysRef.current;
               const next = cur.includes(key) ? cur.filter((k) => k !== key) : [...cur, key];
               onSelectionChangeRef.current(next);
@@ -5019,7 +5082,7 @@ function Table(props) {
           id: `${col.key}-body`,
           "data-row-cell": "true",
           "data-col-key": col.key,
-          className: `${isCheckbox ? "p-0" : "p-3"} whitespace-nowrap text-sm text-gray-900 border-r border-b border-gray-300/70 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all`,
+          className: `${isCheckbox ? "p-0" : "p-3"} whitespace-nowrap text-sm text-gray-900 border-gray-300/70 last:border-r-0 bg-inherit group-hover:bg-gray-100 transition-all ${showVerticalDivider ? "border-r" : ""} ${showHorizontalDivider ? "border-b" : ""}`,
           style: {
             width,
             minWidth: minWidth || width,
@@ -7728,7 +7791,7 @@ function PageFilter(props) {
             onChange: handleSelectChange(optionKey),
             options: option.options,
             placeholder: "\uC120\uD0DD",
-            canReset: true,
+            canReset: option.canReset ?? true,
             containerClassName: option.containerClassName ?? "w-30"
           }
         ) }, String(optionKey));
@@ -7879,16 +7942,24 @@ function easedFade(dir, opacity) {
   return `linear-gradient(${dir}, ${c(1)} 0%, ${c(0.72)} 20%, ${c(0.38)} 45%, ${c(0.1)} 70%, transparent 100%)`;
 }
 function MultiTabBar(props) {
-  const { tabs, activeTabId, onTabClick, onTabClose, onTabAdd, variant = "light", primaryColor } = props;
+  const {
+    tabs,
+    activeTabId,
+    onTabClick,
+    onTabClose,
+    onTabAdd,
+    onTabsReorder,
+    variant = "light",
+    primaryColor
+  } = props;
   const s = VARIANT_STYLES[variant];
   const scrollRef = React6.useRef(null);
   const tabRefs = React6.useRef(/* @__PURE__ */ new Map());
   const [showLeftFade, setShowLeftFade] = React6.useState(false);
   const [showRightFade, setShowRightFade] = React6.useState(false);
-  const isDragging = React6.useRef(false);
-  const hasDragged = React6.useRef(false);
-  const dragStartX = React6.useRef(0);
-  const dragScrollLeft = React6.useRef(0);
+  const [draggingId, setDraggingId] = React6.useState(null);
+  const [dropTargetId, setDropTargetId] = React6.useState(null);
+  const [dropSide, setDropSide] = React6.useState("before");
   React6.useEffect(() => {
     if (!activeTabId || !scrollRef.current) return;
     const el = tabRefs.current.get(activeTabId);
@@ -7916,23 +7987,6 @@ function MultiTabBar(props) {
     if (scrollRef.current) obs.observe(scrollRef.current);
     return () => obs.disconnect();
   }, [tabs]);
-  const handleMouseDown = (e) => {
-    if (!scrollRef.current) return;
-    isDragging.current = true;
-    hasDragged.current = false;
-    dragStartX.current = e.pageX - scrollRef.current.getBoundingClientRect().left;
-    dragScrollLeft.current = scrollRef.current.scrollLeft;
-  };
-  const handleMouseMove = (e) => {
-    if (!isDragging.current || !scrollRef.current) return;
-    const x = e.pageX - scrollRef.current.getBoundingClientRect().left;
-    const walk = x - dragStartX.current;
-    if (Math.abs(walk) > 4) hasDragged.current = true;
-    scrollRef.current.scrollLeft = dragScrollLeft.current - walk;
-  };
-  const handleStopDrag = () => {
-    isDragging.current = false;
-  };
   React6.useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -7943,6 +7997,46 @@ function MultiTabBar(props) {
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
   }, []);
+  const handleDragStart = (e, tabId) => {
+    setDraggingId(tabId);
+    e.dataTransfer.effectAllowed = "move";
+  };
+  const handleDragOver = (e, tabId) => {
+    e.preventDefault();
+    if (tabId === draggingId) return;
+    e.dataTransfer.dropEffect = "move";
+    const rect = e.currentTarget.getBoundingClientRect();
+    setDropSide(e.clientX < rect.left + rect.width / 2 ? "before" : "after");
+    setDropTargetId(tabId);
+  };
+  const handleDrop = (e, targetTabId) => {
+    e.preventDefault();
+    if (!draggingId || draggingId === targetTabId) {
+      setDraggingId(null);
+      setDropTargetId(null);
+      return;
+    }
+    if (onTabsReorder) {
+      const fromIdx = tabs.findIndex((t) => t.id === draggingId);
+      if (fromIdx !== -1) {
+        const newTabs = [...tabs];
+        const moved = newTabs.splice(fromIdx, 1)[0];
+        let insertIdx = newTabs.findIndex((t) => t.id === targetTabId);
+        if (insertIdx !== -1) {
+          if (dropSide === "after") insertIdx += 1;
+          newTabs.splice(insertIdx, 0, moved);
+          onTabsReorder(newTabs);
+        }
+      }
+    }
+    setDraggingId(null);
+    setDropTargetId(null);
+  };
+  const handleDragEnd = () => {
+    setDraggingId(null);
+    setDropTargetId(null);
+  };
+  const showPlus = !!onTabAdd;
   if (tabs.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 w-full overflow-hidden ${s.container}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-stretch", children: [
     showLeftFade && /* @__PURE__ */ jsxRuntime.jsx(
@@ -7957,7 +8051,7 @@ function MultiTabBar(props) {
       {
         className: "absolute top-0 bottom-0 w-10 pointer-events-none z-10",
         style: {
-          right: PLUS_BTN_WIDTH,
+          right: showPlus ? PLUS_BTN_WIDTH : 0,
           background: easedFade("to left", s.fadeOpacity)
         }
       }
@@ -7969,12 +8063,10 @@ function MultiTabBar(props) {
         className: `flex-1 min-w-0 flex items-end gap-0.5 ${s.scrollPadding} overflow-x-auto [&::-webkit-scrollbar]:hidden`,
         style: { scrollbarWidth: "none" },
         onScroll: updateFades,
-        onMouseDown: handleMouseDown,
-        onMouseMove: handleMouseMove,
-        onMouseUp: handleStopDrag,
-        onMouseLeave: handleStopDrag,
         children: tabs.map((tab) => {
           const isActive = tab.id === activeTabId;
+          const isDraggingThis = tab.id === draggingId;
+          const isDropTarget = dropTargetId === tab.id;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -7982,15 +8074,23 @@ function MultiTabBar(props) {
                 if (el) tabRefs.current.set(tab.id, el);
                 else tabRefs.current.delete(tab.id);
               },
+              draggable: !!onTabsReorder,
               onClick: () => {
-                if (hasDragged.current) return;
                 if (!isActive) onTabClick(tab.id);
               },
+              onDragStart: (e) => handleDragStart(e, tab.id),
+              onDragOver: (e) => handleDragOver(e, tab.id),
+              onDrop: (e) => handleDrop(e, tab.id),
+              onDragEnd: handleDragEnd,
               className: `
                   group relative flex items-center gap-1.5 ${s.tabPx} ${s.tabPy} flex-shrink-0
-                  ${s.rounded} border border-b-0 cursor-pointer select-none
+                  ${s.rounded} border border-b-0 select-none
                   transition-colors duration-100
                   ${isActive ? s.activeTab : s.inactiveTab}
+                  ${onTabsReorder ? "cursor-grab" : "cursor-pointer"}
+                  ${isDraggingThis ? "opacity-40" : ""}
+                  ${isDropTarget && dropSide === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""}
+                  ${isDropTarget && dropSide === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}
                 `,
               children: [
                 isActive && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8030,7 +8130,7 @@ function MultiTabBar(props) {
         })
       }
     ),
-    onTabAdd && /* @__PURE__ */ jsxRuntime.jsx(
+    showPlus && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: `flex-shrink-0 flex items-center justify-center ${s.plusBtnArea}`,
@@ -9027,6 +9127,7 @@ function Sidebar(props) {
     footer,
     className,
     showCollapseButton = false,
+    collapseButtonPlacement = "right",
     variant = "light",
     primaryColor
   } = props;
@@ -9113,7 +9214,7 @@ function Sidebar(props) {
           "button",
           {
             onClick: () => setIsCollapsed((prev) => !prev),
-            className: `absolute top-4 right-2 z-20 w-6.5 h-6.5 rounded-full flex items-center justify-center transition-colors cursor-pointer ${s.collapseBtn}`,
+            className: `absolute top-4 z-20 w-6.5 h-6.5 rounded-full flex items-center justify-center transition-colors cursor-pointer ${s.collapseBtn} ${collapseButtonPlacement === "left" ? "left-2" : "right-2"}`,
             children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRightClose, { size: 18, color: primaryColor ?? s.collapseIcon }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 18, color: primaryColor ?? s.collapseIcon })
           }
         ),
@@ -9533,7 +9634,9 @@ function DetailModalFrame(props) {
     renderExtraContent,
     renderFooterExtra,
     onDirtyChange,
-    headerType
+    headerType,
+    headerIconVariant,
+    headerIconSize
   } = props;
   const controller = useDetailController({ mode, onModeChange });
   React6.useEffect(() => {
@@ -9577,7 +9680,9 @@ function DetailModalFrame(props) {
       {
         type: isEditMode ? "edit" : headerType,
         title,
-        onClose: handleClose
+        onClose: handleClose,
+        variant: headerIconVariant,
+        size: headerIconSize
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(ModalHeader, { className: "flex flex-row items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-semibold text-gray-900", children: title }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(ModalBody, { className: "flex-1 min-h-0 overflow-hidden p-0 flex flex-col", children: [