@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/chunk-VBSK4TGO.mjs

@@ -0,0 +1,364 @@
+import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
+import { ChartAxis } from './chunk-RQSQXQN6.mjs';
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartGrid } from './chunk-677VSTPW.mjs';
+import { ChartLegend } from './chunk-Z6F67MJE.mjs';
+import { ChartSeries } from './chunk-SDLMB34Y.mjs';
+import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { useState, useMemo, useCallback } from 'react';
+import { getChartInnerRect, getNumberExtent, createLinearScale, createPointScale, DEFAULT_CHART_COLORS, createLinePath, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LineChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  series,
+  xScale: xScaleProp,
+  yScale: yScaleProp,
+  lineColor: _lineColor = "var(--tiger-primary,#2563eb)",
+  strokeWidth = 2,
+  curve = "linear",
+  showPoints = true,
+  pointSize = 4,
+  pointColor: _pointColor,
+  showGrid = true,
+  showAxis = true,
+  showXAxis = true,
+  showYAxis = true,
+  includeZero = false,
+  xAxisLabel,
+  yAxisLabel,
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  xTickFormat,
+  yTickFormat,
+  gridLineStyle = "solid",
+  gridStrokeWidth = 1,
+  colors,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  tooltipFormatter,
+  legendFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onSeriesClick,
+  onSeriesHover,
+  onPointClick,
+  onPointHover
+}) => {
+  const [hoveredPointInfo, setHoveredPointInfo] = useState(null);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const resolvedSeries = useMemo(() => {
+    if (series && series.length > 0) return series;
+    if (data && data.length > 0) return [{ data }];
+    return [];
+  }, [series, data]);
+  const {
+    activeIndex,
+    handleMouseEnter: handleSeriesHoverEnter,
+    handleMouseLeave: handleSeriesHoverLeave,
+    handleClick: handleSeriesSelect,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => resolvedSeries[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onSeriesHover?.(index, index !== null ? resolvedSeries[index] : null);
+    },
+    onSelectedIndexChange: (index) => {
+      onSelectedIndexChange?.(index);
+      if (index !== null) {
+        onSeriesClick?.(index, resolvedSeries[index]);
+      }
+    }
+  });
+  const allData = useMemo(() => resolvedSeries.flatMap((s) => s.data), [resolvedSeries]);
+  const xValues = useMemo(() => allData.map((d) => d.x), [allData]);
+  const yValues = useMemo(() => allData.map((d) => d.y), [allData]);
+  const isXNumeric = useMemo(() => xValues.every((v) => typeof v === "number"), [xValues]);
+  const resolvedXScale = useMemo(() => {
+    if (xScaleProp) return xScaleProp;
+    if (isXNumeric) {
+      const extent = getNumberExtent(xValues, { includeZero: false });
+      return createLinearScale(extent, [0, innerRect.width]);
+    } else {
+      const categories = [...new Set(xValues.map(String))];
+      return createPointScale(categories, [0, innerRect.width], { padding: 0.1 });
+    }
+  }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
+  const resolvedYScale = useMemo(() => {
+    if (yScaleProp) return yScaleProp;
+    const extent = getNumberExtent(yValues, { includeZero });
+    return createLinearScale(extent, [innerRect.height, 0]);
+  }, [yScaleProp, yValues, includeZero, innerRect.height]);
+  const resolvedShowXAxis = showAxis && showXAxis;
+  const resolvedShowYAxis = showAxis && showYAxis;
+  const palette = useMemo(
+    () => colors && colors.length > 0 ? colors : [...DEFAULT_CHART_COLORS],
+    [colors]
+  );
+  const seriesData = useMemo(
+    () => resolvedSeries.map((s, seriesIndex) => {
+      const color = s.color ?? palette[seriesIndex % palette.length];
+      const points = s.data.map((datum, pointIndex) => ({
+        x: resolvedXScale.map(datum.x),
+        y: resolvedYScale.map(datum.y),
+        datum,
+        pointIndex
+      }));
+      const linePath = createLinePath(points, curve);
+      const opacity = getChartElementOpacity(seriesIndex, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+      return {
+        series: s,
+        seriesIndex,
+        color,
+        linePath,
+        points,
+        opacity,
+        strokeWidth: s.strokeWidth ?? strokeWidth,
+        strokeDasharray: s.strokeDasharray,
+        showPoints: s.showPoints ?? showPoints,
+        pointSize: s.pointSize ?? pointSize,
+        pointColor: s.pointColor ?? color
+      };
+    }),
+    [
+      resolvedSeries,
+      palette,
+      resolvedXScale,
+      resolvedYScale,
+      curve,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity,
+      strokeWidth,
+      showPoints,
+      pointSize
+    ]
+  );
+  const legendItems = useMemo(
+    () => resolvedSeries.map((s, index) => ({
+      index,
+      label: legendFormatter ? legendFormatter(s, index) : s.name ?? `Series ${index + 1}`,
+      color: s.color ?? palette[index % palette.length],
+      active: activeIndex === null || activeIndex === index
+    })),
+    [resolvedSeries, legendFormatter, palette, activeIndex]
+  );
+  const formatTooltip = useCallback(
+    (datum, seriesIndex, _pointIndex, s) => {
+      if (tooltipFormatter) return tooltipFormatter(datum, seriesIndex, _pointIndex, s);
+      const seriesName = s?.name ?? `Series ${seriesIndex + 1}`;
+      const label = datum.label ?? String(datum.x);
+      return `${seriesName} \xB7 ${label}: ${datum.y}`;
+    },
+    [tooltipFormatter]
+  );
+  const tooltipContent = useMemo(() => {
+    if (!hoveredPointInfo) return "";
+    const { seriesIndex, pointIndex } = hoveredPointInfo;
+    const s = resolvedSeries[seriesIndex];
+    const datum = s?.data[pointIndex];
+    return datum ? formatTooltip(datum, seriesIndex, pointIndex, s) : "";
+  }, [hoveredPointInfo, resolvedSeries, formatTooltip]);
+  const handlePointMouseEnter = useCallback(
+    (seriesIndex, pointIndex, event) => {
+      setHoveredPointInfo({ seriesIndex, pointIndex });
+      setTooltipPosition({ x: event.clientX, y: event.clientY });
+      onPointHover?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+    },
+    [onPointHover, resolvedSeries]
+  );
+  const handlePointMouseMove = useCallback((event) => {
+    setTooltipPosition({ x: event.clientX, y: event.clientY });
+  }, []);
+  const handlePointMouseLeave = useCallback(() => {
+    setHoveredPointInfo(null);
+    onPointHover?.(null, null, null);
+  }, [onPointHover]);
+  const handlePointClick = useCallback(
+    (seriesIndex, pointIndex) => {
+      onPointClick?.(seriesIndex, pointIndex, resolvedSeries[seriesIndex]?.data[pointIndex]);
+      handleSeriesSelect(seriesIndex);
+    },
+    [onPointClick, resolvedSeries, handleSeriesSelect]
+  );
+  const handleKeyDown = useCallback(
+    (event, seriesIndex) => {
+      if (!selectable) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      handleSeriesSelect(seriesIndex);
+    },
+    [selectable, handleSeriesSelect]
+  );
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: [
+        showGrid && /* @__PURE__ */ jsx(
+          ChartGrid,
+          {
+            xScale: resolvedXScale,
+            yScale: resolvedYScale,
+            show: "both",
+            xTicks,
+            yTicks,
+            xTickValues,
+            yTickValues,
+            lineStyle: gridLineStyle,
+            strokeWidth: gridStrokeWidth
+          }
+        ),
+        resolvedShowXAxis && /* @__PURE__ */ jsx(
+          ChartAxis,
+          {
+            scale: resolvedXScale,
+            orientation: "bottom",
+            y: innerRect.height,
+            ticks: xTicks,
+            tickValues: xTickValues,
+            tickFormat: xTickFormat,
+            label: xAxisLabel
+          }
+        ),
+        resolvedShowYAxis && /* @__PURE__ */ jsx(
+          ChartAxis,
+          {
+            scale: resolvedYScale,
+            orientation: "left",
+            ticks: yTicks,
+            tickValues: yTickValues,
+            tickFormat: yTickFormat,
+            label: yAxisLabel
+          }
+        ),
+        seriesData.map((sd) => /* @__PURE__ */ jsxs(
+          ChartSeries,
+          {
+            data: sd.series.data,
+            name: sd.series.name,
+            type: "line",
+            opacity: sd.opacity,
+            className: classNames(sd.series.className, (hoverable || selectable) && "cursor-pointer"),
+            onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
+            onMouseLeave: handleSeriesHoverLeave,
+            onClick: () => handleSeriesSelect(sd.seriesIndex),
+            tabIndex: selectable ? 0 : void 0,
+            onKeyDown: (e) => handleKeyDown(e, sd.seriesIndex),
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: sd.linePath,
+                  fill: "none",
+                  stroke: sd.color,
+                  strokeWidth: sd.strokeWidth,
+                  strokeDasharray: sd.strokeDasharray,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "transition-opacity duration-150",
+                  "data-line-series": sd.seriesIndex
+                }
+              ),
+              sd.showPoints && sd.points.map((point) => /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: point.x,
+                  cy: point.y,
+                  r: sd.pointSize,
+                  fill: sd.pointColor,
+                  className: "transition-all duration-150",
+                  "data-point-index": point.pointIndex,
+                  onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
+                  onMouseMove: handlePointMouseMove,
+                  onMouseLeave: handlePointMouseLeave,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handlePointClick(sd.seriesIndex, point.pointIndex);
+                  }
+                },
+                `point-${sd.seriesIndex}-${point.pointIndex}`
+              ))
+            ]
+          },
+          `series-${sd.seriesIndex}`
+        ))
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: hoveredPointInfo !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  );
+  if (!showLegend) {
+    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
+      chart,
+      tooltip
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+    chart,
+    /* @__PURE__ */ jsx(
+      ChartLegend,
+      {
+        items: legendItems,
+        position: legendPosition,
+        markerSize: legendMarkerSize,
+        gap: legendGap,
+        interactive: hoverable || selectable,
+        onItemClick: handleLegendClick,
+        onItemHover: handleLegendHover,
+        onItemLeave: handleLegendLeave
+      }
+    ),
+    tooltip
+  ] });
+};
+var LineChart_default = LineChart;
+
+export { LineChart, LineChart_default };

