@expcat/tigercat-react 2.1.2 → 2.1.3

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-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
         ]
       }

package/dist/chunk-3J2AUNWT.mjs

@@ -0,0 +1,326 @@
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Resizable.tsx
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  applyResizeJump,
+  applyResizeSize,
+  classNames,
+  createDocumentDragSession,
+  defaultResizeHandles,
+  formatResizableHandleLabel,
+  getResizableHandleClasses,
+  getResizeHandleOrientation,
+  getResizeKeyboardDelta,
+  getResizableLabels,
+  isCornerResizeHandle,
+  isSplitterRtl,
+  mergeResizableBoxStyle,
+  resizableBaseClasses,
+  resolveVisibleResizeHandles
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Resizable = forwardRef(function Resizable2({
+  width: widthProp,
+  height: heightProp,
+  defaultWidth,
+  defaultHeight,
+  minWidth = 0,
+  minHeight = 0,
+  maxWidth,
+  maxHeight,
+  handles = defaultResizeHandles,
+  axis = "both",
+  disabled = false,
+  lockAspectRatio = false,
+  className,
+  style,
+  onResizeStart,
+  onResize,
+  onResizeEnd,
+  onWidthChange,
+  onHeightChange,
+  children,
+  dir,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const labels = getResizableLabels(config.locale);
+  const rtl = isSplitterRtl(typeof dir === "string" ? dir : config.direction);
+  const { "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, ...domProps } = rest;
+  const [width, setWidth] = useControlledState({
+    value: widthProp,
+    defaultValue: defaultWidth,
+    onChange: (next) => {
+      if (next !== void 0) onWidthChange?.(next);
+    }
+  });
+  const [height, setHeight] = useControlledState({
+    value: heightProp,
+    defaultValue: defaultHeight,
+    onChange: (next) => {
+      if (next !== void 0) onHeightChange?.(next);
+    }
+  });
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [draggingHandle, setDraggingHandle] = useState(null);
+  const rootRef = useRef(null);
+  const dragSessionRef = useRef(null);
+  const dragRef = useRef(null);
+  const visibleHandles = useMemo(() => resolveVisibleResizeHandles(handles, axis), [handles, axis]);
+  const setRootRef = useCallback(
+    (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const cleanupDragSession = useCallback(() => {
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = null;
+  }, []);
+  useEffect(() => cleanupDragSession, [cleanupDragSession]);
+  const commitSize = useCallback(
+    (next, handle, startW, startH, startOffsetX, startOffsetY, phase) => {
+      setWidth(next.width);
+      setHeight(next.height);
+      setOffset({ x: startOffsetX + next.offsetX, y: startOffsetY + next.offsetY });
+      const event = {
+        width: next.width,
+        height: next.height,
+        handle,
+        deltaX: next.width - startW,
+        deltaY: next.height - startH
+      };
+      onResize?.(event);
+      if (phase !== "move") onResizeEnd?.(event);
+    },
+    [onResize, onResizeEnd, setHeight, setWidth]
+  );
+  const measureBox = useCallback(() => {
+    const rect = rootRef.current?.getBoundingClientRect();
+    return {
+      width: width ?? rect?.width ?? 0,
+      height: height ?? rect?.height ?? 0
+    };
+  }, [height, width]);
+  const handlePointerDown = useCallback(
+    (handle, e) => {
+      if (disabled || e.button !== 0) return;
+      e.preventDefault();
+      cleanupDragSession();
+      const box = measureBox();
+      dragRef.current = {
+        handle,
+        startX: e.clientX,
+        startY: e.clientY,
+        startW: box.width,
+        startH: box.height,
+        startOffsetX: offset.x,
+        startOffsetY: offset.y
+      };
+      setDraggingHandle(handle);
+      onResizeStart?.({
+        width: box.width,
+        height: box.height,
+        handle,
+        deltaX: 0,
+        deltaY: 0
+      });
+      dragSessionRef.current = createDocumentDragSession({
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget.ownerDocument,
+        pointerId: e.pointerId,
+        pointerTarget: e.currentTarget,
+        onMove: ({ currentX, currentY }) => {
+          const drag = dragRef.current;
+          if (!drag) return;
+          const next = applyResizeSize(
+            drag.handle,
+            drag.startW,
+            drag.startH,
+            currentX - drag.startX,
+            currentY - drag.startY,
+            axis,
+            {
+              rtl,
+              lockAspectRatio,
+              minWidth,
+              minHeight,
+              maxWidth,
+              maxHeight
+            }
+          );
+          commitSize(
+            next,
+            drag.handle,
+            drag.startW,
+            drag.startH,
+            drag.startOffsetX,
+            drag.startOffsetY,
+            "move"
+          );
+        },
+        onEnd: ({ currentX, currentY }) => {
+          const drag = dragRef.current;
+          if (drag) {
+            const next = applyResizeSize(
+              drag.handle,
+              drag.startW,
+              drag.startH,
+              currentX - drag.startX,
+              currentY - drag.startY,
+              axis,
+              {
+                rtl,
+                lockAspectRatio,
+                minWidth,
+                minHeight,
+                maxWidth,
+                maxHeight
+              }
+            );
+            commitSize(
+              next,
+              drag.handle,
+              drag.startW,
+              drag.startH,
+              drag.startOffsetX,
+              drag.startOffsetY,
+              "end"
+            );
+          }
+          dragRef.current = null;
+          dragSessionRef.current = null;
+          setDraggingHandle(null);
+        }
+      });
+    },
+    [
+      axis,
+      cleanupDragSession,
+      commitSize,
+      disabled,
+      lockAspectRatio,
+      maxHeight,
+      maxWidth,
+      measureBox,
+      minHeight,
+      minWidth,
+      offset.x,
+      offset.y,
+      onResizeStart,
+      rtl
+    ]
+  );
+  const handleKeyDown = useCallback(
+    (handle, e) => {
+      if (disabled) return;
+      const box = measureBox();
+      const jumped = applyResizeJump(e.key, handle, box.width, box.height, axis, {
+        rtl,
+        lockAspectRatio,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight
+      });
+      if (jumped) {
+        e.preventDefault();
+        commitSize(jumped, handle, box.width, box.height, offset.x, offset.y, "keyboard");
+        return;
+      }
+      const delta = getResizeKeyboardDelta(e.key);
+      if (!delta) return;
+      e.preventDefault();
+      const next = applyResizeSize(
+        handle,
+        box.width,
+        box.height,
+        delta.deltaX,
+        delta.deltaY,
+        axis,
+        { rtl, lockAspectRatio, minWidth, minHeight, maxWidth, maxHeight }
+      );
+      commitSize(next, handle, box.width, box.height, offset.x, offset.y, "keyboard");
+    },
+    [
+      axis,
+      commitSize,
+      disabled,
+      lockAspectRatio,
+      maxHeight,
+      maxWidth,
+      measureBox,
+      minHeight,
+      minWidth,
+      offset.x,
+      offset.y,
+      rtl
+    ]
+  );
+  const containerClasses = classNames(resizableBaseClasses, "group/resizable", className);
+  const containerStyle = mergeResizableBoxStyle(
+    style,
+    width,
+    height,
+    offset.x,
+    offset.y
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...domProps,
+      ref: setRootRef,
+      className: containerClasses,
+      style: containerStyle,
+      dir,
+      "data-resizable": "",
+      "aria-label": typeof ariaLabel === "string" ? ariaLabel : void 0,
+      "aria-labelledby": typeof ariaLabelledby === "string" ? ariaLabelledby : void 0,
+      children: [
+        children,
+        visibleHandles.map((pos) => {
+          const corner = isCornerResizeHandle(pos);
+          const usesHeight = pos === "top" || pos === "bottom";
+          const valueNow = Math.round((usesHeight ? height : width) ?? 0);
+          const valueMin = usesHeight ? minHeight : minWidth;
+          const valueMax = usesHeight ? maxHeight : maxWidth;
+          const handleName = formatResizableHandleLabel(labels.handleAriaLabel, pos);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: getResizableHandleClasses(pos, draggingHandle === pos, disabled),
+              "data-handle": pos,
+              role: corner ? void 0 : "separator",
+              "aria-hidden": corner ? true : void 0,
+              "aria-label": corner || ariaLabelledby ? void 0 : handleName,
+              "aria-orientation": corner ? void 0 : getResizeHandleOrientation(pos),
+              "aria-valuenow": corner ? void 0 : valueNow,
+              "aria-valuemin": corner ? void 0 : valueMin,
+              "aria-valuemax": corner ? void 0 : valueMax,
+              tabIndex: disabled || corner ? -1 : 0,
+              onPointerDown: (e) => handlePointerDown(pos, e),
+              onKeyDown: (e) => handleKeyDown(pos, e)
+            },
+            pos
+          );
+        })
+      ]
+    }
+  );
+});
+Resizable.displayName = "Resizable";
+var Resizable_default = Resizable;
+
+export {
+  Resizable,
+  Resizable_default
+};

package/dist/chunk-3KBFOO2E.mjs

@@ -0,0 +1,139 @@
+import {
+  AvatarGroupContext
+} from "./chunk-IELUUOM4.mjs";
+
+// src/components/Avatar.tsx
+import { forwardRef, useContext, useEffect, useMemo, useState } from "react";
+import {
+  avatarBaseClasses,
+  avatarDefaultBgColor,
+  avatarDefaultTextColor,
+  avatarGeneratedTextColor,
+  avatarImageClasses,
+  avatarShapeClasses,
+  avatarSizeClasses,
+  classNames,
+  generateAvatarColor,
+  getInitials,
+  pickAvatarImageAttrs,
+  resolveAvatarName,
+  resolveAvatarPaint
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var Avatar = forwardRef(function Avatar2({
+  size,
+  shape,
+  src,
+  alt = "",
+  text,
+  bgColor,
+  textColor,
+  srcSet,
+  sizes,
+  crossOrigin,
+  referrerPolicy,
+  decoding,
+  fetchPriority,
+  className,
+  children,
+  onLoad,
+  onError,
+  ...props
+}, ref) {
+  const [imageError, setImageError] = useState(false);
+  const group = useContext(AvatarGroupContext);
+  useEffect(() => {
+    setImageError(false);
+  }, [src]);
+  const hasImage = Boolean(src) && !imageError;
+  const displayText = text ? getInitials(text) : "";
+  const resolvedSize = size ?? group?.size ?? "md";
+  const resolvedShape = shape ?? group?.shape ?? "circle";
+  const { rest: spanRest } = pickAvatarImageAttrs(props);
+  const { computedLabel, isDecorative } = resolveAvatarName({
+    alt,
+    text,
+    ariaLabel: spanRest["aria-label"],
+    ariaLabelledby: spanRest["aria-labelledby"],
+    ariaHidden: spanRest["aria-hidden"]
+  });
+  const autoBg = !bgColor && text ? generateAvatarColor(text) : void 0;
+  const bgPaint = resolveAvatarPaint(bgColor, "bg", autoBg ?? avatarDefaultBgColor);
+  const textPaint = resolveAvatarPaint(
+    textColor,
+    "text",
+    autoBg ? avatarGeneratedTextColor : avatarDefaultTextColor
+  );
+  const avatarClasses = useMemo(
+    () => classNames(
+      avatarBaseClasses,
+      avatarSizeClasses[resolvedSize],
+      avatarShapeClasses[resolvedShape],
+      group?.itemClass,
+      !hasImage && bgPaint.className,
+      !hasImage && textPaint.className,
+      className
+    ),
+    [
+      resolvedSize,
+      resolvedShape,
+      group?.itemClass,
+      hasImage,
+      bgPaint.className,
+      textPaint.className,
+      className
+    ]
+  );
+  const paintStyle = !hasImage && (bgPaint.style || textPaint.style) ? { ...bgPaint.style, ...textPaint.style } : void 0;
+  const handleError = (event) => {
+    onError?.(event);
+    if (!event.defaultPrevented) setImageError(true);
+  };
+  if (hasImage) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        ...spanRest,
+        className: avatarClasses,
+        "aria-hidden": isDecorative ? true : spanRest["aria-hidden"],
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: computedLabel ?? "",
+            srcSet,
+            sizes,
+            crossOrigin,
+            referrerPolicy,
+            decoding,
+            fetchPriority,
+            className: avatarImageClasses,
+            onLoad,
+            onError: handleError
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      ...spanRest,
+      className: avatarClasses,
+      style: paintStyle || spanRest.style ? { ...spanRest.style, ...paintStyle } : void 0,
+      ...isDecorative ? { "aria-hidden": true } : {
+        role: "img",
+        "aria-label": computedLabel,
+        "aria-labelledby": spanRest["aria-labelledby"]
+      },
+      children: displayText || children
+    }
+  );
+});
+Avatar.displayName = "Avatar";
+
+export {
+  Avatar
+};