@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-C52ZCGYG.mjs → chunk-6PXNWGR5.mjs}

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useId, useMemo, useState, useCallback } from 'react';
-import { classNames, getTabsContainerClasses, getTabNavClasses, getTabNavListClasses, tabContentBaseClasses, isKeyActive, getTabItemClasses, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, tabAddButtonClasses } from '@expcat/tigercat-core';
+import { classNames, getTabsContainerClasses, getTabNavClasses, getTabNavListClasses, isKeyActive, getTabItemClasses, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD, tabAddButtonClasses, tabContentBaseClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/TabPane.tsx
@@ -37,39 +37,26 @@ var Tabs = ({
   const tabNavListClasses = useMemo(() => {
     return getTabNavListClasses(tabPosition, centered);
   }, [tabPosition, centered]);
-  const tabContentClasses = useMemo(() => {
-    return tabContentBaseClasses;
-  }, []);
   const { tabItems, tabPanes, firstTabKey } = useMemo(() => {
     const items = [];
     const panes = [];
     let firstKey;
-    const childrenArray = [];
     React.Children.forEach(children, (child) => {
-      if (React.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.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.cloneElement(child, {
-            renderMode: "tab",
-            tabId,
-            panelId,
-            tabIndex: key === resolvedActiveKey ? 0 : -1
-          })
-        );
-        panes.push(React.cloneElement(child, { renderMode: "pane", tabId, panelId }));
-      }
+      if (!React.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.cloneElement(child, {
+          renderMode: "tab",
+          tabId,
+          panelId,
+          tabIndex: key === resolvedActiveKey ? 0 : -1
+        })
+      );
+      panes.push(React.cloneElement(child, { renderMode: "pane", tabId, panelId }));
     });
     return { tabItems: items, tabPanes: panes, firstTabKey: firstKey };
   }, [children, controlledActiveKey, defaultActiveKey, idBase]);
@@ -121,38 +108,35 @@ var Tabs = ({
       handleTabClose
     ]
   );
-  const tabNavContent = /* @__PURE__ */ jsx("div", { className: tabNavClasses, role: "tablist", children: /* @__PURE__ */ jsxs("div", { className: tabNavListClasses, children: [
-    tabItems,
-    type === "editable-card" && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: tabAddButtonClasses,
-        onClick: handleTabAdd,
-        "aria-label": "Add tab",
-        children: "+"
-      }
-    )
-  ] }) });
-  const tabContent = /* @__PURE__ */ jsx("div", { className: tabContentClasses, children: tabPanes });
-  let content;
-  if (tabPosition === "left" || tabPosition === "right") {
-    content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      tabNavContent,
-      tabContent
-    ] });
-  } else if (tabPosition === "bottom") {
-    content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      tabContent,
-      tabNavContent
-    ] });
-  } else {
-    content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      tabNavContent,
-      tabContent
-    ] });
-  }
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, style, children: content }) });
+  const tabNavContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tabNavClasses,
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
+      children: /* @__PURE__ */ jsxs("div", { className: tabNavListClasses, children: [
+        tabItems,
+        type === "editable-card" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: tabAddButtonClasses,
+            onClick: handleTabAdd,
+            "aria-label": "Add tab",
+            children: "+"
+          }
+        )
+      ] })
+    }
+  );
+  const tabContent = /* @__PURE__ */ jsx("div", { className: tabContentBaseClasses, children: tabPanes });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, style, children: tabPosition === "bottom" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    tabContent,
+    tabNavContent
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    tabNavContent,
+    tabContent
+  ] }) }) });
 };
 var TabPane = ({
   tabKey,
@@ -179,7 +163,7 @@ var TabPane = ({
     return closable !== void 0 ? closable : tabsContext.closable && tabsContext.type === "editable-card";
   }, [closable, tabsContext.closable, tabsContext.type]);
   const tabItemClasses = useMemo(() => {
-    return classNames(getTabItemClasses(isActive, disabled, tabsContext.type, tabsContext.size));
+    return getTabItemClasses(isActive, disabled, tabsContext.type, tabsContext.size);
   }, [isActive, disabled, tabsContext.type, tabsContext.size]);
   const tabPaneClasses = useMemo(() => {
     return classNames(getTabPaneClasses(isActive), className);
@@ -280,9 +264,9 @@ var TabPane = ({
               children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: closeIconViewBox, children: /* @__PURE__ */ jsx(
                 "path",
                 {
-                  strokeLinecap: closeIconPathStrokeLinecap,
-                  strokeLinejoin: closeIconPathStrokeLinejoin,
-                  strokeWidth: closeIconPathStrokeWidth,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
                   d: closeIconPathD
                 }
               ) })

package/dist/chunk-6W6CRBBG.mjs

@@ -0,0 +1,169 @@
+import { ImageGroupContext } from './chunk-QIJG42YQ.mjs';
+import { ImagePreview } from './chunk-5CLXOFRZ.mjs';
+import { useState, useRef, useContext, useEffect, useCallback, useMemo } from 'react';
+import { classNames, imageBaseClasses, imagePreviewCursorClass, getImageImgClasses, toCSSSize, imageErrorClasses, imageErrorIconPath, imageLoadingClasses } from '@expcat/tigercat-core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var SvgIcon = ({ d, className = "w-8 h-8" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", d })
+  }
+);
+var Image = ({
+  src,
+  alt = "",
+  width,
+  height,
+  fit = "cover",
+  fallbackSrc,
+  preview = true,
+  lazy = false,
+  className,
+  errorRender,
+  placeholderRender,
+  onPreviewVisibleChange,
+  onClick,
+  onKeyDown,
+  style,
+  ...props
+}) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [actualSrc, setActualSrc] = useState(lazy ? "" : src);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const containerRef = useRef(null);
+  const group = useContext(ImageGroupContext);
+  const registeredIndexRef = useRef(-1);
+  useEffect(() => {
+    if (group && src) {
+      registeredIndexRef.current = group.register(src);
+      return () => {
+        group.unregister(src);
+      };
+    }
+  }, [group, src]);
+  useEffect(() => {
+    if (!lazy || !containerRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setActualSrc(src);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.01 }
+    );
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [lazy, src]);
+  useEffect(() => {
+    if (!lazy) {
+      setActualSrc(src);
+      setError(false);
+      setLoading(true);
+    }
+  }, [src, lazy]);
+  const handleLoad = useCallback(() => {
+    setLoading(false);
+    setError(false);
+  }, []);
+  const handleError = useCallback(() => {
+    setLoading(false);
+    setError(true);
+    if (fallbackSrc && actualSrc !== fallbackSrc) {
+      setActualSrc(fallbackSrc);
+      setError(false);
+      setLoading(true);
+    }
+  }, [fallbackSrc, actualSrc]);
+  const handleClick = useCallback(
+    (e) => {
+      onClick?.(e);
+      if (!preview) return;
+      if (group) {
+        group.openPreview(registeredIndexRef.current >= 0 ? registeredIndexRef.current : 0);
+      } else {
+        setPreviewVisible(true);
+        onPreviewVisibleChange?.(true);
+      }
+    },
+    [preview, group, onClick, onPreviewVisibleChange]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      onKeyDown?.(e);
+      if (preview && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        handleClick(e);
+      }
+    },
+    [preview, handleClick, onKeyDown]
+  );
+  const containerClasses = useMemo(
+    () => classNames(imageBaseClasses, preview && imagePreviewCursorClass, className),
+    [preview, className]
+  );
+  const imgClasses = useMemo(() => getImageImgClasses(fit), [fit]);
+  const containerStyle = useMemo(() => {
+    const s = { ...style };
+    const w = toCSSSize(width);
+    const h = toCSSSize(height);
+    if (w) s.width = w;
+    if (h) s.height = h;
+    return s;
+  }, [width, height, style]);
+  let content;
+  if (error && !fallbackSrc) {
+    content = errorRender || /* @__PURE__ */ jsx("div", { className: imageErrorClasses, children: /* @__PURE__ */ jsx(SvgIcon, { d: imageErrorIconPath }) });
+  } else if (loading && !actualSrc) {
+    content = placeholderRender || /* @__PURE__ */ jsx("div", { className: imageLoadingClasses, children: /* @__PURE__ */ jsx(SvgIcon, { d: imageErrorIconPath }) });
+  } else {
+    content = /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: actualSrc,
+        alt,
+        className: imgClasses,
+        onLoad: handleLoad,
+        onError: handleError
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref: containerRef,
+        className: containerClasses,
+        style: containerStyle,
+        role: preview ? "button" : void 0,
+        tabIndex: preview ? 0 : void 0,
+        "aria-label": preview ? `Preview ${alt || "image"}` : void 0,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: content
+      }
+    ),
+    !group && previewVisible && src && /* @__PURE__ */ jsx(
+      ImagePreview,
+      {
+        visible: previewVisible,
+        images: [src],
+        currentIndex: 0,
+        onVisibleChange: (val) => {
+          setPreviewVisible(val);
+          onPreviewVisibleChange?.(val);
+        }
+      }
+    )
+  ] });
+};
+
+export { Image };

