@expcat/tigercat-react 0.2.10 → 0.3.0

package/dist/chunk-WKGCUR7O.mjs

@@ -0,0 +1,107 @@
+import { Timeline } from './chunk-LADCWARG.mjs';
+import { Link } from './chunk-WSJO2PIE.mjs';
+import { Loading } from './chunk-PUDU34R4.mjs';
+import { Tag } from './chunk-DIZNY6N4.mjs';
+import { Text } from './chunk-6YDIBMCM.mjs';
+import { Card } from './chunk-VD3IK5XT.mjs';
+import { Avatar } from './chunk-V2HVHLBY.mjs';
+import { useMemo } from 'react';
+import { buildActivityGroups, classNames, toActivityTimelineItems, formatActivityTime } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var renderAction = (item, action, index) => {
+  const key = action.key ?? `${item.id}-action-${index}`;
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      size: "sm",
+      variant: "primary",
+      href: action.href,
+      target: action.target,
+      disabled: action.disabled,
+      onClick: () => action.onClick?.(item, action),
+      children: action.label
+    },
+    key
+  );
+};
+var ActivityFeed = ({
+  items = [],
+  groups,
+  groupBy,
+  groupOrder,
+  loading = false,
+  loadingText = "\u52A0\u8F7D\u4E2D...",
+  emptyText = "\u6682\u65E0\u52A8\u6001",
+  showAvatar = true,
+  showTime = true,
+  showGroupTitle = true,
+  renderItem,
+  renderGroupHeader,
+  className,
+  ...props
+}) => {
+  const resolvedGroups = useMemo(
+    () => buildActivityGroups(items, groups, groupBy, groupOrder),
+    [items, groups, groupBy, groupOrder]
+  );
+  const wrapperClasses = classNames(
+    "tiger-activity-feed",
+    "flex",
+    "flex-col",
+    "gap-6",
+    "w-full",
+    className
+  );
+  const renderDefaultItem = (item, index, group) => {
+    if (renderItem) return renderItem(item, index, group);
+    const titleText = item.title ?? (typeof item.content === "string" || typeof item.content === "number" ? String(item.content) : "");
+    const descriptionText = item.description;
+    const timeText = showTime ? formatActivityTime(item.time) : "";
+    const actionNodes = item.actions?.map(
+      (action, actionIndex) => renderAction(item, action, actionIndex)
+    );
+    return /* @__PURE__ */ jsx("div", { className: "tiger-activity-item", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 items-start", children: [
+      showAvatar && item.user ? /* @__PURE__ */ jsx(Avatar, { size: "sm", src: item.user.avatar, text: item.user.name, className: "shrink-0" }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+            titleText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", weight: "medium", className: "truncate", children: titleText }) : null,
+            item.status ? /* @__PURE__ */ jsx(Tag, { variant: item.status.variant ?? "default", size: "sm", className: "shrink-0", children: item.status.label }) : null
+          ] }),
+          timeText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "xs", color: "muted", className: "shrink-0 whitespace-nowrap", children: timeText }) : null
+        ] }),
+        descriptionText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", className: "mb-2 break-words", children: descriptionText }) : null,
+        actionNodes?.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: actionNodes }) : null
+      ] })
+    ] }) });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-activity-feed": true, children: /* @__PURE__ */ jsx(Card, { variant: "bordered", size: "sm", className: "tiger-activity-feed-loading", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Loading, { text: loadingText }) }) }) });
+  }
+  if (resolvedGroups.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-activity-feed": true, children: /* @__PURE__ */ jsx(Card, { variant: "bordered", size: "sm", className: "tiger-activity-feed-empty", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", children: emptyText }) }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-activity-feed": true, children: resolvedGroups.map((group, groupIndex) => {
+    const headerNode = renderGroupHeader?.(group);
+    const groupTitle = group.title;
+    const timelineItems = toActivityTimelineItems(group.items);
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      showGroupTitle && groupTitle ? headerNode ?? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", weight: "medium", color: "muted", children: groupTitle }) : null,
+      /* @__PURE__ */ jsx(
+        Timeline,
+        {
+          items: timelineItems,
+          renderItem: (timelineItem, index) => {
+            const activity = timelineItem.activity;
+            if (!activity) return null;
+            return renderDefaultItem(activity, index, group);
+          }
+        }
+      )
+    ] }, group.key ?? groupIndex);
+  }) });
+};
+var ActivityFeed_default = ActivityFeed;
+
+export { ActivityFeed, ActivityFeed_default };