package/dist/{chunk-DZJUFU55.js → chunk-VXHBQTZS.js}

@@ -26,9 +26,11 @@ var Pagination = ({
   style,
   onChange,
   onPageSizeChange,
+  locale,
   ...props
 }) => {
   const { "aria-label": ariaLabelProp, ...navProps } = props;
+  const labels = react.useMemo(() => tigercatCore.getPaginationLabels(locale), [locale]);
   const [internalCurrent, setInternalCurrent] = react.useState(defaultCurrent);
   const [internalPageSize, setInternalPageSize] = react.useState(defaultPageSize);
   const [quickJumperValue, setQuickJumperValue] = react.useState("");
@@ -116,7 +118,7 @@ var Pagination = ({
           className: tigercatCore.getPaginationButtonBaseClasses(size),
           disabled: prevDisabled,
           onClick: () => handlePageChange(validatedCurrentPage - 1),
-          "aria-label": "\u4E0A\u4E00\u9875",
+          "aria-label": labels.prevPageAriaLabel,
           children: "\u2039"
         },
         "prev"
@@ -147,7 +149,7 @@ var Pagination = ({
           className: tigercatCore.getPaginationButtonBaseClasses(size),
           disabled: nextDisabled,
           onClick: () => handlePageChange(validatedCurrentPage + 1),
-          "aria-label": "\u4E0B\u4E00\u9875",
+          "aria-label": labels.nextPageAriaLabel,
           children: "\u203A"
         },
         "next"
@@ -164,7 +166,7 @@ var Pagination = ({
           className: tigercatCore.getPaginationButtonBaseClasses(size),
           disabled: prevDisabled,
           onClick: () => handlePageChange(validatedCurrentPage - 1),
-          "aria-label": "\u4E0A\u4E00\u9875",
+          "aria-label": labels.prevPageAriaLabel,
           children: "\u2039"
         },
         "prev"
@@ -197,7 +199,7 @@ var Pagination = ({
               ),
               disabled,
               onClick: () => handlePageChange(pageNum),
-              "aria-label": `\u7B2C ${pageNum} \u9875`,
+              "aria-label": tigercatCore.formatPageAriaLabel(labels.pageAriaLabel, pageNum),
               "aria-current": isActive ? "page" : void 0,
               children: String(pageNum)
             },
@@ -214,7 +216,7 @@ var Pagination = ({
           className: tigercatCore.getPaginationButtonBaseClasses(size),
           disabled: nextDisabled,
           onClick: () => handlePageChange(validatedCurrentPage + 1),
-          "aria-label": "\u4E0B\u4E00\u9875",
+          "aria-label": labels.nextPageAriaLabel,
           children: "\u203A"
         },
         "next"
@@ -230,10 +232,11 @@ var Pagination = ({
           disabled,
           value: currentPageSize,
           onChange: (e) => handlePageSizeChange(parseInt(e.target.value, 10)),
-          "aria-label": "\u6BCF\u9875\u6761\u6570",
+          "aria-label": labels.itemsPerPageText,
           children: pageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: sizeOption, children: [
             sizeOption,
-            " \u6761/\u9875"
+            " ",
+            labels.itemsPerPageText
           ] }, sizeOption))
         },
         "size-changer"
@@ -249,7 +252,7 @@ var Pagination = ({
             "ml-2",
             size === "small" ? "text-sm" : size === "large" ? "text-lg" : "text-base"
           ),
-          children: "\u8DF3\u81F3"
+          children: labels.jumpToText
         },
         "jumper-label-start"
       )
@@ -266,7 +269,7 @@ var Pagination = ({
           onKeyDown: handleQuickJumperKeyPress,
           min: 1,
           max: totalPages,
-          "aria-label": "\u8DF3\u8F6C\u9875\u7801"
+          "aria-label": labels.jumpToText
         },
         "jumper-input"
       )
@@ -276,7 +279,7 @@ var Pagination = ({
         "span",
         {
           className: size === "small" ? "text-sm" : size === "large" ? "text-lg" : "text-base",
-          children: "\u9875"
+          children: labels.pageText
         },
         "jumper-label-end"
       )
@@ -288,7 +291,7 @@ var Pagination = ({
       className: containerClasses,
       ...navProps,
       role: "navigation",
-      "aria-label": ariaLabelProp ?? "\u5206\u9875\u5BFC\u822A",
+      "aria-label": ariaLabelProp ?? "Pagination",
       style,
       children: elements
     }

package/dist/chunk-WLIFEALE.mjs

@@ -0,0 +1,111 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { computeFloatingPosition, autoUpdateFloating, isEscapeKey, isEventOutside } from '@expcat/tigercat-core';
+
+// src/utils/overlay.ts
+function useClickOutside({
+  enabled,
+  refs,
+  onOutsideClick,
+  defer = false
+}) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      const elements = refs.map((ref) => ref?.current);
+      if (isEventOutside(event, elements)) {
+        onOutsideClick();
+      }
+    };
+    const attach = () => document.addEventListener("click", handler);
+    const detach = () => document.removeEventListener("click", handler);
+    if (!defer) {
+      attach();
+      return () => detach();
+    }
+    const timer = window.setTimeout(() => attach(), 0);
+    return () => {
+      window.clearTimeout(timer);
+      detach();
+    };
+  }, [enabled, refs, onOutsideClick, defer]);
+}
+function useEscapeKey({ enabled, onEscape }) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      if (event.defaultPrevented) return;
+      if (!isEscapeKey(event)) return;
+      onEscape();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [enabled, onEscape]);
+}
+function useFloating(options) {
+  const {
+    referenceRef,
+    floatingRef,
+    enabled,
+    placement: initialPlacement = "bottom",
+    offset: offsetDistance = 8,
+    arrowRef,
+    onPlacementChange
+  } = options;
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+  const [placement, setPlacement] = useState(initialPlacement);
+  const [arrowX, setArrowX] = useState(void 0);
+  const [arrowY, setArrowY] = useState(void 0);
+  const onPlacementChangeRef = useRef(onPlacementChange);
+  onPlacementChangeRef.current = onPlacementChange;
+  const update = useCallback(async () => {
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    if (!reference || !floating) return;
+    const floatingOptions = {
+      placement: initialPlacement,
+      offset: offsetDistance,
+      flip: true,
+      shift: true,
+      arrowElement: arrowRef?.current
+    };
+    const result = await computeFloatingPosition(
+      reference,
+      floating,
+      floatingOptions
+    );
+    setX(result.x);
+    setY(result.y);
+    setPlacement((prev) => {
+      if (prev !== result.placement) {
+        onPlacementChangeRef.current?.(result.placement);
+        return result.placement;
+      }
+      return prev;
+    });
+    if (result.arrow) {
+      setArrowX(result.arrow.x);
+      setArrowY(result.arrow.y);
+    }
+  }, [referenceRef, floatingRef, initialPlacement, offsetDistance, arrowRef]);
+  useEffect(() => {
+    const reference = referenceRef.current;
+    const floating = floatingRef.current;
+    if (!enabled || !reference || !floating) return;
+    update();
+    const cleanup = autoUpdateFloating(reference, floating, update);
+    return () => {
+      cleanup();
+    };
+  }, [enabled, referenceRef, floatingRef, update]);
+  return {
+    x,
+    y,
+    placement,
+    arrowX,
+    arrowY,
+    update
+  };
+}
+
+export { useClickOutside, useEscapeKey, useFloating };

