@farmzone/fz-react-ui 1.0.8 → 1.0.10

package/dist/index.cjs

@@ -3478,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-[#ededed] border-gray-200",
+    iconBg: "bg-white border border-gray-200 shadow-xs 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 {
@@ -7726,8 +7790,8 @@ function PageFilter(props) {
             value: currentValue,
             onChange: handleSelectChange(optionKey),
             options: option.options,
-            placeholder: "\uC120\uD0DD",
-            canReset: true,
+            placeholder: option.placeholder || "\uC120\uD0DD",
+            canReset: option.canReset ?? true,
             containerClassName: option.containerClassName ?? "w-30"
           }
         ) }, String(optionKey));
@@ -7878,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);
@@ -7915,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;
@@ -7942,6 +7997,64 @@ 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();
+    e.stopPropagation();
+    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 handleContainerDrop = (e) => {
+    e.preventDefault();
+    if (!draggingId || !onTabsReorder) {
+      setDraggingId(null);
+      setDropTargetId(null);
+      return;
+    }
+    const fromIdx = tabs.findIndex((t) => t.id === draggingId);
+    if (fromIdx !== -1 && fromIdx < tabs.length - 1) {
+      const newTabs = [...tabs];
+      const moved = newTabs.splice(fromIdx, 1)[0];
+      newTabs.push(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(
@@ -7956,7 +8069,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)
         }
       }
@@ -7968,12 +8081,14 @@ 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,
+        onDragOver: (e) => {
+          if (draggingId) e.preventDefault();
+        },
+        onDrop: handleContainerDrop,
         children: tabs.map((tab) => {
           const isActive = tab.id === activeTabId;
+          const isDraggingThis = tab.id === draggingId;
+          const isDropTarget = dropTargetId === tab.id;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -7981,15 +8096,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(
@@ -8029,7 +8152,7 @@ function MultiTabBar(props) {
         })
       }
     ),
-    onTabAdd && /* @__PURE__ */ jsxRuntime.jsx(
+    showPlus && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: `flex-shrink-0 flex items-center justify-center ${s.plusBtnArea}`,
@@ -9026,6 +9149,7 @@ function Sidebar(props) {
     footer,
     className,
     showCollapseButton = false,
+    collapseButtonPlacement = "right",
     variant = "light",
     primaryColor
   } = props;
@@ -9112,7 +9236,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 })
           }
         ),
@@ -9532,7 +9656,9 @@ function DetailModalFrame(props) {
     renderExtraContent,
     renderFooterExtra,
     onDirtyChange,
-    headerType
+    headerType,
+    headerIconVariant,
+    headerIconSize
   } = props;
   const controller = useDetailController({ mode, onModeChange });
   React6.useEffect(() => {
@@ -9576,7 +9702,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: [