package/dist/chunk-X4F6NSI5.mjs

@@ -0,0 +1,104 @@
+import { useCollapseContext } from './chunk-Y6557RWE.mjs';
+import { useMemo, useCallback } from 'react';
+import { isPanelActive, classNames, getCollapsePanelClasses, getCollapsePanelHeaderClasses, getCollapseIconClasses, collapseHeaderTextClasses, collapsePanelContentWrapperClasses, collapsePanelContentBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CollapsePanel = ({
+  panelKey,
+  header,
+  disabled = false,
+  showArrow = true,
+  className,
+  style,
+  extra,
+  children
+}) => {
+  const collapseContext = useCollapseContext();
+  if (!collapseContext) {
+    throw new Error("CollapsePanel must be used within a Collapse component");
+  }
+  const isActive = useMemo(() => {
+    return isPanelActive(panelKey, collapseContext.activeKeys);
+  }, [panelKey, collapseContext.activeKeys]);
+  const panelClasses = useMemo(() => {
+    return classNames(getCollapsePanelClasses(collapseContext.ghost, className));
+  }, [collapseContext.ghost, className]);
+  const headerClasses = useMemo(() => {
+    return getCollapsePanelHeaderClasses(isActive, disabled);
+  }, [isActive, disabled]);
+  const iconClasses = useMemo(() => {
+    return getCollapseIconClasses(isActive, collapseContext.expandIconPosition);
+  }, [isActive, collapseContext.expandIconPosition]);
+  const handleClick = useCallback(() => {
+    if (!disabled) {
+      collapseContext.handlePanelClick(panelKey);
+    }
+  }, [disabled, collapseContext, panelKey]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (disabled) {
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        collapseContext.handlePanelClick(panelKey);
+      }
+    },
+    [disabled, collapseContext, panelKey]
+  );
+  const arrowIcon = /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: iconClasses,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6 12L10 8L6 4",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: panelClasses, style, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: headerClasses,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-expanded": isActive,
+        "aria-disabled": disabled,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: [
+          showArrow && collapseContext.expandIconPosition === "start" && arrowIcon,
+          /* @__PURE__ */ jsx("span", { className: collapseHeaderTextClasses, children: header }),
+          extra && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: extra }),
+          showArrow && collapseContext.expandIconPosition === "end" && arrowIcon
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: collapsePanelContentWrapperClasses,
+        style: {
+          maxHeight: isActive ? "none" : "0",
+          opacity: isActive ? "1" : "0"
+        },
+        children: /* @__PURE__ */ jsx("div", { className: collapsePanelContentBaseClasses, children })
+      }
+    )
+  ] });
+};
+var CollapsePanel_default = CollapsePanel;
+
+export { CollapsePanel, CollapsePanel_default };

package/dist/chunk-Y6557RWE.mjs

@@ -0,0 +1,62 @@
+import { createContext, useContext, useState, useMemo, useCallback } from 'react';
+import { normalizeActiveKeys, togglePanelKey, classNames, getCollapseContainerClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Collapse.tsx
+var CollapseContext = createContext(null);
+function useCollapseContext() {
+  return useContext(CollapseContext);
+}
+var Collapse = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  accordion = false,
+  bordered = true,
+  expandIconPosition = "start",
+  ghost = false,
+  className,
+  style,
+  onChange,
+  children
+}) => {
+  const [internalActiveKeys, setInternalActiveKeys] = useState(
+    normalizeActiveKeys(defaultActiveKey)
+  );
+  const activeKeys = useMemo(() => {
+    return controlledActiveKey !== void 0 ? normalizeActiveKeys(controlledActiveKey) : internalActiveKeys;
+  }, [controlledActiveKey, internalActiveKeys]);
+  const handlePanelClick = useCallback(
+    (key) => {
+      const newKeys = togglePanelKey(key, activeKeys, accordion);
+      if (controlledActiveKey === void 0) {
+        setInternalActiveKeys(newKeys);
+      }
+      if (onChange) {
+        if (accordion) {
+          onChange(newKeys.length > 0 ? newKeys[0] : void 0);
+        } else {
+          onChange(newKeys);
+        }
+      }
+    },
+    [activeKeys, accordion, controlledActiveKey, onChange]
+  );
+  const containerClasses = useMemo(() => {
+    return classNames(getCollapseContainerClasses(bordered, ghost, className));
+  }, [bordered, ghost, className]);
+  const contextValue = useMemo(
+    () => ({
+      activeKeys,
+      accordion,
+      expandIconPosition,
+      bordered,
+      ghost,
+      handlePanelClick
+    }),
+    [activeKeys, accordion, expandIconPosition, bordered, ghost, handlePanelClick]
+  );
+  return /* @__PURE__ */ jsx(CollapseContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, style, role: "region", children }) });
+};
+var Collapse_default = Collapse;
+
+export { Collapse, Collapse_default, useCollapseContext };