package/dist/{chunk-AQ6DHCP6.js → chunk-XRFK2IXM.js}

@@ -29,10 +29,10 @@ var Icon = ({
     return React__default.default.cloneElement(child, {
       ...svgProps,
       className: tigercatCore.classNames(tigercatCore.iconSvgBaseClasses, tigercatCore.iconSizeClasses[size], svgProps.className),
-      xmlns: svgProps.xmlns ?? "http://www.w3.org/2000/svg",
-      viewBox: svgProps.viewBox ?? "0 0 24 24",
-      fill: svgProps.fill ?? "none",
-      stroke: svgProps.stroke ?? "currentColor",
+      xmlns: svgProps.xmlns ?? tigercatCore.SVG_DEFAULT_XMLNS,
+      viewBox: svgProps.viewBox ?? tigercatCore.SVG_DEFAULT_VIEWBOX_24,
+      fill: svgProps.fill ?? tigercatCore.SVG_DEFAULT_FILL,
+      stroke: svgProps.stroke ?? tigercatCore.SVG_DEFAULT_STROKE,
       strokeWidth: svgProps.strokeWidth ?? 2,
       strokeLinecap: svgProps.strokeLinecap ?? "round",
       strokeLinejoin: svgProps.strokeLinejoin ?? "round"

package/dist/{chunk-5FRENLDC.js → chunk-Y2JOJ4D6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkNEULKOYJ_js = require('./chunk-NEULKOYJ.js');
+var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
 var React = require('react');
 var reactDom = require('react-dom');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -69,7 +69,7 @@ var Drawer = ({
     },
     [maskClosable, handleClose]
   );
-  chunkNEULKOYJ_js.useEscapeKey({ enabled: visible, onEscape: handleClose });
+  chunkZYPEO2KY_js.useEscapeKey({ enabled: visible, onEscape: handleClose });
   const previousVisible = React.useRef(false);
   React.useEffect(() => {
     if (visible === previousVisible.current) return;
@@ -80,7 +80,7 @@ var Drawer = ({
       } else {
         onAfterLeave?.();
       }
-    }, 300);
+    }, tigercatCore.ANIMATION_DURATION_MS);
     return () => window.clearTimeout(timer);
   }, [visible, onAfterEnter, onAfterLeave]);
   const reactId = React.useId();
@@ -114,6 +114,16 @@ var Drawer = ({
     if (visible) return;
     tigercatCore.restoreFocus(previousActiveElementRef.current);
   }, [visible]);
+  const handleKeyDown = React.useCallback((event) => {
+    if (event.key === "Tab" && dialogRef.current) {
+      const focusables = tigercatCore.getFocusableElements(dialogRef.current);
+      const result = tigercatCore.getFocusTrapNavigation(event.nativeEvent, focusables, document.activeElement);
+      if (result.shouldHandle && result.next) {
+        event.preventDefault();
+        result.next.focus();
+      }
+    }
+  }, []);
   const containerClasses = tigercatCore.classNames(
     tigercatCore.getDrawerContainerClasses(zIndex),
     !visible && "pointer-events-none"
@@ -161,6 +171,7 @@ var Drawer = ({
             "aria-labelledby": ariaLabelledby,
             tabIndex: -1,
             ref: dialogRef,
+            onKeyDown: handleKeyDown,
             "data-tiger-drawer": "",
             children: [
               (title || header || closable) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerClasses, children: [