@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-6744DTEB.mjs → chunk-JSUDEK2D.mjs}

@@ -1,146 +1,12 @@
-import React, { createContext, useContext, useId, useMemo, useState, useCallback, useRef } from 'react';
-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';
+import React, { createContext, useContext, useMemo, useRef, useId, useState, useCallback } from 'react';
+import { isKeyActive, getTabItemClasses, classNames, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD, getTabsContainerClasses, getTabNavClasses, getTabNavListClasses, getTabNavListStyle, getTabIndicatorStyle, getTabIndicatorClasses, tabAddButtonClasses, tabContentBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-// src/components/TabPane.tsx
+// src/components/Tabs.tsx
 var TabsContext = createContext(null);
 function useTabsContext() {
   return useContext(TabsContext);
 }
-var Tabs = ({
-  activeKey: controlledActiveKey,
-  defaultActiveKey,
-  type = "line",
-  tabPosition = "top",
-  size = "medium",
-  closable = false,
-  centered = false,
-  destroyInactiveTabPane = false,
-  lazy = false,
-  className,
-  style,
-  onChange,
-  onTabClick,
-  onEdit,
-  children
-}) => {
-  const reactId = useId();
-  const idBase = useMemo(() => `tiger-tabs-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
-  const [internalActiveKey, setInternalActiveKey] = useState(
-    defaultActiveKey
-  );
-  const containerClasses = useMemo(() => {
-    return classNames(getTabsContainerClasses(tabPosition), className);
-  }, [tabPosition, className]);
-  const tabNavClasses = useMemo(() => {
-    return getTabNavClasses(tabPosition, type);
-  }, [tabPosition, type]);
-  const tabNavListClasses = useMemo(() => {
-    return getTabNavListClasses(tabPosition, centered);
-  }, [tabPosition, centered]);
-  const { tabItems, tabPanes, firstTabKey } = useMemo(() => {
-    const items = [];
-    const panes = [];
-    let firstKey;
-    React.Children.forEach(children, (child) => {
-      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]);
-  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
-  const handleTabClick = useCallback(
-    (key) => {
-      onTabClick?.(key);
-      if (key === activeKey) {
-        return;
-      }
-      if (controlledActiveKey === void 0) {
-        setInternalActiveKey(key);
-      }
-      onChange?.(key);
-    },
-    [activeKey, controlledActiveKey, onChange, onTabClick]
-  );
-  const handleTabClose = useCallback(
-    (key, event) => {
-      event.stopPropagation();
-      onEdit?.({ targetKey: key, action: "remove" });
-    },
-    [onEdit]
-  );
-  const handleTabAdd = useCallback(() => {
-    onEdit?.({ targetKey: void 0, action: "add" });
-  }, [onEdit]);
-  const contextValue = useMemo(
-    () => ({
-      activeKey,
-      type,
-      size,
-      tabPosition,
-      closable,
-      destroyInactiveTabPane,
-      lazy,
-      idBase,
-      handleTabClick,
-      handleTabClose
-    }),
-    [
-      activeKey,
-      type,
-      size,
-      tabPosition,
-      closable,
-      destroyInactiveTabPane,
-      lazy,
-      idBase,
-      handleTabClick,
-      handleTabClose
-    ]
-  );
-  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,
   label,
@@ -202,8 +68,8 @@ var TabPane = ({
     const tabButtons = Array.from(
       tabList?.querySelectorAll('[role="tab"]') ?? []
     );
-    const enabled = tabButtons.filter((b) => !b.disabled);
-    const currentIndex = enabled.findIndex((b) => b.id === tabId);
+    const enabled = tabButtons.filter((button) => !button.disabled);
+    const currentIndex = enabled.findIndex((button) => button.id === tabId);
     if (currentIndex === -1) {
       return;
     }
@@ -298,5 +164,158 @@ var TabPane = ({
     }
   );
 };
+var Tabs = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  type = "line",
+  tabPosition = "top",
+  size = "medium",
+  closable = false,
+  centered = false,
+  destroyInactiveTabPane = false,
+  lazy = false,
+  className,
+  style,
+  onChange,
+  onTabClick,
+  onEdit,
+  children
+}) => {
+  const reactId = useId();
+  const idBase = useMemo(() => `tiger-tabs-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
+  const [internalActiveKey, setInternalActiveKey] = useState(
+    defaultActiveKey
+  );
+  const containerClasses = useMemo(() => {
+    return classNames(getTabsContainerClasses(tabPosition), className);
+  }, [tabPosition, className]);
+  const tabNavClasses = useMemo(() => {
+    return getTabNavClasses(tabPosition, type);
+  }, [tabPosition, type]);
+  const tabNavListClasses = useMemo(() => {
+    return getTabNavListClasses(tabPosition, centered);
+  }, [tabPosition, centered]);
+  const { tabItems, tabPanes, firstTabKey, tabKeys } = useMemo(() => {
+    const items = [];
+    const panes = [];
+    const keys = [];
+    let firstKey;
+    React.Children.forEach(children, (child) => {
+      if (!React.isValidElement(child) || child.type !== TabPane) return;
+      const key = child.props.tabKey;
+      if (firstKey === void 0) firstKey = key;
+      keys.push(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, tabKeys: keys };
+  }, [children, controlledActiveKey, defaultActiveKey, idBase]);
+  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
+  const activeTabIndex = useMemo(() => tabKeys.indexOf(activeKey ?? ""), [tabKeys, activeKey]);
+  const handleTabClick = useCallback(
+    (key) => {
+      onTabClick?.(key);
+      if (key === activeKey) {
+        return;
+      }
+      if (controlledActiveKey === void 0) {
+        setInternalActiveKey(key);
+      }
+      onChange?.(key);
+    },
+    [activeKey, controlledActiveKey, onChange, onTabClick]
+  );
+  const handleTabClose = useCallback(
+    (key, event) => {
+      event.stopPropagation();
+      onEdit?.({ targetKey: key, action: "remove" });
+    },
+    [onEdit]
+  );
+  const handleTabAdd = useCallback(() => {
+    onEdit?.({ targetKey: void 0, action: "add" });
+  }, [onEdit]);
+  const contextValue = useMemo(
+    () => ({
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      lazy,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    }),
+    [
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      lazy,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    ]
+  );
+  const tabNavContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tabNavClasses,
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: tabNavListClasses,
+          style: getTabNavListStyle(type, tabPosition, tabKeys.length),
+          children: [
+            type === "line" && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-tiger-tabs-indicator": "true",
+                "aria-hidden": "true",
+                className: getTabIndicatorClasses(type, tabPosition),
+                style: getTabIndicatorStyle(activeTabIndex, tabKeys.length, tabPosition)
+              }
+            ),
+            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
+  ] }) }) });
+};
 
 export { TabPane, Tabs, useTabsContext };