package/dist/{chunk-MQTHGPHF.js → chunk-72MWKUBC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkJW64IJP2_js = require('./chunk-JW64IJP2.js');
+var chunkXWRJVNB6_js = require('./chunk-XWRJVNB6.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -9,6 +9,21 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+function hasRequiredRule(maybeRules) {
+  if (!maybeRules) return false;
+  const ruleArr = Array.isArray(maybeRules) ? maybeRules : [maybeRules];
+  return ruleArr.some((rule) => !!rule && typeof rule === "object" && !!rule.required);
+}
+function mergeAriaDescribedBy(existing, next) {
+  if (!existing) return next;
+  if (!next) return existing;
+  const parts = new Set(
+    `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
+  );
+  return Array.from(parts).join(" ");
+}
+var FIELD_CLASSES = tigercatCore.getFormItemFieldClasses();
+var ASTERISK_CLASSES = tigercatCore.getFormItemAsteriskClasses();
 var FormItem = ({
   name,
   label,
@@ -21,28 +36,15 @@ var FormItem = ({
   children,
   className
 }) => {
-  const formContext = chunkJW64IJP2_js.useFormContext();
+  const formContext = chunkXWRJVNB6_js.useFormContext();
   const [errorMessage, setErrorMessage] = React.useState("");
+  const [shakeTrigger, setShakeTrigger] = React.useState(0);
+  const prevFormErrorRef = React.useRef("");
   const reactId = React.useId();
-  const baseId = React.useMemo(() => `tiger-form-item-${reactId}`, [reactId]);
+  const baseId = `tiger-form-item-${reactId}`;
   const labelId = `${baseId}-label`;
   const fieldId = `${baseId}-field`;
   const errorId = `${baseId}-error`;
-  const mergeAriaDescribedBy = React.useCallback(
-    (existing, next) => {
-      if (!existing) {
-        return next;
-      }
-      if (!next) {
-        return existing;
-      }
-      const parts = new Set(
-        `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
-      );
-      return Array.from(parts).join(" ");
-    },
-    []
-  );
   const actualSize = size || formContext?.size || "md";
   const labelPosition = formContext?.labelPosition || "right";
   const labelAlign = formContext?.labelAlign || "right";
