@farmzone/fz-react-ui 1.0.8 → 1.0.10

package/dist/index.d.cts

@@ -557,15 +557,23 @@ interface ModalHeaderProps {
     ref?: Ref<HTMLDivElement>;
     children: ReactNode;
     className?: string;
+    style?: CSSProperties;
 }
 declare function ModalHeader(props: ModalHeaderProps): react.JSX.Element;
 
 type ModalType = "detail" | "create" | "edit" | "search" | "info" | "delete" | "warning";
+type ModalIconHeaderVariant = "default" | "system-light" | "system-dark";
+type ModalIconHeaderSize = "sm" | "md";
 interface ModalIconHeaderProps {
     type: ModalType;
     title: string;
     description?: string;
     onClose: () => void;
+    action?: ReactNode;
+    variant?: ModalIconHeaderVariant;
+    size?: ModalIconHeaderSize;
+    /** default / system-light: 그라디언트·아이콘 색을 primaryColor 기준으로 자동 적용 */
+    primaryColor?: string;
     className?: string;
 }
 declare function ModalIconHeader(props: ModalIconHeaderProps): react.JSX.Element;
@@ -961,6 +969,7 @@ type SelectOption<P> = BaseOption<P> & {
     options: Array<SelectableOption>;
     placeholder?: string;
     containerClassName?: string;
+    canReset?: boolean;
 };
 type RadioOption<P> = BaseOption<P> & {
     type: "radio";
@@ -1049,6 +1058,7 @@ interface MultiTabBarProps {
     onTabClick: (tabId: string) => void;
     onTabClose: (tabId: string) => void;
     onTabAdd?: () => void;
+    onTabsReorder?: (tabs: Array<MultiTab>) => void;
     variant?: MultiTabVariant;
     primaryColor?: string;
 }
@@ -1148,6 +1158,7 @@ interface SidebarProps {
     footer?: ReactNode;
     className?: string;
     showCollapseButton?: boolean;
+    collapseButtonPlacement?: "left" | "right";
     onClose?: () => void;
     variant?: SidebarVariant;
     primaryColor?: string;
@@ -1245,6 +1256,10 @@ interface DetailModalFrameProps<T, S extends z.ZodTypeAny = z.ZodTypeAny> {
     onDirtyChange?: (isDirty: boolean) => void;
     /** 제공 시 ModalIconHeader로 렌더링 (read 모드: 이 type, edit 모드: "edit" 자동 적용) */
     headerType?: ModalType;
+    /** ModalIconHeader 스타일 변형 */
+    headerIconVariant?: ModalIconHeaderVariant;
+    /** ModalIconHeader 사이즈 */
+    headerIconSize?: ModalIconHeaderSize;
 }
 declare function DetailModalFrame<T, S extends z.ZodTypeAny = z.ZodTypeAny>(props: DetailModalFrameProps<T, S>): react.JSX.Element;
 

package/dist/index.d.ts

@@ -557,15 +557,23 @@ interface ModalHeaderProps {
     ref?: Ref<HTMLDivElement>;
     children: ReactNode;
     className?: string;
+    style?: CSSProperties;
 }
 declare function ModalHeader(props: ModalHeaderProps): react.JSX.Element;
 
 type ModalType = "detail" | "create" | "edit" | "search" | "info" | "delete" | "warning";
+type ModalIconHeaderVariant = "default" | "system-light" | "system-dark";
+type ModalIconHeaderSize = "sm" | "md";
 interface ModalIconHeaderProps {
     type: ModalType;
     title: string;
     description?: string;
     onClose: () => void;
+    action?: ReactNode;
+    variant?: ModalIconHeaderVariant;
+    size?: ModalIconHeaderSize;
+    /** default / system-light: 그라디언트·아이콘 색을 primaryColor 기준으로 자동 적용 */
+    primaryColor?: string;
     className?: string;
 }
 declare function ModalIconHeader(props: ModalIconHeaderProps): react.JSX.Element;
@@ -961,6 +969,7 @@ type SelectOption<P> = BaseOption<P> & {
     options: Array<SelectableOption>;
     placeholder?: string;
     containerClassName?: string;
+    canReset?: boolean;
 };
 type RadioOption<P> = BaseOption<P> & {
     type: "radio";
@@ -1049,6 +1058,7 @@ interface MultiTabBarProps {
     onTabClick: (tabId: string) => void;
     onTabClose: (tabId: string) => void;
     onTabAdd?: () => void;
+    onTabsReorder?: (tabs: Array<MultiTab>) => void;
     variant?: MultiTabVariant;
     primaryColor?: string;
 }
@@ -1148,6 +1158,7 @@ interface SidebarProps {
     footer?: ReactNode;
     className?: string;
     showCollapseButton?: boolean;
+    collapseButtonPlacement?: "left" | "right";
     onClose?: () => void;
     variant?: SidebarVariant;
     primaryColor?: string;
@@ -1245,6 +1256,10 @@ interface DetailModalFrameProps<T, S extends z.ZodTypeAny = z.ZodTypeAny> {
     onDirtyChange?: (isDirty: boolean) => void;
     /** 제공 시 ModalIconHeader로 렌더링 (read 모드: 이 type, edit 모드: "edit" 자동 적용) */
     headerType?: ModalType;
+    /** ModalIconHeader 스타일 변형 */
+    headerIconVariant?: ModalIconHeaderVariant;
+    /** ModalIconHeader 사이즈 */
+    headerIconSize?: ModalIconHeaderSize;
 }
 declare function DetailModalFrame<T, S extends z.ZodTypeAny = z.ZodTypeAny>(props: DetailModalFrameProps<T, S>): react.JSX.Element;
 

package/dist/index.js

@@ -3444,36 +3444,100 @@ var MODAL_ICONS = {
   delete: Trash2,
   warning: 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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-5", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full shrink-0", children: /* @__PURE__ */ jsx(Icon2, { size: 20, className: "text-main" }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold text-gray-900", children: title }),
-            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mt-0.5", children: description })
-          ] })
-        ] }),
-        /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(ModalHeader, { className: cn("p-0 text-left space-y-0", v.container, className), style: containerStyle, children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", s.padding), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", s.gap), children: [
+      /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center shrink-0", s.iconBox, v.iconBg), style: iconBgStyle, children: /* @__PURE__ */ jsx(Icon2, { size: s.iconSize, className: hasColor && !isDark ? void 0 : v.iconColor, style: iconColorStyle }) }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: cn(s.titleSize, v.titleColor), children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: cn(s.descSize, v.descColor), children: description })
       ] })
