@expcat/tigercat-react 0.3.0 → 0.3.69

package/dist/{chunk-JW64IJP2.js → chunk-XWRJVNB6.js}

@@ -35,9 +35,11 @@ var Form = React.forwardRef(
     const [errors, setErrors] = React.useState([]);
     const [formValues, setFormValues] = React.useState(model);
     const fieldRulesRef = React__default.default.useRef({});
+    const formValuesRef = React__default.default.useRef(model);
     React__default.default.useEffect(() => {
       setFormValues(model);
     }, [model]);
+    formValuesRef.current = model;
     const registerFieldRules = React.useCallback(
       (fieldName, nextRules) => {
         if (!fieldName) {
@@ -57,15 +59,36 @@ var Form = React.forwardRef(
       const merged = { ...fromForm, ...fromItems };
       return Object.keys(merged).length > 0 ? merged : void 0;
     }, [rules]);
+    const resolveFieldRules = React.useCallback(
+      (fieldName, rulesOverride) => {
+        return rulesOverride ?? fieldRulesRef.current[fieldName] ?? rules?.[fieldName];
+      },
+      [rules]
+    );
+    const runFieldValidation = React.useCallback(
+      async (fieldName, rulesOverride, trigger) => {
+        const fieldRules = resolveFieldRules(fieldName, rulesOverride);
+        if (!fieldRules) {
+          return null;
+        }
+        const currentValues = formValuesRef.current;
+        const value = tigercatCore.getValueByPath(currentValues, fieldName);
+        return tigercatCore.validateField(fieldName, value, fieldRules, currentValues, trigger);
+      },
+      [resolveFieldRules]
+    );
     const validateField = React.useCallback(
       async (fieldName, rulesOverride, trigger) => {
-        const fieldRules = rulesOverride ?? fieldRulesRef.current[fieldName] ?? rules?.[fieldName];
+        const fieldRules = resolveFieldRules(fieldName, rulesOverride);
         if (!fieldRules) {
           return;
         }
-        const value = tigercatCore.getValueByPath(formValues, fieldName);
-        const error = await tigercatCore.validateField(fieldName, value, fieldRules, formValues, trigger);
+        const error = await runFieldValidation(fieldName, rulesOverride, trigger);
         setErrors((prevErrors) => {
+          const existing = prevErrors.find((e) => e.field === fieldName);
+          const existingMessage = existing?.message ?? null;
+          if (!error && !existingMessage) return prevErrors;
+          if (error && error === existingMessage) return prevErrors;
           const filtered = prevErrors.filter((e) => e.field !== fieldName);
           if (error) {
             return [...filtered, { field: fieldName, message: error }];
@@ -74,18 +97,49 @@ var Form = React.forwardRef(
         });
         onValidate?.(fieldName, !error, error);
       },
-      [rules, formValues, onValidate]
+      [resolveFieldRules, runFieldValidation, onValidate]
     );
-    const validate = React.useCallback(async () => {
+    const runValidation = React.useCallback(async () => {
       const effectiveRules = getEffectiveRules();
       if (!effectiveRules) {
         setErrors([]);
-        return true;
+        return { valid: true, errors: [] };
       }
-      const result = await tigercatCore.validateForm(formValues, effectiveRules);
+      const result = await tigercatCore.validateForm(formValuesRef.current, effectiveRules);
       setErrors(result.errors);
+      return result;
+    }, [getEffectiveRules]);
+    const validate = React.useCallback(async () => {
+      const result = await runValidation();
       return result.valid;
-    }, [getEffectiveRules, formValues]);
+    }, [runValidation]);
+    const validateFields = React.useCallback(
+      async (fieldNames) => {
+        if (!fieldNames || fieldNames.length === 0) {
+          return true;
+        }
+        const nextErrors = [];
+        const fieldSet = new Set(fieldNames);
+        for (const fieldName of fieldNames) {
+          const fieldRules = resolveFieldRules(fieldName);
+          if (!fieldRules) {
+            onValidate?.(fieldName, true, null);
+            continue;
+          }
+          const error = await runFieldValidation(fieldName);
+          if (error) {
+            nextErrors.push({ field: fieldName, message: error });
+          }
+          onValidate?.(fieldName, !error, error);
+        }
+        setErrors((prevErrors) => {
+          const filtered = prevErrors.filter((entry) => !fieldSet.has(entry.field));
+          return [...filtered, ...nextErrors];
+        });
+        return nextErrors.length === 0;
+      },
+      [resolveFieldRules, runFieldValidation, onValidate]
+    );
     const clearValidate = React.useCallback((fieldNames) => {
       if (!fieldNames) {
         setErrors([]);
@@ -135,31 +189,21 @@ var Form = React.forwardRef(
     const handleSubmit = React.useCallback(
       async (event) => {
         event.preventDefault();
-        const effectiveRules = getEffectiveRules();
-        if (!effectiveRules) {
-          setErrors([]);
-          onSubmit?.({ valid: true, values: formValues, errors: [] });
-          return;
-        }
-        const result = await tigercatCore.validateForm(formValues, effectiveRules);
-        setErrors(result.errors);
-        onSubmit?.({
-          valid: result.valid,
-          values: formValues,
-          errors: result.errors
-        });
+        const result = await runValidation();
+        onSubmit?.({ ...result, values: formValuesRef.current });
       },
-      [getEffectiveRules, formValues, onSubmit]
+      [runValidation, onSubmit]
     );
     React.useImperativeHandle(
       ref,
       () => ({
         validate,
+        validateFields,
         validateField,
         clearValidate,
         resetFields
       }),
-      [validate, validateField, clearValidate, resetFields]
+      [validate, validateFields, validateField, clearValidate, resetFields]
     );
     const contextValue = React.useMemo(
       () => ({

package/dist/{chunk-HDDBBZQH.js → chunk-YV6Y7C43.js}

@@ -43,39 +43,26 @@ var Tabs = ({
   const tabNavListClasses = React.useMemo(() => {
     return tigercatCore.getTabNavListClasses(tabPosition, centered);
   }, [tabPosition, centered]);
-  const tabContentClasses = React.useMemo(() => {
-    return tigercatCore.tabContentBaseClasses;
-  }, []);
   const { tabItems, tabPanes, firstTabKey } = React.useMemo(() => {
     const items = [];
     const panes = [];
     let firstKey;
-    const childrenArray = [];
     React__default.default.Children.forEach(children, (child) => {
-      if (React__default.default.isValidElement(child) && child.type === TabPane) {
-        childrenArray.push(child);
-      }
-    });
-    const resolvedFirstKey = childrenArray[0]?.props.tabKey;
-    if (resolvedFirstKey !== void 0) {
-      firstKey = resolvedFirstKey;
-    }
-    const resolvedActiveKey = controlledActiveKey !== void 0 ? controlledActiveKey : defaultActiveKey !== void 0 ? defaultActiveKey : firstKey;
-    childrenArray.forEach((child) => {
-      if (React__default.default.isValidElement(child) && child.type === TabPane) {
-        const key = child.props.tabKey;
-        const tabId = `${idBase}-tab-${String(key)}`;
-        const panelId = `${idBase}-panel-${String(key)}`;
-        items.push(
-          React__default.default.cloneElement(child, {
-            renderMode: "tab",
-            tabId,
-            panelId,
-            tabIndex: key === resolvedActiveKey ? 0 : -1
-          })
-        );
-        panes.push(React__default.default.cloneElement(child, { renderMode: "pane", tabId, panelId }));
-      }
+      if (!React__default.default.isValidElement(child) || child.type !== TabPane) return;
+      const key = child.props.tabKey;
+      if (firstKey === void 0) firstKey = key;
+      const resolvedActiveKey = controlledActiveKey ?? defaultActiveKey ?? firstKey;
+      const tabId = `${idBase}-tab-${String(key)}`;
+      const panelId = `${idBase}-panel-${String(key)}`;
+      items.push(
+        React__default.default.cloneElement(child, {
+          renderMode: "tab",
+          tabId,
+          panelId,
+          tabIndex: key === resolvedActiveKey ? 0 : -1
+        })
+      );
+      panes.push(React__default.default.cloneElement(child, { renderMode: "pane", tabId, panelId }));
     });
     return { tabItems: items, tabPanes: panes, firstTabKey: firstKey };
   }, [children, controlledActiveKey, defaultActiveKey, idBase]);
@@ -127,38 +114,35 @@ var Tabs = ({
       handleTabClose
     ]
   );
-  const tabNavContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabNavClasses, role: "tablist", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tabNavListClasses, children: [
-    tabItems,
-    type === "editable-card" && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: tigercatCore.tabAddButtonClasses,
-        onClick: handleTabAdd,
-        "aria-label": "Add tab",
-        children: "+"
-      }
-    )
-  ] }) });
-  const tabContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: tabContentClasses, children: tabPanes });
-  let content;
-  if (tabPosition === "left" || tabPosition === "right") {
-    content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      tabNavContent,
-      tabContent
-    ] });
-  } else if (tabPosition === "bottom") {
-    content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      tabContent,
-      tabNavContent
-    ] });
-  } else {
-    content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      tabNavContent,
-      tabContent
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClasses, style, children: content }) });
+  const tabNavContent = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: tabNavClasses,
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tabNavListClasses, children: [
+        tabItems,
+        type === "editable-card" && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: tigercatCore.tabAddButtonClasses,
+            onClick: handleTabAdd,
+            "aria-label": "Add tab",
+            children: "+"
+          }
+        )
+      ] })
+    }
+  );
+  const tabContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.tabContentBaseClasses, children: tabPanes });
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClasses, style, children: tabPosition === "bottom" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    tabContent,
+    tabNavContent
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    tabNavContent,
+    tabContent
+  ] }) }) });
 };
 var TabPane = ({
   tabKey,
@@ -185,7 +169,7 @@ var TabPane = ({
     return closable !== void 0 ? closable : tabsContext.closable && tabsContext.type === "editable-card";
   }, [closable, tabsContext.closable, tabsContext.type]);
   const tabItemClasses = React.useMemo(() => {
-    return tigercatCore.classNames(tigercatCore.getTabItemClasses(isActive, disabled, tabsContext.type, tabsContext.size));
+    return tigercatCore.getTabItemClasses(isActive, disabled, tabsContext.type, tabsContext.size);
   }, [isActive, disabled, tabsContext.type, tabsContext.size]);
   const tabPaneClasses = React.useMemo(() => {
     return tigercatCore.classNames(tigercatCore.getTabPaneClasses(isActive), className);
@@ -286,9 +270,9 @@ var TabPane = ({
               children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: tigercatCore.closeIconViewBox, children: /* @__PURE__ */ jsxRuntime.jsx(
                 "path",
                 {
-                  strokeLinecap: tigercatCore.closeIconPathStrokeLinecap,
-                  strokeLinejoin: tigercatCore.closeIconPathStrokeLinejoin,
-                  strokeWidth: tigercatCore.closeIconPathStrokeWidth,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
                   d: tigercatCore.closeIconPathD
                 }
               ) })

package/dist/{chunk-XS5JP2KO.mjs → chunk-ZFHTSHXS.mjs}

@@ -1,5 +1,5 @@
-import { useState, useRef, useEffect } from 'react';
-import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, isSameDay, normalizeDate, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/DatePicker.tsx
@@ -80,8 +80,8 @@ var DatePicker = (props) => {
     const end = Array.isArray(tuple) ? parseDate(tuple[1]) : null;
     return [start, end];
   })();
-  const minDateParsed = parseDate(props.minDate ?? null);
-  const maxDateParsed = parseDate(props.maxDate ?? null);
+  const minDateParsed = useMemo(() => parseDate(props.minDate ?? null), [props.minDate]);
+  const maxDateParsed = useMemo(() => parseDate(props.maxDate ?? null), [props.maxDate]);
   const [viewingMonth, setViewingMonth] = useState(
     (selectedDate ?? selectedRange[0])?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth()
   );
@@ -104,14 +104,20 @@ var DatePicker = (props) => {
     if (!isRangeMode) return selectedDate !== null;
     return selectedRange[0] !== null || selectedRange[1] !== null;
   })();
-  const calendarDays = getCalendarDays(viewingYear, viewingMonth);
-  const dayNames = getShortDayNames(props.locale);
-  const labels = getDatePickerLabels(props.locale, props.labels);
+  const calendarDays = useMemo(
+    () => getCalendarDays(viewingYear, viewingMonth),
+    [viewingYear, viewingMonth]
+  );
+  const dayNames = useMemo(() => getShortDayNames(props.locale), [props.locale]);
+  const labels = useMemo(
+    () => getDatePickerLabels(props.locale, props.labels),
+    [props.locale, props.labels]
+  );
   const toggleCalendar = () => {
     if (!disabled && !readonly) {
       setIsOpen(!isOpen);
       if (!isOpen) {
-        restoreFocusRef.current = document.activeElement ?? null;
+        restoreFocusRef.current = inputRef.current ?? null;
         const baseDate = selectedDate ?? selectedRange[0];
         if (baseDate) {
           setViewingMonth(baseDate.getMonth());
@@ -256,11 +262,7 @@ var DatePicker = (props) => {
       setRangeValue([normalizedDate, null]);
       return;
     }
-    if (normalizedDate < start) {
-      setRangeValue([start, start]);
-    } else {
-      setRangeValue([start, normalizedDate]);
-    }
+    setRangeValue([start, normalizedDate < start ? start : normalizedDate]);
   };
   const setToday = () => {
     selectDate(/* @__PURE__ */ new Date());
@@ -301,25 +303,14 @@ var DatePicker = (props) => {
     if (!date) return false;
     return date.getMonth() === viewingMonth;
   };
-  const handleInputClick = () => {
-    toggleCalendar();
-  };
   useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (calendarRef.current && inputWrapperRef.current && !calendarRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
-        closeCalendar();
-      }
-    };
     if (isOpen) {
-      document.addEventListener("click", handleClickOutside);
-      return () => {
-        document.removeEventListener("click", handleClickOutside);
+      const handleClickOutside = (event) => {
+        if (calendarRef.current && inputWrapperRef.current && !calendarRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
+          closeCalendar();
+        }
       };
-    }
-  }, [isOpen]);
-  useEffect(() => {
-    if (isOpen) {
-      restoreFocusRef.current = document.activeElement ?? null;
+      document.addEventListener("click", handleClickOutside);
       const preferred = pendingFocusIsoRef.current ?? getPreferredFocusIso();
       pendingFocusIsoRef.current = null;
       setTimeout(() => {
@@ -327,11 +318,9 @@ var DatePicker = (props) => {
         const fallback = getFirstEnabledIsoInView();
         if (fallback) focusDateButtonByIso(fallback);
       }, 0);
-      return;
+      return () => document.removeEventListener("click", handleClickOutside);
     }
-    setTimeout(() => {
-      restoreFocus();
-    }, 0);
+    setTimeout(() => restoreFocus(), 0);
   }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
@@ -344,8 +333,11 @@ var DatePicker = (props) => {
       if (fallback) focusDateButtonByIso(fallback);
     }, 0);
   }, [isOpen, viewingMonth, viewingYear]);
-  const inputClasses = getDatePickerInputClasses(size, disabled || readonly);
-  const iconButtonClasses = getDatePickerIconButtonClasses(size);
+  const inputClasses = useMemo(
+    () => getDatePickerInputClasses(size, disabled || readonly),
+    [size, disabled, readonly]
+  );
+  const iconButtonClasses = useMemo(() => getDatePickerIconButtonClasses(size), [size]);
   return /* @__PURE__ */ jsxs("div", { className: classNames(datePickerBaseClasses, props.className), ...divProps, children: [
     /* @__PURE__ */ jsxs("div", { ref: inputWrapperRef, className: datePickerInputWrapperClasses, children: [
       /* @__PURE__ */ jsx(
@@ -361,7 +353,7 @@ var DatePicker = (props) => {
           required,
           name: props.name,
           id: props.id,
-          onClick: handleInputClick,
+          onClick: toggleCalendar,
           "aria-label": placeholder || "Select date"
         }
       ),
@@ -421,55 +413,60 @@ var DatePicker = (props) => {
             )
           ] }),
           /* @__PURE__ */ jsx("div", { className: datePickerCalendarGridClasses, role: "row", children: dayNames.map((day) => /* @__PURE__ */ jsx("div", { className: datePickerDayNameClasses, role: "columnheader", children: day }, day)) }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: datePickerCalendarGridClasses,
-              role: "grid",
-              "aria-rowcount": 6,
-              "aria-colcount": 7,
-              children: calendarDays.map((date, index) => {
-                if (!date) return null;
-                const [rangeStart, rangeEnd] = selectedRange;
-                const isRangeStart = isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
-                const isRangeEnd = isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
-                const isInRange = isRangeMode && rangeStart && rangeEnd && normalizeDate(date) >= normalizeDate(rangeStart) && normalizeDate(date) <= normalizeDate(rangeEnd);
-                const isSelected = !isRangeMode ? selectedDate ? isSameDay(date, selectedDate) : false : isRangeStart || isRangeEnd;
-                const isCurrentMonthDay = isCurrentMonth(date);
-                const isTodayDay = isToday(date);
-                const isSelectingRangeEnd = isRangeMode && Boolean(rangeStart) && !rangeEnd;
-                const isBeforeRangeStart = isSelectingRangeEnd && rangeStart && normalizeDate(date) < normalizeDate(rangeStart);
-                const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                const iso = formatDate(date, "yyyy-MM-dd");
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: getDatePickerDayCellClasses(
-                      isCurrentMonthDay,
-                      isSelected,
-                      isTodayDay,
-                      isDisabled,
-                      Boolean(isInRange),
-                      Boolean(isRangeStart),
-                      Boolean(isRangeEnd)
-                    ),
-                    disabled: isDisabled,
-                    onClick: () => selectDate(date),
-                    role: "gridcell",
-                    "data-date": iso,
-                    onFocus: () => setActiveDateIso(iso),
-                    tabIndex: activeDateIso === iso && !isDisabled ? 0 : -1,
-                    "aria-label": iso,
-                    "aria-selected": isSelected,
-                    "aria-current": isTodayDay ? "date" : void 0,
-                    children: date.getDate()
-                  },
-                  index
-                );
-              })
-            }
-          ),
+          (() => {
+            const [rangeStart, rangeEnd] = selectedRange;
+            const normStart = rangeStart ? normalizeDate(rangeStart) : null;
+            const normEnd = rangeEnd ? normalizeDate(rangeEnd) : null;
+            const isSelectingEnd = isRangeMode && Boolean(rangeStart) && !rangeEnd;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: datePickerCalendarGridClasses,
+                role: "grid",
+                "aria-rowcount": 6,
+                "aria-colcount": 7,
+                children: calendarDays.map((date, index) => {
+                  if (!date) return null;
+                  const normDate = normalizeDate(date);
+                  const isRangeStart = isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
+                  const isRangeEnd = isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
+                  const isInRange = isRangeMode && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
+                  const isSelected = !isRangeMode ? selectedDate ? isSameDay(date, selectedDate) : false : isRangeStart || isRangeEnd;
+                  const isCurrentMonthDay = isCurrentMonth(date);
+                  const isTodayDay = isToday(date);
+                  const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
+                  const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
+                  const iso = formatDate(date, "yyyy-MM-dd");
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: getDatePickerDayCellClasses(
+                        isCurrentMonthDay,
+                        isSelected,
+                        isTodayDay,
+                        isDisabled,
+                        Boolean(isInRange),
+                        Boolean(isRangeStart),
+                        Boolean(isRangeEnd)
+                      ),
+                      disabled: isDisabled,
+                      onClick: () => selectDate(date),
+                      role: "gridcell",
+                      "data-date": iso,
+                      onFocus: () => setActiveDateIso(iso),
+                      tabIndex: activeDateIso === iso && !isDisabled ? 0 : -1,
+                      "aria-label": iso,
+                      "aria-selected": isSelected,
+                      "aria-current": isTodayDay ? "date" : void 0,
+                      children: date.getDate()
+                    },
+                    index
+                  );
+                })
+              }
+            );
+          })(),
           isRangeMode && /* @__PURE__ */ jsxs("div", { className: datePickerFooterClasses, children: [
             /* @__PURE__ */ jsx("button", { type: "button", className: datePickerFooterButtonClasses, onClick: setToday, children: labels.today }),
             /* @__PURE__ */ jsx(

package/dist/{chunk-73DMQ2SR.mjs → chunk-ZGQOYCQT.mjs}

@@ -1,22 +1,12 @@
-import { Table } from './chunk-HGTF6A46.mjs';
-import { Pagination } from './chunk-NDOYQK2R.mjs';
-import { DropdownItem } from './chunk-IAF24RKI.mjs';
-import { Dropdown } from './chunk-YGOTPK2W.mjs';
-import { DropdownMenu } from './chunk-SIVJX7VU.mjs';
-import { Input } from './chunk-6ZTCBQJ7.mjs';
-import { Button } from './chunk-STEIWBMF.mjs';
+import { Table } from './chunk-3577FW3I.mjs';
+import { Select } from './chunk-MDZDPGRK.mjs';
+import { Pagination } from './chunk-NZLOLMT2.mjs';
+import { Input } from './chunk-RPTLVIBF.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
 import { useState, useEffect, useMemo } from 'react';
 import { classNames } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var resolveFilterLabel = (filter, value) => {
-  const option = filter.options.find((item) => item.value === value);
-  if (option) return `${filter.label}: ${option.label}`;
-  if (value !== null && value !== void 0 && value !== "") {
-    return `${filter.label}: ${String(value)}`;
-  }
-  return filter.placeholder ?? filter.label;
-};
 var DataTableWithToolbar = ({
   toolbar,
   onSearchChange,
@@ -113,9 +103,9 @@ var DataTableWithToolbar = ({
   };
   const renderToolbar = () => {
     if (!hasSearch && !hasFilters && !hasBulkActions) return null;
-    return /* @__PURE__ */ jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-        hasSearch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2 pb-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap flex-1 min-w-0", children: [
+        hasSearch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]", children: [
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -136,7 +126,7 @@ var DataTableWithToolbar = ({
             {
               size: "sm",
               variant: "primary",
-              className: "whitespace-nowrap",
+              className: "whitespace-nowrap shrink-0",
               onClick: handleSearchSubmit,
               disabled: !onSearch && !toolbar?.onSearch,
               children: toolbar?.searchButtonText ?? "\u641C\u7D22"
@@ -145,35 +135,33 @@ var DataTableWithToolbar = ({
         ] }) : null,
         hasFilters ? toolbar?.filters?.map((filter) => {
           const currentValue = resolvedFilters[filter.key];
-          const triggerLabel = resolveFilterLabel(filter, currentValue);
           const clearable = filter.clearable !== false;
-          const clearLabel = filter.clearLabel ?? "\u5168\u90E8";
-          const isActive = currentValue !== null && currentValue !== void 0 && currentValue !== "";
-          return /* @__PURE__ */ jsxs(Dropdown, { trigger: "click", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "sm",
-                variant: isActive ? "secondary" : "outline",
-                className: "whitespace-nowrap",
-                children: triggerLabel
-              }
-            ),
-            /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-              clearable ? /* @__PURE__ */ jsx(DropdownItem, { onClick: () => handleFilterSelect(filter, null), children: clearLabel }) : null,
-              filter.options.map((option) => /* @__PURE__ */ jsx(
-                DropdownItem,
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]",
+              children: /* @__PURE__ */ jsx(
+                Select,
                 {
-                  onClick: () => handleFilterSelect(filter, option.value),
-                  children: option.label
-                },
-                String(option.value)
-              ))
-            ] })
-          ] }, filter.key);
+                  size: "sm",
+                  options: filter.options.map((opt) => ({
+                    label: opt.label,
+                    value: opt.value
+                  })),
+                  value: currentValue ?? void 0,
+                  placeholder: filter.placeholder ?? filter.label,
+                  clearable,
+                  onChange: (value) => {
+                    handleFilterSelect(filter, value ?? null);
+                  }
+                }
+              )
+            },
+            filter.key
+          );
         }) : null
       ] }),
-      hasBulkActions ? /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 flex-wrap", children: [
+      hasBulkActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap ml-auto shrink-0", children: [
         selectedCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--tiger-text-muted,#6b7280)]", children: [
           bulkLabel,
           " ",