@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/{chunk-NQNHM4OL.mjs → chunk-25D5TXZH.mjs}

@@ -1,9 +1,9 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
 } from "./chunk-DKNVSQSV.mjs";
@@ -292,7 +292,7 @@ var HeatmapChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      open: resolvedHoveredIndex !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-BN4ZKCAI.mjs → chunk-2GSXSLGC.mjs}

@@ -1,13 +1,16 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
 
 // src/components/DatePicker.tsx
 import {
   datePickerInputWrapperClasses,
   datePickerClearButtonClasses,
-  CalendarIconPath,
-  CloseIconPath
+  calendarSolidIcon20PathD,
+  closeSolidIcon20PathD
 } from "@expcat/tigercat-core";
 
 // src/components/DatePicker/state.ts
@@ -27,14 +30,29 @@ import {
   getDatePickerIconButtonClasses,
   getDatePickerLocaleCode,
   getDatePickerLabels,
-  getLocaleDirection
+  getLocaleDirection,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 
 // src/components/DatePicker/types.ts
 var isRangeDatePicker = (props) => props.range === true;
 
 // src/components/DatePicker/state.ts
+function normalizeDatePickerLocale(locale) {
+  if (!locale) return void 0;
+  if (typeof locale === "string") return { locale };
+  if ("datePicker" in locale) return locale;
+  const preset = locale;
+  return {
+    locale: hasDatePickerLocaleCode(preset) ? preset.locale : void 0,
+    datePicker: preset
+  };
+}
+function hasDatePickerLocaleCode(locale) {
+  return typeof locale.locale === "string";
+}
 function useDatePickerState(props) {
+  const config = useTigerConfig();
   const {
     size = "md",
     disabled = false,
@@ -100,7 +118,11 @@ function useDatePickerState(props) {
   );
   const minDateParsed = useMemo(() => parseDate(props.minDate ?? null), [props.minDate]);
   const maxDateParsed = useMemo(() => parseDate(props.maxDate ?? null), [props.maxDate]);
-  const localeCode = useMemo(() => getDatePickerLocaleCode(props.locale), [props.locale]);
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, normalizeDatePickerLocale(props.locale)),
+    [config.locale, props.locale]
+  );
+  const localeCode = useMemo(() => getDatePickerLocaleCode(mergedLocale), [mergedLocale]);
   const [viewingMonth, setViewingMonth] = useState(
     (selectedDate ?? selectedRange[0])?.getMonth() ?? (/* @__PURE__ */ new Date()).getMonth()
   );
@@ -140,8 +162,8 @@ function useDatePickerState(props) {
   const dayNames = useMemo(() => getShortDayNames(localeCode), [localeCode]);
   const isRtl = getLocaleDirection(localeCode) === "rtl";
   const labels = useMemo(
-    () => getDatePickerLabels(props.locale, props.labels),
-    [props.locale, props.labels]
+    () => getDatePickerLabels(mergedLocale, props.labels),
+    [mergedLocale, props.labels]
   );
   const mobileDate = useMemo(() => {
     if (!isRangeMode) return selectedDate ?? normalizeDate(/* @__PURE__ */ new Date());
@@ -312,7 +334,10 @@ function useDatePickerState(props) {
     }
     const [start, end] = selectedRange;
     if (activeRangePart === "start") {
-      const next = [normalized, end && end < normalized ? normalized : end];
+      const next = [
+        normalized,
+        end && end < normalized ? normalized : end
+      ];
       setRangeValue(next);
       setActiveRangePart("end");
       return;
@@ -544,11 +569,8 @@ function renderDatePickerMobile(ctx) {
 
 // src/components/DatePicker/render-calendar.tsx
 import {
-  formatDate as formatDate2,
   formatMonthYear,
-  isSameDay,
-  isToday as isTodayUtil,
-  normalizeDate as normalizeDate2,
+  getDatePickerCalendarCellState,
   datePickerCalendarClasses,
   datePickerCalendarHeaderClasses,
   datePickerNavButtonClasses,
@@ -558,8 +580,8 @@ import {
   getDatePickerDayCellClasses,
   datePickerFooterClasses,
   datePickerFooterButtonClasses as datePickerFooterButtonClasses2,
-  ChevronLeftIconPath,
-  ChevronRightIconPath
+  chevronLeftSolidIcon20PathD,
+  chevronRightSolidIcon20PathD
 } from "@expcat/tigercat-core";
 
 // src/components/DatePicker/icons.tsx
@@ -597,7 +619,13 @@ function renderDatePickerCalendar(ctx) {
               className: datePickerNavButtonClasses,
               onClick: ctx.previousMonth,
               "aria-label": ctx.labels.previousMonth,
-              children: /* @__PURE__ */ jsx3(Icon, { path: ctx.isRtl ? ChevronRightIconPath : ChevronLeftIconPath, className: "w-5 h-5" })
+              children: /* @__PURE__ */ jsx3(
+                Icon,
+                {
+                  path: ctx.isRtl ? chevronRightSolidIcon20PathD : chevronLeftSolidIcon20PathD,
+                  className: "w-5 h-5"
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsx3("div", { className: datePickerMonthYearClasses, children: formatMonthYear(ctx.viewingYear, ctx.viewingMonth, ctx.localeCode) }),
@@ -608,16 +636,18 @@ function renderDatePickerCalendar(ctx) {
               className: datePickerNavButtonClasses,
               onClick: ctx.nextMonth,
               "aria-label": ctx.labels.nextMonth,
-              children: /* @__PURE__ */ jsx3(Icon, { path: ctx.isRtl ? ChevronLeftIconPath : ChevronRightIconPath, className: "w-5 h-5" })
+              children: /* @__PURE__ */ jsx3(
+                Icon,
+                {
+                  path: ctx.isRtl ? chevronLeftSolidIcon20PathD : chevronRightSolidIcon20PathD,
+                  className: "w-5 h-5"
+                }
+              )
             }
           )
         ] }),
         /* @__PURE__ */ jsx3("div", { className: datePickerCalendarGridClasses, role: "row", children: ctx.dayNames.map((day) => /* @__PURE__ */ jsx3("div", { className: datePickerDayNameClasses, role: "columnheader", children: day }, day)) }),
         (() => {
-          const [rangeStart, rangeEnd] = ctx.selectedRange;
-          const normStart = rangeStart ? normalizeDate2(rangeStart) : null;
-          const normEnd = rangeEnd ? normalizeDate2(rangeEnd) : null;
-          const isSelectingEnd = ctx.isRangeMode && Boolean(rangeStart) && !rangeEnd;
           return /* @__PURE__ */ jsx3(
             "div",
             {
@@ -627,38 +657,36 @@ function renderDatePickerCalendar(ctx) {
               "aria-colcount": 7,
               children: ctx.calendarDays.map((date, index) => {
                 if (!date) return null;
-                const normDate = normalizeDate2(date);
-                const isRangeStart = ctx.isRangeMode && rangeStart ? isSameDay(date, rangeStart) : false;
-                const isRangeEnd = ctx.isRangeMode && rangeEnd ? isSameDay(date, rangeEnd) : false;
-                const isInRange = ctx.isRangeMode && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
-                const isSelected = !ctx.isRangeMode ? ctx.selectedDate ? isSameDay(date, ctx.selectedDate) : false : isRangeStart || isRangeEnd;
-                const isCurrentMonthDay = ctx.isCurrentMonth(date);
-                const isTodayDay = isTodayUtil(date);
-                const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
-                const isDisabled = ctx.isDateDisabled(date) || Boolean(isBeforeRangeStart);
-                const iso = formatDate2(date, "yyyy-MM-dd");
+                const cell = getDatePickerCalendarCellState({
+                  date,
+                  selectedDate: ctx.selectedDate,
+                  selectedRange: ctx.selectedRange,
+                  isRangeMode: ctx.isRangeMode,
+                  isCurrentMonth: ctx.isCurrentMonth,
+                  isDateDisabled: ctx.isDateDisabled
+                });
                 return /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
                     className: getDatePickerDayCellClasses(
-                      isCurrentMonthDay,
-                      isSelected,
-                      isTodayDay,
-                      isDisabled,
-                      Boolean(isInRange),
-                      Boolean(isRangeStart),
-                      Boolean(isRangeEnd)
+                      cell.isCurrentMonthDay,
+                      cell.isSelected,
+                      cell.isTodayDay,
+                      cell.isDisabled,
+                      cell.isInRange,
+                      cell.isRangeStart,
+                      cell.isRangeEnd
                     ),
-                    disabled: isDisabled,
+                    disabled: cell.isDisabled,
                     onClick: () => ctx.selectDate(date),
                     role: "gridcell",
-                    "data-date": iso,
-                    onFocus: () => ctx.setActiveDateIso(iso),
-                    tabIndex: ctx.activeDateIso === iso && !isDisabled ? 0 : -1,
-                    "aria-label": iso,
-                    "aria-selected": isSelected,
-                    "aria-current": isTodayDay ? "date" : void 0,
+                    "data-date": cell.iso,
+                    onFocus: () => ctx.setActiveDateIso(cell.iso),
+                    tabIndex: ctx.activeDateIso === cell.iso && !cell.isDisabled ? 0 : -1,
+                    "aria-label": cell.iso,
+                    "aria-selected": cell.isSelected,
+                    "aria-current": cell.isTodayDay ? "date" : void 0,
                     children: date.getDate()
                   },
                   index
@@ -724,7 +752,7 @@ var DatePicker = (props) => {
           className: datePickerClearButtonClasses,
           onClick: ctx.clearDate,
           "aria-label": ctx.labels.clearDate,
-          children: /* @__PURE__ */ jsx4(Icon, { path: CloseIconPath, className: "w-4 h-4" })
+          children: /* @__PURE__ */ jsx4(Icon, { path: closeSolidIcon20PathD, className: "w-4 h-4" })
         }
       ),
       /* @__PURE__ */ jsx4(
@@ -735,7 +763,7 @@ var DatePicker = (props) => {
           disabled: ctx.disabled || ctx.readonly,
           onClick: ctx.toggleCalendar,
           "aria-label": ctx.labels.toggleCalendar,
-          children: /* @__PURE__ */ jsx4(Icon, { path: CalendarIconPath, className: "w-5 h-5" })
+          children: /* @__PURE__ */ jsx4(Icon, { path: calendarSolidIcon20PathD, className: "w-5 h-5" })
         }
       )
     ] }),

package/dist/{chunk-R2KUNFDN.mjs → chunk-2PZICT2T.mjs}

@@ -1,15 +1,15 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
-import {
-  ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
 } from "./chunk-DKNVSQSV.mjs";
+import {
+  ChartLegend
+} from "./chunk-ZG2W4HS5.mjs";
 
 // src/components/SunburstChart.tsx
 import { useId, useMemo } from "react";
@@ -197,7 +197,7 @@ var SunburstChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: resolvedHoveredIndex !== null && tooltipContent !== "",
+      open: resolvedHoveredIndex !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-OXQOKKTP.mjs → chunk-2UFTDDPW.mjs}

@@ -1,6 +1,6 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 import {
   useTigerConfig
 } from "./chunk-QAIBQHIO.mjs";
@@ -394,7 +394,7 @@ var Upload = ({
     const imageUrl = file.url || (file.file ? URL.createObjectURL(file.file) : "");
     return /* @__PURE__ */ jsxs("div", { className: getPictureCardClasses(file.status), children: [
       imageUrl && /* @__PURE__ */ jsx("img", { src: imageUrl, alt: file.name, className: "w-full h-full object-cover" }),
-      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-50 transition-all flex items-center justify-center space-x-2 opacity-0 hover:opacity-100", children: [
+      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/0 hover:bg-black/50 transition-all flex items-center justify-center space-x-2 opacity-0 hover:opacity-100", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -456,7 +456,7 @@ var Upload = ({
           }
         )
       ] }),
-      file.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+      file.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-white/75 flex items-center justify-center", children: /* @__PURE__ */ jsx(
         "svg",
         {
           className: getUploadStatusIconClasses("uploading", "lg", {

package/dist/{chunk-MV54EEKO.mjs → chunk-2UOGBS3C.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-C44WSDEY.mjs";
+} from "./chunk-S7IB6YST.mjs";
 import {
   renderBodyPortal
 } from "./chunk-SEWNVIHH.mjs";

package/dist/{chunk-ZITBUGBH.mjs → chunk-2YDLAZTK.mjs}

@@ -1,15 +1,9 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
-import {
-  ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartAxis
 } from "./chunk-RQSQXQN6.mjs";
@@ -19,6 +13,12 @@ import {
 import {
   ChartGrid
 } from "./chunk-677VSTPW.mjs";
+import {
+  ChartLegend
+} from "./chunk-ZG2W4HS5.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
 
 // src/components/LineChart.tsx
 import { useId, useMemo, useState, useCallback } from "react";
@@ -49,12 +49,12 @@ var LineChart = ({
   series,
   xScale: xScaleProp,
   yScale: yScaleProp,
-  lineColor: _lineColor = "var(--tiger-primary,#2563eb)",
+  lineColor = "var(--tiger-primary,#2563eb)",
   strokeWidth = 2,
   curve = "linear",
   showPoints = true,
   pointSize = 4,
-  pointColor: _pointColor,
+  pointColor,
   showGrid = true,
   showAxis = true,
   showXAxis = true,
@@ -112,8 +112,13 @@ var LineChart = ({
     [width, height, padding]
   );
   const resolvedSeries = useMemo(
-    () => resolveSeriesData(series, data),
-    [series, data]
+    () => resolveSeriesData(series, data, {
+      // Single-series colors (`lineColor`/`pointColor`) seed the synthesized
+      // series so they take effect when only `data` is provided.
+      color: lineColor,
+      pointColor
+    }),
+    [series, data, lineColor, pointColor]
   );
   const {
     activeIndex,
@@ -259,6 +264,16 @@ var LineChart = ({
     setHoveredPointInfo(null);
     onPointHover?.(null, null, null);
   }, [onPointHover]);
+  const showPointTooltipFromElement = useCallback(
+    (el, seriesIndex, pointIndex) => {
+      if (!hoverable) return;
+      const rect = el.getBoundingClientRect();
+      setHoveredPointInfo({ seriesIndex, pointIndex });
+      setTooltipPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+      onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+    },
+    [hoverable, onPointHover, resolvedSeries]
+  );
   const handlePointClick = useCallback(
     (seriesIndex, pointIndex) => {
       onPointClick?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
@@ -275,6 +290,7 @@ var LineChart = ({
     },
     [selectable, handleSeriesSelect]
   );
+  const pointClickable = selectable || !!onPointClick;
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -437,6 +453,8 @@ var LineChart = ({
               sd.showPoints && sd.points.map((point) => {
                 const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
                 const hoverSize = sd.pointSize + 2;
+                const datum = resolvedSeries[sd.seriesIndex]?.data?.[point.pointIndex];
+                const pointInteractive = hoverable || pointClickable;
                 return /* @__PURE__ */ jsx(
                   "circle",
                   {
@@ -446,17 +464,46 @@ var LineChart = ({
                     fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                     stroke: sd.pointHollow ? sd.pointColor : "none",
                     strokeWidth: sd.pointHollow ? 2 : 0,
-                    className: linePointTransitionClasses,
+                    className: classNames(
+                      linePointTransitionClasses,
+                      pointInteractive && "cursor-pointer"
+                    ),
                     style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                    role: pointInteractive ? "button" : "img",
+                    "aria-label": datum?.label ?? String(datum?.y ?? ""),
+                    tabIndex: pointInteractive ? 0 : void 0,
                     "data-point-index": point.pointIndex,
                     "data-series-key": sd.seriesKey,
-                    onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                    onMouseMove: handlePointMouseMove,
-                    onMouseLeave: handlePointMouseLeave,
-                    onClick: (e) => {
+                    onMouseEnter: hoverable ? (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e) : void 0,
+                    onMouseMove: hoverable ? handlePointMouseMove : void 0,
+                    onMouseLeave: hoverable ? handlePointMouseLeave : void 0,
+                    onClick: pointClickable ? (e) => {
                       e.stopPropagation();
                       handlePointClick(sd.seriesIndex, point.pointIndex);
-                    }
+                    } : void 0,
+                    onFocus: hoverable ? (e) => showPointTooltipFromElement(
+                      e.currentTarget,
+                      sd.seriesIndex,
+                      point.pointIndex
+                    ) : void 0,
+                    onBlur: hoverable ? handlePointMouseLeave : void 0,
+                    onKeyDown: pointInteractive ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (pointClickable) {
+                          handlePointClick(sd.seriesIndex, point.pointIndex);
+                        } else {
+                          showPointTooltipFromElement(
+                            e.currentTarget,
+                            sd.seriesIndex,
+                            point.pointIndex
+                          );
+                        }
+                      } else if (e.key === "Escape" && hoverable) {
+                        handlePointMouseLeave();
+                      }
+                    } : void 0
                   },
                   `point-${sd.seriesKey}-${point.pointIndex}`
                 );
@@ -472,7 +519,7 @@ var LineChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: hoveredPointInfo !== null && tooltipContent !== "",
+      open: hoveredPointInfo !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/chunk-3O3AQLNS.mjs

@@ -0,0 +1,172 @@
+// src/hooks/useFormController.ts
+import { useState, useCallback, useMemo, useRef } from "react";
+import {
+  validateForm,
+  validateField as validateFieldUtil,
+  getValueByPath,
+  createFormErrorMap,
+  clearFieldErrors,
+  createFormHistory,
+  pushFormHistory,
+  undoFormHistory,
+  redoFormHistory,
+  canUndo as canUndoFn,
+  canRedo as canRedoFn
+} from "@expcat/tigercat-core";
+function useFormController(options = {}) {
+  const { initialValues = {}, rules, undoable = false, maxHistorySize = 50 } = options;
+  const [values, setValues] = useState(() => ({ ...initialValues }));
+  const [errors, setErrors] = useState([]);
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const rulesRef = useRef(rules);
+  rulesRef.current = rules;
+  const initialRef = useRef(initialValues);
+  const [history, setHistory] = useState(
+    () => undoable ? createFormHistory(initialValues, maxHistorySize) : null
+  );
+  const errorsByField = useMemo(() => createFormErrorMap(errors), [errors]);
+  const hasErrors = errors.length > 0;
+  const setFieldValue = useCallback(
+    (fieldName, value) => {
+      setValues((prev) => {
+        const next = { ...prev, [fieldName]: value };
+        valuesRef.current = next;
+        return next;
+      });
+      if (undoable) {
+        setHistory(
+          (h) => h ? pushFormHistory(h, { ...valuesRef.current, [fieldName]: value }) : h
+        );
+      }
+    },
+    [undoable]
+  );
+  const setBulkValues = useCallback(
+    (partial) => {
+      setValues((prev) => {
+        const next = { ...prev, ...partial };
+        valuesRef.current = next;
+        return next;
+      });
+      if (undoable) {
+        setHistory((h) => h ? pushFormHistory(h, { ...valuesRef.current, ...partial }) : h);
+      }
+    },
+    [undoable]
+  );
+  const getFieldValue = useCallback(
+    (fieldName) => getValueByPath(valuesRef.current, fieldName),
+    []
+  );
+  const validate = useCallback(async () => {
+    const r = rulesRef.current;
+    if (!r) {
+      setErrors([]);
+      return true;
+    }
+    const result = await validateForm(valuesRef.current, r);
+    setErrors(result.errors);
+    return result.valid;
+  }, []);
+  const validateFields = useCallback(async (fieldNames) => {
+    const r = rulesRef.current;
+    if (!r || fieldNames.length === 0) return true;
+    const nextErrors = [];
+    for (const name of fieldNames) {
+      const fieldRules = r[name];
+      if (!fieldRules) continue;
+      const error = await validateFieldUtil(
+        name,
+        getValueByPath(valuesRef.current, name),
+        fieldRules,
+        valuesRef.current
+      );
+      if (error) nextErrors.push({ field: name, message: error });
+    }
+    const fieldSet = new Set(fieldNames);
+    setErrors((prev) => [...prev.filter((e) => !fieldSet.has(e.field)), ...nextErrors]);
+    return nextErrors.length === 0;
+  }, []);
+  const validateField = useCallback(async (fieldName) => {
+    const r = rulesRef.current;
+    const fieldRules = r?.[fieldName];
+    if (!fieldRules) return null;
+    const error = await validateFieldUtil(
+      fieldName,
+      getValueByPath(valuesRef.current, fieldName),
+      fieldRules,
+      valuesRef.current
+    );
+    setErrors((prev) => {
+      const filtered = prev.filter((e) => e.field !== fieldName);
+      return error ? [...filtered, { field: fieldName, message: error }] : filtered;
+    });
+    return error;
+  }, []);
+  const clearValidate = useCallback((fieldNames) => {
+    if (!fieldNames) {
+      setErrors([]);
+      return;
+    }
+    const fields = Array.isArray(fieldNames) ? fieldNames : [fieldNames];
+    setErrors((prev) => clearFieldErrors(fields, prev));
+  }, []);
+  const reset = useCallback(() => {
+    const init = { ...initialRef.current };
+    setValues(init);
+    valuesRef.current = init;
+    setErrors([]);
+    if (undoable) {
+      setHistory(createFormHistory(init, maxHistorySize));
+    }
+  }, [undoable, maxHistorySize]);
+  const undo = useCallback(() => {
+    if (!undoable) return;
+    setHistory((h) => {
+      if (!h) return h;
+      const next = undoFormHistory(h);
+      if (!next) return h;
+      setValues(next.present);
+      valuesRef.current = next.present;
+      return next;
+    });
+  }, [undoable]);
+  const redo = useCallback(() => {
+    if (!undoable) return;
+    setHistory((h) => {
+      if (!h) return h;
+      const next = redoFormHistory(h);
+      if (!next) return h;
+      setValues(next.present);
+      valuesRef.current = next.present;
+      return next;
+    });
+  }, [undoable]);
+  return {
+    values,
+    errors,
+    errorsByField,
+    hasErrors,
+    setFieldValue,
+    setValues: setBulkValues,
+    getFieldValue,
+    validate,
+    validateFields,
+    validateField,
+    clearValidate,
+    reset,
+    undo,
+    redo,
+    get canUndo() {
+      return undoable && history != null && canUndoFn(history);
+    },
+    get canRedo() {
+      return undoable && history != null && canRedoFn(history);
+    }
+  };
+}
+
+export {
+  useFormController
+};