@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-2PC625DX.mjs

@@ -0,0 +1,88 @@
+// src/components/ChartGrid.tsx
+import { useMemo } from "react";
+import {
+  chartGridLineClasses,
+  classNames,
+  getChartGridLines
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var ChartGrid = ({
+  xScale,
+  yScale,
+  xRange,
+  yRange,
+  width,
+  height,
+  show = "both",
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  lineStyle = "solid",
+  strokeWidth = 1,
+  x = 0,
+  y = 0,
+  className,
+  ...props
+}) => {
+  const lines = useMemo(
+    () => getChartGridLines({
+      xScale,
+      yScale,
+      xRange,
+      yRange,
+      width,
+      height,
+      show,
+      xTicks,
+      yTicks,
+      xTickValues,
+      yTickValues,
+      lineStyle,
+      strokeWidth
+    }),
+    [
+      xScale,
+      yScale,
+      xRange,
+      yRange,
+      width,
+      height,
+      show,
+      xTicks,
+      yTicks,
+      xTickValues,
+      yTickValues,
+      lineStyle,
+      strokeWidth
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      ...props,
+      className: classNames(className),
+      transform: `translate(${x}, ${y})`,
+      "aria-hidden": "true",
+      children: lines.map((line) => /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: line.x1,
+          y1: line.y1,
+          x2: line.x2,
+          y2: line.y2,
+          className: chartGridLineClasses,
+          strokeWidth: line.strokeWidth,
+          strokeDasharray: line.strokeDasharray
+        },
+        line.key
+      ))
+    }
+  );
+};
+var ChartGrid_default = ChartGrid;
+
+export {
+  ChartGrid,
+  ChartGrid_default
+};

package/dist/chunk-2QJGXENY.mjs

