@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-XI6KQAHW.mjs

@@ -0,0 +1,256 @@
+import {
+  Affix
+} from "./chunk-5D6BOIZB.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Anchor.tsx
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  classNames,
+  anchorNestedListClasses,
+  createAnchorObserver,
+  createProgrammaticScrollLock,
+  findAnchorLinkElement,
+  getAnchorInkActiveClasses,
+  getAnchorInkContainerClasses,
+  getAnchorInkStyle,
+  getAnchorLabels,
+  getAnchorLinkClasses,
+  getAnchorLinkListClasses,
+  getAnchorTargetElement,
+  getAnchorWrapperClasses,
+  mergeTigerLocale,
+  replaceAnchorHash,
+  resolveActiveAnchorHref,
+  resolveAnchorScrollContainer,
+  resolveScrollRoot,
+  scrollToAnchor,
+  shouldHandleAnchorClick,
+  sortAnchorHrefsByDocumentOrder
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AnchorContext = createContext(null);
+function useAnchorContext() {
+  return useContext(AnchorContext);
+}
+var AnchorLink = ({
+  href,
+  title,
+  target,
+  className,
+  children,
+  onClick,
+  ...props
+}) => {
+  const anchorContext = useAnchorContext();
+  const nodeRef = useRef(null);
+  const register = anchorContext?.registerLink;
+  const unregister = anchorContext?.unregisterLink;
+  useLayoutEffect(() => {
+    const node = nodeRef.current;
+    if (!href || !node || !register) return void 0;
+    register(href, node);
+    return () => {
+      unregister?.(href, node);
+    };
+  }, [href, register, unregister]);
+  const handleClick = (event) => {
+    onClick?.(event);
+    if (!anchorContext) return;
+    anchorContext.handleLinkClick(href, event, target);
+  };
+  const isActive = anchorContext?.activeLink === href;
+  const linkClasses = classNames(getAnchorLinkClasses(Boolean(isActive), className));
+  const nested = title != null && children != null;
+  const link = /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      ref: nodeRef,
+      href,
+      target,
+      className: linkClasses,
+      "data-anchor-href": href,
+      "aria-current": isActive ? "location" : void 0,
+      onClick: handleClick,
+      children: nested ? title : title ?? children
+    }
+  );
+  if (!anchorContext) return link;
+  return /* @__PURE__ */ jsxs("li", { children: [
+    link,
+    nested ? /* @__PURE__ */ jsx("ul", { className: anchorNestedListClasses, children }) : null
+  ] });
+};
+var Anchor = forwardRef(function Anchor2({
+  affix = true,
+  bounds = 5,
+  offsetTop = 0,
+  showInkInFixed = true,
+  targetOffset,
+  getCurrentAnchor,
+  getContainer,
+  direction = "vertical",
+  className,
+  style,
+  onClick,
+  onChange,
+  children,
+  locale,
+  labels,
+  "aria-label": ariaLabel
+}, ref) {
+  const [activeLink, setActiveLink] = useState("");
+  const [linkEntries, setLinkEntries] = useState([]);
+  const anchorRef = useRef(null);
+  const inkRef = useRef(null);
+  const getContainerRef = useRef(getContainer);
+  getContainerRef.current = getContainer;
+  const getCurrentAnchorRef = useRef(getCurrentAnchor);
+  getCurrentAnchorRef.current = getCurrentAnchor;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const scrollLockRef = useRef(
+    createProgrammaticScrollLock(() => resolveAnchorScrollContainer(getContainerRef.current))
+  );
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labelSet = getAnchorLabels(mergedLocale, labels);
+  const navLabel = ariaLabel ?? labelSet.ariaLabel;
+  const scrollOffset = targetOffset ?? offsetTop;
+  const links = useMemo(() => sortAnchorHrefsByDocumentOrder(linkEntries), [linkEntries]);
+  const registerLink = useCallback((href, node) => {
+    setLinkEntries((prev) => {
+      if (prev.some((entry) => entry.node === node)) {
+        return prev.map((entry) => entry.node === node ? { href, node } : entry);
+      }
+      return [...prev, { href, node }];
+    });
+  }, []);
+  const unregisterLink = useCallback((href, node) => {
+    setLinkEntries((prev) => prev.filter((entry) => entry.node !== node || entry.href !== href));
+  }, []);
+  const applyActive = useCallback((href) => {
+    const finalHref = resolveActiveAnchorHref(href, getCurrentAnchorRef.current);
+    setActiveLink((prev) => {
+      if (finalHref !== prev) {
+        onChangeRef.current?.(finalHref);
+        return finalHref;
+      }
+      return prev;
+    });
+    return finalHref;
+  }, []);
+  const scrollTo = useCallback(
+    (href) => {
+      const container = resolveAnchorScrollContainer(getContainerRef.current);
+      scrollToAnchor(href, container, scrollOffset);
+    },
+    [scrollOffset]
+  );
+  const handleLinkClick = useCallback(
+    (href, event, targetAttr) => {
+      const hasTargetElement = Boolean(getAnchorTargetElement(href));
+      if (!shouldHandleAnchorClick(event.nativeEvent, {
+        target: targetAttr,
+        hasTargetElement
+      })) {
+        onClick?.(event, href);
+        return;
+      }
+      event.preventDefault();
+      onClick?.(event, href);
+      const finalHref = applyActive(href);
+      scrollLockRef.current.lock();
+      scrollTo(finalHref);
+      replaceAnchorHash(finalHref);
+    },
+    [applyActive, onClick, scrollTo]
+  );
+  const resolved = resolveScrollRoot(getContainer);
+  const resolvedKey = resolved.isWindow ? "window" : resolved.target;
+  useEffect(() => {
+    const container = resolveAnchorScrollContainer(getContainerRef.current);
+    const root = container === window ? null : container;
+    const stop = createAnchorObserver(links, {
+      offsetTop: scrollOffset,
+      bounds,
+      root,
+      onChange: (newActiveLink) => {
+        if (scrollLockRef.current.isLocked()) return;
+        applyActive(newActiveLink);
+      }
+    });
+    return () => {
+      stop();
+    };
+  }, [bounds, links, scrollOffset, resolvedKey, applyActive]);
+  useEffect(() => {
+    const scrollLock = scrollLockRef.current;
+    return () => {
+      scrollLock.dispose();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const ink = inkRef.current;
+    const root = anchorRef.current;
+    if (!ink || !root || !activeLink) return;
+    const activeLinkElement = findAnchorLinkElement(root, activeLink);
+    if (!activeLinkElement) return;
+    const next = getAnchorInkStyle(
+      direction,
+      activeLinkElement.getBoundingClientRect(),
+      root.getBoundingClientRect()
+    );
+    ink.style.top = next.top;
+    ink.style.height = next.height;
+    ink.style.insetInlineStart = next.insetInlineStart;
+    ink.style.width = next.width;
+  }, [activeLink, direction, links]);
+  const wrapperClasses = classNames(getAnchorWrapperClasses(className));
+  const showInk = !affix || showInkInFixed;
+  const setNavRef = (node) => {
+    anchorRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const contextValue = useMemo(
+    () => ({
+      activeLink,
+      direction,
+      registerLink,
+      unregisterLink,
+      handleLinkClick
+    }),
+    [activeLink, direction, registerLink, unregisterLink, handleLinkClick]
+  );
+  const nav = /* @__PURE__ */ jsxs("nav", { ref: setNavRef, className: wrapperClasses, style, "aria-label": navLabel, children: [
+    showInk && /* @__PURE__ */ jsx("div", { className: getAnchorInkContainerClasses(direction), children: /* @__PURE__ */ jsx("div", { ref: inkRef, className: getAnchorInkActiveClasses(direction) }) }),
+    /* @__PURE__ */ jsx("ul", { className: getAnchorLinkListClasses(direction), children })
+  ] });
+  return /* @__PURE__ */ jsx(AnchorContext.Provider, { value: contextValue, children: affix ? /* @__PURE__ */ jsx(Affix, { offsetTop, children: nav }) : nav });
+});
+Anchor.displayName = "Anchor";
+var Anchor_default = Anchor;
+
+export {
+  useAnchorContext,
+  AnchorLink,
+  Anchor,
+  Anchor_default
+};

package/dist/chunk-XYW6RTRB.mjs

@@ -0,0 +1,217 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Descriptions.tsx
+import React, { forwardRef, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  devWarn,
+  getDescriptionsClasses,
+  getDescriptionsContentClasses,
+  getDescriptionsHorizontalColSpan,
+  getDescriptionsLabelClasses,
+  getDescriptionsTableClasses,
+  getDescriptionsVerticalGridStyle,
+  getDescriptionsVerticalItemClasses,
+  getDescriptionsLabels,
+  groupItemsIntoRows,
+  descriptionsCaptionClasses,
+  descriptionsExtraClasses,
+  descriptionsHeaderClasses,
+  descriptionsTitleClasses,
+  isResponsiveMap,
+  mergeTigerLocale,
+  observeElementSize,
+  resolveResponsiveValue
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function renderColon(show, glyph) {
+  return show ? glyph : "";
+}
+var Descriptions = forwardRef(function Descriptions2({
+  title,
+  extra,
+  bordered = false,
+  column: columnProp = 3,
+  size = "md",
+  layout = "horizontal",
+  colon = true,
+  labelStyle,
+  contentStyle,
+  items = [],
+  className,
+  children,
+  locale,
+  ...props
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const colonGlyph = getDescriptionsLabels(mergedLocale).colon;
+  const titleId = useId();
+  const rootRef = useRef(null);
+  const isResponsive = isResponsiveMap(columnProp);
+  const [containerWidth, setContainerWidth] = useState(0);
+  useLayoutEffect(() => {
+    if (!isResponsive) return void 0;
+    return observeElementSize(rootRef.current, ({ width }) => setContainerWidth(width));
+  }, [isResponsive]);
+  const column = useMemo(
+    () => resolveResponsiveValue(columnProp, containerWidth, 3),
+    [columnProp, containerWidth]
+  );
+  if (children && items.length === 0) {
+    devWarn(
+      "Descriptions.children",
+      "Descriptions: `items` is the data source. Default children are ignored and are not description rows."
+    );
+  }
+  const rows = groupItemsIntoRows(items, column);
+  const labelledBy = title ? titleId : void 0;
+  const rootClasses = classNames(getDescriptionsClasses(size, bordered), className);
+  const setRootRef = (node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const renderLabel = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.label,
+    renderColon(colon, colonGlyph)
+  ] });
+  const renderHorizontal = () => {
+    if (items.length === 0) return null;
+    return /* @__PURE__ */ jsxs("table", { className: getDescriptionsTableClasses(bordered), "aria-labelledby": labelledBy, children: [
+      useCaption ? /* @__PURE__ */ jsx("caption", { className: descriptionsCaptionClasses, id: titleId, children: title }) : null,
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((rowItems, rowIndex) => /* @__PURE__ */ jsx("tr", { children: rowItems.map((item, itemIndex) => {
+        const span = item.span || 1;
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "row",
+              className: classNames(
+                getDescriptionsLabelClasses(bordered, size, "horizontal"),
+                item.labelClassName
+              ),
+              style: labelStyle,
+              children: renderLabel(item)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: classNames(
+                getDescriptionsContentClasses(bordered, size, "horizontal"),
+                item.contentClassName
+              ),
+              style: contentStyle,
+              colSpan: getDescriptionsHorizontalColSpan(span),
+              children: item.content
+            }
+          )
+        ] }, `${rowIndex}-${itemIndex}`);
+      }) }, rowIndex)) })
+    ] });
+  };
+  const renderVertical = () => {
+    if (items.length === 0) return null;
+    if (bordered) {
+      return /* @__PURE__ */ jsxs("table", { className: getDescriptionsTableClasses(true), "aria-labelledby": labelledBy, children: [
+        useCaption ? /* @__PURE__ */ jsx("caption", { className: descriptionsCaptionClasses, id: titleId, children: title }) : null,
+        /* @__PURE__ */ jsx("tbody", { children: rows.map((rowItems, rowIndex) => /* @__PURE__ */ jsx("tr", { children: rowItems.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+          "td",
+          {
+            colSpan: item.span || 1,
+            className: getDescriptionsVerticalItemClasses(size, true),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames(
+                    getDescriptionsLabelClasses(true, size, "vertical"),
+                    item.labelClassName
+                  ),
+                  style: labelStyle,
+                  children: renderLabel(item)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames(
+                    getDescriptionsContentClasses(true, size, "vertical"),
+                    item.contentClassName
+                  ),
+                  style: contentStyle,
+                  children: item.content
+                }
+              )
+            ]
+          },
+          `${rowIndex}-${itemIndex}`
+        )) }, rowIndex)) })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      "dl",
+      {
+        className: classNames("grid w-full"),
+        style: getDescriptionsVerticalGridStyle(column),
+        "aria-labelledby": labelledBy,
+        children: rows.flatMap(
+          (rowItems, rowIndex) => rowItems.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: getDescriptionsVerticalItemClasses(size, false),
+              style: { gridColumn: `span ${item.span || 1}` },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "dt",
+                  {
+                    className: classNames(
+                      getDescriptionsLabelClasses(false, size, "vertical"),
+                      item.labelClassName
+                    ),
+                    style: labelStyle,
+                    children: renderLabel(item)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "dd",
+                  {
+                    className: classNames(
+                      getDescriptionsContentClasses(false, size, "vertical"),
+                      item.contentClassName
+                    ),
+                    style: contentStyle,
+                    children: item.content
+                  }
+                )
+              ]
+            },
+            `${rowIndex}-${itemIndex}`
+          ))
+        )
+      }
+    );
+  };
+  const useCaption = Boolean(title && !extra && (layout === "horizontal" || bordered));
+  const showHeader = Boolean(extra || title && !useCaption);
+  return /* @__PURE__ */ jsxs("div", { ref: setRootRef, className: rootClasses, ...props, children: [
+    showHeader ? /* @__PURE__ */ jsxs("div", { className: descriptionsHeaderClasses, children: [
+      title ? /* @__PURE__ */ jsx("div", { className: descriptionsTitleClasses, id: titleId, children: title }) : null,
+      extra ? /* @__PURE__ */ jsx("div", { className: descriptionsExtraClasses, children: extra }) : null
+    ] }) : null,
+    layout === "horizontal" ? renderHorizontal() : renderVertical()
+  ] });
+});
+Descriptions.displayName = "Descriptions";
+var Descriptions_default = Descriptions;
+
+export {
+  Descriptions,
+  Descriptions_default
+};