package/dist/chunk-YIF5VX7K.mjs

@@ -0,0 +1,158 @@
+import { createContext, useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { scrollToAnchor, classNames, getAnchorWrapperClasses, getAnchorInkContainerClasses, getAnchorInkActiveClasses, getAnchorLinkListClasses, findActiveAnchor } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/Anchor.tsx
+var AnchorContext = createContext(null);
+function useAnchorContext() {
+  return useContext(AnchorContext);
+}
+var Anchor = ({
+  affix = true,
+  bounds = 5,
+  offsetTop = 0,
+  showInkInFixed = false,
+  targetOffset,
+  getCurrentAnchor,
+  getContainer = () => window,
+  direction = "vertical",
+  className,
+  style,
+  onClick,
+  onChange,
+  children
+}) => {
+  const [activeLink, setActiveLink] = useState("");
+  const [links, setLinks] = useState([]);
+  const anchorRef = useRef(null);
+  const inkRef = useRef(null);
+  const isScrollingRef = useRef(false);
+  const animationFrameRef = useRef(null);
+  const getContainerRef = useRef(getContainer);
+  getContainerRef.current = getContainer;
+  const scrollOffset = useMemo(() => targetOffset ?? offsetTop, [targetOffset, offsetTop]);
+  const registerLink = useCallback((href) => {
+    setLinks((prevLinks) => {
+      if (href && !prevLinks.includes(href)) {
+        return [...prevLinks, href];
+      }
+      return prevLinks;
+    });
+  }, []);
+  const unregisterLink = useCallback((href) => {
+    setLinks((prevLinks) => prevLinks.filter((l) => l !== href));
+  }, []);
+  const scrollTo = useCallback(
+    (href) => {
+      const container = getContainerRef.current();
+      scrollToAnchor(href, container, scrollOffset);
+    },
+    [scrollOffset]
+  );
+  const handleLinkClick = useCallback(
+    (href, event) => {
+      onClick?.(event, href);
+      isScrollingRef.current = true;
+      setActiveLink(href);
+      scrollTo(href);
+      setTimeout(() => {
+        isScrollingRef.current = false;
+      }, 500);
+    },
+    [onClick, scrollTo]
+  );
+  const scrollHandlerRef = useRef(null);
+  const boundContainerRef = useRef(null);
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      const container = getContainerRef.current();
+      boundContainerRef.current = container;
+      const handleScroll = () => {
+        if (isScrollingRef.current) return;
+        if (animationFrameRef.current !== null) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+        animationFrameRef.current = requestAnimationFrame(() => {
+          const currentContainer = getContainerRef.current();
+          const newActiveLink = findActiveAnchor(links, currentContainer, bounds, scrollOffset);
+          const finalActiveLink = getCurrentAnchor ? getCurrentAnchor(newActiveLink) : newActiveLink;
+          setActiveLink((prevActiveLink) => {
+            if (finalActiveLink !== prevActiveLink) {
+              onChange?.(finalActiveLink);
+              return finalActiveLink;
+            }
+            return prevActiveLink;
+          });
+        });
+      };
+      scrollHandlerRef.current = handleScroll;
+      container.addEventListener("scroll", handleScroll, { passive: true });
+      handleScroll();
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      if (boundContainerRef.current && scrollHandlerRef.current) {
+        boundContainerRef.current.removeEventListener("scroll", scrollHandlerRef.current);
+      }
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [links, bounds, scrollOffset, getCurrentAnchor, onChange]);
+  useEffect(() => {
+    if (!inkRef.current || !anchorRef.current || !activeLink) {
+      return;
+    }
+    const activeLinkElement = anchorRef.current.querySelector(
+      `[data-anchor-href="${activeLink}"]`
+    );
+    if (!activeLinkElement) {
+      return;
+    }
+    const anchorRect = anchorRef.current.getBoundingClientRect();
+    const linkRect = activeLinkElement.getBoundingClientRect();
+    if (direction === "vertical") {
+      inkRef.current.style.top = `${linkRect.top - anchorRect.top}px`;
+      inkRef.current.style.height = `${linkRect.height}px`;
+    } else {
+      inkRef.current.style.left = `${linkRect.left - anchorRect.left}px`;
+      inkRef.current.style.width = `${linkRect.width}px`;
+    }
+  }, [activeLink, direction]);
+  const wrapperClasses = useMemo(
+    () => classNames(getAnchorWrapperClasses(affix, className)),
+    [affix, className]
+  );
+  const inkContainerClasses = useMemo(() => getAnchorInkContainerClasses(direction), [direction]);
+  const inkActiveClasses = useMemo(() => getAnchorInkActiveClasses(direction), [direction]);
+  const linkListClasses = useMemo(() => getAnchorLinkListClasses(direction), [direction]);
+  const showInk = useMemo(() => {
+    if (!affix) return true;
+    return showInkInFixed;
+  }, [affix, showInkInFixed]);
+  const wrapperStyle = useMemo(() => {
+    const baseStyle = {};
+    if (affix && offsetTop > 0) {
+      baseStyle.top = `${offsetTop}px`;
+    }
+    return { ...baseStyle, ...style };
+  }, [affix, offsetTop, style]);
+  const contextValue = useMemo(
+    () => ({
+      activeLink,
+      direction,
+      registerLink,
+      unregisterLink,
+      handleLinkClick,
+      scrollTo
+    }),
+    [activeLink, direction, registerLink, unregisterLink, handleLinkClick, scrollTo]
+  );
+  return /* @__PURE__ */ jsx(AnchorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: anchorRef, className: wrapperClasses, style: wrapperStyle, children: [
+    showInk && /* @__PURE__ */ jsx("div", { className: inkContainerClasses, children: /* @__PURE__ */ jsx("div", { ref: inkRef, className: inkActiveClasses }) }),
+    /* @__PURE__ */ jsx("div", { className: linkListClasses, children })
+  ] }) });
+};
+var Anchor_default = Anchor;
+
+export { Anchor, Anchor_default, useAnchorContext };

