@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-ZN2BZCTI.js → chunk-XKDWDANG.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkCIL2AC3F_js = require('./chunk-CIL2AC3F.js');
-var chunkR7MS42PL_js = require('./chunk-R7MS42PL.js');
-var chunkA3DJSVTE_js = require('./chunk-A3DJSVTE.js');
-var chunkTZ26HQAW_js = require('./chunk-TZ26HQAW.js');
+var chunkOYCMGKQ7_js = require('./chunk-OYCMGKQ7.js');
+var chunkVCOBBJLP_js = require('./chunk-VCOBBJLP.js');
+var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var chunkCI2WHAT2_js = require('./chunk-CI2WHAT2.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -104,7 +104,7 @@ var ChatWindow = ({
           role: "listitem",
           children: [
             showAvatar && message.user ? /* @__PURE__ */ jsxRuntime.jsx(
-              chunkTZ26HQAW_js.Avatar,
+              chunkCI2WHAT2_js.Avatar,
               {
                 size: "sm",
                 src: message.user.avatar,
@@ -159,7 +159,7 @@ var ChatWindow = ({
     statusText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-1.5 border-t border-[var(--tiger-border,#e5e7eb)] text-xs italic text-[var(--tiger-text-muted,#6b7280)]", children: statusText }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-3 px-4 py-3 border-t border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] rounded-b-lg", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: inputType === "input" ? /* @__PURE__ */ jsxRuntime.jsx(
-        chunkCIL2AC3F_js.Input,
+        chunkOYCMGKQ7_js.Input,
         {
           value: inputValue,
           placeholder,
@@ -170,7 +170,7 @@ var ChatWindow = ({
           onKeyDown: handleKeyDown
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
-        chunkR7MS42PL_js.Textarea,
+        chunkVCOBBJLP_js.Textarea,
         {
           value: inputValue,
           placeholder,
@@ -182,7 +182,7 @@ var ChatWindow = ({
           onKeyDown: handleKeyDown
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkA3DJSVTE_js.Button, { disabled: !canSend, onClick: handleSend, "aria-label": sendAriaLabel ?? sendText, children: sendText })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { disabled: !canSend, onClick: handleSend, "aria-label": sendAriaLabel ?? sendText, children: sendText })
     ] })
   ] });
 };

package/dist/{chunk-EI2GHMQS.js → chunk-XLVEI7GS.js}

@@ -16,20 +16,22 @@ var Row = ({
   style,
   ...divProps
 }) => {
-  const { rowStyle } = tigercatCore.getGutterStyles(gutter);
-  const rowClasses = tigercatCore.classNames(
-    "flex",
-    "w-full",
-    wrap && "flex-wrap",
-    tigercatCore.getAlignClasses(align),
-    tigercatCore.getJustifyClasses(justify),
-    className
+  const rowClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      "flex",
+      "w-full",
+      wrap && "flex-wrap",
+      tigercatCore.getAlignClasses(align),
+      tigercatCore.getJustifyClasses(justify),
+      className
+    ),
+    [wrap, align, justify, className]
   );
-  const mergedStyle = {
-    ...rowStyle,
-    ...style
-  };
-  const contextValue = { gutter };
+  const mergedStyle = react.useMemo(
+    () => ({ ...tigercatCore.getGutterStyles(gutter).rowStyle, ...style }),
+    [gutter, style]
+  );
+  const contextValue = react.useMemo(() => ({ gutter }), [gutter]);
   return /* @__PURE__ */ jsxRuntime.jsx(RowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: rowClasses, style: mergedStyle, ...divProps, children }) });
 };
 

package/dist/{chunk-6YKZAWNX.js → chunk-XWNVBCJA.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkHDDBBZQH_js = require('./chunk-HDDBBZQH.js');
-var chunkOZLGNWET_js = require('./chunk-OZLGNWET.js');
-var chunkA3DJSVTE_js = require('./chunk-A3DJSVTE.js');
-var chunk6MGEGOYJ_js = require('./chunk-6MGEGOYJ.js');
-var chunkYYGTJKP5_js = require('./chunk-YYGTJKP5.js');
-var chunkVO4WDK4K_js = require('./chunk-VO4WDK4K.js');
+var chunkYV6Y7C43_js = require('./chunk-YV6Y7C43.js');
+var chunkQ57BYUUW_js = require('./chunk-Q57BYUUW.js');
+var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var chunk2GKTVAAB_js = require('./chunk-2GKTVAAB.js');
+var chunkI5TCE5E7_js = require('./chunk-I5TCE5E7.js');
+var chunkSSQOCZ6O_js = require('./chunk-SSQOCZ6O.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -158,13 +158,13 @@ var NotificationCenter = ({
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkYYGTJKP5_js.Text, { tag: "span", size: "sm", weight: isRead ? "normal" : "semibold", children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_js.Text, { tag: "span", size: "sm", weight: isRead ? "normal" : "semibold", children: item.title }),
               timeText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[var(--tiger-text-muted,#6b7280)] whitespace-nowrap flex-shrink-0", children: timeText }) : null
             ] }),
             item.description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2 leading-relaxed", children: item.description }) : null
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkA3DJSVTE_js.Button,
+            chunkF24IF2QL_js.Button,
             {
               size: "sm",
               variant: "ghost",
@@ -187,7 +187,7 @@ var NotificationCenter = ({
     );
   };
   const renderList = (listItems) => /* @__PURE__ */ jsxRuntime.jsx(
-    chunkOZLGNWET_js.List,
+    chunkQ57BYUUW_js.List,
     {
       dataSource: listItems,
       split: true,
@@ -203,7 +203,7 @@ var NotificationCenter = ({
     { key: "unread", label: unreadLabel },
     { key: "read", label: readLabel }
   ];
-  const content = loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(chunk6MGEGOYJ_js.Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(chunkHDDBBZQH_js.Tabs, { type: "line", size: "small", activeKey: currentGroupKey, onChange: handleGroupChange, children: resolvedGroups.map((group, index) => {
+  const content = loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(chunk2GKTVAAB_js.Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(chunkYV6Y7C43_js.Tabs, { type: "line", size: "small", activeKey: currentGroupKey, onChange: handleGroupChange, children: resolvedGroups.map((group, index) => {
     const effectiveGroup = effectiveGroups.find(
       (eg, ei) => getGroupKey(eg, ei) === getGroupKey(group, index)
     );
@@ -212,7 +212,7 @@ var NotificationCenter = ({
     const labelBase = group.title || String(group.key ?? index);
     const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkHDDBBZQH_js.TabPane,
+      chunkYV6Y7C43_js.TabPane,
       {
         tabKey: getGroupKey(group, index),
         label,
@@ -222,17 +222,17 @@ var NotificationCenter = ({
     );
   }) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto", children: renderList(filterItems(effectiveItems, currentReadFilter)) });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClasses, ...props, "data-tiger-notification-center": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    chunkVO4WDK4K_js.Card,
+    chunkSSQOCZ6O_js.Card,
     {
       variant: "bordered",
       className: "w-full",
       header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunkYYGTJKP5_js.Text, { tag: "div", size: "base", weight: "bold", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_js.Text, { tag: "div", size: "base", weight: "bold", children: title }),
             totalUnread > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white", children: totalUnread }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkA3DJSVTE_js.Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex rounded-md border border-[var(--tiger-border,#e5e7eb)] overflow-hidden self-start", children: filterButtons.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",

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-Z7SXK2KO.js

@@ -0,0 +1,171 @@
+'use strict';
+
+var chunkNV3JUZ3N_js = require('./chunk-NV3JUZ3N.js');
+var chunkGNMOOYHG_js = require('./chunk-GNMOOYHG.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SvgIcon = ({ d, className = "w-8 h-8" }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.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] = react.useState(true);
+  const [error, setError] = react.useState(false);
+  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 registeredIndexRef = react.useRef(-1);
+  react.useEffect(() => {
+    if (group && src) {
+      registeredIndexRef.current = group.register(src);
+      return () => {
+        group.unregister(src);
+      };
+    }
+  }, [group, src]);
+  react.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]);
+  react.useEffect(() => {
+    if (!lazy) {
+      setActualSrc(src);
+      setError(false);
+      setLoading(true);
+    }
+  }, [src, lazy]);
+  const handleLoad = react.useCallback(() => {
+    setLoading(false);
+    setError(false);
+  }, []);
+  const handleError = react.useCallback(() => {
+    setLoading(false);
+    setError(true);
+    if (fallbackSrc && actualSrc !== fallbackSrc) {
+      setActualSrc(fallbackSrc);
+      setError(false);
+      setLoading(true);
+    }
+  }, [fallbackSrc, actualSrc]);
+  const handleClick = react.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 = react.useCallback(
+    (e) => {
+      onKeyDown?.(e);
+      if (preview && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        handleClick(e);
+      }
+    },
+    [preview, handleClick, onKeyDown]
+  );
+  const containerClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.imageBaseClasses, preview && tigercatCore.imagePreviewCursorClass, className),
+    [preview, className]
+  );
+  const imgClasses = react.useMemo(() => tigercatCore.getImageImgClasses(fit), [fit]);
+  const containerStyle = react.useMemo(() => {
+    const s = { ...style };
+    const w = tigercatCore.toCSSSize(width);
+    const h = tigercatCore.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__ */ jsxRuntime.jsx("div", { className: tigercatCore.imageErrorClasses, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.imageErrorIconPath }) });
+  } else if (loading && !actualSrc) {
+    content = placeholderRender || /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.imageLoadingClasses, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { d: tigercatCore.imageErrorIconPath }) });
+  } else {
+    content = /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: actualSrc,
+        alt,
+        className: imgClasses,
+        onLoad: handleLoad,
+        onError: handleError
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      chunkGNMOOYHG_js.ImagePreview,
+      {
+        visible: previewVisible,
+        images: [src],
+        currentIndex: 0,
+        onVisibleChange: (val) => {
+          setPreviewVisible(val);
+          onPreviewVisibleChange?.(val);
+        }
+      }
+    )
+  ] });
+};
+
+exports.Image = Image;