package/dist/chunk-XZFHPHV5.mjs

@@ -0,0 +1,75 @@
+// src/components/ChartAxis.tsx
+import { useMemo } from "react";
+import {
+  chartAxisLabelClasses,
+  chartAxisLineClasses,
+  chartAxisTickLineClasses,
+  chartAxisTickTextClasses,
+  classNames,
+  getChartAxisGeometry
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartAxis = ({
+  orientation = "bottom",
+  scale,
+  ticks = 5,
+  tickValues,
+  tickFormat,
+  tickSize = 6,
+  tickPadding = 4,
+  label,
+  labelOffset = 28,
+  x = 0,
+  y = 0,
+  className,
+  ...props
+}) => {
+  const geometry = useMemo(
+    () => getChartAxisGeometry(scale, {
+      orientation,
+      tickCount: ticks,
+      tickValues,
+      tickFormat,
+      tickSize,
+      tickPadding,
+      label,
+      labelOffset
+    }),
+    [scale, orientation, ticks, tickValues, tickFormat, tickSize, tickPadding, label, labelOffset]
+  );
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      ...props,
+      className: classNames(className),
+      transform: `translate(${x}, ${y})`,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("line", { ...geometry.axisLine, className: chartAxisLineClasses, "data-axis-line": "true" }),
+        geometry.ticks.map((tick) => /* @__PURE__ */ jsxs("g", { "data-axis-tick": "true", children: [
+          /* @__PURE__ */ jsx("line", { ...tick.line, className: chartAxisTickLineClasses }),
+          /* @__PURE__ */ jsx("text", { ...tick.text, className: chartAxisTickTextClasses, children: tick.label })
+        ] }, tick.key)),
+        geometry.label ? /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: chartAxisLabelClasses,
+            "data-axis-label": "true",
+            x: geometry.label.x,
+            y: geometry.label.y,
+            textAnchor: geometry.label.textAnchor,
+            dy: geometry.label.dy,
+            transform: geometry.label.transform,
+            children: geometry.label.text
+          }
+        ) : null
+      ]
+    }
+  );
+};
+var ChartAxis_default = ChartAxis;
+
+export {
+  ChartAxis,
+  ChartAxis_default
+};