@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/{chunk-CN3QXWK3.mjs → chunk-WLCRBIZO.mjs}

@@ -1,14 +1,21 @@
 import {
   StatusIcon
-} from "./chunk-FLYJVZED.mjs";
+} from "./chunk-ED7QR6PJ.mjs";
+import {
+  renderBodyPortal
+} from "./chunk-NPGU6VYD.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-WN6ZHQTI.mjs

@@ -0,0 +1,129 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/BackTop.tsx
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  classNames,
+  createBackTopVisibilityController,
+  getBackTopLabels,
+  getBackTopOffsetStyle,
+  getBackTopPositionClasses,
+  getBackTopVisibilityClasses,
+  getScrollRootEventTarget,
+  mergeTigerLocale,
+  resolveScrollRoot,
+  scrollToTop,
+  backTopIconPath
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var DefaultIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    className: "h-5 w-5",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: backTopIconPath })
+  }
+);
+var BackTop = forwardRef(function BackTop2({
+  visibilityHeight = 400,
+  target,
+  duration,
+  position = "auto",
+  placement = "bottom-right",
+  offset,
+  onClick,
+  children,
+  className,
+  style,
+  locale,
+  labels,
+  "aria-label": ariaLabel,
+  ...props
+}, ref) {
+  const [visible, setVisible] = useState(false);
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labelSet = getBackTopLabels(mergedLocale, labels);
+  const resolved = resolveScrollRoot(target);
+  const resolvedKey = resolved.isWindow ? "window" : resolved.target;
+  const visibilityHeightRef = useRef(visibilityHeight);
+  visibilityHeightRef.current = visibilityHeight;
+  const controllerRef = useRef(
+    void 0
+  );
+  useEffect(() => {
+    const root = resolveScrollRoot(target);
+    const eventTarget = getScrollRootEventTarget(root);
+    const scrollNode = root.target;
+    if (!eventTarget || !scrollNode) return void 0;
+    const visibilityController = createBackTopVisibilityController({
+      target: scrollNode,
+      getVisibilityHeight: () => visibilityHeightRef.current,
+      onChange: setVisible
+    });
+    controllerRef.current = visibilityController;
+    eventTarget.addEventListener("scroll", visibilityController.schedule, { passive: true });
+    visibilityController.update();
+    return () => {
+      eventTarget.removeEventListener("scroll", visibilityController.schedule);
+      visibilityController.cancel();
+      controllerRef.current = void 0;
+    };
+  }, [resolvedKey, target]);
+  useEffect(() => {
+    controllerRef.current?.update();
+  }, [visibilityHeight]);
+  const handleClick = useCallback(
+    (event) => {
+      const root = resolveScrollRoot(target);
+      if (root.target) scrollToTop(root.target, duration);
+      onClick?.(event);
+    },
+    [target, duration, onClick]
+  );
+  const buttonClasses = useMemo(
+    () => classNames(
+      getBackTopPositionClasses({ position, placement }),
+      getBackTopVisibilityClasses(visible),
+      className
+    ),
+    [position, placement, visible, className]
+  );
+  const buttonStyle = useMemo(() => {
+    const offsetStyle = getBackTopOffsetStyle(position, placement, offset);
+    return offsetStyle ? { ...offsetStyle, ...style } : style;
+  }, [position, placement, offset, style]);
+  const resolvedAriaLabel = typeof ariaLabel === "string" && ariaLabel.trim() ? ariaLabel : children ? void 0 : labelSet.ariaLabel;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      ref,
+      type: "button",
+      className: buttonClasses,
+      style: buttonStyle,
+      "aria-label": resolvedAriaLabel,
+      "aria-hidden": visible ? void 0 : true,
+      tabIndex: visible ? 0 : -1,
+      onClick: handleClick,
+      children: children || /* @__PURE__ */ jsx(DefaultIcon, {})
+    }
+  );
+});
+BackTop.displayName = "BackTop";
+var BackTop_default = BackTop;
+
+export {
+  BackTop,
+  BackTop_default
+};

package/dist/chunk-WPRXOO6N.mjs

