@expcat/tigercat-react 1.1.0 → 1.2.14

package/dist/chunk-5OLE7XM3.js

@@ -1,329 +0,0 @@
-'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/Tabs.tsx
-var TabsContext = React.createContext(null);
-function useTabsContext() {
-  return React.useContext(TabsContext);
-}
-var TabPane = ({
-  tabKey,
-  label,
-  disabled = false,
-  closable,
-  icon,
-  className,
-  style,
-  children,
-  renderMode = "pane",
-  tabId,
-  panelId,
-  tabIndex
-}) => {
-  const tabsContext = useTabsContext();
-  if (!tabsContext) {
-    throw new Error("TabPane must be used within a Tabs component");
-  }
-  const isActive = React.useMemo(() => {
-    return tigercatCore.isKeyActive(tabKey, tabsContext.activeKey);
-  }, [tabKey, tabsContext.activeKey]);
-  const hasBeenActivatedRef = React.useRef(isActive);
-  if (isActive) hasBeenActivatedRef.current = true;
-  const isClosable = React.useMemo(() => {
-    return closable !== void 0 ? closable : tabsContext.closable && tabsContext.type === "editable-card";
-  }, [closable, tabsContext.closable, tabsContext.type]);
-  const tabItemClasses = React.useMemo(() => {
-    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);
-  }, [isActive, className]);
-  const handleClick = () => {
-    if (!disabled) {
-      tabsContext.handleTabClick(tabKey);
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (disabled) {
-      return;
-    }
-    if (isClosable && (event.key === "Backspace" || event.key === "Delete")) {
-      event.preventDefault();
-      tabsContext.handleTabClose(tabKey, event);
-      return;
-    }
-    const isVertical = tabsContext.tabPosition === "left" || tabsContext.tabPosition === "right";
-    const nextKeys = isVertical ? ["ArrowDown"] : ["ArrowRight"];
-    const prevKeys = isVertical ? ["ArrowUp"] : ["ArrowLeft"];
-    const key = event.key;
-    if (nextKeys.includes(key) || prevKeys.includes(key) || key === "Home" || key === "End" || key === "Enter" || key === " ") {
-      event.preventDefault();
-    }
-    if (key === "Enter" || key === " ") {
-      tabsContext.handleTabClick(tabKey);
-      return;
-    }
-    const tabList = event.currentTarget?.closest('[role="tablist"]');
-    const tabButtons = Array.from(
-      tabList?.querySelectorAll('[role="tab"]') ?? []
-    );
-    const enabled = tabButtons.filter((button) => !button.disabled);
-    const currentIndex = enabled.findIndex((button) => button.id === tabId);
-    if (currentIndex === -1) {
-      return;
-    }
-    const focusByIndex = (index) => {
-      const next = enabled[index];
-      if (!next) return;
-      next.focus();
-      const nextKey = next.getAttribute("data-tiger-tab-key");
-      if (nextKey != null) {
-        const parsed = nextKey.startsWith("n:") ? Number(nextKey.slice(2)) : nextKey.startsWith("s:") ? nextKey.slice(2) : nextKey;
-        tabsContext.handleTabClick(parsed);
-      }
-    };
-    if (nextKeys.includes(key)) {
-      focusByIndex((currentIndex + 1) % enabled.length);
-      return;
-    }
-    if (prevKeys.includes(key)) {
-      focusByIndex((currentIndex - 1 + enabled.length) % enabled.length);
-      return;
-    }
-    if (key === "Home") {
-      focusByIndex(0);
-      return;
-    }
-    if (key === "End") {
-      focusByIndex(enabled.length - 1);
-    }
-  };
-  const handleClose = (event) => {
-    if (!disabled) {
-      tabsContext.handleTabClose(tabKey, event);
-    }
-  };
-  if (renderMode === "tab") {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        className: tabItemClasses,
-        role: "tab",
-        id: tabId,
-        "aria-controls": panelId,
-        "aria-selected": isActive,
-        "aria-disabled": disabled,
-        disabled,
-        tabIndex: typeof tabIndex === "number" ? tabIndex : isActive ? 0 : -1,
-        "data-tiger-tabs-id": tabsContext.idBase,
-        "data-tiger-tab-key": typeof tabKey === "number" ? `n:${tabKey}` : `s:${tabKey}`,
-        onClick: handleClick,
-        onKeyDown: handleKeyDown,
-        children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center", children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-          isClosable && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              role: "button",
-              className: tigercatCore.tabCloseButtonClasses,
-              "aria-label": `Close ${String(label)}`,
-              tabIndex: -1,
-              onClick: handleClose,
-              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: tigercatCore.closeIconViewBox, children: /* @__PURE__ */ jsxRuntime.jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  strokeWidth: "2",
-                  d: tigercatCore.closeIconPathD
-                }
-              ) })
-            }
-          )
-        ]
-      }
-    );
-  }
-  const shouldRender = tabsContext.lazy ? hasBeenActivatedRef.current && (isActive || !tabsContext.destroyInactiveTabPane) : isActive || !tabsContext.destroyInactiveTabPane;
-  if (!shouldRender) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: tabPaneClasses,
-      style,
-      role: "tabpanel",
-      id: panelId,
-      "aria-labelledby": tabId,
-      "aria-hidden": !isActive,
-      children
-    }
-  );
-};
-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 = React.useId();
-  const idBase = React.useMemo(() => `tiger-tabs-${reactId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [reactId]);
-  const [internalActiveKey, setInternalActiveKey] = React.useState(
-    defaultActiveKey
-  );
-  const containerClasses = React.useMemo(() => {
-    return tigercatCore.classNames(tigercatCore.getTabsContainerClasses(tabPosition), className);
-  }, [tabPosition, className]);
-  const tabNavClasses = React.useMemo(() => {
-    return tigercatCore.getTabNavClasses(tabPosition, type);
-  }, [tabPosition, type]);
-  const tabNavListClasses = React.useMemo(() => {
-    return tigercatCore.getTabNavListClasses(tabPosition, centered);
-  }, [tabPosition, centered]);
-  const { tabItems, tabPanes, firstTabKey, tabKeys } = React.useMemo(() => {
-    const items = [];
-    const panes = [];
-    const keys = [];
-    let firstKey;
-    React__default.default.Children.forEach(children, (child) => {
-      if (!React__default.default.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__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, tabKeys: keys };
-  }, [children, controlledActiveKey, defaultActiveKey, idBase]);
-  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
-  const activeTabIndex = React.useMemo(() => tabKeys.indexOf(activeKey ?? ""), [tabKeys, activeKey]);
-  const handleTabClick = React.useCallback(
-    (key) => {
-      onTabClick?.(key);
-      if (key === activeKey) {
-        return;
-      }
-      if (controlledActiveKey === void 0) {
-        setInternalActiveKey(key);
-      }
-      onChange?.(key);
-    },
-    [activeKey, controlledActiveKey, onChange, onTabClick]
-  );
-  const handleTabClose = React.useCallback(
-    (key, event) => {
-      event.stopPropagation();
-      onEdit?.({ targetKey: key, action: "remove" });
-    },
-    [onEdit]
-  );
-  const handleTabAdd = React.useCallback(() => {
-    onEdit?.({ targetKey: void 0, action: "add" });
-  }, [onEdit]);
-  const contextValue = React.useMemo(
-    () => ({
-      activeKey,
-      type,
-      size,
-      tabPosition,
-      closable,
-      destroyInactiveTabPane,
-      lazy,
-      idBase,
-      handleTabClick,
-      handleTabClose
-    }),
-    [
-      activeKey,
-      type,
-      size,
-      tabPosition,
-      closable,
-      destroyInactiveTabPane,
-      lazy,
-      idBase,
-      handleTabClick,
-      handleTabClose
-    ]
-  );
-  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,
-          style: tigercatCore.getTabNavListStyle(type, tabPosition, tabKeys.length),
-          children: [
-            type === "line" && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                "data-tiger-tabs-indicator": "true",
-                "aria-hidden": "true",
-                className: tigercatCore.getTabIndicatorClasses(type, tabPosition),
-                style: tigercatCore.getTabIndicatorStyle(activeTabIndex, tabKeys.length, tabPosition)
-              }
-            ),
-            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
-  ] }) }) });
-};
-
-exports.TabPane = TabPane;
-exports.Tabs = Tabs;
-exports.useTabsContext = useTabsContext;

package/dist/chunk-6LDJSFUQ.js

@@ -1,251 +0,0 @@
-'use strict';
-
-var react = require('react');
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
-
-// src/components/ImageViewer.tsx
-function SvgIcon({ pathD, label }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "w-5 h-5",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-label": label,
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: pathD })
-    }
-  );
-}
-var ImageViewer = ({
-  images,
-  open = false,
-  currentIndex = 0,
-  zoomable = true,
-  rotatable = true,
-  showNav = true,
-  showCounter = true,
-  maskClosable = true,
-  minZoom = 0.5,
-  maxZoom = 3,
-  className,
-  onClose,
-  onIndexChange
-}) => {
-  const [index, setIndex] = react.useState(currentIndex);
-  const [transform, setTransform] = react.useState(tigercatCore.createDefaultTransform);
-  const panRef = react.useRef(tigercatCore.createPanState());
-  const pinchRef = react.useRef(tigercatCore.createPinchState());
-  react.useEffect(() => {
-    setIndex(currentIndex);
-  }, [currentIndex]);
-  const resetTransform = react.useCallback(() => {
-    setTransform(tigercatCore.createDefaultTransform());
-    panRef.current = tigercatCore.createPanState();
-    pinchRef.current = tigercatCore.createPinchState();
-  }, []);
-  const handleClose = react.useCallback(() => {
-    onClose?.();
-  }, [onClose]);
-  const handlePrev = react.useCallback(() => {
-    const newIndex = (index - 1 + images.length) % images.length;
-    setIndex(newIndex);
-    resetTransform();
-    onIndexChange?.(newIndex);
-  }, [index, images.length, onIndexChange, resetTransform]);
-  const handleNext = react.useCallback(() => {
-    const newIndex = (index + 1) % images.length;
-    setIndex(newIndex);
-    resetTransform();
-    onIndexChange?.(newIndex);
-  }, [index, images.length, onIndexChange, resetTransform]);
-  react.useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      switch (e.key) {
-        case "Escape":
-          handleClose();
-          break;
-        case "ArrowLeft":
-          handlePrev();
-          break;
-        case "ArrowRight":
-          handleNext();
-          break;
-      }
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [open, handleClose, handlePrev, handleNext]);
-  const backdropClasses = react.useMemo(
-    () => tigercatCore.classNames(tigercatCore.imageViewerBackdropClasses, className),
-    [className]
-  );
-  if (!open || images.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: backdropClasses,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Image viewer",
-      onClick: (e) => {
-        if (maskClosable && e.target === e.currentTarget) handleClose();
-      },
-      children: [
-        showCounter && images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.imageViewerCounterClasses, children: [
-          index + 1,
-          " / ",
-          images.length
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            className: tigercatCore.imageViewerCloseBtnClasses,
-            onClick: handleClose,
-            "aria-label": "Close",
-            type: "button",
-            children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.close, label: "Close" })
-          }
-        ),
-        showNav && images.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: tigercatCore.classNames(tigercatCore.imageViewerNavBtnClasses, "left-4"),
-              onClick: handlePrev,
-              "aria-label": "Previous image",
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.prev, label: "Previous" })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              className: tigercatCore.classNames(tigercatCore.imageViewerNavBtnClasses, "right-4"),
-              onClick: handleNext,
-              "aria-label": "Next image",
-              type: "button",
-              children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.next, label: "Next" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            className: tigercatCore.imageViewerImgClasses,
-            src: images[index],
-            alt: `Image ${index + 1}`,
-            style: { transform: tigercatCore.getImageTransformStyle(transform), touchAction: "none" },
-            draggable: false,
-            onWheel: (e) => {
-              if (!zoomable) return;
-              e.preventDefault();
-              const newScale = tigercatCore.applyWheelZoom(transform.scale, e.deltaY, { minZoom, maxZoom });
-              setTransform((t) => ({ ...t, scale: newScale }));
-            },
-            onMouseDown: (e) => {
-              if (e.button !== 0) return;
-              e.preventDefault();
-              panRef.current = tigercatCore.startPan(e.clientX, e.clientY, transform.translateX, transform.translateY);
-            },
-            onMouseMove: (e) => {
-              if (!panRef.current.isPanning) return;
-              const result = tigercatCore.movePan(panRef.current, e.clientX, e.clientY);
-              setTransform((t) => ({ ...t, ...result }));
-            },
-            onMouseUp: () => {
-              panRef.current = tigercatCore.createPanState();
-            },
-            onMouseLeave: () => {
-              panRef.current = tigercatCore.createPanState();
-            },
-            onTouchStart: (e) => {
-              if (e.touches.length === 2 && zoomable) {
-                e.preventDefault();
-                pinchRef.current = tigercatCore.startPinch(e.touches[0], e.touches[1], transform.scale);
-              } else if (e.touches.length === 1) {
-                panRef.current = tigercatCore.startPan(
-                  e.touches[0].clientX,
-                  e.touches[0].clientY,
-                  transform.translateX,
-                  transform.translateY
-                );
-              }
-            },
-            onTouchMove: (e) => {
-              if (e.touches.length === 2 && pinchRef.current.isPinching) {
-                e.preventDefault();
-                const newScale = tigercatCore.movePinch(pinchRef.current, e.touches[0], e.touches[1], minZoom, maxZoom);
-                setTransform((t) => ({ ...t, scale: newScale }));
-              } else if (e.touches.length === 1 && panRef.current.isPanning) {
-                const result = tigercatCore.movePan(panRef.current, e.touches[0].clientX, e.touches[0].clientY);
-                setTransform((t) => ({ ...t, ...result }));
-              }
-            },
-            onTouchEnd: () => {
-              pinchRef.current = tigercatCore.createPinchState();
-              panRef.current = tigercatCore.createPanState();
-            },
-            onTouchCancel: () => {
-              pinchRef.current = tigercatCore.createPinchState();
-              panRef.current = tigercatCore.createPanState();
-            }
-          }
-        ),
-        (zoomable || rotatable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.imageViewerToolbarClasses, children: [
-          zoomable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: tigercatCore.imageViewerToolbarBtnClasses,
-                onClick: () => setTransform((t) => ({ ...t, scale: tigercatCore.clampZoom(t.scale - 0.25, minZoom, maxZoom) })),
-                "aria-label": "Zoom out",
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.zoomOut, label: "Zoom out" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: tigercatCore.imageViewerToolbarBtnClasses,
-                onClick: () => setTransform((t) => ({ ...t, scale: tigercatCore.clampZoom(t.scale + 0.25, minZoom, maxZoom) })),
-                "aria-label": "Zoom in",
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.zoomIn, label: "Zoom in" })
-              }
-            )
-          ] }),
-          rotatable && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: tigercatCore.imageViewerToolbarBtnClasses,
-                onClick: () => setTransform((t) => ({ ...t, rotation: tigercatCore.normalizeRotation(t.rotation - 90) })),
-                "aria-label": "Rotate left",
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.rotateLeft, label: "Rotate left" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: tigercatCore.imageViewerToolbarBtnClasses,
-                onClick: () => setTransform((t) => ({ ...t, rotation: tigercatCore.normalizeRotation(t.rotation + 90) })),
-                "aria-label": "Rotate right",
-                type: "button",
-                children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { pathD: tigercatCore.imageViewerIcons.rotateRight, label: "Rotate right" })
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  );
-};
-
-exports.ImageViewer = ImageViewer;