-    }
-  );
+    ] }),
+    action ?? /* @__PURE__ */ 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__ */ jsx(X, { size: s.closeIconSize, className: cn("transition-colors", v.closeBtn) })
+      }
+    )
+  ] }) });
 }
 function Modal(props) {
   const {
@@ -7692,8 +7756,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));
@@ -7844,16 +7908,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 = useRef(null);
   const tabRefs = useRef(/* @__PURE__ */ new Map());
   const [showLeftFade, setShowLeftFade] = useState(false);
   const [showRightFade, setShowRightFade] = useState(false);
-  const isDragging = useRef(false);
-  const hasDragged = useRef(false);
-  const dragStartX = useRef(0);
-  const dragScrollLeft = useRef(0);
+  const [draggingId, setDraggingId] = useState(null);
+  const [dropTargetId, setDropTargetId] = useState(null);
+  const [dropSide, setDropSide] = useState("before");
   useEffect(() => {
     if (!activeTabId || !scrollRef.current) return;
     const el = tabRefs.current.get(activeTabId);
@@ -7881,23 +7953,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;
-  };
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -7908,6 +7963,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__ */ jsx("div", { className: `flex-shrink-0 w-full overflow-hidden ${s.container}`, children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-stretch", children: [
     showLeftFade && /* @__PURE__ */ jsx(
@@ -7922,7 +8035,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)
         }
       }
@@ -7934,12 +8047,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__ */ jsxs(
             "div",
             {
@@ -7947,15 +8062,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__ */ jsx(
@@ -7995,7 +8118,7 @@ function MultiTabBar(props) {
         })
       }
     ),
-    onTabAdd && /* @__PURE__ */ jsx(
+    showPlus && /* @__PURE__ */ jsx(
       "div",
       {
         className: `flex-shrink-0 flex items-center justify-center ${s.plusBtnArea}`,
@@ -8992,6 +9115,7 @@ function Sidebar(props) {
     footer,
     className,
     showCollapseButton = false,
+    collapseButtonPlacement = "right",
     variant = "light",
     primaryColor
   } = props;
@@ -9078,7 +9202,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__ */ jsx(PanelRightClose, { size: 18, color: primaryColor ?? s.collapseIcon }) : /* @__PURE__ */ jsx(PanelLeftClose, { size: 18, color: primaryColor ?? s.collapseIcon })
           }
         ),
@@ -9498,7 +9622,9 @@ function DetailModalFrame(props) {
     renderExtraContent,
     renderFooterExtra,
     onDirtyChange,
-    headerType
+    headerType,
+    headerIconVariant,
+    headerIconSize
   } = props;
   const controller = useDetailController({ mode, onModeChange });
   useEffect(() => {
@@ -9542,7 +9668,9 @@ function DetailModalFrame(props) {
       {
         type: isEditMode ? "edit" : headerType,
         title,
-        onClose: handleClose
+        onClose: handleClose,
+        variant: headerIconVariant,
+        size: headerIconSize
       }
     ) : /* @__PURE__ */ jsx(ModalHeader, { className: "flex flex-row items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-gray-900", children: title }) }),
     /* @__PURE__ */ jsxs(ModalBody, { className: "flex-1 min-h-0 overflow-hidden p-0 flex flex-col", children: [