@expcat/tigercat-react 0.1.8 → 0.2.0

package/dist/chunk-KBGURVTD.mjs

@@ -0,0 +1,282 @@
+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 { useMemo, useCallback } from 'react';
+import { getChartInnerRect, createBandScale, getNumberExtent, createLinearScale, DEFAULT_CHART_COLORS, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var BarChart = ({
+  width = 320,
+  height = 200,
+  padding = 24,
+  data,
+  xScale,
+  yScale,
+  barColor = "var(--tiger-primary,#2563eb)",
+  barRadius = 4,
+  barPaddingInner = 0.2,
+  barPaddingOuter = 0.1,
+  showGrid = true,
+  showAxis = true,
+  showXAxis = true,
+  showYAxis = true,
+  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,
+  onBarClick,
+  onBarHover
+}) => {
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => data[index],
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onBarHover?.(index, index !== null ? data[index] : null);
+    },
+    onSelectedIndexChange,
+    callbacks: {
+      onClick: onBarClick
+    }
+  });
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const xDomain = useMemo(() => data.map((item) => String(item.x)), [data]);
+  const yValues = useMemo(() => data.map((item) => item.y), [data]);
+  const resolvedXScale = useMemo(() => {
+    if (xScale) return xScale;
+    return createBandScale(xDomain, [0, innerRect.width], {
+      paddingInner: barPaddingInner,
+      paddingOuter: barPaddingOuter
+    });
+  }, [xScale, xDomain, innerRect.width, barPaddingInner, barPaddingOuter]);
+  const resolvedYScale = useMemo(() => {
+    if (yScale) return yScale;
+    const extent = getNumberExtent(yValues, { includeZero: true });
+    return createLinearScale(extent, [innerRect.height, 0]);
+  }, [yScale, yValues, innerRect.height]);
+  const palette = useMemo(
+    () => colors && colors.length > 0 ? colors : barColor ? [barColor] : [...DEFAULT_CHART_COLORS],
+    [colors, barColor]
+  );
+  const bars = useMemo(() => {
+    const scale = resolvedXScale;
+    const bandWidth = scale.bandwidth ?? (scale.step ? scale.step * 0.7 : innerRect.width / Math.max(1, data.length) * 0.8);
+    const baseline = resolvedYScale.map(0);
+    return data.map((item, index) => {
+      const xKey = scale.type === "linear" ? Number(item.x) : String(item.x);
+      const xPos = scale.map(xKey);
+      const barX = scale.bandwidth ? xPos : xPos - bandWidth / 2;
+      const barYValue = resolvedYScale.map(item.y);
+      const barHeight = Math.abs(baseline - barYValue);
+      const barY = Math.min(baseline, barYValue);
+      const color = item.color ?? palette[index % palette.length];
+      const opacity = getChartElementOpacity(index, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+      return {
+        x: barX,
+        y: barY,
+        width: bandWidth,
+        height: barHeight,
+        color,
+        opacity,
+        datum: item,
+        index
+      };
+    });
+  }, [
+    resolvedXScale,
+    resolvedYScale,
+    data,
+    innerRect.width,
+    palette,
+    activeIndex,
+    activeOpacity,
+    inactiveOpacity
+  ]);
+  const legendItems = useMemo(
+    () => data.map((item, index) => ({
+      index,
+      label: legendFormatter ? legendFormatter(item, index) : item.label ?? String(item.x),
+      color: item.color ?? palette[index % palette.length],
+      active: activeIndex === null || activeIndex === index
+    })),
+    [data, legendFormatter, palette, activeIndex]
+  );
+  const formatTooltip = useCallback(
+    (datum, index) => {
+      if (tooltipFormatter) return tooltipFormatter(datum, index);
+      const label = datum.label ?? String(datum.x);
+      return `${label}: ${datum.y}`;
+    },
+    [tooltipFormatter]
+  );
+  const tooltipContent = useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const datum = data[resolvedHoveredIndex];
+    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
+  }, [resolvedHoveredIndex, data, formatTooltip]);
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  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
+          }
+        ),
+        shouldShowXAxis && /* @__PURE__ */ jsx(
+          ChartAxis,
+          {
+            scale: resolvedXScale,
+            orientation: "bottom",
+            y: innerRect.height,
+            ticks: xTicks,
+            tickValues: xTickValues,
+            tickFormat: xTickFormat,
+            label: xAxisLabel
+          }
+        ),
+        shouldShowYAxis && /* @__PURE__ */ jsx(
+          ChartAxis,
+          {
+            scale: resolvedYScale,
+            orientation: "left",
+            ticks: yTicks,
+            tickValues: yTickValues,
+            tickFormat: yTickFormat,
+            label: yAxisLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(ChartSeries, { data, type: "bar", children: bars.map((bar) => /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: bar.x,
+            y: bar.y,
+            width: bar.width,
+            height: bar.height,
+            rx: barRadius,
+            ry: barRadius,
+            fill: bar.color,
+            opacity: bar.opacity,
+            className: classNames(
+              "transition-opacity duration-150",
+              (hoverable || selectable) && "cursor-pointer"
+            ),
+            tabIndex: selectable ? 0 : void 0,
+            onMouseEnter: (e) => handleMouseEnter(bar.index, e),
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            onClick: () => handleClick(bar.index),
+            onKeyDown: (e) => handleKeyDown(e, bar.index)
+          },
+          `bar-${bar.index}`
+        )) })
+      ]
+    }
+  );
+  const tooltip = showTooltip && /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: hoverable && resolvedHoveredIndex !== 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 BarChart_default = BarChart;
+
+export { BarChart, BarChart_default };