package/dist/chunk-Z5DDULTA.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var chunkZPWDDAFE_js = require('./chunk-ZPWDDAFE.js');
+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);
+
+var AnchorLink = ({
+  href,
+  title,
+  target,
+  className,
+  children,
+  ...props
+}) => {
+  const anchorContext = chunkZPWDDAFE_js.useAnchorContext();
+  React.useEffect(() => {
+    anchorContext?.registerLink(href);
+    return () => {
+      anchorContext?.unregisterLink(href);
+    };
+  }, [href, anchorContext]);
+  const handleClick = (event) => {
+    event.preventDefault();
+    anchorContext?.handleLinkClick(href, event);
+  };
+  const linkClasses = React.useMemo(() => {
+    const isActive = anchorContext?.activeLink === href;
+    return tigercatCore.classNames(tigercatCore.getAnchorLinkClasses(isActive, className));
+  }, [anchorContext?.activeLink, href, className]);
+  const hasNestedLinks = React__default.default.Children.toArray(children).some(
+    (child) => React__default.default.isValidElement(child) && child.type === AnchorLink
+  );
+  if (hasNestedLinks) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "anchor-link-wrapper", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href,
+          target,
+          className: linkClasses,
+          "data-anchor-href": href,
+          onClick: handleClick,
+          ...props,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pl-3 mt-1 space-y-1", children })
+    ] });
+  }
+  const content = children ?? title;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href,
+      target,
+      className: linkClasses,
+      "data-anchor-href": href,
+      onClick: handleClick,
+      ...props,
+      children: content
+    }
+  );
+};
+var AnchorLink_default = AnchorLink;
+
+exports.AnchorLink = AnchorLink;
+exports.AnchorLink_default = AnchorLink_default;