@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/{chunk-2Y5NIPHB.mjs → chunk-I3SE5HMH.mjs}

@@ -1,18 +1,18 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
-import {
-  ChartLegend
-} from "./chunk-UBP7HZSU.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
 import {
   ChartTooltip
-} from "./chunk-NASC6XHN.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
 } from "./chunk-DKNVSQSV.mjs";
+import {
+  ChartLegend
+} from "./chunk-ZG2W4HS5.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
 
 // src/components/RadarChart.tsx
 import { useId, useMemo, useState, useCallback } from "react";
@@ -158,6 +158,18 @@ var RadarChart = ({
     setHoveredPoint(null);
     handleHoverLeave();
   }, [handleHoverLeave]);
+  const showPointTooltipFromElement = useCallback(
+    (el, seriesIndex, pointIndex) => {
+      if (!hoverable) return;
+      const rect = el.getBoundingClientRect();
+      setHoveredPoint({ seriesIndex, pointIndex });
+      handleHoverEnter(seriesIndex, {
+        clientX: rect.left + rect.width / 2,
+        clientY: rect.top + rect.height / 2
+      });
+    },
+    [hoverable, handleHoverEnter]
+  );
   const innerRect = useMemo(
     () => getChartInnerRect(width, height, padding),
     [width, height, padding]
@@ -562,13 +574,30 @@ var RadarChart = ({
                         showTooltip && hoverable ? "cursor-pointer" : void 0,
                         "transition-[r] duration-150 ease-out"
                       ),
+                      role: showTooltip && hoverable ? "button" : "img",
+                      "aria-label": point.data.label ?? String(point.data.value),
+                      tabIndex: showTooltip && hoverable ? 0 : void 0,
                       "data-radar-point": "true",
                       "data-series-index": seriesIndex,
                       "data-series-key": item.seriesKey,
                       "data-point-index": point.index,
                       onMouseEnter: showTooltip && hoverable ? (e) => handlePointEnter(seriesIndex, point.index, e) : void 0,
                       onMouseMove: showTooltip && hoverable ? handlePointMove : void 0,
-                      onMouseLeave: showTooltip && hoverable ? handlePointLeave : void 0
+                      onMouseLeave: showTooltip && hoverable ? handlePointLeave : void 0,
+                      onFocus: showTooltip && hoverable ? (e) => showPointTooltipFromElement(e.currentTarget, seriesIndex, point.index) : void 0,
+                      onBlur: showTooltip && hoverable ? handlePointLeave : void 0,
+                      onKeyDown: showTooltip && hoverable ? (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          showPointTooltipFromElement(
+                            e.currentTarget,
+                            seriesIndex,
+                            point.index
+                          );
+                        } else if (e.key === "Escape") {
+                          handlePointLeave();
+                        }
+                      } : void 0
                     },
                     `point-${item.seriesKey}-${point.index}`
                   );
@@ -610,7 +639,7 @@ var RadarChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: hoveredPoint !== null && tooltipContent !== "",
+      open: hoveredPoint !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-3RBRWBUG.mjs → chunk-IIWUQK2P.mjs}

@@ -1,9 +1,9 @@
 import {
   RadioGroupContext
-} from "./chunk-4MONGWU5.mjs";
+} from "./chunk-AKNWUI7K.mjs";
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/Radio.tsx
 import { useContext, useMemo } from "react";

package/dist/{chunk-ELRZ2ZHM.mjs → chunk-J4HCTYJG.mjs}

