@farmzone/fz-react-ui 1.1.5 → 1.1.7

package/dist/index.cjs

@@ -482,6 +482,8 @@ function Input2(props) {
     leftIcon,
     rightIcon,
     showPasswordToggle = true,
+    clearable = false,
+    onClear,
     onChange,
     ...rest
   } = props;
@@ -511,7 +513,16 @@ function Input2(props) {
   const shouldShowPasswordToggle = type === "password" && showPasswordToggle;
   const actualType = type === "password" && showPassword ? "text" : type;
   const handlePasswordToggle = () => setShowPassword((prev) => !prev);
-  const finalRightIcon = rightIcon || (shouldShowPasswordToggle ? /* @__PURE__ */ jsxRuntime.jsx(
+  const handleClear = () => onClear?.();
+  const shouldShowClearButton = clearable && !disabled && typeof rest.value === "string" && rest.value.length > 0;
+  const finalRightIcon = rightIcon || (shouldShowClearButton ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      onClick: handleClear,
+      className: "text-muted-foreground hover:text-foreground cursor-pointer transition-colors",
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, { className: "h-4 w-4" })
+    }
+  ) : null) || (shouldShowPasswordToggle ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       onClick: handlePasswordToggle,
@@ -977,6 +988,29 @@ function SelectScrollDownButton({
     }
   );
 }
+function SelectOptionVisual(props) {
+  const { icon, avatarUrl, avatarAlt, fallbackLabel } = props;
+  const [hasAvatarError, setHasAvatarError] = React6.useState(false);
+  const handleAvatarError = () => setHasAvatarError(true);
+  if (avatarUrl && !hasAvatarError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: avatarUrl,
+        alt: avatarAlt ?? "",
+        className: "size-5 shrink-0 rounded-full object-cover",
+        onError: handleAvatarError
+      }
+    );
+  }
+  if (avatarUrl && hasAvatarError) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-gray-200 text-[10px] font-medium text-gray-500", children: fallbackLabel?.charAt(0).toUpperCase() ?? "?" });
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-gray-500", children: icon });
+  }
+  return null;
+}
 
 // src/components/Select/config/default.ts
 var SELECT_BORDER_COLORS = {
@@ -1068,7 +1102,18 @@ function Select2(props) {
                     itemClassName,
                     option.disabled && cn("opacity-50 cursor-not-allowed text-gray-300 bg-white", disabledItemClassName)
                   ),
-                  children: option.label
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex w-full min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      SelectOptionVisual,
+                      {
+                        icon: option.icon,
+                        avatarUrl: option.avatarUrl,
+                        avatarAlt: option.avatarAlt,
+                        fallbackLabel: typeof option.label === "string" ? option.label : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: option.label })
+                  ] })
                 },
                 String(option.value)
               )) })
@@ -7884,6 +7929,9 @@ function PageFilter(props) {
   const handleInputChange = (key) => (e) => {
     onChange({ [key]: e.target.value });
   };
+  const handleInputClear = (key) => () => {
+    onChange({ [key]: "" });
+  };
   const handleSelectChange = (key, autoSubmit) => (value) => {
     onChange({ [key]: value });
     if (autoSubmit) pendingAutoSubmitRef.current = { key, value };
@@ -7928,6 +7976,8 @@ function PageFilter(props) {
               if (e.key === "Enter") handleSubmit();
             },
             leftIcon: option.leftIcon !== false ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16 }) : void 0,
+            clearable: option.canReset ?? true,
+            onClear: handleInputClear(optionKey),
             className: option.className
           }
         ) }, String(optionKey));
