@expcat/tigercat-react 0.4.2 → 1.0.0

package/dist/{chunk-IGE44BIS.mjs → chunk-34DLDOGP.mjs}

@@ -1,5 +1,5 @@
 import React, { createContext, forwardRef, useState, useCallback, useImperativeHandle, useMemo, useContext } from 'react';
-import { getValueByPath, validateField, validateForm, classNames } from '@expcat/tigercat-core';
+import { createFormHistory, getValueByPath, validateField, getDependentFields, validateForm, pushFormHistory, undoFormHistory, redoFormHistory, canRedo, canUndo, classNames } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Form.tsx
@@ -19,17 +19,22 @@ var Form = forwardRef(
     inlineMessage = true,
     showRequiredAsterisk = true,
     disabled = false,
+    loading = false,
     children,
     onSubmit,
     onValidate,
     onChange,
     className,
+    fieldDependencies,
+    undoable = false,
+    maxHistorySize = 50,
     ...props
   }, ref) => {
     const [errors, setErrors] = useState([]);
     const [formValues, setFormValues] = useState(model);
     const fieldRulesRef = React.useRef({});
     const formValuesRef = React.useRef(model);
+    const [historyState, setHistoryState] = useState(() => createFormHistory(model, maxHistorySize));
     React.useEffect(() => {
       setFormValues(model);
     }, [model]);
@@ -74,24 +79,29 @@ var Form = forwardRef(
     const validateField$1 = useCallback(
       async (fieldName, rulesOverride, trigger) => {
         const fieldRules = resolveFieldRules(fieldName, rulesOverride);
-        if (!fieldRules) {
-          return;
+        if (fieldRules) {
+          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 }];
+            }
+            return filtered;
+          });
+          onValidate?.(fieldName, !error, error);
         }
-        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 }];
+        if (fieldDependencies) {
+          const dependents = getDependentFields(fieldName, fieldDependencies);
+          for (const dep of dependents) {
+            await validateField$1(dep);
           }
-          return filtered;
-        });
-        onValidate?.(fieldName, !error, error);
+        }
       },
