@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-PT4WLSTJ.mjs → chunk-763M6U5U.mjs}

@@ -6,7 +6,7 @@ import { ChartSeries } from './chunk-SDLMB34Y.mjs';
 import { ChartTooltip } from './chunk-LVC43YX2.mjs';
 import { ChartAxis } from './chunk-RQSQXQN6.mjs';
 import { useState, useMemo, useCallback } from 'react';
-import { getChartInnerRect, stackSeriesData, getNumberExtent, createLinearScale, createPointScale, DEFAULT_CHART_COLORS, createLinePath, createAreaPath, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { getAreaGradientPrefix, getChartInnerRect, resolveSeriesData, stackSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var AreaChart = ({
@@ -52,6 +52,9 @@ var AreaChart = ({
   legendMarkerSize = 10,
   legendGap = 8,
   showTooltip = true,
+  gradient = false,
+  animated = false,
+  pointHollow = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -66,15 +69,15 @@ var AreaChart = ({
 }) => {
   const [hoveredPointInfo, setHoveredPointInfo] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const gradientPrefix = useMemo(() => getAreaGradientPrefix(), []);
   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 resolvedSeries = useMemo(
+    () => resolveSeriesData(series, data),
+    [series, data]
+  );
   const {
     activeIndex,
     handleMouseEnter: handleSeriesHoverEnter,
@@ -121,7 +124,7 @@ var AreaChart = ({
       return createLinearScale(extent, [0, innerRect.width]);
     } else {
       const categories = [...new Set(xValues.map(String))];
-      return createPointScale(categories, [0, innerRect.width], { padding: 0.1 });
+      return createPointScale(categories, [0, innerRect.width], { padding: 0 });
     }
   }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
   const resolvedYScale = useMemo(() => {
@@ -130,12 +133,9 @@ var AreaChart = ({
     return createLinearScale(extent, [innerRect.height, 0]);
   }, [yScaleProp, yValues, includeZero, innerRect.height]);
   const baseline = useMemo(() => resolvedYScale.map(0), [resolvedYScale]);
-  const resolvedShowXAxis = showAxis && showXAxis;
-  const resolvedShowYAxis = showAxis && showYAxis;
-  const palette = useMemo(
-    () => colors && colors.length > 0 ? colors : [...DEFAULT_CHART_COLORS],
-    [colors]
-  );
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
   const seriesData = useMemo(() => {
     const stackedData = stacked ? stackSeriesData(resolvedSeries.map((s) => s.data)) : null;
     return resolvedSeries.map((s, seriesIndex) => {
@@ -190,7 +190,8 @@ var AreaChart = ({
         strokeDasharray: s.strokeDasharray,
         showPoints: s.showPoints ?? showPoints,
         pointSize: s.pointSize ?? pointSize,
-        pointColor: s.pointColor ?? color
+        pointColor: s.pointColor ?? color,
+        pointHollow: s.pointHollow ?? pointHollow
       };
     });
   }, [
@@ -207,33 +208,28 @@ var AreaChart = ({
     fillOpacity,
     strokeWidth,
     showPoints,
-    pointSize
+    pointSize,
+    pointHollow
   ]);
   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
-    })),
+    () => buildChartLegendItems({
+      data: resolvedSeries,
+      palette,
+      activeIndex,
+      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+      getColor: (s, i) => s.color ?? palette[i % palette.length]
+    }),
     [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(
+    () => resolveMultiSeriesTooltipContent(
+      hoveredPointInfo,
+      resolvedSeries,
+      tooltipFormatter,
+      defaultSeriesXYTooltipFormatter
+    ),
+    [hoveredPointInfo, resolvedSeries, 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 });
@@ -276,6 +272,32 @@ var AreaChart = ({
       desc,
       className: classNames(className),
       children: [
+        (gradient || animated) && /* @__PURE__ */ jsxs("defs", { children: [
+          animated && /* @__PURE__ */ jsx("style", { children: `
+              .tiger-area-animated {
+                animation: tiger-area-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
+              }
+              @keyframes tiger-area-draw {
+                from { stroke-dashoffset: 1; }
+                to { stroke-dashoffset: 0; }
+              }
+            ` }),
+          gradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: sd.fillColor, stopOpacity: sd.fillOpacity }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: sd.fillColor, stopOpacity: 0.02 })
+              ]
+            },
+            `area-grad-${sd.seriesIndex}`
+          ))
+        ] }),
         showGrid && /* @__PURE__ */ jsx(
           ChartGrid,
           {
@@ -290,7 +312,7 @@ var AreaChart = ({
             strokeWidth: gridStrokeWidth
           }
         ),
-        resolvedShowXAxis && /* @__PURE__ */ jsx(
+        shouldShowXAxis && /* @__PURE__ */ jsx(
           ChartAxis,
           {
             scale: resolvedXScale,
@@ -302,7 +324,7 @@ var AreaChart = ({
             label: xAxisLabel
           }
         ),
-        resolvedShowYAxis && /* @__PURE__ */ jsx(
+        shouldShowYAxis && /* @__PURE__ */ jsx(
           ChartAxis,
           {
             scale: resolvedYScale,
@@ -320,7 +342,11 @@ var AreaChart = ({
             name: sd.series.name,
             type: "area",
             opacity: sd.opacity,
-            className: classNames(sd.series.className, (hoverable || selectable) && "cursor-pointer"),
+            className: classNames(
+              sd.series.className,
+              (hoverable || selectable) && "cursor-pointer",
+              "outline-none"
+            ),
             onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
             onMouseLeave: handleSeriesHoverLeave,
             onClick: () => handleSeriesSelect(sd.seriesIndex),
@@ -331,10 +357,10 @@ var AreaChart = ({
                 "path",
                 {
                   d: sd.areaPath,
-                  fill: sd.fillColor,
-                  fillOpacity: sd.fillOpacity,
+                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesIndex})` : sd.fillColor,
+                  fillOpacity: gradient ? 1 : sd.fillOpacity,
                   stroke: "none",
-                  className: "transition-opacity duration-150",
+                  className: "transition-opacity duration-300",
                   "data-area-series": sd.seriesIndex
                 }
               ),
@@ -345,35 +371,49 @@ var AreaChart = ({
                   fill: "none",
                   stroke: sd.color,
                   strokeWidth: sd.strokeWidth,
-                  strokeDasharray: sd.strokeDasharray,
+                  strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
+                  strokeDashoffset: animated ? "1" : void 0,
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
-                  className: "transition-opacity duration-150"
+                  pathLength: animated ? 1 : void 0,
+                  className: classNames(
+                    "transition-opacity duration-200",
+                    animated && "tiger-area-animated"
+                  )
                 }
-              ),
-              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}`
-        ))
+        )),
+        seriesData.map(
+          (sd) => sd.showPoints && /* @__PURE__ */ jsx("g", { opacity: sd.opacity, children: sd.points.map((point) => {
+            const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
+            const hoverSize = sd.pointSize + 2;
+            return /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: point.x,
+                cy: point.y,
+                r: isHovered ? hoverSize : sd.pointSize,
+                fill: sd.pointHollow ? "white" : sd.pointColor,
+                stroke: sd.pointHollow ? sd.pointColor : "none",
+                strokeWidth: sd.pointHollow ? 2 : 0,
+                className: "transition-all duration-200 ease-out",
+                style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                "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}`
+            );
+          }) }, `points-${sd.seriesIndex}`)
+        )
       ]
     }
   );

package/dist/{chunk-RTQNWZN4.mjs → chunk-77PE7OFK.mjs}

@@ -3,6 +3,7 @@ import { useMemo, useRef, useState, useCallback } from 'react';
 import { getSpinnerSVG, mergeTigerLocale, getUploadLabels, classNames, prepareUploadFiles, fileToUploadFile, getDragAreaClasses, interpolateUploadLabel, formatFileSize, getUploadButtonClasses, getFileListItemClasses, icon20ViewBox, getUploadStatusIconClasses, successCircleSolidIcon20PathD, errorCircleSolidIcon20PathD, closeSolidIcon20PathD, getPictureCardClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var spinnerSvg = getSpinnerSVG("spinner");
 var Upload = ({
   accept,
   multiple = false,
@@ -30,7 +31,6 @@ var Upload = ({
   style,
   ...divProps
 }) => {
-  const spinnerSvg = getSpinnerSVG("spinner");
   const config = useTigerConfig();
   const mergedLocale = useMemo(
     () => mergeTigerLocale(config.locale, locale),
@@ -124,9 +124,7 @@ var Upload = ({
     onChange?.(file, newFileList);
   };
   const handlePreview = (file) => {
-    if (onPreview) {
-      onPreview(file);
-    }
+    onPreview?.(file);
   };
   const handleDragOver = (event) => {
     if (disabled) return;
@@ -204,7 +202,7 @@ var Upload = ({
       "button",
       {
         type: "button",
-        className: getUploadButtonClasses(drag, disabled),
+        className: getUploadButtonClasses(disabled),
         onClick: handleClick,
         disabled,
         "aria-label": labels.buttonAriaLabel,

package/dist/{chunk-KPZTGRNA.js → chunk-7Z64GEMN.js}

@@ -19,8 +19,8 @@ var Thumb = react.memo(
     ariaLabel,
     ariaLabelledby,
     ariaDescribedby,
-    thumbClassesCombined,
-    tooltipClassesCombined,
+    thumbClasses,
+    tooltipClasses,
     setShowTooltip,
     handleStart,
     handleKeyDown,
@@ -31,7 +31,7 @@ var Thumb = react.memo(
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: thumbClassesCombined,
+        className: thumbClasses,
         style: { left: `${left}%` },
         tabIndex: disabled ? -1 : 0,
         role: "slider",
@@ -52,7 +52,7 @@ var Thumb = react.memo(
           if (!isDragging) setShowTooltip(false);
         },
         onKeyDown: (e) => handleKeyDown(e, value, thumbType),
-        children: showThumbTooltip && tooltip && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltipClassesCombined, children: value })
+        children: showThumbTooltip && tooltip && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tooltipClasses, children: value })
       }
     );
   }
@@ -93,10 +93,6 @@ var Slider = ({
       setInternalValue(controlledValue);
     }
   }, [controlledValue]);
-  const normalizeValue = react.useCallback(
-    (val) => tigercatCore.sliderNormalizeValue(val, min, max, step),
-    [min, max, step]
-  );
   const getPercentage = react.useCallback(
     (val) => tigercatCore.sliderGetPercentage(val, min, max),
     [min, max]
@@ -105,11 +101,9 @@ var Slider = ({
     (clientX) => {
       if (!trackRef.current) return min;
       const rect = trackRef.current.getBoundingClientRect();
-      const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-      const rawValue = min + percentage * (max - min);
-      return normalizeValue(rawValue);
+      return tigercatCore.sliderGetValueFromPosition(clientX - rect.left, rect.width, min, max, step);
     },
-    [min, max, normalizeValue]
+    [min, max, step]
   );
   const updateValue = react.useCallback(
     (newValue) => {
@@ -157,13 +151,16 @@ var Slider = ({
       };
     }
   }, [isDragging, handleMove, handleEnd]);
-  const handleStart = (event, thumb) => {
-    if (disabled) return;
-    event.preventDefault();
-    setIsDragging(true);
-    setActiveThumb(thumb);
-    if (tooltip) setShowTooltip(true);
-  };
+  const handleStart = react.useCallback(
+    (event, thumb) => {
+      if (disabled) return;
+      event.preventDefault();
+      setIsDragging(true);
+      setActiveThumb(thumb);
+      if (tooltip) setShowTooltip(true);
+    },
+    [disabled, tooltip]
+  );
   const handleTrackClick = (e) => {
     if (disabled) return;
     const newValue = getValueFromPosition(e.clientX);
@@ -180,34 +177,36 @@ var Slider = ({
       updateValue(newValue);
     }
   };
-  const handleKeyDown = (e, value, thumbType) => {
-    if (disabled) 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") {
-        updateValue([Math.min(newValue, maxVal), maxVal]);
-      } else if (thumbType === "max") {
-        updateValue([minVal, Math.max(newValue, minVal)]);
+  const handleKeyDown = react.useCallback(
+    (e, value, thumbType) => {
+      if (disabled) 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") {
+          updateValue([Math.min(newValue, maxVal), maxVal]);
+        } else if (thumbType === "max") {
+          updateValue([minVal, Math.max(newValue, minVal)]);
+        }
+      } else {
+        updateValue(newValue);
       }
-    } else {
-      updateValue(newValue);
+    },
+    [disabled, min, max, step, range, internalValue, updateValue]
+  );
+  const trackClasses = react.useMemo(() => tigercatCore.getSliderTrackClasses(size, disabled), [size, disabled]);
+  const rangeStyles = react.useMemo(() => {
+    if (range && Array.isArray(internalValue)) {
+      const left = getPercentage(internalValue[0]);
+      return { left: `${left}%`, width: `${getPercentage(internalValue[1]) - left}%` };
     }
-  };
-  const trackStyles = tigercatCore.getSliderTrackClasses(size, disabled);
-  const rangeStyles = range && Array.isArray(internalValue) ? {
-    left: `${getPercentage(internalValue[0])}%`,
-    width: `${getPercentage(internalValue[1]) - getPercentage(internalValue[0])}%`
-  } : {
-    left: "0%",
-    width: `${getPercentage(
-      typeof internalValue === "number" ? internalValue : internalValue[0]
-    )}%`
-  };
-  const thumbClassesCombined = tigercatCore.getSliderThumbClasses(size, disabled);
-  const tooltipClassesCombined = tigercatCore.getSliderTooltipClasses(size);
+    const val = typeof internalValue === "number" ? internalValue : internalValue[0];
+    return { left: "0%", width: `${getPercentage(val)}%` };
+  }, [range, internalValue, getPercentage]);
+  const thumbClasses = react.useMemo(() => tigercatCore.getSliderThumbClasses(size, disabled), [size, disabled]);
+  const tooltipClasses = react.useMemo(() => tigercatCore.getSliderTooltipClasses(size), [size]);
   const renderMarks = () => {
     if (!marks) return null;
     const marksObj = typeof marks === "boolean" ? {} : marks;
@@ -231,7 +230,7 @@ var Slider = ({
       className: tigercatCore.classNames(tigercatCore.sliderBaseClasses, disabled && "cursor-not-allowed", className),
       ...divProps,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: trackRef, className: trackStyles, onClick: handleTrackClick, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: trackRef, className: trackClasses, onClick: handleTrackClick, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.sliderRangeClasses, style: rangeStyles }),
           range && Array.isArray(internalValue) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -244,14 +243,13 @@ var Slider = ({
                 showTooltip,
                 activeThumb,
                 isDragging,
-                size,
                 min,
                 max,
                 ariaLabel: ariaLabel ? `${ariaLabel} (min)` : "Minimum value",
                 ariaLabelledby,
                 ariaDescribedby,
-                thumbClassesCombined,
-                tooltipClassesCombined,
+                thumbClasses,
+                tooltipClasses,
                 setShowTooltip,
                 handleStart,
                 handleKeyDown,
@@ -268,14 +266,13 @@ var Slider = ({
                 showTooltip,
                 activeThumb,
                 isDragging,
-                size,
                 min,
                 max,
                 ariaLabel: ariaLabel ? `${ariaLabel} (max)` : "Maximum value",
                 ariaLabelledby,
                 ariaDescribedby,
-                thumbClassesCombined,
-                tooltipClassesCombined,
+                thumbClasses,
+                tooltipClasses,
                 setShowTooltip,
                 handleStart,
                 handleKeyDown,
@@ -291,14 +288,13 @@ var Slider = ({
               showTooltip,
               activeThumb,
               isDragging,
-              size,
               min,
               max,
               ariaLabel,
               ariaLabelledby,
               ariaDescribedby,
-              thumbClassesCombined,
-              tooltipClassesCombined,
+              thumbClasses,
+              tooltipClasses,
               setShowTooltip,
               handleStart,
               handleKeyDown,

package/dist/{chunk-3WPKVV4N.js → chunk-A3PYG3D6.js}

@@ -1,43 +1,10 @@
 'use strict';
 
-var chunkQFVE7GKD_js = require('./chunk-QFVE7GKD.js');
+var chunkIBYIPXIO_js = require('./chunk-IBYIPXIO.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
-function getMenuButtonsWithin(menuEl) {
-  return Array.from(
-    menuEl.querySelectorAll('button[data-tiger-menuitem="true"]')
-  ).filter((el) => !el.disabled);
-}
-function roveFocus(current, next) {
-  const menuEl = current.closest('ul[role="menu"]');
-  if (!menuEl) {
-    next.focus();
-    return;
-  }
-  const items = getMenuButtonsWithin(menuEl);
-  items.forEach((el) => {
-    el.tabIndex = el === next ? 0 : -1;
-  });
-  next.focus();
-}
-function moveFocus(current, delta) {
-  const menuEl = current.closest('ul[role="menu"]');
-  if (!menuEl) return;
-  const items = getMenuButtonsWithin(menuEl);
-  const currentIndex = items.indexOf(current);
-  if (currentIndex < 0) return;
-  const nextIndex = (currentIndex + delta + items.length) % items.length;
-  roveFocus(current, items[nextIndex]);
-}
-function focusEdge(current, edge) {
-  const menuEl = current.closest('ul[role="menu"]');
-  if (!menuEl) return;
-  const items = getMenuButtonsWithin(menuEl);
-  if (items.length === 0) return;
-  roveFocus(current, edge === "start" ? items[0] : items[items.length - 1]);
-}
 var MenuItem = ({
   itemKey,
   disabled = false,
@@ -47,7 +14,7 @@ var MenuItem = ({
   level = 0,
   collapsed: collapsedOverride
 }) => {
-  const menuContext = chunkQFVE7GKD_js.useMenuContext();
+  const menuContext = chunkIBYIPXIO_js.useMenuContext();
   if (!menuContext) {
     console.warn("MenuItem must be used within Menu component");
   }
@@ -74,22 +41,22 @@ var MenuItem = ({
       const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
       if (event.key === nextKey) {
         event.preventDefault();
-        moveFocus(current, 1);
+        tigercatCore.moveFocusInMenu(current, 1);
         return;
       }
       if (event.key === prevKey) {
         event.preventDefault();
-        moveFocus(current, -1);
+        tigercatCore.moveFocusInMenu(current, -1);
         return;
       }
       if (event.key === "Home") {
         event.preventDefault();
-        focusEdge(current, "start");
+        tigercatCore.focusMenuEdge(current, "start");
         return;
       }
       if (event.key === "End") {
         event.preventDefault();
-        focusEdge(current, "end");
+        tigercatCore.focusMenuEdge(current, "end");
         return;
       }
       if (event.key === "Enter" || event.key === " ") {

package/dist/chunk-AQ72JVUG.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var chunkXLVEI7GS_js = require('./chunk-XLVEI7GS.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Col = ({
+  span = 24,
+  offset = 0,
+  order,
+  flex,
+  children,
+  className,
+  style,
+  ...divProps
+}) => {
+  const { gutter } = react.useContext(chunkXLVEI7GS_js.RowContext);
+  const isFlexSpanMode = flex !== void 0 && span === 0;
+  const colClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      isFlexSpanMode ? "" : tigercatCore.getSpanClasses(span),
+      tigercatCore.getOffsetClasses(offset),
+      tigercatCore.getOrderClasses(order),
+      tigercatCore.getFlexClasses(flex),
+      className
+    ),
+    [isFlexSpanMode, span, offset, order, flex, className]
+  );
+  const mergedStyle = react.useMemo(
+    () => ({
+      ...tigercatCore.getGutterStyles(gutter || 0).colStyle,
+      ...tigercatCore.getColMergedStyleVars(isFlexSpanMode ? void 0 : span, offset, order, flex),
+      ...style
+    }),
+    [gutter, isFlexSpanMode, span, offset, order, flex, style]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: colClasses, style: mergedStyle, ...divProps, children });
+};
+
+exports.Col = Col;