@@ -23,6 +23,7 @@ import {
   getGestureTouchPoint,
   resolveSwipeGesture,
   isKeyActive,
+  getNextActiveKey,
   tabAddButtonClasses,
   tabCloseButtonClasses,
   tabContentBaseClasses
@@ -43,8 +44,7 @@ var TabPane = ({
   children,
   renderMode = "pane",
   tabId,
-  panelId,
-  tabIndex
+  panelId
 }) => {
   const tabsContext = useTabsContext();
   if (!tabsContext) {
@@ -90,10 +90,8 @@ var TabPane = ({
       return;
     }
     const tabList = event.currentTarget?.closest('[role="tablist"]');
-    const tabButtons = Array.from(
-      tabList?.querySelectorAll('[role="tab"]') ?? []
-    );
-    const enabled = tabButtons.filter((button) => !button.disabled);
+    const tabButtons = Array.from(tabList?.querySelectorAll('[role="tab"]') ?? []);
+    const enabled = tabButtons.filter((button) => button.getAttribute("aria-disabled") !== "true");
     const currentIndex = enabled.findIndex((button) => button.id === tabId);
     if (currentIndex === -1) {
       return;
@@ -125,23 +123,22 @@ var TabPane = ({
     }
   };
   const handleClose = (event) => {
+    event.stopPropagation();
     if (!disabled) {
       tabsContext.handleTabClose(tabKey, event);
     }
   };
   if (renderMode === "tab") {
     return /* @__PURE__ */ jsxs(
-      "button",
+      "div",
       {
-        type: "button",
         className: tabItemClasses,
         role: "tab",
         id: tabId,
         "aria-controls": panelId,
         "aria-selected": isActive,
         "aria-disabled": disabled,
-        disabled,
-        tabIndex: typeof tabIndex === "number" ? tabIndex : isActive ? 0 : -1,
+        tabIndex: disabled ? -1 : isActive ? 0 : -1,
         "data-tiger-tabs-id": tabsContext.idBase,
         "data-tiger-tab-key": typeof tabKey === "number" ? `n:${tabKey}` : `s:${tabKey}`,
         onClick: handleClick,
@@ -150,9 +147,9 @@ var TabPane = ({
           icon && /* @__PURE__ */ jsx("span", { className: "flex items-center", children: icon }),
           /* @__PURE__ */ jsx("span", { children: label }),
           isClosable && /* @__PURE__ */ jsx(
-            "span",
+            "button",
             {
-              role: "button",
+              type: "button",
               className: tabCloseButtonClasses,
               "aria-label": `Close ${String(label)}`,
               tabIndex: -1,
@@ -202,7 +199,7 @@ var Tabs = ({
   swipeable = true,
   className,
   style,
-  onChange,
+  onActiveKeyChange,
   onTabClick,
   onEdit,
   children
@@ -234,7 +231,6 @@ var Tabs = ({
       if (firstKey === void 0) firstKey = key;
       keys.push(key);
       if (!child.props.disabled) enabledKeys.push(key);
-      const resolvedActiveKey = controlledActiveKey ?? defaultActiveKey ?? firstKey;
       const tabId = `${idBase}-tab-${String(key)}`;
       const panelId = `${idBase}-panel-${String(key)}`;
       items.push(
@@ -242,8 +238,7 @@ var Tabs = ({
           key: `tab-${String(key)}`,
           renderMode: "tab",
           tabId,
-          panelId,
-          tabIndex: key === resolvedActiveKey ? 0 : -1
+          panelId
         })
       );
       panes.push(
@@ -262,7 +257,7 @@ var Tabs = ({
       tabKeys: keys,
       enabledTabKeys: enabledKeys
     };
-  }, [children, controlledActiveKey, defaultActiveKey, idBase]);
+  }, [children, idBase]);
   const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey !== void 0 ? internalActiveKey : firstTabKey;
   const activeTabIndex = useMemo(() => tabKeys.indexOf(activeKey ?? ""), [tabKeys, activeKey]);
   const handleTabClick = useCallback(
@@ -274,16 +269,19 @@ var Tabs = ({
       if (controlledActiveKey === void 0) {
         setInternalActiveKey(key);
       }
-      onChange?.(key);
+      onActiveKeyChange?.(key);
     },
-    [activeKey, controlledActiveKey, onChange, onTabClick]
+    [activeKey, controlledActiveKey, onActiveKeyChange, onTabClick]
   );
   const handleTabClose = useCallback(
     (key, event) => {
       event.stopPropagation();
+      if (controlledActiveKey === void 0 && key === activeKey) {
+        setInternalActiveKey(getNextActiveKey(key, activeKey, tabKeys));
+      }
       onEdit?.({ targetKey: key, action: "remove" });
     },
-    [onEdit]
+    [onEdit, controlledActiveKey, activeKey, tabKeys]
   );
   const handleTabAdd = useCallback(() => {
     onEdit?.({ targetKey: void 0, action: "add" });

package/dist/chunk-JNZHZVPW.mjs

@@ -0,0 +1,143 @@
+import {
+  StatusIcon
+} from "./chunk-FLYJVZED.mjs";
+
+// src/components/NotificationContainer.tsx
+import { useEffect, useState } from "react";
+import {
+  ANIMATION_DURATION_MS,
+  classNames,
+  getNotificationIconPath,
+  getNotificationTypeClasses,
+  notificationActionButtonClasses,
+  notificationActionButtonTypeClasses,
+  notificationActionsClasses,
+  notificationBaseClasses,
+  notificationCloseButtonClasses,
+  notificationCloseIconClasses,
+  notificationCloseIconPath,
+  notificationContainerBaseClasses,
+  notificationContentClasses,
+  notificationDescriptionClasses,
+  notificationIconClasses,
+  notificationPositionClasses,
+  notificationTitleClasses
+} 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);
+  }, []);
+  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"
+  );
+  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";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: notificationClasses,
+      role: a11yRole,
+      "aria-live": ariaLive,
+      "aria-atomic": "true",
+      onClick: notification.onClick,
+      onKeyDown: (e) => {
+        if (!notification.onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          notification.onClick();
+        }
+      },
+      tabIndex: notification.onClick ? 0 : void 0,
+      style: notification.onClick ? { cursor: "pointer" } : void 0,
+      "data-tiger-notification": "",
+      "data-tiger-notification-type": notification.type,
+      "data-tiger-notification-id": String(notification.id),
+      children: [
+        /* @__PURE__ */ jsx(StatusIcon, { path: iconPath, className: iconClass, "aria-hidden": "true", focusable: "false" }),
+        /* @__PURE__ */ jsxs("div", { className: notificationContentClasses, children: [
+          /* @__PURE__ */ jsx("div", { className: classNames(notificationTitleClasses, colorScheme.titleText), children: notification.title }),
+          notification.description && /* @__PURE__ */ jsx("div", { className: classNames(notificationDescriptionClasses, colorScheme.descriptionText), children: notification.description }),
+          notification.actions && notification.actions.length > 0 && /* @__PURE__ */ jsx("div", { className: notificationActionsClasses, children: notification.actions.map((action) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: classNames(
+                notificationActionButtonClasses,
+                notificationActionButtonTypeClasses[action.type ?? "default"]
+              ),
+              type: "button",
+              disabled: action.disabled,
+              onClick: (event) => {
+                event.stopPropagation();
+                action.onClick?.({
+                  id: notification.id,
+                  close: handleClose
+                });
+                if (action.closeOnClick) {
+                  handleClose();
+                }
+              },
+              children: action.label
+            },
+            action.key ?? action.label
+          )) })
+        ] }),
+        notification.closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: notificationCloseButtonClasses,
+            onClick: (e) => {
+              e.stopPropagation();
+              handleClose();
+            },
+            "aria-label": "Close notification",
+            type: "button",
+            children: /* @__PURE__ */ jsx(StatusIcon, { path: notificationCloseIconPath, className: notificationCloseIconClasses })
+          }
+        )
+      ]
+    }
+  );
+};
+var NotificationContainer = ({
+  position = "top-right",
+  notifications = [],
+  onClose
+}) => {
+  const containerClasses = classNames(
+    notificationContainerBaseClasses,
+    notificationPositionClasses[position]
+  );
+  return /* @__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))
+    }
+  );
+};
+var NotificationContainer_default = NotificationContainer;
+
+export {
+  NotificationContainer,
+  NotificationContainer_default
+};