@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-P4EFJIXU.mjs → chunk-AUP3PMDD.mjs}

@@ -1,5 +1,5 @@
-import { classNames, getStepsContainerClasses, calculateStepStatus, getStepItemClasses, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, stepFinishIconViewBox, stepFinishIconSvgClasses, stepFinishIconPathD, stepFinishIconPathStrokeWidth, stepFinishIconPathStrokeLinejoin, stepFinishIconPathStrokeLinecap } from '@expcat/tigercat-core';
-import React, { createContext, useContext } from 'react';
+import { classNames, getStepsContainerClasses, calculateStepStatus, getStepItemClasses, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, stepFinishChar } from '@expcat/tigercat-core';
+import React, { createContext, useContext, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/StepsItem.tsx
@@ -20,14 +20,15 @@ var Steps = ({
   children,
   ...props
 }) => {
-  const containerClasses = classNames(getStepsContainerClasses(direction), className);
-  const handleStepClick = (index) => {
-    if (!clickable) {
-      return;
-    }
+  const containerClasses = useMemo(
+    () => classNames(getStepsContainerClasses(direction), className),
+    [direction, className]
+  );
+  const handleStepClick = useCallback((index) => {
+    if (!clickable) return;
     onChange?.(index);
-  };
-  const contextValue = {
+  }, [clickable, onChange]);
+  const contextValue = useMemo(() => ({
     current,
     status,
     direction,
@@ -35,7 +36,7 @@ var Steps = ({
     simple,
     clickable,
     handleStepClick: clickable ? handleStepClick : void 0
-  };
+  }), [current, status, direction, size, simple, clickable, handleStepClick]);
   const totalCount = React.Children.count(children);
   const stepsWithProps = React.Children.map(children, (child, index) => {
     if (React.isValidElement(child) && child.type === StepsItem) {
@@ -46,10 +47,7 @@ var Steps = ({
     }
     return child;
   });
-  const mergedStyle = {
-    ...style ?? {}
-  };
-  return /* @__PURE__ */ jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { ...props, className: containerClasses, style: mergedStyle, children: stepsWithProps }) });
+  return /* @__PURE__ */ jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("ol", { ...props, className: containerClasses, style, children: stepsWithProps }) });
 };
 var StepsItem = ({
   title,
@@ -79,18 +77,16 @@ var StepsItem = ({
   );
   const isClickable = !!stepsContext.handleStepClick && !disabled;
   const itemClasses = classNames(
-    getStepItemClasses(stepsContext.direction, isLast, stepsContext.simple),
+    getStepItemClasses(stepsContext.direction, isLast),
     className
   );
   const iconClasses = getStepIconClasses(stepStatus, stepsContext.size, stepsContext.simple, !!icon);
-  const tailClasses = getStepTailClasses(stepsContext.direction, stepStatus, isLast);
-  const contentClasses = getStepContentClasses(stepsContext.direction, stepsContext.simple);
+  const tailClasses = getStepTailClasses(stepsContext.direction, stepStatus, isLast, stepsContext.size, stepsContext.simple);
+  const contentClasses = getStepContentClasses(stepsContext.direction);
   const titleClasses = getStepTitleClasses(stepStatus, stepsContext.size, isClickable);
   const descriptionClasses = getStepDescriptionClasses(stepStatus, stepsContext.size);
-  const handleClick = (_event) => {
-    if (!isClickable) {
-      return;
-    }
+  const handleClick = () => {
+    if (!isClickable) return;
     stepsContext.handleStepClick?.(stepIndex);
   };
   const renderIcon = () => {
@@ -98,26 +94,7 @@ var StepsItem = ({
       return /* @__PURE__ */ jsx("div", { className: iconClasses, children: icon });
     }
     if (stepStatus === "finish") {
-      return /* @__PURE__ */ jsx("div", { className: iconClasses, children: /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: stepFinishIconSvgClasses,
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: stepFinishIconViewBox,
-          "aria-hidden": "true",
-          focusable: "false",
-          children: /* @__PURE__ */ jsx(
-            "path",
-            {
-              strokeLinecap: stepFinishIconPathStrokeLinecap,
-              strokeLinejoin: stepFinishIconPathStrokeLinejoin,
-              strokeWidth: stepFinishIconPathStrokeWidth,
-              d: stepFinishIconPathD
-            }
-          )
-        }
-      ) });
+      return /* @__PURE__ */ jsx("div", { className: iconClasses, "aria-hidden": "true", children: stepFinishChar });
     }
     return /* @__PURE__ */ jsx("div", { className: iconClasses, children: stepIndex + 1 });
   };

package/dist/{chunk-PUDU34R4.mjs → chunk-AVUXDQYO.mjs}

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { injectLoadingAnimationStyles, getLoadingClasses, getLoadingTextClasses, classNames, loadingFullscreenBaseClasses, loadingContainerBaseClasses, getSpinnerSVG, loadingColorClasses, getLoadingBarsWrapperClasses, getLoadingBarClasses, getLoadingDotsWrapperClasses, getLoadingDotClasses } from '@expcat/tigercat-core';
+import { useEffect, useState, useMemo } from 'react';
+import { injectLoadingAnimationStyles, classNames, loadingFullscreenBaseClasses, loadingContainerBaseClasses, getLoadingTextClasses, getSpinnerSVG, getLoadingClasses, loadingColorClasses, getLoadingBarsWrapperClasses, getLoadingBarClasses, getLoadingDotsWrapperClasses, getLoadingDotClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Loading.tsx
@@ -12,35 +12,41 @@ var Loading = ({
   delay = 0,
   background = "rgba(255, 255, 255, 0.9)",
   customColor,
-  className = "",
+  className,
   style,
   ...props
 }) => {
   useEffect(() => {
     injectLoadingAnimationStyles();
   }, []);
-  const [visible, setVisible] = useState(delay === 0);
+  const [visible, setVisible] = useState(delay <= 0);
   useEffect(() => {
-    if (delay > 0) {
-      const timer = setTimeout(() => {
-        setVisible(true);
-      }, delay);
-      return () => clearTimeout(timer);
+    if (delay <= 0) {
+      setVisible(true);
+      return;
     }
+    setVisible(false);
+    const timer = setTimeout(() => setVisible(true), delay);
+    return () => clearTimeout(timer);
   }, [delay]);
-  const spinnerClasses = getLoadingClasses(variant, size, color, customColor);
-  const textClasses = getLoadingTextClasses(size, color, customColor);
-  const containerClasses = classNames(
-    fullscreen ? loadingFullscreenBaseClasses : loadingContainerBaseClasses,
-    className
+  const containerClasses = useMemo(
+    () => classNames(
+      fullscreen ? loadingFullscreenBaseClasses : loadingContainerBaseClasses,
+      className
+    ),
+    [fullscreen, className]
+  );
+  const mergedStyle = useMemo(
+    () => ({
+      ...customColor ? { color: customColor } : null,
+      ...fullscreen ? { backgroundColor: background } : null,
+      ...style
+    }),
+    [customColor, fullscreen, background, style]
   );
-  const mergedStyle = {
-    ...customColor ? { color: customColor } : null,
-    ...fullscreen ? { backgroundColor: background } : null,
-    ...style
-  };
   const renderSpinner = () => {
     const svg = getSpinnerSVG(variant);
+    const spinnerClasses = getLoadingClasses(variant, size, color, customColor);
     return /* @__PURE__ */ jsx(
       "svg",
       {
@@ -97,7 +103,7 @@ var Loading = ({
       ...props,
       children: [
         renderIndicator(),
-        text && /* @__PURE__ */ jsx("div", { className: textClasses, children: text })
+        text && /* @__PURE__ */ jsx("div", { className: getLoadingTextClasses(size, color, customColor), children: text })
       ]
     }
   );

package/dist/{chunk-HUZVBDHV.js → chunk-AY5Z3NIW.js}

@@ -29,34 +29,29 @@ var BackTop = ({
   ...props
 }) => {
   const [visible, setVisible] = react.useState(false);
-  const handleScroll = react.useCallback(() => {
-    const targetElement = target();
-    if (!targetElement) return;
-    const scrollTop = tigercatCore.getScrollTop(targetElement);
-    setVisible(scrollTop >= visibilityHeight);
+  react.useEffect(() => {
+    const el = target();
+    if (!el) return;
+    const onScroll = () => {
+      setVisible(tigercatCore.getScrollTop(el) >= visibilityHeight);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+    };
   }, [target, visibilityHeight]);
   const handleClick = react.useCallback(
     (event) => {
-      const targetElement = target();
-      if (targetElement) {
-        tigercatCore.scrollToTop(targetElement, duration);
-      }
+      const el = target();
+      if (el) tigercatCore.scrollToTop(el, duration);
       onClick?.(event);
     },
     [target, duration, onClick]
   );
-  react.useEffect(() => {
-    const targetElement = target();
-    if (!targetElement) return;
-    targetElement.addEventListener("scroll", handleScroll, { passive: true });
-    handleScroll();
-    return () => {
-      targetElement.removeEventListener("scroll", handleScroll);
-    };
-  }, [target, handleScroll]);
   const buttonClasses = react.useMemo(() => {
-    const targetElement = target();
-    const positionClasses = !targetElement || targetElement === window ? tigercatCore.backTopButtonClasses : tigercatCore.backTopContainerClasses;
+    const el = target();
+    const positionClasses = !el || el === window ? tigercatCore.backTopButtonClasses : tigercatCore.backTopContainerClasses;
     return tigercatCore.classNames(
       positionClasses,
       visible ? tigercatCore.backTopVisibleClasses : tigercatCore.backTopHiddenClasses,

package/dist/{chunk-67EK62HG.mjs → chunk-B3LRUKXM.mjs}

@@ -1,4 +1,4 @@
-import { useAnchorContext } from './chunk-YIF5VX7K.mjs';
+import { useAnchorContext } from './chunk-FNDPGSEW.mjs';
 import React, { useEffect, useMemo } from 'react';
 import { classNames, getAnchorLinkClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-JAVDNFJD.js → chunk-C7UKFKVY.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkGXTBCX3M_js = require('./chunk-GXTBCX3M.js');
-var chunkA3DJSVTE_js = require('./chunk-A3DJSVTE.js');
-var chunk3OF7XPIQ_js = require('./chunk-3OF7XPIQ.js');
+var chunkH5MZ54PM_js = require('./chunk-H5MZ54PM.js');
+var chunkQL6UEG3U_js = require('./chunk-QL6UEG3U.js');
+var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -17,9 +17,10 @@ var FormWizard = ({
   simple = false,
   showSteps = true,
   showActions = true,
-  prevText = "Previous",
-  nextText = "Next",
-  finishText = "Finish",
+  prevText,
+  nextText,
+  finishText,
+  locale,
   beforeNext,
   onChange,
   onFinish,
@@ -28,8 +29,13 @@ var FormWizard = ({
   style,
   ...props
 }) => {
+  const config = chunkQL6UEG3U_js.useTigerConfig();
+  const mergedLocale = react.useMemo(
+    () => tigercatCore.mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = react.useMemo(() => tigercatCore.getFormWizardLabels(mergedLocale), [mergedLocale]);
   const [innerCurrent, setInnerCurrent] = react.useState(defaultCurrent);
-  const [errorMessage, setErrorMessage] = react.useState(null);
   react.useEffect(() => {
     if (current !== void 0) setInnerCurrent(current);
   }, [current]);
@@ -38,7 +44,10 @@ var FormWizard = ({
   const currentStep = steps[currentIndex];
   const isFirst = currentIndex <= 0;
   const isLast = currentIndex >= totalCount - 1;
-  const wrapperClasses = tigercatCore.classNames("tiger-form-wizard flex flex-col gap-6 w-full", className);
+  const wrapperClasses = tigercatCore.classNames(
+    "tiger-form-wizard w-full rounded-lg border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] shadow-sm overflow-hidden",
+    className
+  );
   const setCurrent = react.useCallback(
     (next) => {
       const max = Math.max(totalCount - 1, 0);
@@ -52,24 +61,13 @@ var FormWizard = ({
   );
   const runBeforeNext = react.useCallback(async () => {
     if (!beforeNext || !currentStep) {
-      setErrorMessage(null);
       return true;
     }
     const result = await beforeNext(currentIndex, currentStep, steps);
-    if (result === true) {
-      setErrorMessage(null);
-      return true;
-    }
-    if (typeof result === "string") {
-      setErrorMessage(result);
-    } else {
-      setErrorMessage(null);
-    }
-    return false;
+    return result === true;
   }, [beforeNext, currentIndex, currentStep, steps]);
   const handlePrev = react.useCallback(() => {
     if (currentIndex <= 0 || steps[currentIndex - 1]?.disabled) return;
-    setErrorMessage(null);
     setCurrent(currentIndex - 1);
   }, [currentIndex, setCurrent, steps]);
   const handleNext = react.useCallback(async () => {
@@ -81,7 +79,6 @@ var FormWizard = ({
       return;
     }
     if (steps[currentIndex + 1]?.disabled) return;
-    setErrorMessage(null);
     setCurrent(currentIndex + 1);
   }, [currentIndex, totalCount, isLast, onFinish, runBeforeNext, setCurrent, steps]);
   const handleStepChange = react.useCallback(
@@ -91,7 +88,6 @@ var FormWizard = ({
         const ok = await runBeforeNext();
         if (!ok) return;
       }
-      setErrorMessage(null);
       setCurrent(nextIndex);
     },
     [currentIndex, runBeforeNext, setCurrent, steps]
@@ -103,7 +99,7 @@ var FormWizard = ({
   }, [currentIndex, currentStep, renderStep]);
   const stepsNodes = react.useMemo(
     () => steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      chunkGXTBCX3M_js.StepsItem,
+      chunkH5MZ54PM_js.StepsItem,
       {
         title: step.title,
         description: step.description,
@@ -116,8 +112,8 @@ var FormWizard = ({
     [steps]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, style, "data-tiger-form-wizard": true, ...props, children: [
-    showSteps && steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkGXTBCX3M_js.Steps,
+    showSteps && steps.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-5 bg-[var(--tiger-surface-muted,#f9fafb)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+      chunkH5MZ54PM_js.Steps,
       {
         current: currentIndex,
         direction,
@@ -127,14 +123,11 @@ var FormWizard = ({
         onChange: handleStepChange,
         children: stepsNodes
       }
-    ),
-    errorMessage && /* @__PURE__ */ jsxRuntime.jsx(chunk3OF7XPIQ_js.Alert, { type: "error", description: errorMessage, className: "tiger-form-wizard-alert" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiger-form-wizard-body rounded-lg border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] p-6", children: [
-      contentNode,
-      showActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiger-form-wizard-actions flex items-center justify-between border-t border-[var(--tiger-border,#e5e7eb)] pt-4 mt-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkA3DJSVTE_js.Button, { type: "button", variant: "secondary", disabled: isFirst, onClick: handlePrev, children: prevText }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkA3DJSVTE_js.Button, { type: "button", variant: "primary", onClick: handleNext, children: isLast ? finishText : nextText })
-      ] })
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4 flex flex-col items-center", children: contentNode }),
+    showActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 px-6 py-2 border-t border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface-muted,#f9fafb)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { type: "button", variant: "secondary", disabled: isFirst, onClick: handlePrev, children: tigercatCore.resolveLocaleText(labels.prevText, prevText) }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { type: "button", variant: "primary", onClick: handleNext, children: isLast ? tigercatCore.resolveLocaleText(labels.finishText, finishText) : tigercatCore.resolveLocaleText(labels.nextText, nextText) })
     ] })
   ] });
 };

package/dist/{chunk-TZ26HQAW.js → chunk-CI2WHAT2.js}

@@ -25,47 +25,27 @@ var Avatar = ({
   const ariaHiddenProp = props["aria-hidden"];
   const computedLabel = ariaLabelProp ?? (alt.trim() ? alt : void 0) ?? (text?.trim() || void 0);
   const isDecorative = ariaHiddenProp === true || !computedLabel && !ariaLabelledbyProp;
-  const avatarClasses = tigercatCore.classNames(
-    tigercatCore.avatarBaseClasses,
-    tigercatCore.avatarSizeClasses[size],
-    tigercatCore.avatarShapeClasses[shape],
-    !hasImage && bgColor,
-    !hasImage && textColor,
-    className
+  const avatarClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      tigercatCore.avatarBaseClasses,
+      tigercatCore.avatarSizeClasses[size],
+      tigercatCore.avatarShapeClasses[shape],
+      !hasImage && bgColor,
+      !hasImage && textColor,
+      className
+    ),
+    [size, shape, hasImage, bgColor, textColor, className]
   );
   if (hasImage) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: avatarClasses, "aria-hidden": isDecorative ? true : ariaHiddenProp, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
       {
-        ...props,
-        className: avatarClasses,
-        "aria-hidden": isDecorative ? true : props["aria-hidden"],
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src,
-            alt,
-            className: tigercatCore.avatarImageClasses,
-            onError: () => setImageError(true)
-          }
-        )
+        src,
+        alt,
+        className: tigercatCore.avatarImageClasses,
+        onError: () => setImageError(true)
       }
-    );
-  }
-  if (displayText) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        ...props,
-        className: avatarClasses,
-        ...isDecorative ? { "aria-hidden": true } : {
-          role: "img",
-          "aria-label": computedLabel,
-          "aria-labelledby": ariaLabelledbyProp
-        },
-        children: displayText
-      }
-    );
+    ) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -77,7 +57,7 @@ var Avatar = ({
         "aria-label": computedLabel,
         "aria-labelledby": ariaLabelledbyProp
       },
-      children
+      children: displayText || children
     }
   );
 };