package/dist/{chunk-O3EUFIOS.mjs → chunk-KELLYJZY.mjs}

@@ -1,8 +1,8 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { classNames, getPopoverContainerClasses, getPopoverTriggerClasses, getDropdownMenuWrapperClasses, getPopoverContentClasses, getPopoverTitleClasses, getPopoverContentTextClasses } from '@expcat/tigercat-core';
+import { useFloating, useClickOutside, useEscapeKey } from './chunk-WLIFEALE.mjs';
+import { useState, useRef, useCallback } from 'react';
+import { classNames, getPopoverContainerClasses, getPopoverTriggerClasses, getPopoverContentClasses, getPopoverTitleClasses, getPopoverContentTextClasses, getTransformOrigin } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/Popover.tsx
 var popoverIdCounter = 0;
 var createPopoverId = () => `tiger-popover-${++popoverIdCounter}`;
 var Popover = ({
@@ -14,6 +14,7 @@ var Popover = ({
   placement = "top",
   disabled = false,
   width,
+  offset = 8,
   className,
   style,
   children,
@@ -26,6 +27,8 @@ var Popover = ({
   const [internalVisible, setInternalVisible] = useState(defaultVisible);
   const currentVisible = isControlled ? visible : internalVisible;
   const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const floatingRef = useRef(null);
   const popoverIdRef = useRef(null);
   if (!popoverIdRef.current) {
     popoverIdRef.current = createPopoverId();
@@ -33,6 +36,17 @@ var Popover = ({
   const popoverId = popoverIdRef.current;
   const titleId = `${popoverId}-title`;
   const contentId = `${popoverId}-content`;
+  const {
+    x,
+    y,
+    placement: actualPlacement
+  } = useFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement,
+    offset
+  });
   const setVisible = useCallback(
     (nextVisible) => {
       if (disabled && nextVisible) return;
@@ -63,37 +77,28 @@ var Popover = ({
     if (disabled || trigger !== "focus") return;
     setVisible(false);
   };
-  useEffect(() => {
-    if (!currentVisible || trigger !== "click") return;
-    const handleClickOutside = (event) => {
-      const target = event.target;
-      if (!target) return;
-      if (containerRef.current?.contains(target)) return;
-      setVisible(false);
-    };
-    const timeoutId = setTimeout(() => {
-      document.addEventListener("click", handleClickOutside);
-    }, 0);
-    return () => {
-      clearTimeout(timeoutId);
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [currentVisible, trigger, setVisible]);
-  useEffect(() => {
-    if (!currentVisible || trigger === "manual") return;
-    const handleKeyDown = (event) => {
-      if (event.key !== "Escape") return;
-      setVisible(false);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [currentVisible, trigger, setVisible]);
+  useClickOutside({
+    enabled: currentVisible && trigger === "click",
+    refs: [containerRef],
+    onOutsideClick: () => setVisible(false),
+    defer: true
+  });
+  useEscapeKey({
+    enabled: currentVisible && trigger !== "manual",
+    onEscape: () => setVisible(false)
+  });
   const containerClasses = classNames(getPopoverContainerClasses(), className);
   const triggerClasses = getPopoverTriggerClasses(disabled);
-  const contentWrapperClasses = getDropdownMenuWrapperClasses(currentVisible, placement);
   const contentClasses = getPopoverContentClasses(width);
   const titleClasses = getPopoverTitleClasses();
   const contentTextClasses = getPopoverContentTextClasses();
+  const floatingStyles = {
+    position: "absolute",
+    left: x,
+    top: y,
+    transformOrigin: getTransformOrigin(actualPlacement),
+    zIndex: 1e3
+  };
   const triggerHandlers = {};
   if (trigger === "click") {
     triggerHandlers.onClick = handleTriggerClick;
@@ -114,6 +119,7 @@ var Popover = ({
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref: triggerRef,
         className: triggerClasses,
         "aria-haspopup": "dialog",
         "aria-disabled": disabled ? "true" : void 0,
@@ -121,7 +127,7 @@ var Popover = ({
         children
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: contentWrapperClasses, hidden: !currentVisible, "aria-hidden": !currentVisible, children: /* @__PURE__ */ jsxs(
+    currentVisible && /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxs(
       "div",
       {
         id: popoverId,

package/dist/{chunk-XZDJ5FRB.js → chunk-KPZTGRNA.js}

@@ -94,16 +94,11 @@ var Slider = ({
     }
   }, [controlledValue]);
   const normalizeValue = react.useCallback(
-    (val) => {
-      const steps = Math.round((val - min) / step);
-      return Math.min(Math.max(min + steps * step, min), max);
-    },
+    (val) => tigercatCore.sliderNormalizeValue(val, min, max, step),
     [min, max, step]
   );
   const getPercentage = react.useCallback(
-    (val) => {
-      return (val - min) / (max - min) * 100;
-    },
+    (val) => tigercatCore.sliderGetPercentage(val, min, max),
     [min, max]
   );
   const getValueFromPosition = react.useCallback(
@@ -187,22 +182,9 @@ var Slider = ({
   };
   const handleKeyDown = (e, value, thumbType) => {
     if (disabled) return;
-    let newValue = value;
-    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
-      e.preventDefault();
-      newValue = normalizeValue(value + step);
-    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
-      e.preventDefault();
-      newValue = normalizeValue(value - step);
-    } else if (e.key === "Home") {
-      e.preventDefault();
-      newValue = min;
-    } else if (e.key === "End") {
-      e.preventDefault();
-      newValue = max;
-    } else {
-      return;
-    }
+    const newValue = tigercatCore.sliderGetKeyboardValue(e.key, value, min, max, step);
+    if (newValue === null) return;
+    e.preventDefault();
     if (range && Array.isArray(internalValue)) {
       const [minVal, maxVal] = internalValue;
       if (thumbType === "min") {

package/dist/chunk-KQZ4F7FZ.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/hooks/useChartInteraction.ts
+function useChartInteraction(options) {
+  const {
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition = "bottom",
+    onHoveredIndexChange,
+    onSelectedIndexChange,
+    getData,
+    callbacks
+  } = options;
+  const [localHoveredIndex, setLocalHoveredIndex] = react.useState(null);
+  const [localSelectedIndex, setLocalSelectedIndex] = react.useState(null);
+  const [tooltipPosition, setTooltipPosition] = react.useState({ x: 0, y: 0 });
+  const resolvedHoveredIndex = hoveredIndexProp !== void 0 ? hoveredIndexProp : localHoveredIndex;
+  const resolvedSelectedIndex = selectedIndexProp !== void 0 ? selectedIndexProp : localSelectedIndex;
+  const activeIndex = react.useMemo(() => {
+    if (resolvedSelectedIndex !== null) return resolvedSelectedIndex;
+    if (hoverable && resolvedHoveredIndex !== null) return resolvedHoveredIndex;
+    return null;
+  }, [resolvedSelectedIndex, hoverable, resolvedHoveredIndex]);
+  const getElementOpacity = react.useCallback(
+    (index) => {
+      return tigercatCore.getChartElementOpacity(index, activeIndex, {
+        activeOpacity,
+        inactiveOpacity
+      });
+    },
+    [activeIndex, activeOpacity, inactiveOpacity]
+  );
+  const handleMouseEnter = react.useCallback(
+    (index, event) => {
+      if (!hoverable) return;
+      if (hoveredIndexProp === void 0) {
+        setLocalHoveredIndex(index);
+      }
+      setTooltipPosition({ x: event.clientX, y: event.clientY });
+      onHoveredIndexChange?.(index);
+      if (callbacks?.onHover && getData) {
+        callbacks.onHover(index, getData(index) ?? null);
+      }
+    },
+    [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks, getData]
+  );
+  const handleMouseMove = react.useCallback((event) => {
+    setTooltipPosition({ x: event.clientX, y: event.clientY });
+  }, []);
+  const handleMouseLeave = react.useCallback(() => {
+    if (!hoverable) return;
+    if (hoveredIndexProp === void 0) {
+      setLocalHoveredIndex(null);
+    }
+    onHoveredIndexChange?.(null);
+    callbacks?.onHover?.(null, null);
+  }, [hoverable, hoveredIndexProp, onHoveredIndexChange, callbacks]);
+  const handleClick = react.useCallback(
+    (index) => {
+      if (!selectable) return;
+      const nextIndex = resolvedSelectedIndex === index ? null : index;
+      if (selectedIndexProp === void 0) {
+        setLocalSelectedIndex(nextIndex);
+      }
+      onSelectedIndexChange?.(nextIndex);
+      if (callbacks?.onClick && getData) {
+        const datum = getData(index);
+        if (datum) callbacks.onClick(index, datum);
+      }
+    },
+    [
+      selectable,
+      resolvedSelectedIndex,
+      selectedIndexProp,
+      onSelectedIndexChange,
+      callbacks,
+      getData
+    ]
+  );
+  const handleKeyDown = react.useCallback(
+    (event, index) => {
+      if (!selectable) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      handleClick(index);
+    },
+    [selectable, handleClick]
+  );
+  const handleLegendClick = react.useCallback(
+    (index) => {
+      handleClick(index);
+    },
+    [handleClick]
+  );
+  const handleLegendHover = react.useCallback(
+    (index) => {
+      if (!hoverable) return;
+      if (hoveredIndexProp === void 0) {
+        setLocalHoveredIndex(index);
+      }
+      onHoveredIndexChange?.(index);
+    },
+    [hoverable, hoveredIndexProp, onHoveredIndexChange]
+  );
+  const handleLegendLeave = react.useCallback(() => {
+    handleMouseLeave();
+  }, [handleMouseLeave]);
+  const wrapperClasses = react.useMemo(() => {
+    return tigercatCore.classNames(
+      "inline-flex",
+      legendPosition === "right" ? "flex-row items-start gap-4" : legendPosition === "left" ? "flex-row-reverse items-start gap-4" : legendPosition === "top" ? "flex-col-reverse gap-2" : "flex-col gap-2"
+    );
+  }, [legendPosition]);
+  const createLegendItems = react.useCallback(
+    (items, palette, labelFormatter) => {
+      return items.map((item, index) => ({
+        index,
+        label: labelFormatter ? labelFormatter(item, index) : item.label ?? String(item.x ?? index),
+        color: item.color ?? palette[index % palette.length],
+        active: activeIndex === null || activeIndex === index
+      }));
+    },
+    [activeIndex]
+  );
+  return {
+    localHoveredIndex,
+    localSelectedIndex,
+    tooltipPosition,
+    resolvedHoveredIndex,
+    resolvedSelectedIndex,
+    activeIndex,
+    getElementOpacity,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses,
+    createLegendItems
+  };
+}
+
+exports.useChartInteraction = useChartInteraction;

package/dist/{chunk-XDKXL2BP.mjs → chunk-KV4LLPAY.mjs}

@@ -1,7 +1,7 @@
-import { useEscapeKey } from './chunk-ZO4XVOHU.mjs';
+import { useEscapeKey } from './chunk-WLIFEALE.mjs';
 import React, { useEffect, useCallback, useRef, useId, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { resolveLocaleText, captureActiveElement, focusFirst, restoreFocus, classNames, getDrawerContainerClasses, getDrawerMaskClasses, getDrawerPanelClasses, getDrawerHeaderClasses, getDrawerBodyClasses, getDrawerFooterClasses, getDrawerCloseButtonClasses, getDrawerTitleClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import { ANIMATION_DURATION_MS, resolveLocaleText, captureActiveElement, focusFirst, restoreFocus, getFocusableElements, getFocusTrapNavigation, classNames, getDrawerContainerClasses, getDrawerMaskClasses, getDrawerPanelClasses, getDrawerHeaderClasses, getDrawerBodyClasses, getDrawerFooterClasses, getDrawerCloseButtonClasses, getDrawerTitleClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var CloseIcon = () => /* @__PURE__ */ jsx(
@@ -74,7 +74,7 @@ var Drawer = ({
       } else {
         onAfterLeave?.();
       }
-    }, 300);
+    }, ANIMATION_DURATION_MS);
     return () => window.clearTimeout(timer);
   }, [visible, onAfterEnter, onAfterLeave]);
   const reactId = useId();
@@ -108,6 +108,16 @@ var Drawer = ({
     if (visible) return;
     restoreFocus(previousActiveElementRef.current);
   }, [visible]);
+  const handleKeyDown = useCallback((event) => {
+    if (event.key === "Tab" && dialogRef.current) {
+      const focusables = getFocusableElements(dialogRef.current);
+      const result = getFocusTrapNavigation(event.nativeEvent, focusables, document.activeElement);
+      if (result.shouldHandle && result.next) {
+        event.preventDefault();
+        result.next.focus();
+      }
+    }
+  }, []);
   const containerClasses = classNames(
     getDrawerContainerClasses(zIndex),
     !visible && "pointer-events-none"
@@ -155,6 +165,7 @@ var Drawer = ({
             "aria-labelledby": ariaLabelledby,
             tabIndex: -1,
             ref: dialogRef,
+            onKeyDown: handleKeyDown,
             "data-tiger-drawer": "",
             children: [
               (title || header || closable) && /* @__PURE__ */ jsxs("div", { className: headerClasses, children: [