@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/{chunk-OTBXERJD.mjs → chunk-3C62ULJT.mjs}

@@ -1,16 +1,23 @@
 import {
   StatusIcon,
   StatusIconWithLoading
-} from "./chunk-FLYJVZED.mjs";
+} from "./chunk-ED7QR6PJ.mjs";
+import {
+  renderBodyPortal
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  getGlobalTigerLocale,
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/MessageContainer.tsx
-import { useCallback, useEffect, useState } from "react";
 import {
-  ANIMATION_DURATION_MS,
   classNames,
   defaultMessageThemeColors,
+  getMessageCloseAriaLabel,
   getMessageIconPath,
   getMessageTypeClasses,
+  getToastItemRole,
   messageBaseClasses,
   messageCloseButtonClasses,
   messageCloseIconPath,
@@ -21,38 +28,24 @@ import {
   messagePositionClasses
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var MESSAGE_CONTAINER_ID = "tiger-message-container";
-var MESSAGE_CLOSE_ARIA_LABEL = "Close message";
-var MessageItem = ({ message, onClose }) => {
-  const [isVisible, setIsVisible] = useState(false);
-  useEffect(() => {
-    const timer = setTimeout(() => setIsVisible(true), 10);
-    return () => clearTimeout(timer);
-  }, []);
+var MessageItem = ({ message, locale, onClose }) => {
   const colorScheme = getMessageTypeClasses(message.type, defaultMessageThemeColors);
   const messageClasses = classNames(
     messageBaseClasses,
     colorScheme.bg,
     colorScheme.border,
     colorScheme.text,
-    message.className,
-    isVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"
+    message.className
   );
   const iconPath = message.icon || getMessageIconPath(message.type);
   const iconClass = classNames(messageIconClasses, colorScheme.icon);
-  const handleClose = useCallback(() => {
-    setIsVisible(false);
-    setTimeout(() => onClose?.(message.id), ANIMATION_DURATION_MS);
-  }, [message.id, onClose]);
-  const a11yRole = message.type === "error" ? "alert" : "status";
-  const ariaLive = message.type === "error" ? "assertive" : "polite";
+  const a11yRole = getToastItemRole(message.type);
+  const closeLabel = getMessageCloseAriaLabel(locale, message.closeAriaLabel);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: messageClasses,
       role: a11yRole,
-      "aria-live": ariaLive,
-      "aria-atomic": "true",
       "aria-busy": message.type === "loading" || void 0,
       "data-tiger-message": true,
       "data-tiger-message-type": message.type,
@@ -64,7 +57,9 @@ var MessageItem = ({ message, onClose }) => {
             path: iconPath,
             className: iconClass,
             isLoading: message.type === "loading",
-            spinnerClass: messageLoadingSpinnerClasses
+            spinnerClass: messageLoadingSpinnerClasses,
+            "aria-hidden": "true",
+            focusable: "false"
           }
         ),
         /* @__PURE__ */ jsx("div", { className: messageContentClasses, children: message.content }),
@@ -72,10 +67,18 @@ var MessageItem = ({ message, onClose }) => {
           "button",
           {
             className: messageCloseButtonClasses,
-            onClick: handleClose,
-            "aria-label": message.closeAriaLabel ?? MESSAGE_CLOSE_ARIA_LABEL,
+            onClick: () => onClose?.(message.id),
+            "aria-label": closeLabel,
             type: "button",
-            children: /* @__PURE__ */ jsx(StatusIcon, { path: messageCloseIconPath, className: "w-4 h-4" })
+            children: /* @__PURE__ */ jsx(
+              StatusIcon,
+              {
+                path: messageCloseIconPath,
+                className: "w-4 h-4",
+                "aria-hidden": "true",
+                focusable: "false"
+              }
+            )
           }
         )
       ]
@@ -85,22 +88,22 @@ var MessageItem = ({ message, onClose }) => {
 var MessageContainer = ({
   position = "top",
   messages = [],
-  onClose
+  onClose,
+  portal = true
 }) => {
+  const config = useTigerConfig();
+  const locale = config.locale ?? getGlobalTigerLocale();
   const containerClasses = classNames(messageContainerBaseClasses, messagePositionClasses[position]);
-  const containerId = position === "top" ? MESSAGE_CONTAINER_ID : `${MESSAGE_CONTAINER_ID}-${position}`;
-  return /* @__PURE__ */ jsx(
+  const node = /* @__PURE__ */ jsx(
     "div",
     {
       className: containerClasses,
-      id: containerId,
-      "aria-live": "polite",
-      "aria-relevant": "additions",
       "data-tiger-message-position": position,
       "data-tiger-message-container": true,
-      children: messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message, onClose }, message.id))
+      children: messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message, locale, onClose }, message.id))
     }
   );
+  return portal ? renderBodyPortal(node) : node;
 };
 var MessageContainer_default = MessageContainer;
 

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
+};