@@ -8023,15 +8073,15 @@ var VARIANT_STYLES = {
     inactiveText: "font-normal",
     indicator: "bg-blue-500",
     closeBtn: "rounded hover:bg-gray-300/60",
-    closeBtnWH: "w-3.5 h-3.5",
-    closeBtnSize: 10,
+    closeBtnWH: "w-4 h-4",
+    closeBtnSize: 12,
     plusBtnArea: "border-l border-gray-100 bg-white",
     plusBtn: "text-gray-400 hover:text-gray-600 hover:bg-gray-100",
     fadeOpacity: 0.12,
-    tabPy: "py-1.5",
-    tabPx: "px-3",
-    tabTextSize: "text-xs",
-    scrollPadding: "px-3 pt-1.5",
+    tabHeight: "h-[38px]",
+    tabPx: "px-4",
+    tabTextSize: "text-sm",
+    scrollPadding: "px-3 pt-2",
     rounded: "rounded-t-md"
   },
   dark: {
@@ -8042,15 +8092,15 @@ var VARIANT_STYLES = {
     inactiveText: "font-normal",
     indicator: "bg-indigo-400",
     closeBtn: "rounded hover:bg-gray-600/60",
-    closeBtnWH: "w-3.5 h-3.5",
-    closeBtnSize: 10,
+    closeBtnWH: "w-4 h-4",
+    closeBtnSize: 12,
     plusBtnArea: "border-l border-gray-700 bg-gray-900",
     plusBtn: "text-gray-500 hover:text-gray-300 hover:bg-gray-700",
     fadeOpacity: 0.4,
-    tabPy: "py-1.5",
-    tabPx: "px-3",
-    tabTextSize: "text-xs",
-    scrollPadding: "px-3 pt-1.5",
+    tabHeight: "h-[38px]",
+    tabPx: "px-4",
+    tabTextSize: "text-sm",
+    scrollPadding: "px-3 pt-2",
     rounded: "rounded-t-md"
   },
   "system-light": {
@@ -8066,7 +8116,7 @@ var VARIANT_STYLES = {
     plusBtnArea: "border-l border-gray-300 bg-gray-200",
     plusBtn: "text-slate-400 hover:text-slate-600 hover:bg-gray-300",
     fadeOpacity: 0.15,
-    tabPy: "py-2.5",
+    tabHeight: "h-[38px]",
     tabPx: "px-5",
     tabTextSize: "text-sm",
     scrollPadding: "px-3 pt-2",
@@ -8085,7 +8135,7 @@ var VARIANT_STYLES = {
     plusBtnArea: "border-l border-slate-700 bg-slate-900",
     plusBtn: "text-slate-400 hover:text-slate-200 hover:bg-slate-700",
     fadeOpacity: 0.45,
-    tabPy: "py-2.5",
+    tabHeight: "h-[38px]",
     tabPx: "px-5",
     tabTextSize: "text-sm",
     scrollPadding: "px-4 pt-2",
@@ -8097,6 +8147,65 @@ function easedFade(dir, opacity) {
   const c = (t) => `rgba(0,0,0,${(opacity * t).toFixed(3)})`;
   return `linear-gradient(${dir}, ${c(1)} 0%, ${c(0.72)} 20%, ${c(0.38)} 45%, ${c(0.1)} 70%, transparent 100%)`;
 }
+var MENU_ITEM_CLASSNAME = "flex w-full cursor-pointer items-center gap-2 rounded-md border-none bg-transparent px-2 py-1.5 text-left text-[13px] whitespace-nowrap text-gray-900 hover:bg-gray-100";
+function TabIconMenu(props) {
+  const { icon, items, label } = props;
+  const [open, setOpen] = React6.useState(false);
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4.5 w-4.5 items-center justify-center", children: icon });
+  }
+  const showMore = (base) => open ? "flex" : base;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SimplePopover,
+    {
+      open,
+      onOpenChange: setOpen,
+      align: "start",
+      contentClassName: "w-auto min-w-28 p-1",
+      trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": `${label} \uBA54\uB274`,
+          className: "group/tab-menu relative flex h-4.5 w-4.5 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0",
+          children: [
+            icon != null && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `flex items-center justify-center ${open ? "invisible" : "group-hover/tab-menu:invisible"}`,
+                children: icon
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `absolute inset-0 items-center justify-center rounded bg-gray-200 text-gray-700 ${icon != null ? showMore("hidden group-hover/tab-menu:flex") : "flex"}`,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 14 })
+              }
+            )
+          ]
+        }
+      ),
+      children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen(false);
+            item.onSelect();
+          },
+          className: MENU_ITEM_CLASSNAME,
+          style: item.selected ? { backgroundColor: "#F3F4F6" } : void 0,
+          children: [
+            item.icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center text-gray-500", children: item.icon }),
+            item.label
+          ]
+        },
+        item.key
+      ))
+    }
+  );
+}
 function clusterTabs(tabs, getTabGroup) {
   const clusters = [];
   const clusterByGroupKey = /* @__PURE__ */ new Map();
@@ -8164,8 +8273,13 @@ function MultiTabPill(props) {
     draggable = false,
     onPointerDown,
     dropIndicator = null,
-    isDraggingThis = false
+    isDraggingThis = false,
+    icon,
+    menuItems,
+    groupColor
   } = props;
+  const hasPrefix = icon != null || (menuItems?.length ?? 0) > 0;
+  const outlinedByGroup = isActive && !!groupColor;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -8175,7 +8289,7 @@ function MultiTabPill(props) {
         if (!isActive) onClick();
       },
       className: `
-        group relative flex items-center gap-1.5 ${s.tabPx} ${s.tabPy} flex-shrink-0
+        group relative flex items-center gap-1.5 ${s.tabPx} ${s.tabHeight} flex-shrink-0
         ${s.rounded} border border-b-0 select-none
         transition-colors duration-100
         ${isActive ? s.activeTab : s.inactiveTab}
@@ -8183,7 +8297,9 @@ function MultiTabPill(props) {
         ${isDraggingThis ? "opacity-40" : ""}
         ${dropIndicator === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""}
         ${dropIndicator === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}
+        ${outlinedByGroup ? "z-[2]" : ""}
       `,
+      style: outlinedByGroup ? { borderColor: groupColor } : void 0,
       children: [
         isActive && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -8192,6 +8308,15 @@ function MultiTabPill(props) {
             style: accentColor ? { backgroundColor: accentColor } : void 0
           }
         ),
+        hasPrefix && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "flex flex-shrink-0 items-center",
+            onPointerDown: (e) => e.stopPropagation(),
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(TabIconMenu, { icon, items: menuItems ?? [], label: tab.label })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${s.tabTextSize} max-w-35 truncate leading-none ${isActive ? s.activeText : s.inactiveText}`, children: tab.label }),
         showClose && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -8223,7 +8348,9 @@ function MultiTabBar(props) {
     onTabsReorder,
     variant = "light",
     primaryColor,
-    getTabGroup
+    getTabGroup,
+    getTabIcon,
+    getTabMenuItems
   } = props;
   const s = VARIANT_STYLES[variant];
   const scrollRef = React6.useRef(null);
@@ -8486,9 +8613,9 @@ function MultiTabBar(props) {
   const draggingGroupColor = draggingGroupKey ? groupColors.get(draggingGroupKey) : void 0;
   const ghost = draggingGroupKey && draggingGroupCluster?.group ? {
     label: draggingGroupCluster.group.label,
-    bg: (draggingGroupColor ?? TAB_PALETTE[0]).bg,
-    border: (draggingGroupColor ?? TAB_PALETTE[0]).border,
-    color: (draggingGroupColor ?? TAB_PALETTE[0]).base
+    bg: (draggingGroupColor ?? TAB_PALETTE[0]).base,
+    border: (draggingGroupColor ?? TAB_PALETTE[0]).base,
+    color: "white"
   } : draggingTab ? { label: draggingTab.label, bg: "white", border: draggingColor ?? "#e5e7eb", color: "#111827" } : null;
   if (tabs.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -8539,7 +8666,9 @@ function MultiTabBar(props) {
                     draggable: reorderEnabled,
                     isDraggingThis: tab.id === draggingId,
                     dropIndicator: isDropTarget ? dropSide : isGroupDropTarget2 ? groupDropSide : null,
-                    onPointerDown: (e) => handlePointerDown(e, tab.id)
+                    onPointerDown: (e) => handlePointerDown(e, tab.id),
+                    icon: getTabIcon?.(tab),
+                    menuItems: getTabMenuItems?.(tab)
                   },
                   tab.id
                 );
@@ -8548,76 +8677,76 @@ function MultiTabBar(props) {
             const { key, label } = cluster.group;
             const color = groupColors.get(key) ?? TAB_PALETTE[0];
             const collapsed = collapsedGroups.has(key);
-            const groupHasActiveTab = cluster.tabs.some((t) => t.id === activeTabId);
             const isGroupDropTarget = groupDropTargetKey === `group:${key}`;
             const isDraggingThisGroup = draggingGroupKey === key;
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 ref: (el) => registerGroupRef(key, el),
-                className: "flex shrink-0 flex-col items-stretch",
+                className: `relative flex shrink-0 items-end gap-0.5 ${isDraggingThisGroup ? "opacity-40" : ""} ${isGroupDropTarget && groupDropSide === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""} ${isGroupDropTarget && groupDropSide === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}`,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "button",
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex ${s.tabHeight} shrink-0 items-center px-1`, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        if (suppressClickRef.current) return;
+                        toggleGroupCollapsed(key);
+                      },
+                      onPointerDown: reorderEnabled ? (e) => handleGroupPointerDown(e, key) : void 0,
+                      "aria-expanded": !collapsed,
+                      title: collapsed ? "\uD558\uC704 \uD0ED \uD3BC\uCE58\uAE30" : "\uD558\uC704 \uD0ED \uC811\uAE30",
+                      className: `flex h-6.5 items-center gap-1 rounded-lg px-2.5 text-sm font-semibold whitespace-nowrap text-white select-none ${reorderEnabled ? isDraggingThisGroup ? "cursor-grabbing" : "cursor-grab" : "cursor-pointer"}`,
+                      style: { backgroundColor: color.base },
+                      children: [
+                        collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14 }),
+                        label,
+                        canClose && /* @__PURE__ */ jsxRuntime.jsx(
+                          lucideReact.X,
+                          {
+                            size: 14,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              cluster.tabs.forEach((t) => onTabClose(t.id));
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  !collapsed && cluster.tabs.map((tab) => {
+                    const isDropTarget = dropTargetId === tab.id;
+                    const isTabGroupDropTarget = groupDropTargetKey === `tab:${tab.id}`;
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      MultiTabPill,
                       {
-                        type: "button",
+                        tab,
+                        isActive: tab.id === activeTabId,
+                        showClose: canClose,
+                        accentColor: color.base,
+                        style: s,
                         onClick: () => {
                           if (suppressClickRef.current) return;
-                          toggleGroupCollapsed(key);
-                        },
-                        onPointerDown: reorderEnabled ? (e) => handleGroupPointerDown(e, key) : void 0,
-                        "aria-expanded": !collapsed,
-                        title: collapsed ? "\uD558\uC704 \uD0ED \uD3BC\uCE58\uAE30" : "\uD558\uC704 \uD0ED \uC811\uAE30",
-                        className: `flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs font-bold whitespace-nowrap select-none ${reorderEnabled ? isDraggingThisGroup ? "cursor-grabbing" : "cursor-grab" : "cursor-pointer"} ${isDraggingThisGroup ? "opacity-40" : ""} ${isGroupDropTarget && groupDropSide === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""} ${isGroupDropTarget && groupDropSide === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}`,
-                        style: { backgroundColor: color.bg, borderColor: color.border, color: color.base },
-                        children: [
-                          collapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 12 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12 }),
-                          label,
-                          canClose && /* @__PURE__ */ jsxRuntime.jsx(
-                            lucideReact.X,
-                            {
-                              size: 12,
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                cluster.tabs.forEach((t) => onTabClose(t.id));
-                              }
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    !collapsed && cluster.tabs.map((tab) => {
-                      const isDropTarget = dropTargetId === tab.id;
-                      const isTabGroupDropTarget = groupDropTargetKey === `tab:${tab.id}`;
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        MultiTabPill,
-                        {
-                          tab,
-                          isActive: tab.id === activeTabId,
-                          showClose: canClose,
-                          accentColor: color.base,
-                          style: s,
-                          onClick: () => {
-                            if (suppressClickRef.current) return;
-                            onTabClick(tab.id);
-                          },
-                          onClose: () => onTabClose(tab.id),
-                          registerRef: registerTabRef,
-                          draggable: reorderEnabled,
-                          isDraggingThis: tab.id === draggingId,
-                          dropIndicator: isDropTarget ? dropSide : isTabGroupDropTarget ? groupDropSide : null,
-                          onPointerDown: (e) => handlePointerDown(e, tab.id)
+                          onTabClick(tab.id);
                         },
-                        tab.id
-                      );
-                    })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                        onClose: () => onTabClose(tab.id),
+                        registerRef: registerTabRef,
+                        draggable: reorderEnabled,
+                        isDraggingThis: tab.id === draggingId,
+                        dropIndicator: isDropTarget ? dropSide : isTabGroupDropTarget ? groupDropSide : null,
+                        onPointerDown: (e) => handlePointerDown(e, tab.id),
+                        icon: getTabIcon?.(tab),
+                        menuItems: getTabMenuItems?.(tab),
+                        groupColor: color.base
+                      },
+                      tab.id
+                    );
+                  }),
+                  !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: "mt-1 h-0.75 rounded-full",
-                      style: { backgroundColor: color.base, opacity: groupHasActiveTab ? 1 : 0.35 }
+                      className: "pointer-events-none absolute right-0 bottom-0 left-1 z-[1] h-0.5 rounded-l-full",
+                      style: { backgroundColor: color.base }
                     }
                   )
                 ]
@@ -8643,7 +8772,9 @@ function MultiTabBar(props) {
                 draggable: reorderEnabled,
                 isDraggingThis: tab.id === draggingId,
                 dropIndicator: isDropTarget ? dropSide : null,
-                onPointerDown: (e) => handlePointerDown(e, tab.id)
+                onPointerDown: (e) => handlePointerDown(e, tab.id),
+                icon: getTabIcon?.(tab),
+                menuItems: getTabMenuItems?.(tab)
               },
               tab.id
             );
@@ -8671,7 +8802,7 @@ function MultiTabBar(props) {
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "pointer-events-none fixed z-50 flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-bold whitespace-nowrap shadow-lg",
+          className: "pointer-events-none fixed z-50 flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-bold whitespace-nowrap shadow-lg",
           style: {
             left: dragPos.x + 12,
             top: dragPos.y + 12,