@@ -53,18 +55,6 @@ var FormItem = ({
     }
     return width;
   }, [labelWidth, formContext?.labelWidth]);
-  const hasRequiredRule = React.useCallback((maybeRules) => {
-    if (!maybeRules) {
-      return false;
-    }
-    const rules2 = Array.isArray(maybeRules) ? maybeRules : [maybeRules];
-    return rules2.some((rule) => {
-      if (!rule || typeof rule !== "object") {
-        return false;
-      }
-      return !!rule.required;
-    });
-  }, []);
   const showRequiredAsterisk = React.useMemo(() => {
     if (required !== void 0) {
       return required;
@@ -79,15 +69,19 @@ var FormItem = ({
       }
     }
     return false;
-  }, [required, rules, name, formContext?.rules, hasRequiredRule]);
+  }, [required, rules, name, formContext?.rules]);
   const isRequired = React.useMemo(
     () => showRequiredAsterisk && (formContext?.showRequiredAsterisk ?? true),
     [showRequiredAsterisk, formContext?.showRequiredAsterisk]
   );
   React.useEffect(() => {
     if (name && formContext?.errors) {
-      const error = tigercatCore.getFieldError(name, formContext.errors);
-      setErrorMessage(error || "");
+      const error = tigercatCore.getFieldError(name, formContext.errors) || "";
+      setErrorMessage(error);
+      if (error && error !== prevFormErrorRef.current) {
+        setShakeTrigger((prev) => prev + 1);
+      }
+      prevFormErrorRef.current = error;
     }
   }, [name, formContext?.errors]);
   React.useEffect(() => {
@@ -116,7 +110,7 @@ var FormItem = ({
       formContext.validateField(name, rules, "change");
     }
   }, [name, formContext, rules]);
-  const hasError = React.useMemo(() => !!errorMessage, [errorMessage]);
+  const hasError = !!errorMessage;
   const describedById = React.useMemo(
     () => showMessage && hasError ? errorId : void 0,
     [showMessage, hasError, errorId]
@@ -129,6 +123,7 @@ var FormItem = ({
     return React__default.default.Children.toArray(children)[0] ?? null;
   }, [children]);
   const isClonableChild = React__default.default.isValidElement(onlyChild);
+  const isNativeElement = isClonableChild && typeof onlyChild.type === "string";
   const childId = isClonableChild ? onlyChild.props.id : void 0;
   const effectiveFieldId = childId ?? fieldId;
   const enhancedChild = React.useMemo(() => {
@@ -137,6 +132,9 @@ var FormItem = ({
     }
     const nextProps = {
       id: effectiveFieldId,
+      status: !isNativeElement && hasError ? "error" : onlyChild.props.status,
+      errorMessage: !isNativeElement && hasError && !showMessage ? errorMessage : onlyChild.props.errorMessage,
+      _shakeTrigger: !isNativeElement && hasError ? shakeTrigger : void 0,
       "aria-invalid": hasError ? true : onlyChild.props["aria-invalid"],
       "aria-required": isRequired ? true : onlyChild.props["aria-required"],
       "aria-describedby": mergeAriaDescribedBy(onlyChild.props["aria-describedby"], describedById),
@@ -156,8 +154,11 @@ var FormItem = ({
     onlyChild,
     effectiveFieldId,
     hasError,
+    errorMessage,
+    showMessage,
+    shakeTrigger,
     isRequired,
-    mergeAriaDescribedBy,
+    isNativeElement,
     describedById,
     handleBlur,
     handleChange
@@ -190,13 +191,10 @@ var FormItem = ({
     return actualLabelWidth ? { width: actualLabelWidth } : {};
   }, [labelPosition, actualLabelWidth]);
   const errorClasses = React.useMemo(
-    () => tigercatCore.classNames(tigercatCore.getFormItemErrorClasses(actualSize), hasError && "tiger-form-item__error--show"),
+    () => tigercatCore.classNames(tigercatCore.getFormItemErrorClasses(actualSize), hasError && "opacity-100"),
     [actualSize, hasError]
   );
   const contentClasses = React.useMemo(() => tigercatCore.getFormItemContentClasses(labelPosition), [labelPosition]);
-  const fieldClasses = React.useMemo(() => tigercatCore.getFormItemFieldClasses(), []);
-  const asteriskClasses = React.useMemo(() => tigercatCore.getFormItemAsteriskClasses(), []);
-  const asteriskStyle = React.useMemo(() => tigercatCore.getFormItemAsteriskStyle(), []);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: formItemClasses, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
@@ -206,7 +204,7 @@ var FormItem = ({
         style: labelStyles,
         htmlFor: isClonableChild ? effectiveFieldId : void 0,
         children: [
-          isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: asteriskClasses, style: asteriskStyle, children: "*" }),
+          isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ASTERISK_CLASSES, children: "*" }),
           label
         ]
       }
@@ -215,7 +213,7 @@ var FormItem = ({
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: fieldClasses,
+          className: FIELD_CLASSES,
           role: "group",
           "aria-labelledby": label ? labelId : void 0,
           "aria-describedby": describedById,
@@ -226,7 +224,16 @@ var FormItem = ({
           children: enhancedChild
         }
       ),
-      showMessage && hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, role: "alert", className: errorClasses, children: errorMessage })
+      showMessage && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: hasError ? errorId : void 0,
+          role: hasError ? "alert" : void 0,
+          className: errorClasses,
+          "aria-hidden": hasError ? void 0 : true,
+          children: hasError ? errorMessage : ""
+        }
+      )
     ] })
   ] });
 };