@@ -0,0 +1,85 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Statistic.tsx
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import {
+  statisticBaseClasses,
+  getStatisticTitleClasses,
+  getStatisticValueClasses,
+  statisticPrefixClasses,
+  statisticSuffixClasses,
+  formatStatisticValue,
+  canAnimateStatisticValue,
+  createStatisticNumberAnimation,
+  resolveStatisticPrecision,
+  statisticPrefersReducedMotion,
+  classNames,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Statistic = forwardRef(function Statistic2({
+  title,
+  value,
+  precision,
+  prefix,
+  suffix,
+  groupSeparator = false,
+  animated = false,
+  animationDuration,
+  size = "md",
+  className,
+  locale,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const localeId = mergedLocale?.locale;
+  const [displayValue, setDisplayValue] = useState(value);
+  const currentNumberRef = useRef(canAnimateStatisticValue(value) ? value : 0);
+  const hasPlayedRef = useRef(false);
+  useEffect(() => {
+    if (!animated || !canAnimateStatisticValue(value) || statisticPrefersReducedMotion()) {
+      setDisplayValue(value);
+      if (canAnimateStatisticValue(value)) currentNumberRef.current = value;
+      return void 0;
+    }
+    const from = hasPlayedRef.current ? currentNumberRef.current : 0;
+    hasPlayedRef.current = true;
+    const controller = createStatisticNumberAnimation({
+      from,
+      to: value,
+      duration: animationDuration,
+      onUpdate: (next) => {
+        currentNumberRef.current = next;
+        setDisplayValue(next);
+      },
+      onComplete: () => {
+        currentNumberRef.current = value;
+        setDisplayValue(value);
+      }
+    });
+    return controller.stop;
+  }, [value, animated, animationDuration]);
+  const formatPrecision = canAnimateStatisticValue(value) ? resolveStatisticPrecision(value, precision) : precision;
+  const formatted = useMemo(
+    () => formatStatisticValue(displayValue, formatPrecision, groupSeparator, localeId),
+    [displayValue, formatPrecision, groupSeparator, localeId]
+  );
+  return /* @__PURE__ */ jsxs("div", { ref, className: classNames(statisticBaseClasses, className), ...rest, children: [
+    title ? /* @__PURE__ */ jsx("div", { className: getStatisticTitleClasses(size), children: title }) : null,
+    /* @__PURE__ */ jsxs("div", { className: getStatisticValueClasses(size), children: [
+      prefix ? /* @__PURE__ */ jsx("span", { className: statisticPrefixClasses, children: prefix }) : null,
+      /* @__PURE__ */ jsx("span", { children: formatted }),
+      suffix ? /* @__PURE__ */ jsx("span", { className: statisticSuffixClasses, children: suffix }) : null
+    ] })
+  ] });
+});
+
+export {
+  Statistic
+};

package/dist/chunk-2SN5JTST.mjs

@@ -0,0 +1,99 @@
+// src/components/Watermark.tsx
+import { forwardRef, useEffect, useRef, useState } from "react";
+import {
+  classNames,
+  watermarkDefaults,
+  watermarkWrapperClasses,
+  resolveWatermarkFont,
+  createWatermarkRenderController,
+  getWatermarkOverlayStyle
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Watermark = forwardRef(function Watermark2({
+  content,
+  image,
+  width = watermarkDefaults.width,
+  height = watermarkDefaults.height,
+  rotate = watermarkDefaults.rotate,
+  zIndex = watermarkDefaults.zIndex,
+  gapX = watermarkDefaults.gapX,
+  gapY = watermarkDefaults.gapY,
+  offsetX = watermarkDefaults.offsetX,
+  offsetY = watermarkDefaults.offsetY,
+  font,
+  className,
+  children,
+  ...props
+}, ref) {
+  const [base64, setBase64] = useState();
+  const [overlayKey, setOverlayKey] = useState(0);
+  const wrapperRef = useRef(null);
+  const renderControllerRef = useRef(null);
+  const optionsRef = useRef({ content, image, width, height, rotate, gapX, gapY, font });
+  optionsRef.current = { content, image, width, height, rotate, gapX, gapY, font };
+  useEffect(() => {
+    const target = wrapperRef.current;
+    if (!target) return;
+    const controller = createWatermarkRenderController({
+      getRenderOptions: () => {
+        const next = optionsRef.current;
+        return {
+          content: next.content,
+          image: next.image,
+          width: next.width,
+          height: next.height,
+          gapX: next.gapX,
+          gapY: next.gapY,
+          rotate: next.rotate,
+          font: resolveWatermarkFont(next.font)
+        };
+      },
+      onRender: setBase64,
+      onTamper: () => setOverlayKey((key) => key + 1)
+    });
+    renderControllerRef.current = controller;
+    controller.observe(target);
+    controller.render();
+    return () => {
+      controller.disconnect();
+      if (renderControllerRef.current === controller) {
+        renderControllerRef.current = null;
+      }
+    };
+  }, []);
+  const fontKey = `${font?.fontSize ?? ""}|${font?.fontFamily ?? ""}|${font?.fontWeight ?? ""}|${font?.color ?? ""}`;
+  const contentKey = Array.isArray(content) ? content.join("\n") : content ?? "";
+  useEffect(() => {
+    renderControllerRef.current?.render();
+  }, [contentKey, image, width, height, rotate, gapX, gapY, fontKey]);
+  const overlayStyle = getWatermarkOverlayStyle({
+    base64Url: base64,
+    width,
+    height,
+    gapX,
+    gapY,
+    offsetX,
+    offsetY,
+    zIndex
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        wrapperRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: classNames(watermarkWrapperClasses, className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("div", { "data-watermark": "true", "aria-hidden": "true", style: overlayStyle }, overlayKey)
+      ]
+    }
+  );
+});
+
+export {
+  Watermark
+};

package/dist/chunk-2STETY2J.mjs

@@ -0,0 +1,160 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/ScrollSpy.tsx
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import {
+  classNames,
+  createProgrammaticScrollLock,
+  createScrollSpyObserver,
+  createScrollSpyPayload,
+  flattenScrollSpyItems,
+  getInitialScrollSpyActiveKey,
+  getScrollSpyItemClasses,
+  getScrollSpyItemByKey,
+  getScrollSpyKeyString,
+  getScrollSpyLabels,
+  getScrollSpyListClasses,
+  getScrollSpyRootClasses,
+  getScrollSpyRootStyle,
+  mergeTigerLocale,
+  resolveScrollSpyContainer,
+  resolveScrollSpyOffset,
+  shouldActivateScrollSpyClick,
+  activateScrollSpyClick
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EMPTY_ITEMS = [];
+var ScrollSpy = forwardRef(function ScrollSpy2({
+  items = EMPTY_ITEMS,
+  activeKey,
+  defaultActiveKey,
+  offsetTop = 0,
+  targetOffset,
+  bounds = 5,
+  direction = "vertical",
+  sticky = false,
+  ariaLabel,
+  getContainer,
+  className,
+  style,
+  locale,
+  onActiveKeyChange,
+  onClick,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const labels = getScrollSpyLabels(mergeTigerLocale(config.locale, locale));
+  const offset = resolveScrollSpyOffset(targetOffset, offsetTop);
+  const [currentActiveKey, setActiveKey] = useControlledState({
+    value: activeKey,
+    defaultValue: getInitialScrollSpyActiveKey(items, void 0, defaultActiveKey),
+    onChange: (key, item, payload) => {
+      if (key !== void 0) onActiveKeyChange?.(key, item, payload);
+    },
+    postState: (key) => {
+      const item = getScrollSpyItemByKey(items, key);
+      if (item && !item.disabled) return key;
+      return getInitialScrollSpyActiveKey(items, void 0, defaultActiveKey);
+    }
+  });
+  const flatItems = useMemo(() => flattenScrollSpyItems(items), [items]);
+  const activeKeyRef = useRef(currentActiveKey);
+  activeKeyRef.current = currentActiveKey;
+  const resolvedContainer = resolveScrollSpyContainer(getContainer);
+  const containerKey = resolvedContainer === window ? "window" : resolvedContainer;
+  const getContainerRef = useRef(getContainer);
+  getContainerRef.current = getContainer;
+  const scrollLockRef = useRef(
+    createProgrammaticScrollLock(() => resolveScrollSpyContainer(getContainerRef.current))
+  );
+  const emitActive = useCallback(
+    (item, source) => {
+      const nextKeyString = getScrollSpyKeyString(item.key);
+      const current = activeKeyRef.current;
+      if (current !== void 0 && nextKeyString === getScrollSpyKeyString(current)) return;
+      const payload = createScrollSpyPayload(item, source);
+      setActiveKey(item.key, item, payload);
+    },
+    [setActiveKey]
+  );
+  useEffect(() => {
+    return createScrollSpyObserver(items, {
+      container: getContainerRef.current,
+      offsetTop: offset,
+      bounds,
+      onChange: (item) => {
+        if (scrollLockRef.current.isLocked()) return;
+        emitActive(item, "scroll");
+      }
+    });
+  }, [bounds, emitActive, items, offset, containerKey]);
+  useEffect(() => {
+    const scrollLock = scrollLockRef.current;
+    return () => {
+      scrollLock.dispose();
+    };
+  }, []);
+  const handleClick = useCallback(
+    (item, event) => {
+      if (item.disabled) {
+        event.preventDefault();
+        return;
+      }
+      if (!shouldActivateScrollSpyClick(item, event.nativeEvent)) return;
+      event.preventDefault();
+      onClick?.(item, event);
+      emitActive(item, "click");
+      scrollLockRef.current.lock();
+      activateScrollSpyClick(item, resolveScrollSpyContainer(getContainerRef.current), offset);
+    },
+    [emitActive, offset, onClick]
+  );
+  function renderItems(list, nested = false) {
+    return /* @__PURE__ */ jsx("ul", { className: getScrollSpyListClasses(direction, nested), role: "list", children: list.map((item) => {
+      const keyString = getScrollSpyKeyString(item.key);
+      const isActive = currentActiveKey !== void 0 && keyString === getScrollSpyKeyString(currentActiveKey);
+      const hasChildren = Boolean(item.children?.length);
+      const depth = flatItems.find((flat) => getScrollSpyKeyString(flat.key) === keyString)?.depth ?? 0;
+      const hasHref = Boolean(item.href);
+      const Tag = hasHref ? "a" : "span";
+      return /* @__PURE__ */ jsxs("li", { "data-depth": depth, children: [
+        /* @__PURE__ */ jsx(
+          Tag,
+          {
+            href: hasHref ? item.href : void 0,
+            className: getScrollSpyItemClasses(isActive, item.disabled),
+            "aria-current": isActive ? "location" : void 0,
+            "aria-disabled": item.disabled || void 0,
+            tabIndex: item.disabled ? -1 : void 0,
+            "data-key": keyString,
+            onClick: hasHref ? (event) => handleClick(item, event) : void 0,
+            children: item.label
+          }
+        ),
+        hasChildren ? renderItems(item.children ?? [], true) : null
+      ] }, keyString);
+    }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ...rest,
+      ref,
+      className: classNames(getScrollSpyRootClasses(sticky, className)),
+      style: getScrollSpyRootStyle(sticky, offset, style),
+      "aria-label": ariaLabel ?? labels.ariaLabel,
+      children: renderItems(items)
+    }
+  );
+});
+var ScrollSpy_default = ScrollSpy;
+
+export {
+  ScrollSpy,
+  ScrollSpy_default
+};

package/dist/{chunk-CN3QXWK3.mjs → chunk-2W4SH2IG.mjs}

@@ -1,14 +1,21 @@
 import {
   StatusIcon
-} from "./chunk-FLYJVZED.mjs";
+} from "./chunk-ED7QR6PJ.mjs";
+import {
+  renderBodyPortal
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  getGlobalTigerLocale,
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/NotificationContainer.tsx
-import { useEffect, useState } from "react";
 import {
-  ANIMATION_DURATION_MS,
   classNames,
+  getNotificationCloseAriaLabel,
   getNotificationIconPath,
   getNotificationTypeClasses,
+  getToastItemRole,
   notificationActionButtonClasses,
   notificationActionButtonTypeClasses,
   notificationActionsClasses,
@@ -21,48 +28,33 @@ import {
   notificationDescriptionClasses,
   notificationIconClasses,
   notificationPositionClasses,
-  notificationTitleClasses
+  notificationTitleClasses,
+  shouldHandleToastSurfaceEvent
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
-var NotificationItem = ({ notification, onClose }) => {
-  const [isVisible, setIsVisible] = useState(false);
-  useEffect(() => {
-    const timer = setTimeout(() => setIsVisible(true), 10);
-    return () => clearTimeout(timer);
-  }, []);
+var NotificationItem = ({ notification, locale, onClose }) => {
   const colorScheme = getNotificationTypeClasses(notification.type);
   const notificationClasses = classNames(
     notificationBaseClasses,
     colorScheme.bg,
     colorScheme.border,
-    notification.className,
-    isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
+    notification.className
   );
   const iconPath = notification.icon || getNotificationIconPath(notification.type);
   const iconClass = classNames(notificationIconClasses, colorScheme.icon);
-  const handleClose = () => {
-    setIsVisible(false);
-    setTimeout(() => onClose?.(notification.id), ANIMATION_DURATION_MS);
-  };
-  const a11yRole = notification.type === "error" ? "alert" : "status";
-  const ariaLive = notification.type === "error" ? "assertive" : "polite";
+  const a11yRole = getToastItemRole(notification.type);
+  const closeLabel = getNotificationCloseAriaLabel(locale, notification.closeAriaLabel);
+  const close = () => onClose?.(notification.id);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: notificationClasses,
       role: a11yRole,
-      "aria-live": ariaLive,
-      "aria-atomic": "true",
-      onClick: notification.onClick,
-      onKeyDown: (e) => {
+      onClick: (event) => {
         if (!notification.onClick) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          notification.onClick();
-        }
+        if (!shouldHandleToastSurfaceEvent(event)) return;
+        notification.onClick();
       },
-      tabIndex: notification.onClick ? 0 : void 0,
       style: notification.onClick ? { cursor: "pointer" } : void 0,
       "data-tiger-notification": "",
       "data-tiger-notification-type": notification.type,
@@ -85,11 +77,9 @@ var NotificationItem = ({ notification, onClose }) => {
                 event.stopPropagation();
                 action.onClick?.({
                   id: notification.id,
-                  close: handleClose
+                  close
                 });
-                if (action.closeOnClick) {
-                  handleClose();
-                }
+                if (action.closeOnClick) close();
               },
               children: action.label
             },
@@ -100,13 +90,21 @@ var NotificationItem = ({ notification, onClose }) => {
           "button",
           {
             className: notificationCloseButtonClasses,
-            onClick: (e) => {
-              e.stopPropagation();
-              handleClose();
+            onClick: (event) => {
+              event.stopPropagation();
+              close();
             },
-            "aria-label": notification.closeAriaLabel ?? "Close notification",
+            "aria-label": closeLabel,
             type: "button",
-            children: /* @__PURE__ */ jsx(StatusIcon, { path: notificationCloseIconPath, className: notificationCloseIconClasses })
+            children: /* @__PURE__ */ jsx(
+              StatusIcon,
+              {
+                path: notificationCloseIconPath,
+                className: notificationCloseIconClasses,
+                "aria-hidden": "true",
+                focusable: "false"
+              }
+            )
           }
         )
       ]
@@ -116,24 +114,35 @@ var NotificationItem = ({ notification, onClose }) => {
 var NotificationContainer = ({
   position = "top-right",
   notifications = [],
-  onClose
+  onClose,
+  className,
+  portal = true
 }) => {
+  const config = useTigerConfig();
+  const locale = config.locale ?? getGlobalTigerLocale();
   const containerClasses = classNames(
     notificationContainerBaseClasses,
-    notificationPositionClasses[position]
+    notificationPositionClasses[position],
+    className
   );
-  return /* @__PURE__ */ jsx(
+  const node = /* @__PURE__ */ jsx(
     "div",
     {
       className: containerClasses,
-      id: `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}`,
-      "aria-live": "polite",
-      "aria-relevant": "additions",
       "data-tiger-notification-container": "",
       "data-tiger-notification-position": position,
-      children: notifications.map((notification) => /* @__PURE__ */ jsx(NotificationItem, { notification, onClose }, notification.id))
+      children: notifications.map((notification) => /* @__PURE__ */ jsx(
+        NotificationItem,
+        {
+          notification,
+          locale,
+          onClose
+        },
+        notification.id
+      ))
     }
   );
+  return portal ? renderBodyPortal(node) : node;
 };
 var NotificationContainer_default = NotificationContainer;
 

package/dist/{chunk-GR3Y3XWP.mjs → chunk-34BU3D7L.mjs}

@@ -5,7 +5,8 @@ import {
   getKbdParts,
   getKbdRootClasses,
   kbdKeyClasses,
-  kbdSeparatorClasses
+  kbdSeparatorClasses,
+  resolveKbdAccessibleName
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 function hasRenderableChildren(children) {
@@ -13,10 +14,16 @@ function hasRenderableChildren(children) {
   if (typeof children === "string" && children.length === 0) return false;
   return true;
 }
+function extraKeyText(children) {
+  if (typeof children === "string" || typeof children === "number") return String(children);
+  return void 0;
+}
 var Kbd = forwardRef(
   ({ keys, separator, size = "md", variant = "default", className, style, children, ...rest }, ref) => {
     const parts = getKbdParts(keys, separator);
     const hasChildren = hasRenderableChildren(children);
+    const accessibleName = resolveKbdAccessibleName(keys, separator, extraKeyText(children));
+    const isEmpty = !hasChildren && parts.length === 0;
     return /* @__PURE__ */ jsxs(
       "kbd",
       {
@@ -27,11 +34,22 @@ var Kbd = forwardRef(
         className: getKbdRootClasses({ size, variant, className }),
         style,
         ...rest,
+        "aria-label": rest["aria-label"] ?? accessibleName,
+        "aria-hidden": isEmpty ? true : rest["aria-hidden"],
         children: [
           parts.map(
-            (part, index) => part.type === "separator" ? /* @__PURE__ */ jsx("span", { className: kbdSeparatorClasses, "data-kbd-separator": "", children: ` ${part.value} ` }, `sep-${index}`) : /* @__PURE__ */ jsx("kbd", { className: kbdKeyClasses, "data-kbd-key": "", children: part.value }, `key-${index}`)
+            (part, index) => part.type === "separator" ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: kbdSeparatorClasses,
+                "data-kbd-separator": "",
+                "aria-hidden": "true",
+                children: ` ${part.value} `
+              },
+              `sep-${index}`
+            ) : /* @__PURE__ */ jsx("kbd", { className: kbdKeyClasses, "data-kbd-key": "", "aria-hidden": "true", children: part.value }, `key-${index}`)
           ),
-          hasChildren && parts.length > 0 ? /* @__PURE__ */ jsx("span", { className: kbdSeparatorClasses, "data-kbd-separator": "", children: formatKbdSeparatorText(separator) }) : null,
+          hasChildren && parts.length > 0 ? /* @__PURE__ */ jsx("span", { className: kbdSeparatorClasses, "data-kbd-separator": "", "aria-hidden": "true", children: formatKbdSeparatorText(separator) }) : null,
           hasChildren ? children : null
         ]
       }