@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-OE6WTZES.js → chunk-TLJD4GFY.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
-var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
+var chunkXTV5JLLC_js = require('./chunk-XTV5JLLC.js');
+var chunkWV5XHYW6_js = require('./chunk-WV5XHYW6.js');
 var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
-var chunkM375I56K_js = require('./chunk-M375I56K.js');
+var chunk36ATCHP4_js = require('./chunk-36ATCHP4.js');
 var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
-var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
+var chunkUKLVOR4E_js = require('./chunk-UKLVOR4E.js');
 var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -56,6 +56,8 @@ var LineChart = ({
   areaOpacity = 0.15,
   pointHollow = false,
   animated = false,
+  strokeGradient = false,
+  pointGradient = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -88,7 +90,7 @@ var LineChart = ({
     handleLegendHover,
     handleLegendLeave,
     wrapperClasses
-  } = chunkKQZ4F7FZ_js.useChartInteraction({
+  } = chunkXTV5JLLC_js.useChartInteraction({
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -130,8 +132,13 @@ var LineChart = ({
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
   const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
+  const seriesKeys = react.useMemo(
+    () => tigercatCore.buildChartSeriesKeys(resolvedSeries, { prefix: "line-" }),
+    [resolvedSeries]
+  );
   const seriesData = react.useMemo(
     () => resolvedSeries.map((s, seriesIndex) => {
+      const seriesKey = seriesKeys[seriesIndex];
       const color = s.color ?? palette[seriesIndex % palette.length];
       const points = s.data.map((datum, pointIndex) => ({
         x: resolvedXScale.map(datum.x),
@@ -149,6 +156,7 @@ var LineChart = ({
       return {
         series: s,
         seriesIndex,
+        seriesKey,
         color,
         linePath,
         areaPath,
@@ -166,6 +174,7 @@ var LineChart = ({
     }),
     [
       resolvedSeries,
+      seriesKeys,
       palette,
       resolvedXScale,
       resolvedYScale,
@@ -233,7 +242,7 @@ var LineChart = ({
     [selectable, handleSeriesSelect]
   );
   const chart = /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkDUWAV47E_js.ChartCanvas,
+    chunkUKLVOR4E_js.ChartCanvas,
     {
       width,
       height,
@@ -242,7 +251,7 @@ var LineChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
-        (seriesData.some((sd) => sd.showArea) || animated) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+        (seriesData.some((sd) => sd.showArea) || animated || strokeGradient || pointGradient) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
           animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
               .tiger-line-animated {
                 animation: tiger-line-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
@@ -255,7 +264,7 @@ var LineChart = ({
           seriesData.filter((sd) => sd.showArea).map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
             "linearGradient",
             {
-              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              id: `${gradientPrefix}-${sd.seriesKey}`,
               x1: "0",
               y1: "0",
               x2: "0",
@@ -265,7 +274,44 @@ var LineChart = ({
                 /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: sd.color, stopOpacity: 0.02 })
               ]
             },
-            `area-grad-${sd.seriesIndex}`
+            `area-grad-${sd.seriesKey}`
+          )),
+          pointGradient && seriesData.map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "radialGradient",
+            {
+              id: `${gradientPrefix}-point-${sd.seriesKey}`,
+              cx: "0.5",
+              cy: "0.5",
+              r: "0.5",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 30%)` }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "70%", stopColor: sd.color }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "stop",
+                  {
+                    offset: "100%",
+                    stopColor: `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                  }
+                )
+              ]
+            },
+            `point-grad-${sd.seriesKey}`
+          )),
+          strokeGradient && seriesData.map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+              x1: "0",
+              y1: "0",
+              x2: "1",
+              y2: "0",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 12%)` }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: sd.color }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: `color-mix(in oklab, ${sd.color} 100%, black 8%)` })
+              ]
+            },
+            `stroke-grad-${sd.seriesKey}`
           ))
         ] }),
         showGrid && /* @__PURE__ */ jsxRuntime.jsx(
@@ -312,6 +358,7 @@ var LineChart = ({
             name: sd.series.name,
             type: "line",
             opacity: sd.opacity,
+            "data-series-key": sd.seriesKey,
             className: tigercatCore.classNames(sd.series.className, (hoverable || selectable) && "cursor-pointer"),
             onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
             onMouseLeave: handleSeriesHoverLeave,
@@ -323,10 +370,11 @@ var LineChart = ({
                 "path",
                 {
                   d: sd.areaPath,
-                  fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                  fill: `url(#${gradientPrefix}-${sd.seriesKey})`,
                   stroke: "none",
                   className: "transition-opacity duration-300",
-                  "data-area-series": sd.seriesIndex
+                  "data-area-series": sd.seriesIndex,
+                  "data-series-key": sd.seriesKey
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -334,7 +382,7 @@ var LineChart = ({
                 {
                   d: sd.linePath,
                   fill: "none",
-                  stroke: sd.color,
+                  stroke: strokeGradient ? `url(#${gradientPrefix}-stroke-${sd.seriesKey})` : sd.color,
                   strokeWidth: sd.strokeWidth,
                   strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
                   strokeDashoffset: animated ? "1" : void 0,
@@ -345,7 +393,8 @@ var LineChart = ({
                     "transition-opacity duration-200",
                     animated && "tiger-line-animated"
                   ),
-                  "data-line-series": sd.seriesIndex
+                  "data-line-series": sd.seriesIndex,
+                  "data-series-key": sd.seriesKey
                 }
               ),
               sd.showPoints && sd.points.map((point) => {
@@ -357,12 +406,13 @@ var LineChart = ({
                     cx: point.x,
                     cy: point.y,
                     r: isHovered ? hoverSize : sd.pointSize,
-                    fill: sd.pointHollow ? "white" : sd.pointColor,
+                    fill: sd.pointHollow ? "white" : pointGradient ? `url(#${gradientPrefix}-point-${sd.seriesKey})` : sd.pointColor,
                     stroke: sd.pointHollow ? sd.pointColor : "none",
                     strokeWidth: sd.pointHollow ? 2 : 0,
-                    className: "transition-all duration-200 ease-out",
+                    className: tigercatCore.linePointTransitionClasses,
                     style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
                     "data-point-index": point.pointIndex,
+                    "data-series-key": sd.seriesKey,
                     onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
                     onMouseMove: handlePointMouseMove,
                     onMouseLeave: handlePointMouseLeave,
@@ -371,18 +421,18 @@ var LineChart = ({
                       handlePointClick(sd.seriesIndex, point.pointIndex);
                     }
                   },
-                  `point-${sd.seriesIndex}-${point.pointIndex}`
+                  `point-${sd.seriesKey}-${point.pointIndex}`
                 );
               })
             ]
           },
-          `series-${sd.seriesIndex}`
+          sd.seriesKey
         ))
       ]
     }
   );
   const tooltip = showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-    chunkM375I56K_js.ChartTooltip,
+    chunk36ATCHP4_js.ChartTooltip,
     {
       content: tooltipContent,
       visible: hoveredPointInfo !== null && tooltipContent !== "",
@@ -399,7 +449,7 @@ var LineChart = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
     chart,
     /* @__PURE__ */ jsxRuntime.jsx(
-      chunk6PBNFLM7_js.ChartLegend,
+      chunkWV5XHYW6_js.ChartLegend,
       {
         items: legendItems,
         position: legendPosition,

package/dist/{chunk-R5XY4EQL.js → chunk-TQOWIDQT.js}

@@ -18,33 +18,26 @@ var AvatarGroup = ({
   ...props
 }) => {
   const contextValue = React.useMemo(
-    () => ({ size, itemClass: tigercatCore.avatarGroupItemClasses }),
+    () => ({ size, itemClass: tigercatCore.getAvatarGroupItemClasses() }),
     [size]
   );
   const childArray = React__default.default.Children.toArray(children);
-  const total = childArray.length;
-  const visibleCount = max != null && max < total ? max : total;
-  const overflow = total - visibleCount;
-  const visible = childArray.slice(0, visibleCount);
-  const overflowSizeClass = tigercatCore.avatarSizeClasses[size ?? "md"];
+  const { visibleItems, overflowCount } = tigercatCore.getVisibleGroupItems(childArray, max);
   return /* @__PURE__ */ jsxRuntime.jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: tigercatCore.classNames(tigercatCore.avatarGroupBaseClasses, className),
+      className: tigercatCore.getAvatarGroupClasses(className),
       role: "group",
       "aria-label": "Avatar group",
       ...props,
       children: [
-        visible,
-        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        visibleItems,
+        overflowCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: tigercatCore.classNames(tigercatCore.avatarGroupOverflowClasses, overflowSizeClass),
-            "aria-label": `${overflow} more`,
-            children: [
-              "+",
-              overflow
-            ]
+            className: tigercatCore.getAvatarGroupOverflowClasses(size ?? "md"),
+            "aria-label": tigercatCore.getAvatarGroupOverflowLabel(overflowCount),
+            children: tigercatCore.getAvatarGroupOverflowText(overflowCount)
           }
         )
       ]

package/dist/{chunk-IPLK4AIE.mjs → chunk-TR4DGL3U.mjs}

@@ -1,5 +1,6 @@
-import { ImagePreview } from './chunk-HLJQZUIY.mjs';
+import { ImagePreview } from './chunk-WNX4TH7U.mjs';
 import { createContext, useState, useRef, useCallback, useMemo } from 'react';
+import { registerImageGroupItem, unregisterImageGroupItem, getImageGroupClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var ImageGroupContext = createContext(null);
@@ -13,12 +14,12 @@ var ImageGroup = ({
   const [previewIndex, setPreviewIndex] = useState(0);
   const imagesRef = useRef([]);
   const register = useCallback((src) => {
-    const idx = imagesRef.current.length;
-    imagesRef.current = [...imagesRef.current, src];
-    return idx;
+    const result = registerImageGroupItem(imagesRef.current, src);
+    imagesRef.current = result.items;
+    return result.index;
   }, []);
   const unregister = useCallback((src) => {
-    imagesRef.current = imagesRef.current.filter((s) => s !== src);
+    imagesRef.current = unregisterImageGroupItem(imagesRef.current, src);
   }, []);
   const openPreview = useCallback(
     (index) => {
@@ -33,7 +34,7 @@ var ImageGroup = ({
     () => ({ register, unregister, openPreview }),
     [register, unregister, openPreview]
   );
-  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: className || "tiger-image-group", role: "group", children: [
+  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: getImageGroupClasses(className), role: "group", children: [
     children,
     preview && /* @__PURE__ */ jsx(
       ImagePreview,

package/dist/{chunk-QAO5KANE.mjs → chunk-TULQETJ5.mjs}

@@ -1,5 +1,5 @@
 import { createContext, useMemo } from 'react';
-import { classNames, getAlignClasses, getJustifyClasses, getGutterStyles } from '@expcat/tigercat-core';
+import { classNames, getRowGutterClasses, getAlignClasses, getJustifyClasses, getRowGutterStyleVars } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Row.tsx
@@ -19,14 +19,15 @@ var Row = ({
       "flex",
       "w-full",
       wrap && "flex-wrap",
+      getRowGutterClasses(gutter),
       getAlignClasses(align),
       getJustifyClasses(justify),
       className
     ),
-    [wrap, align, justify, className]
+    [gutter, wrap, align, justify, className]
   );
   const mergedStyle = useMemo(
-    () => ({ ...getGutterStyles(gutter).rowStyle, ...style }),
+    () => ({ ...getRowGutterStyleVars(gutter), ...style }),
     [gutter, style]
   );
   const contextValue = useMemo(() => ({ gutter }), [gutter]);

package/dist/{chunk-4APNERYR.js → chunk-U356F7GU.js}

@@ -61,9 +61,7 @@ var AutoComplete = (props) => {
   function openDropdown() {
     if (disabled) return;
     setIsOpen(true);
-    if (defaultActiveFirstOption && filteredOptions.length > 0) {
-      setActiveIndex(0);
-    }
+    setActiveIndex(tigercatCore.getInitialPickerActiveIndex(filteredOptions, defaultActiveFirstOption));
   }
   function closeDropdown() {
     setIsOpen(false);
@@ -79,7 +77,7 @@ var AutoComplete = (props) => {
     }
     if (defaultActiveFirstOption) {
       const newFiltered = tigercatCore.filterAutoCompleteOptions(options, val, filterOption);
-      setActiveIndex(newFiltered.length > 0 ? 0 : -1);
+      setActiveIndex(tigercatCore.getInitialPickerActiveIndex(newFiltered, true));
     }
   }
   function handleSelect(option) {
@@ -105,24 +103,11 @@ var AutoComplete = (props) => {
     }
     switch (e.key) {
       case "ArrowDown":
-        e.preventDefault();
-        if (filteredOptions.length > 0) {
-          setActiveIndex((prev) => {
-            let next = prev + 1;
-            while (next < filteredOptions.length && filteredOptions[next].disabled) next++;
-            return next < filteredOptions.length ? next : prev;
-          });
-        }
-        break;
       case "ArrowUp":
+      case "Home":
+      case "End":
         e.preventDefault();
-        if (filteredOptions.length > 0) {
-          setActiveIndex((prev) => {
-            let p = prev - 1;
-            while (p >= 0 && filteredOptions[p].disabled) p--;
-            return p >= 0 ? p : prev;
-          });
-        }
+        setActiveIndex((prev) => tigercatCore.getPickerNavigationIndex(filteredOptions, prev, e.key));
         break;
       case "Enter":
         e.preventDefault();
@@ -157,11 +142,7 @@ var AutoComplete = (props) => {
         value: inputValue,
         placeholder,
         disabled,
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-controls": isOpen ? listboxId : void 0,
-        "aria-activedescendant": isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0,
+        ...tigercatCore.getPickerComboboxAria({ expanded: isOpen, listboxId, activeIndex }),
         autoComplete: "off",
         onChange: handleInput,
         onFocus: openDropdown,
@@ -187,13 +168,14 @@ var AutoComplete = (props) => {
         )
       }
     ),
-    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { id: listboxId, role: "listbox", className: tigercatCore.autoCompleteDropdownClasses, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { ...tigercatCore.getPickerListboxAria({ id: listboxId }), className: tigercatCore.autoCompleteDropdownClasses, children: filteredOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        id: `${listboxId}-option-${index}`,
-        role: "option",
-        "aria-selected": String(option.value) === String(value),
-        "aria-disabled": option.disabled,
+        id: tigercatCore.getPickerOptionId(listboxId, index),
+        ...tigercatCore.getPickerOptionAria({
+          selected: String(option.value) === String(value),
+          disabled: !!option.disabled
+        }),
         className: tigercatCore.getAutoCompleteOptionClasses(
           String(option.value) === String(value),
           !!option.disabled,

package/dist/{chunk-AGR3FM3V.js → chunk-UB6SHKPR.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var chunkKNBNE74O_js = require('./chunk-KNBNE74O.js');
+var chunkACQLSECT_js = require('./chunk-ACQLSECT.js');
 var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
 var ImageGroupContext = react.createContext(null);
@@ -15,12 +16,12 @@ var ImageGroup = ({
   const [previewIndex, setPreviewIndex] = react.useState(0);
   const imagesRef = react.useRef([]);
   const register = react.useCallback((src) => {
-    const idx = imagesRef.current.length;
-    imagesRef.current = [...imagesRef.current, src];
-    return idx;
+    const result = tigercatCore.registerImageGroupItem(imagesRef.current, src);
+    imagesRef.current = result.items;
+    return result.index;
   }, []);
   const unregister = react.useCallback((src) => {
-    imagesRef.current = imagesRef.current.filter((s) => s !== src);
+    imagesRef.current = tigercatCore.unregisterImageGroupItem(imagesRef.current, src);
   }, []);
   const openPreview = react.useCallback(
     (index) => {
@@ -35,10 +36,10 @@ var ImageGroup = ({
     () => ({ register, unregister, openPreview }),
     [register, unregister, openPreview]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: className || "tiger-image-group", role: "group", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.getImageGroupClasses(className), role: "group", children: [
     children,
     preview && /* @__PURE__ */ jsxRuntime.jsx(
-      chunkKNBNE74O_js.ImagePreview,
+      chunkACQLSECT_js.ImagePreview,
       {
         open: previewVisible,
         images: imagesRef.current,

package/dist/{chunk-Z6F67MJE.mjs → chunk-UBP7HZSU.mjs}

@@ -54,9 +54,9 @@ var ChartLegend = ({
           {
             type: interactive ? "button" : void 0,
             className: classNames(
-              "flex items-center gap-2 text-sm",
+              "flex items-center gap-2 text-sm rounded-[var(--tiger-chart-legend-row-radius,0)]",
               "text-[color:var(--tiger-text-secondary,#6b7280)]",
-              interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] transition-colors" : "cursor-default",
+              interactive ? "cursor-pointer hover:text-[color:var(--tiger-text,#374151)] hover:bg-[var(--tiger-chart-legend-row-hover-bg,transparent)] transition-colors" : "cursor-default",
               item.active === false ? "opacity-50" : void 0
             ),
             role: "listitem",
@@ -72,7 +72,8 @@ var ChartLegend = ({
                   style: {
                     width: `${markerSize}px`,
                     height: `${markerSize}px`,
-                    backgroundColor: item.color
+                    background: `var(--tiger-chart-legend-marker-image, ${item.color})`,
+                    "--tiger-chart-legend-marker-color": item.color
                   },
                   "aria-hidden": "true",
                   "data-legend-marker": "true"

package/dist/{chunk-HZ5Z5Y2J.mjs → chunk-UJ5NMLZN.mjs}

@@ -1,5 +1,5 @@
 import { useId, useState, useRef, useMemo, useEffect } from 'react';
-import { filterOptions, flattenSelectOptions, getSelectTriggerClasses, classNames, selectBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, selectDropdownBaseClasses, selectSearchInputClasses, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses, checkSolidIcon20PathD } from '@expcat/tigercat-core';
+import { filterOptions, flattenSelectOptions, findFirstEnabledIndex, getSelectTriggerClasses, classNames, selectBaseClasses, icon20ViewBox, closeSolidIcon20PathD, chevronDownSolidIcon20PathD, selectDropdownBaseClasses, selectSearchInputClasses, findNextEnabledIndex, findLastEnabledIndex, selectEmptyStateClasses, isOptionGroup, selectGroupLabelClasses, getSelectOptionClasses, checkSolidIcon20PathD } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Select.tsx
@@ -83,27 +83,9 @@ var Select = (props) => {
     return props.value === option.value;
   };
   const getOptionId = (index) => `tiger-select-option-${instanceId}-${index}`;
-  const findFirstEnabledIndex = () => flatFilteredOptions.findIndex((opt) => !opt.disabled);
-  const findLastEnabledIndex = () => {
-    for (let i = flatFilteredOptions.length - 1; i >= 0; i--) {
-      if (!flatFilteredOptions[i]?.disabled) {
-        return i;
-      }
-    }
-    return -1;
-  };
-  const findNextEnabledIndex = (current, direction) => {
-    if (flatFilteredOptions.length === 0) {
-      return -1;
-    }
-    const start = current < 0 ? direction === 1 ? 0 : flatFilteredOptions.length - 1 : current + direction;
-    for (let i = start; i >= 0 && i < flatFilteredOptions.length; i += direction) {
-      if (!flatFilteredOptions[i]?.disabled) {
-        return i;
-      }
-    }
-    return current;
-  };
+  const findFirstEnabledIndex$1 = () => findFirstEnabledIndex(flatFilteredOptions);
+  const findLastEnabledIndex$1 = () => findLastEnabledIndex(flatFilteredOptions);
+  const findNextEnabledIndex$1 = (current, direction) => findNextEnabledIndex(flatFilteredOptions, current, direction);
   const focusOptionAt = (index) => {
     if (index < 0) {
       return;
@@ -181,7 +163,7 @@ var Select = (props) => {
           setIsOpen(true);
           return;
         }
-        const next = findNextEnabledIndex(activeIndex, 1);
+        const next = findNextEnabledIndex$1(activeIndex, 1);
         setActiveAndFocus(next);
         return;
       }
@@ -191,7 +173,7 @@ var Select = (props) => {
           setIsOpen(true);
           return;
         }
-        const next = findNextEnabledIndex(activeIndex, -1);
+        const next = findNextEnabledIndex$1(activeIndex, -1);
         setActiveAndFocus(next);
         return;
       }
@@ -220,25 +202,25 @@ var Select = (props) => {
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
-        const next = findNextEnabledIndex(activeIndex, 1);
+        const next = findNextEnabledIndex$1(activeIndex, 1);
         setActiveAndFocus(next);
         return;
       }
       case "ArrowUp": {
         event.preventDefault();
-        const next = findNextEnabledIndex(activeIndex, -1);
+        const next = findNextEnabledIndex$1(activeIndex, -1);
         setActiveAndFocus(next);
         return;
       }
       case "Home": {
         event.preventDefault();
-        const next = findFirstEnabledIndex();
+        const next = findFirstEnabledIndex$1();
         setActiveAndFocus(next);
         return;
       }
       case "End": {
         event.preventDefault();
-        const next = findLastEnabledIndex();
+        const next = findLastEnabledIndex$1();
         setActiveAndFocus(next);
         return;
       }
@@ -271,14 +253,14 @@ var Select = (props) => {
       case "ArrowDown": {
         event.preventDefault();
         event.stopPropagation();
-        const next = activeIndex >= 0 ? activeIndex : findFirstEnabledIndex();
+        const next = activeIndex >= 0 ? activeIndex : findFirstEnabledIndex$1();
         setActiveAndFocus(next);
         return;
       }
       case "ArrowUp": {
         event.preventDefault();
         event.stopPropagation();
-        const next = activeIndex >= 0 ? activeIndex : findLastEnabledIndex();
+        const next = activeIndex >= 0 ? activeIndex : findLastEnabledIndex$1();
         setActiveAndFocus(next);
         return;
       }
@@ -328,7 +310,7 @@ var Select = (props) => {
       }
       return flatFilteredOptions.findIndex((opt) => opt.value === value && !opt.disabled);
     })();
-    const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex();
+    const nextActive = selectedIndex >= 0 ? selectedIndex : findFirstEnabledIndex$1();
     setActiveIndex(nextActive);
     if (!searchable) {
       focusOptionAt(nextActive);

package/dist/chunk-UKLVOR4E.js

@@ -0,0 +1,67 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ChartCanvas.tsx
+var ChartCanvas = ({
+  width = 320,
+  height = 200,
+  responsive = false,
+  padding = 24,
+  className,
+  title,
+  desc,
+  children,
+  ...props
+}) => {
+  const svgRef = react.useRef(null);
+  const [observedSize, setObservedSize] = react.useState(null);
+  const resizeControllerRef = react.useRef(
+    tigercatCore.createChartResizeObserverController({
+      onSizeChange: setObservedSize
+    })
+  );
+  const resolvedSize = react.useMemo(
+    () => tigercatCore.resolveResponsiveChartSize({ width, height }, responsive ? observedSize : null),
+    [width, height, responsive, observedSize]
+  );
+  const innerRect = react.useMemo(
+    () => tigercatCore.getChartInnerRect(resolvedSize.width, resolvedSize.height, padding),
+    [resolvedSize.width, resolvedSize.height, padding]
+  );
+  const svgClasses = react.useMemo(() => tigercatCore.classNames(tigercatCore.chartCanvasBaseClasses, className), [className]);
+  react.useEffect(() => {
+    const controller = resizeControllerRef.current;
+    if (!responsive) {
+      controller.disconnect();
+      setObservedSize(null);
+      return void 0;
+    }
+    const target = svgRef.current?.parentElement;
+    if (!target) return void 0;
+    controller.observe(target);
+    return () => controller.disconnect();
+  }, [responsive]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ...props,
+      ref: svgRef,
+      width: resolvedSize.width,
+      height: resolvedSize.height,
+      viewBox: `0 0 ${resolvedSize.width} ${resolvedSize.height}`,
+      className: svgClasses,
+      children: [
+        title ? /* @__PURE__ */ jsxRuntime.jsx("title", { children: title }) : null,
+        desc ? /* @__PURE__ */ jsxRuntime.jsx("desc", { children: desc }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${innerRect.x}, ${innerRect.y})`, children })
+      ]
+    }
+  );
+};
+var ChartCanvas_default = ChartCanvas;
+
+exports.ChartCanvas = ChartCanvas;
+exports.ChartCanvas_default = ChartCanvas_default;