package/dist/{chunk-U3JOBIDU.js → chunk-K64M7IMP.js}

@@ -176,6 +176,65 @@ var ImageCropper = react.forwardRef(
       },
       [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
     );
+    const updateCropRect = react.useCallback(
+      (nextRect) => {
+        setCropRect(nextRect);
+        onCropChange?.(nextRect);
+      },
+      [onCropChange]
+    );
+    const handleMoveKeyDown = react.useCallback(
+      (e) => {
+        const step = e.shiftKey ? 10 : 1;
+        const deltas = {
+          ArrowLeft: { dx: -step, dy: 0 },
+          ArrowRight: { dx: step, dy: 0 },
+          ArrowUp: { dx: 0, dy: -step },
+          ArrowDown: { dx: 0, dy: step }
+        };
+        const delta = deltas[e.key];
+        if (!delta) return;
+        e.preventDefault();
+        updateCropRect(
+          tigercatCore.moveCropRect(
+            cropRect,
+            delta.dx,
+            delta.dy,
+            displayDimsRef.current.w,
+            displayDimsRef.current.h
+          )
+        );
+      },
+      [cropRect, updateCropRect]
+    );
+    const handleResizeKeyDown = react.useCallback(
+      (e, handle) => {
+        const step = e.shiftKey ? 10 : 1;
+        const deltas = {
+          ArrowLeft: { dx: -step, dy: 0 },
+          ArrowRight: { dx: step, dy: 0 },
+          ArrowUp: { dx: 0, dy: -step },
+          ArrowDown: { dx: 0, dy: step }
+        };
+        const delta = deltas[e.key];
+        if (!delta) return;
+        e.preventDefault();
+        updateCropRect(
+          tigercatCore.resizeCropRect(
+            cropRect,
+            handle,
+            delta.dx,
+            delta.dy,
+            displayDimsRef.current.w,
+            displayDimsRef.current.h,
+            aspectRatio,
+            minWidth,
+            minHeight
+          )
+        );
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, updateCropRect]
+    );
     const containerClasses = react.useMemo(
       () => tigercatCore.classNames(tigercatCore.imageCropperContainerClasses, className),
       [className]
@@ -264,8 +323,12 @@ var ImageCropper = react.forwardRef(
                 width: `${cr.width}px`,
                 height: `${cr.height}px`
               },
+              role: "button",
+              tabIndex: 0,
+              "aria-label": "Move crop area",
               onMouseDown: (e) => handleMouseDown(e, "move"),
-              onTouchStart: (e) => handleTouchStart(e, "move")
+              onTouchStart: (e) => handleTouchStart(e, "move"),
+              onKeyDown: handleMoveKeyDown
             }
           ),
           guides && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -339,8 +402,12 @@ var ImageCropper = react.forwardRef(
               {
                 className: tigercatCore.getCropperHandleClasses(handle),
                 style: pos,
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Resize crop area ${handle}`,
                 onMouseDown: (e) => handleMouseDown(e, "resize", handle),
-                onTouchStart: (e) => handleTouchStart(e, "resize", handle)
+                onTouchStart: (e) => handleTouchStart(e, "resize", handle),
+                onKeyDown: (e) => handleResizeKeyDown(e, handle)
               },
               handle
             );

package/dist/{chunk-FPURO6QB.mjs → chunk-KGWPSVEQ.mjs}

@@ -1,6 +1,6 @@
-import { useFormContext } from './chunk-34DLDOGP.mjs';
+import { useFormContext } from './chunk-IZTNHCIO.mjs';
 import React, { useState, useRef, useId, useMemo, useEffect, useCallback } from 'react';
-import { getFormItemFieldClasses, getFormItemAsteriskClasses, getFieldError, classNames, getFormItemClasses, getFormItemLabelClasses, getFormItemErrorClasses, getFormItemContentClasses } from '@expcat/tigercat-core';
+import { getFormItemFieldClasses, getFormItemAsteriskClasses, classNames, getFormItemClasses, getFormItemLabelClasses, getFormItemErrorClasses, getFormItemContentClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function hasRequiredRule(maybeRules) {
@@ -70,15 +70,15 @@ var FormItem = ({
     [showRequiredAsterisk, formContext?.showRequiredAsterisk]
   );
   useEffect(() => {
-    if (name && formContext?.errors) {
-      const error = getFieldError(name, formContext.errors) || "";
+    if (name && formContext?.errorsByField) {
+      const error = formContext.errorsByField[name] || "";
       setErrorMessage(error);
       if (error && error !== prevFormErrorRef.current) {
         setShakeTrigger((prev) => prev + 1);
       }
       prevFormErrorRef.current = error;
     }
-  }, [name, formContext?.errors]);
+  }, [name, formContext?.errorsByField]);
   useEffect(() => {
     if (controlledError !== void 0) {
       setErrorMessage(controlledError);
@@ -219,7 +219,6 @@ var FormItem = ({
           "aria-labelledby": label ? labelId : void 0,
           "aria-describedby": describedById,
           "aria-invalid": hasError ? true : void 0,
-          "aria-required": isRequired ? true : void 0,
           onBlur: isClonableChild ? void 0 : handleBlur,
           onChange: isClonableChild ? void 0 : handleChange,
           children: enhancedChild

package/dist/{chunk-OHIZYM65.mjs → chunk-KPACLRQH.mjs}

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { classNames, codeBlockContainerClasses, codeBlockCopyButtonBaseClasses, codeBlockCopyButtonCopiedClasses, codeBlockPreClasses, copyTextToClipboard } from '@expcat/tigercat-core';
+import { getCodeBlockContainerClasses, getCodeBlockCopyButtonClasses, codeBlockPreClasses, copyTextToClipboard } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Code.tsx
@@ -27,11 +27,8 @@ var Code = ({
     setIsCopied(true);
     onCopy?.(code);
   };
-  const containerClasses = classNames(codeBlockContainerClasses, className);
-  const copyButtonClasses = classNames(
-    codeBlockCopyButtonBaseClasses,
-    isCopied && codeBlockCopyButtonCopiedClasses
-  );
+  const containerClasses = getCodeBlockContainerClasses(className);
+  const copyButtonClasses = getCodeBlockCopyButtonClasses(isCopied);
   return /* @__PURE__ */ jsxs("div", { className: containerClasses, ...props, children: [
     /* @__PURE__ */ jsx("pre", { className: codeBlockPreClasses, children: /* @__PURE__ */ jsx("code", { className: "block", children: code }) }),
     copyable && /* @__PURE__ */ jsx(