@expcat/tigercat-react 0.0.67 → 0.1.0

package/dist/chunk-HDDBBZQH.js

@@ -0,0 +1,321 @@
+'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/TabPane.tsx
+var TabsContext = React.createContext(null);
+function useTabsContext() {
+  return React.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 = 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 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 }));
+      }
+    });
+    return { tabItems: items, tabPanes: panes, firstTabKey: firstKey };
+  }, [children, controlledActiveKey, defaultActiveKey, idBase]);
+  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
+  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,
+      idBase,
+      handleTabClick,
+      handleTabClose
+    }),
+    [
+      activeKey,
+      type,
+      size,
+      tabPosition,
+      closable,
+      destroyInactiveTabPane,
+      idBase,
+      handleTabClick,
+      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 }) });
+};
+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 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.classNames(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((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__ */ 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(
+            "button",
+            {
+              type: "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: tigercatCore.closeIconPathStrokeLinecap,
+                  strokeLinejoin: tigercatCore.closeIconPathStrokeLinejoin,
+                  strokeWidth: tigercatCore.closeIconPathStrokeWidth,
+                  d: tigercatCore.closeIconPathD
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+  const shouldRender = 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
+    }
+  );
+};
+
+exports.TabPane = TabPane;
+exports.Tabs = Tabs;
+exports.useTabsContext = useTabsContext;

package/dist/chunk-IFY46RWU.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Sidebar.tsx
+var Sidebar = ({
+  className,
+  width = "256px",
+  collapsed = false,
+  style,
+  children,
+  ...props
+}) => {
+  const sidebarClasses = tigercatCore.classNames(tigercatCore.layoutSidebarClasses, className);
+  const sidebarStyle = {
+    ...style,
+    width: collapsed ? "0px" : width,
+    minWidth: collapsed ? "0px" : width,
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: sidebarClasses, style: sidebarStyle, ...props, children: !collapsed && children });
+};
+
+exports.Sidebar = Sidebar;

package/dist/chunk-IQINYCU6.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Timeline.tsx
+var Timeline = ({
+  items = [],
+  mode = "left",
+  pending = false,
+  pendingDot,
+  pendingContent,
+  reverse = false,
+  renderItem,
+  renderDot: customRenderDot,
+  className,
+  ...ulProps
+}) => {
+  let processedItems = [...items];
+  if (reverse) processedItems = processedItems.reverse();
+  if (mode === "alternate") {
+    processedItems = processedItems.map((item, index) => ({
+      ...item,
+      position: item.position || (index % 2 === 0 ? "left" : "right")
+    }));
+  }
+  const containerClasses = tigercatCore.classNames(
+    tigercatCore.getTimelineContainerClasses(mode),
+    tigercatCore.timelineListClasses,
+    className
+  );
+  const getItemKey = (item, index) => item.key || index;
+  const wrapCustomDot = (node) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getTimelineDotClasses(void 0, true), children: node });
+  const renderDotElement = (item, isPending = false) => {
+    if (customRenderDot) return wrapCustomDot(customRenderDot(item));
+    if (item.dot) return wrapCustomDot(item.dot);
+    if (isPending) {
+      if (pendingDot) {
+        return wrapCustomDot(pendingDot);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getPendingDotClasses() });
+    }
+    const dotClasses = tigercatCore.getTimelineDotClasses(item.color);
+    const dotStyle = item.color ? { backgroundColor: item.color } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: dotClasses, style: dotStyle });
+  };
+  const renderTimelineItem = (item, index) => {
+    const key = getItemKey(item, index);
+    const isLast = index === processedItems.length - 1 && !pending;
+    const position = item.position;
+    const itemClasses = tigercatCore.getTimelineItemClasses(mode, position, isLast);
+    const tailClasses = tigercatCore.getTimelineTailClasses(mode, position, isLast);
+    const headClasses = tigercatCore.getTimelineHeadClasses(mode, position);
+    const contentClasses = tigercatCore.getTimelineContentClasses(mode, position);
+    if (renderItem) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: itemClasses, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailClasses }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: headClasses, children: renderDotElement(item) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, children: renderItem(item, index) })
+      ] }, key);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: itemClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailClasses }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: headClasses, children: renderDotElement(item) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClasses, children: [
+        item.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timelineLabelClasses, children: item.label }),
+        item.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timelineDescriptionClasses, children: item.content })
+      ] })
+    ] }, key);
+  };
+  const renderPendingItem = () => {
+    if (!pending) {
+      return null;
+    }
+    const index = processedItems.length;
+    const position = mode === "alternate" ? index % 2 === 0 ? "left" : "right" : void 0;
+    const itemClasses = tigercatCore.getTimelineItemClasses(mode, position, true);
+    const headClasses = tigercatCore.getTimelineHeadClasses(mode, position);
+    const contentClasses = tigercatCore.getTimelineContentClasses(mode, position);
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: itemClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: headClasses, children: renderDotElement({}, true) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, children: pendingContent || /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timelineDescriptionClasses, children: "Loading..." }) })
+    ] }, "pending");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "ul",
+    {
+      ...ulProps,
+      className: containerClasses,
+      "aria-busy": ulProps["aria-busy"] ?? (pending ? true : void 0),
+      children: [
+        processedItems.map((item, index) => renderTimelineItem(item, index)),
+        renderPendingItem()
+      ]
+    }
+  );
+};
+
+exports.Timeline = Timeline;

package/dist/chunk-IY4LEJYF.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Skeleton.tsx
+var Skeleton = (props) => {
+  const {
+    variant = "text",
+    animation = "pulse",
+    width,
+    height,
+    shape = "circle",
+    rows = 1,
+    paragraph = false,
+    className,
+    style,
+    ["aria-label"]: ariaLabelProp,
+    ["aria-labelledby"]: ariaLabelledByProp,
+    ["aria-hidden"]: ariaHiddenProp,
+    ...divProps
+  } = props;
+  const skeletonClasses = tigercatCore.classNames(tigercatCore.getSkeletonClasses(variant, animation, shape), className);
+  const dimensions = tigercatCore.getSkeletonDimensions(variant, width, height);
+  const computedAriaHidden = ariaHiddenProp ?? (ariaLabelProp || ariaLabelledByProp ? void 0 : true);
+  if (variant === "text" && rows > 1) {
+    const rowElements = [];
+    for (let i = 0; i < rows; i++) {
+      const rowStyle = {
+        height: dimensions.height
+      };
+      if (paragraph) {
+        rowStyle.width = tigercatCore.getParagraphRowWidth(i, rows);
+      } else if (dimensions.width) {
+        rowStyle.width = dimensions.width;
+      }
+      rowElements.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tigercatCore.classNames(skeletonClasses, i < rows - 1 && "mb-2"),
+            style: rowStyle,
+            "aria-hidden": computedAriaHidden
+          },
+          i
+        )
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...divProps,
+        className: tigercatCore.classNames("flex flex-col", className),
+        style,
+        "aria-hidden": computedAriaHidden,
+        children: rowElements
+      }
+    );
+  }
+  const skeletonStyle = {
+    ...style,
+    ...dimensions.width ? { width: dimensions.width } : null,
+    height: dimensions.height
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...divProps,
+      className: skeletonClasses,
+      style: skeletonStyle,
+      "aria-label": ariaLabelProp,
+      "aria-labelledby": ariaLabelledByProp,
+      "aria-hidden": computedAriaHidden
+    }
+  );
+};
+
+exports.Skeleton = Skeleton;