@farmzone/fz-react-ui 1.1.4 → 1.1.6

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 };
@@ -7927,7 +7975,10 @@ function PageFilter(props) {
             onKeyDown: (e) => {
               if (e.key === "Enter") handleSubmit();
             },
-            leftIcon: option.leftIcon !== false ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 16 }) : void 0
+            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));
       case "select":
@@ -7939,7 +7990,8 @@ function PageFilter(props) {
             options: option.options,
             placeholder: option.placeholder || "\uC120\uD0DD",
             canReset: option.canReset ?? true,
-            containerClassName: option.containerClassName ?? "w-30"
+            containerClassName: option.containerClassName ?? "w-30",
+            className: option.className
           }
         ) }, String(optionKey));
       case "radio":
@@ -7950,7 +8002,8 @@ function PageFilter(props) {
             value: currentValue,
             onChange: handleRadioChange(optionKey, option.autoSubmit),
             options: option.options,
-            direction: "horizontal"
+            direction: "horizontal",
+            containerClassName: option.className
           }
         ) }, String(optionKey));
       case "date":
@@ -7960,7 +8013,8 @@ function PageFilter(props) {
             value: currentValue,
             onChange: handleDateChange(optionKey),
             placeholder: option.placeholder,
-            onKeyDownEnter: handleSubmit
+            onKeyDownEnter: handleSubmit,
+            className: option.className
           }
         ) }, String(optionKey));
       case "date-range":
@@ -7970,7 +8024,8 @@ function PageFilter(props) {
             startValue: currentValue,
             endValue: String(values[option.endKey] ?? ""),
             onRangeChange: handleRangeChangeCurried(optionKey, option.endKey),
-            onKeyDownEnter: handleSubmit
+            onKeyDownEnter: handleSubmit,
+            className: option.className
           }
         ) }, String(optionKey));
       case "checkbox":
@@ -7981,7 +8036,8 @@ function PageFilter(props) {
             name: String(optionKey),
             value: currentValue,
             label: option.label,
-            onChange: handleCheckboxChange(optionKey, option.autoSubmit)
+            onChange: handleCheckboxChange(optionKey, option.autoSubmit),
+            className: option.className
           }
         ) }, String(optionKey));
       default: {