-      [resolveFieldRules, runFieldValidation, onValidate]
+      [resolveFieldRules, runFieldValidation, onValidate, fieldDependencies]
     );
     const runValidation = useCallback(async () => {
       const effectiveRules = getEffectiveRules();
@@ -146,6 +156,29 @@ var Form = forwardRef(
       clearValidate();
       setFormValues(model);
     }, [model, clearValidate]);
+    const addField = useCallback(
+      (fieldName, defaultValue) => {
+        if (!fieldName) return;
+        setFormValues((prev) => {
+          const next = { ...prev, [fieldName]: defaultValue ?? null };
+          onChange?.(next);
+          return next;
+        });
+      },
+      [onChange]
+    );
+    const removeField = useCallback(
+      (fieldName) => {
+        if (!fieldName) return;
+        setFormValues((prev) => {
+          const { [fieldName]: _, ...next } = prev;
+          onChange?.(next);
+          return next;
+        });
+        clearValidate(fieldName);
+      },
+      [onChange, clearValidate]
+    );
     const updateValue = useCallback(
       (fieldName, value) => {
         const setValueByPath = (target, path, nextValue) => {
@@ -180,13 +213,44 @@ var Form = forwardRef(
       },
       [onChange]
     );
+    const snapshotHistory = useCallback(() => {
+      if (!undoable) return;
+      setHistoryState((prev) => pushFormHistory(prev, formValuesRef.current));
+    }, [undoable]);
+    const undo = useCallback(() => {
+      if (!undoable) return;
+      setHistoryState((prev) => {
+        const result = undoFormHistory(prev);
+        if (result) {
+          setFormValues(result.present);
+          formValuesRef.current = result.present;
+          onChange?.(result.present);
+          return result;
+        }
+        return prev;
+      });
+    }, [undoable, onChange]);
+    const redo = useCallback(() => {
+      if (!undoable) return;
+      setHistoryState((prev) => {
+        const result = redoFormHistory(prev);
+        if (result) {
+          setFormValues(result.present);
+          formValuesRef.current = result.present;
+          onChange?.(result.present);
+          return result;
+        }
+        return prev;
+      });
+    }, [undoable, onChange]);
     const handleSubmit = useCallback(
       async (event) => {
         event.preventDefault();
+        if (loading) return;
         const result = await runValidation();
         onSubmit?.({ ...result, values: formValuesRef.current });
       },
-      [runValidation, onSubmit]
+      [runValidation, onSubmit, loading]
     );
     useImperativeHandle(
       ref,
@@ -195,9 +259,28 @@ var Form = forwardRef(
         validateFields,
         validateField: validateField$1,
         clearValidate,
-        resetFields
+        resetFields,
+        addField,
+        removeField,
+        undo,
+        redo,
+        snapshotHistory,
+        canUndo: canUndo(historyState),
+        canRedo: canRedo(historyState)
       }),
-      [validate, validateFields, validateField$1, clearValidate, resetFields]
+      [
+        validate,
+        validateFields,
+        validateField$1,
+        clearValidate,
+        resetFields,
+        addField,
+        removeField,
+        undo,
+        redo,
+        snapshotHistory,
+        historyState
+      ]
     );
     const contextValue = useMemo(
       () => ({
@@ -210,6 +293,7 @@ var Form = forwardRef(
         inlineMessage,
         showRequiredAsterisk,
         disabled,
+        loading,
         errors,
         registerFieldRules,
         validateField: validateField$1,
@@ -226,6 +310,7 @@ var Form = forwardRef(
         inlineMessage,
         showRequiredAsterisk,
         disabled,
+        loading,
         errors,
         registerFieldRules,
         validateField$1,
@@ -237,6 +322,7 @@ var Form = forwardRef(
       "tiger-form",
       `tiger-form--label-${labelPosition}`,
       disabled && "tiger-form--disabled",
+      loading && "tiger-form--loading",
       className
     );
     return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("form", { className: formClasses, onSubmit: handleSubmit, ...props, children }) });

package/dist/chunk-3EB42WFR.mjs

@@ -0,0 +1,35 @@
+import { StatusIcon } from './chunk-FLYJVZED.mjs';
+import { useMemo } from 'react';
+import { getResultColorScheme, getResultIconPath, getResultHttpLabel, classNames, resultBaseClasses, resultIconContainerBaseClasses, resultIconClasses, resultTitleClasses, resultSubTitleClasses, resultExtraClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Result = ({
+  status = "info",
+  title,
+  subTitle,
+  icon,
+  extra,
+  className,
+  children,
+  ...props
+}) => {
+  const colors = useMemo(() => getResultColorScheme(status), [status]);
+  const iconPath = useMemo(() => getResultIconPath(status), [status]);
+  const httpLabel = useMemo(() => getResultHttpLabel(status), [status]);
+  const wrapperClasses = useMemo(() => classNames(resultBaseClasses, className), [className]);
+  const iconContainerCls = useMemo(
+    () => classNames(resultIconContainerBaseClasses, colors.iconBg),
+    [colors]
+  );
+  const iconSvgCls = useMemo(() => classNames(resultIconClasses, colors.iconColor), [colors]);
+  const titleCls = useMemo(() => classNames(resultTitleClasses, colors.titleColor), [colors]);
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, role: "status", ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: iconContainerCls, children: icon !== void 0 ? icon : httpLabel ? /* @__PURE__ */ jsx("span", { className: classNames("text-5xl font-bold", colors.iconColor), children: httpLabel }) : /* @__PURE__ */ jsx(StatusIcon, { path: iconPath, className: iconSvgCls }) }),
+    title && /* @__PURE__ */ jsx("div", { className: titleCls, children: title }),
+    subTitle && /* @__PURE__ */ jsx("div", { className: resultSubTitleClasses, children: subTitle }),
+    extra && /* @__PURE__ */ jsx("div", { className: resultExtraClasses, children: extra }),
+    children && /* @__PURE__ */ jsx("div", { className: "mt-6 w-full", children })
+  ] });
+};
+
+export { Result };

package/dist/{chunk-Z7SXK2KO.js → chunk-3JGOTJZM.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkNV3JUZ3N_js = require('./chunk-NV3JUZ3N.js');
-var chunkGNMOOYHG_js = require('./chunk-GNMOOYHG.js');
+var chunkAGR3FM3V_js = require('./chunk-AGR3FM3V.js');
+var chunkKNBNE74O_js = require('./chunk-KNBNE74O.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -29,6 +29,7 @@ var Image = ({
   className,
   errorRender,
   placeholderRender,
+  onPreviewOpenChange,
   onPreviewVisibleChange,
   onClick,
   onKeyDown,
@@ -40,7 +41,7 @@ var Image = ({
   const [actualSrc, setActualSrc] = react.useState(lazy ? "" : src);
   const [previewVisible, setPreviewVisible] = react.useState(false);
   const containerRef = react.useRef(null);
-  const group = react.useContext(chunkNV3JUZ3N_js.ImageGroupContext);
+  const group = react.useContext(chunkAGR3FM3V_js.ImageGroupContext);
   const registeredIndexRef = react.useRef(-1);
   react.useEffect(() => {
     if (group && src) {
@@ -92,10 +93,11 @@ var Image = ({
         group.openPreview(registeredIndexRef.current >= 0 ? registeredIndexRef.current : 0);
       } else {
         setPreviewVisible(true);
+        onPreviewOpenChange?.(true);
         onPreviewVisibleChange?.(true);
       }
     },
-    [preview, group, onClick, onPreviewVisibleChange]
+    [preview, group, onClick, onPreviewOpenChange, onPreviewVisibleChange]
   );
   const handleKeyDown = react.useCallback(
     (e) => {
@@ -154,13 +156,14 @@ var Image = ({
       }
     ),
     !group && previewVisible && src && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkGNMOOYHG_js.ImagePreview,
+      chunkKNBNE74O_js.ImagePreview,
       {
-        visible: previewVisible,
+        open: previewVisible,
         images: [src],
         currentIndex: 0,
-        onVisibleChange: (val) => {
+        onOpenChange: (val) => {
           setPreviewVisible(val);
+          onPreviewOpenChange?.(val);
           onPreviewVisibleChange?.(val);
         }
       }

package/dist/{chunk-ENSLMM3L.mjs → chunk-3KMKMAE3.mjs}

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { getSpinnerSVG, classNames, buttonBaseClasses, getButtonVariantClasses, buttonSizeClasses, buttonDisabledClasses } from '@expcat/tigercat-core';
+import { getSpinnerSVG, buttonDangerClasses, getButtonVariantClasses, classNames, buttonBaseClasses, buttonSizeClasses, buttonDisabledClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Button.tsx
@@ -24,10 +24,13 @@ var Button = ({
   disabled = false,
   loading = false,
   loadingIcon,
+  icon,
   block = false,
+  iconPosition = "left",
+  htmlType = "button",
+  danger = false,
   onClick,
   children,
-  type = "button",
   className,
   "aria-busy": ariaBusyProp,
   "aria-disabled": ariaDisabledProp,
@@ -36,17 +39,18 @@ var Button = ({
   const isDisabled = disabled || loading;
   const ariaBusy = ariaBusyProp ?? (loading ? true : void 0);
   const ariaDisabled = ariaDisabledProp ?? (isDisabled ? true : void 0);
-  const buttonClasses = useMemo(
-    () => classNames(
+  const buttonClasses = useMemo(() => {
+    const variantClasses = danger ? buttonDangerClasses[variant] ?? buttonDangerClasses.primary : getButtonVariantClasses(variant);
+    return classNames(
       buttonBaseClasses,
-      getButtonVariantClasses(variant),
+      variantClasses,
       buttonSizeClasses[size],
       isDisabled && buttonDisabledClasses,
       block && "w-full",
       className
-    ),
-    [variant, size, isDisabled, block, className]
-  );
+    );
+  }, [variant, size, isDisabled, block, danger, className]);
+  const iconIsRight = iconPosition === "right";
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -56,9 +60,10 @@ var Button = ({
       "aria-disabled": ariaDisabled,
       disabled: isDisabled,
       onClick: isDisabled ? void 0 : onClick,
-      type,
+      type: htmlType,
       children: [
-        loading && /* @__PURE__ */ jsx("span", { className: "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        loading && /* @__PURE__ */ jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        !loading && icon && /* @__PURE__ */ jsx("span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: icon }),
         children
       ]
     }

package/dist/{chunk-SFALTVPS.js → chunk-3USEV7EV.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQL6UEG3U_js = require('./chunk-QL6UEG3U.js');
+var chunk2XOFRGY6_js = require('./chunk-2XOFRGY6.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -33,7 +33,7 @@ var Upload = ({
   style,
   ...divProps
 }) => {
-  const config = chunkQL6UEG3U_js.useTigerConfig();
+  const config = chunk2XOFRGY6_js.useTigerConfig();
   const mergedLocale = react.useMemo(
     () => tigercatCore.mergeTigerLocale(config.locale, locale),
     [config.locale, locale]

package/dist/chunk-45H3JEI3.js

@@ -0,0 +1,155 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Splitter.tsx
+var Splitter = ({
+  direction = "horizontal",
+  sizes: controlledSizes,
+  min = 0,
+  max,
+  gutterSize = 4,
+  disabled = false,
+  className,
+  style,
+  onResizeStart,
+  onResize,
+  onResizeEnd,
+  onSizesChange,
+  children
+}) => {
+  const containerRef = React.useRef(null);
+  const [paneSizes, setPaneSizes] = React.useState(controlledSizes || []);
+  const draggingRef = React.useRef(null);
+  React.useEffect(() => {
+    if (controlledSizes) setPaneSizes(controlledSizes);
+  }, [controlledSizes]);
+  React.useEffect(() => {
+    if (controlledSizes && controlledSizes.length > 0) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const paneCount = React__default.default.Children.count(children);
+    if (paneCount === 0) return;
+    const totalGutter = (paneCount - 1) * gutterSize;
+    const total = direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
+    const eachSize = total / paneCount;
+    setPaneSizes(Array.from({ length: paneCount }, () => eachSize));
+  }, [children, direction, gutterSize, controlledSizes]);
+  const mins = React.useMemo(() => paneSizes.map(() => min), [paneSizes.length, min]);
+  const maxes = React.useMemo(() => paneSizes.map(() => max), [paneSizes.length, max]);
+  const handleMouseDown = React.useCallback(
+    (index, e) => {
+      if (disabled) return;
+      e.preventDefault();
+      draggingRef.current = {
+        index,
+        startPos: direction === "horizontal" ? e.clientX : e.clientY,
+        startSizes: [...paneSizes]
+      };
+      onResizeStart?.({ index, sizes: [...paneSizes] });
+      const onMouseMove = (ev) => {
+        const drag = draggingRef.current;
+        if (!drag) return;
+        const currentPos = direction === "horizontal" ? ev.clientX : ev.clientY;
+        const delta = currentPos - drag.startPos;
+        const newSizes = tigercatCore.resizePanes(drag.startSizes, drag.index, delta, mins, maxes);
+        if (newSizes) {
+          setPaneSizes(newSizes);
+          onSizesChange?.(newSizes);
+          onResize?.({ index: drag.index, sizes: newSizes });
+        }
+      };
+      const onMouseUp = (ev) => {
+        const drag = draggingRef.current;
+        if (drag) {
+          const currentPos = direction === "horizontal" ? ev.clientX : ev.clientY;
+          const delta = currentPos - drag.startPos;
+          const finalSizes = tigercatCore.resizePanes(drag.startSizes, drag.index, delta, mins, maxes) ?? drag.startSizes;
+          onResizeEnd?.({ index: drag.index, sizes: finalSizes });
+        }
+        draggingRef.current = null;
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    },
+    [
+      disabled,
+      direction,
+      paneSizes,
+      mins,
+      maxes,
+      onResizeStart,
+      onResize,
+      onResizeEnd,
+      onSizesChange
+    ]
+  );
+  const handleKeyDown = React.useCallback(
+    (gutterIdx, e) => {
+      if (disabled) return;
+      const step = 10;
+      let delta = 0;
+      if (direction === "horizontal" && e.key === "ArrowLeft" || direction === "vertical" && e.key === "ArrowUp") {
+        delta = -step;
+      } else if (direction === "horizontal" && e.key === "ArrowRight" || direction === "vertical" && e.key === "ArrowDown") {
+        delta = step;
+      }
+      if (delta !== 0) {
+        e.preventDefault();
+        const newSizes = tigercatCore.resizePanes(paneSizes, gutterIdx, delta, mins, maxes);
+        if (newSizes) {
+          setPaneSizes(newSizes);
+          onSizesChange?.(newSizes);
+          onResize?.({ index: gutterIdx, sizes: newSizes });
+        }
+      }
+    },
+    [disabled, direction, paneSizes, mins, maxes, onResize, onSizesChange]
+  );
+  const childArray = React__default.default.Children.toArray(children);
+  const containerClasses = React.useMemo(
+    () => tigercatCore.classNames(tigercatCore.getSplitterContainerClasses(direction, className)),
+    [direction, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: containerClasses, style, "data-direction": direction, children: childArray.map((child, i) => {
+    const size = paneSizes[i];
+    const paneStyle = size != null ? tigercatCore.getPaneStyle(size, direction) : void 0;
+    const isDragging = draggingRef.current?.index === i;
+    return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "tiger-splitter-pane relative overflow-auto",
+          style: paneStyle,
+          "data-pane-index": i,
+          children: child
+        }
+      ),
+      i < childArray.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: tigercatCore.getSplitterGutterClasses(direction, !!isDragging, disabled),
+          role: "separator",
+          "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+          tabIndex: disabled ? -1 : 0,
+          "data-gutter-index": i,
+          onMouseDown: (e) => handleMouseDown(i, e),
+          onKeyDown: (e) => handleKeyDown(i, e),
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getSplitterGutterHandleClasses(direction) })
+        }
+      )
+    ] }, i);
+  }) });
+};
+var Splitter_default = Splitter;
+
+exports.Splitter = Splitter;
+exports.Splitter_default = Splitter_default;