@@ -0,0 +1,90 @@
+// src/components/Icon.tsx
+import React, { forwardRef } from "react";
+import {
+  classNames,
+  getIconDefinition,
+  iconSizeClasses,
+  iconSvgBaseClasses,
+  iconWrapperClasses,
+  mergeChildSvgAttrs,
+  resolveIconSize,
+  resolveIconSvgAttrs,
+  resolveIconWrapperStyle,
+  warnUnknownIconName
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+function asSvgLineCap(value) {
+  if (value === "inherit" || value === "round" || value === "butt" || value === "square") {
+    return value;
+  }
+  return void 0;
+}
+function asSvgLineJoin(value) {
+  if (value === "inherit" || value === "round" || value === "bevel" || value === "miter") {
+    return value;
+  }
+  return void 0;
+}
+function toReactSvgAttrs(attrs) {
+  return {
+    xmlns: attrs.xmlns,
+    viewBox: attrs.viewBox,
+    fill: attrs.fill,
+    stroke: attrs.stroke,
+    strokeWidth: attrs.strokeWidth,
+    strokeLinecap: asSvgLineCap(attrs.strokeLinecap),
+    strokeLinejoin: asSvgLineJoin(attrs.strokeLinejoin),
+    "aria-hidden": attrs["aria-hidden"],
+    focusable: attrs.focusable
+  };
+}
+var Icon = forwardRef(function Icon2({ name, icon, size = "md", color, className, style, children, ...props }, ref) {
+  const resolvedSize = resolveIconSize(size);
+  const iconClasses = classNames(iconWrapperClasses, className);
+  const iconStyle = resolveIconWrapperStyle(color, style);
+  const isDecorative = props["aria-label"] == null && props["aria-labelledby"] == null && props.role == null;
+  const hasChildren = React.Children.count(children) > 0;
+  const definition = !hasChildren ? icon ?? (name ? getIconDefinition(name) : void 0) : void 0;
+  if (!hasChildren && !definition && name) {
+    warnUnknownIconName(name);
+  }
+  const svgClassName = classNames(iconSvgBaseClasses, iconSizeClasses[resolvedSize]);
+  const builtInSvg = definition ? /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: svgClassName,
+      ...toReactSvgAttrs(
+        resolveIconSvgAttrs({ mode: definition.mode, viewBox: definition.viewBox })
+      ),
+      children: definition.paths.map((d, i) => /* @__PURE__ */ jsx("path", { d }, i))
+    }
+  ) : null;
+  const processedChildren = React.Children.map(children, (child) => {
+    if (!React.isValidElement(child) || child.type !== "svg") {
+      return child;
+    }
+    const svgProps = child.props;
+    const merged = mergeChildSvgAttrs(svgProps);
+    return React.cloneElement(child, {
+      ...svgProps,
+      ...toReactSvgAttrs(merged),
+      className: classNames(svgClassName, svgProps.className)
+    });
+  });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      ref,
+      className: iconClasses,
+      style: iconStyle,
+      ...isDecorative ? { "aria-hidden": true } : { role: props.role ?? "img" },
+      children: builtInSvg ?? processedChildren
+    }
+  );
+});
+Icon.displayName = "Icon";
+
+export {
+  Icon
+};

package/dist/{chunk-XZVQ3PJS.mjs → chunk-WQMOFDAY.mjs}

@@ -1,15 +1,11 @@
 // src/components/Link.tsx
-import { useCallback, useMemo } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
 import {
-  classNames,
-  getLinkVariantClasses,
   getSecureRel,
-  linkBaseClasses,
-  linkDisabledClasses,
-  linkSizeClasses
+  resolveLinkClasses
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
-var Link = ({
+var Link = forwardRef(function Link2({
   variant = "primary",
   size = "md",
   disabled = false,
@@ -23,16 +19,9 @@ var Link = ({
   children,
   className,
   ...props
-}) => {
+}, ref) {
   const linkClasses = useMemo(
-    () => classNames(
-      linkBaseClasses,
-      getLinkVariantClasses(variant, void 0, { disabled }),
-      linkSizeClasses[size],
-      underline && "hover:underline",
-      disabled && linkDisabledClasses,
-      className
-    ),
+    () => resolveLinkClasses({ variant, size, underline, disabled, className }),
     [variant, size, underline, disabled, className]
   );
   const computedRel = useMemo(() => getSecureRel(target, rel), [target, rel]);
@@ -62,8 +51,9 @@ var Link = ({
     "a",
     {
       ...props,
+      ref,
       className: linkClasses,
-      href: disabled ? void 0 : href,
+      href,
       target,
       rel: computedRel,
       "aria-disabled": disabled || void 0,
@@ -73,7 +63,8 @@ var Link = ({
       children
     }
   );
-};
+});
+Link.displayName = "Link";
 
 export {
   Link