@expcat/tigercat-react 0.0.1

package/dist/chunk-AQQRWISY.js

@@ -0,0 +1,184 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/StepsItem.tsx
+var StepsContext = React.createContext(null);
+function useStepsContext() {
+  return React.useContext(StepsContext);
+}
+var Steps = ({
+  current = 0,
+  status = "process",
+  direction = "horizontal",
+  size = "default",
+  simple = false,
+  clickable = false,
+  className,
+  style,
+  onChange,
+  children,
+  ...props
+}) => {
+  const containerClasses = tigercatCore.classNames(tigercatCore.getStepsContainerClasses(direction), className);
+  const handleStepClick = (index) => {
+    if (!clickable) {
+      return;
+    }
+    onChange?.(index);
+  };
+  const contextValue = {
+    current,
+    status,
+    direction,
+    size,
+    simple,
+    clickable,
+    handleStepClick: clickable ? handleStepClick : void 0
+  };
+  const totalCount = React__default.default.Children.count(children);
+  const stepsWithProps = React__default.default.Children.map(children, (child, index) => {
+    if (React__default.default.isValidElement(child) && child.type === StepsItem) {
+      return React__default.default.cloneElement(child, {
+        stepIndex: index,
+        isLast: index === totalCount - 1
+      });
+    }
+    return child;
+  });
+  const mergedStyle = {
+    ...style ?? {}
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(StepsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { ...props, className: containerClasses, style: mergedStyle, children: stepsWithProps }) });
+};
+var StepsItem = ({
+  title,
+  description,
+  icon,
+  status: customStatus,
+  disabled = false,
+  stepIndex = 0,
+  isLast = false,
+  className,
+  style,
+  ...props
+}) => {
+  const stepsContext = useStepsContext() || {
+    current: 0,
+    status: "process",
+    direction: "horizontal",
+    size: "default",
+    simple: false,
+    clickable: false
+  };
+  const stepStatus = tigercatCore.calculateStepStatus(
+    stepIndex,
+    stepsContext.current,
+    stepsContext.status,
+    customStatus
+  );
+  const isClickable = !!stepsContext.handleStepClick && !disabled;
+  const itemClasses = tigercatCore.classNames(
+    tigercatCore.getStepItemClasses(stepsContext.direction, isLast, stepsContext.simple),
+    className
+  );
+  const iconClasses = tigercatCore.getStepIconClasses(stepStatus, stepsContext.size, stepsContext.simple, !!icon);
+  const tailClasses = tigercatCore.getStepTailClasses(stepsContext.direction, stepStatus, isLast);
+  const contentClasses = tigercatCore.getStepContentClasses(stepsContext.direction, stepsContext.simple);
+  const titleClasses = tigercatCore.getStepTitleClasses(stepStatus, stepsContext.size, isClickable);
+  const descriptionClasses = tigercatCore.getStepDescriptionClasses(stepStatus, stepsContext.size);
+  const handleClick = (event) => {
+    if (!isClickable) {
+      return;
+    }
+    stepsContext.handleStepClick?.(stepIndex);
+  };
+  const renderIcon = () => {
+    if (icon) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, children: icon });
+    }
+    if (stepStatus === "finish") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: tigercatCore.stepFinishIconSvgClasses,
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: tigercatCore.stepFinishIconViewBox,
+          "aria-hidden": "true",
+          focusable: "false",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: tigercatCore.stepFinishIconPathStrokeLinecap,
+              strokeLinejoin: tigercatCore.stepFinishIconPathStrokeLinejoin,
+              strokeWidth: tigercatCore.stepFinishIconPathStrokeWidth,
+              d: tigercatCore.stepFinishIconPathD
+            }
+          )
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, children: stepIndex + 1 });
+  };
+  const renderContent = () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClasses, children: [
+      stepsContext.clickable ? /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: titleClasses,
+          onClick: handleClick,
+          disabled: !isClickable,
+          "aria-disabled": disabled || void 0,
+          children: title
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClasses, children: title }),
+      !stepsContext.simple && description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClasses, children: description })
+    ] });
+  };
+  if (stepsContext.direction === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        ...props,
+        className: itemClasses,
+        style,
+        "aria-current": stepIndex === stepsContext.current ? "step" : void 0,
+        "aria-disabled": disabled || void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            renderIcon(),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailClasses })
+          ] }),
+          renderContent()
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "li",
+    {
+      ...props,
+      className: itemClasses,
+      style,
+      "aria-current": stepIndex === stepsContext.current ? "step" : void 0,
+      "aria-disabled": disabled || void 0,
+      children: [
+        renderIcon(),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailClasses }),
+        renderContent()
+      ]
+    }
+  );
+};
+
+exports.Steps = Steps;
+exports.StepsItem = StepsItem;
+exports.useStepsContext = useStepsContext;

package/dist/chunk-C52ZCGYG.mjs

@@ -0,0 +1,313 @@
+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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/TabPane.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,
+  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 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 }));
+      }
+    });
+    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,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    }),
+    [
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      idBase,
+      handleTabClick,
+      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 }) });
+};
+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 = useMemo(() => {
+    return isKeyActive(tabKey, tabsContext.activeKey);
+  }, [tabKey, tabsContext.activeKey]);
+  const isClosable = useMemo(() => {
+    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));
+  }, [isActive, disabled, tabsContext.type, tabsContext.size]);
+  const tabPaneClasses = useMemo(() => {
+    return classNames(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((b) => !b.disabled);
+    const currentIndex = enabled.findIndex((b) => b.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__ */ 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__ */ jsx("span", { className: "flex items-center", children: icon }),
+          /* @__PURE__ */ jsx("span", { children: label }),
+          isClosable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tabCloseButtonClasses,
+              "aria-label": `Close ${String(label)}`,
+              tabIndex: -1,
+              onClick: handleClose,
+              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,
+                  d: closeIconPathD
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+  const shouldRender = isActive || !tabsContext.destroyInactiveTabPane;
+  if (!shouldRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tabPaneClasses,
+      style,
+      role: "tabpanel",
+      id: panelId,
+      "aria-labelledby": tabId,
+      "aria-hidden": !isActive,
+      children
+    }
+  );
+};
+
+export { TabPane, Tabs, useTabsContext };