@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/{chunk-ZDL3GE3Q.mjs → chunk-VM4ZQHT5.mjs}

@@ -1,14 +1,47 @@
-import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
-import { ChartLegend } from './chunk-Z6F67MJE.mjs';
-import { ChartSeries } from './chunk-SDLMB34Y.mjs';
-import { ChartTooltip } from './chunk-LVC43YX2.mjs';
-import { ChartAxis } from './chunk-RQSQXQN6.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
-import { ChartGrid } from './chunk-677VSTPW.mjs';
-import { useState, useMemo, useCallback } from 'react';
-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';
+import {
+  useChartInteraction
+} from "./chunk-6QML6T3Y.mjs";
+import {
+  ChartLegend
+} from "./chunk-UBP7HZSU.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
+import {
+  ChartTooltip
+} from "./chunk-NASC6XHN.mjs";
+import {
+  ChartAxis
+} from "./chunk-RQSQXQN6.mjs";
+import {
+  ChartCanvas
+} from "./chunk-DKNVSQSV.mjs";
+import {
+  ChartGrid
+} from "./chunk-677VSTPW.mjs";
 
+// src/components/AreaChart.tsx
+import { useId, useMemo, useState, useCallback } from "react";
+import {
+  classNames,
+  createAreaPath,
+  createLinearScale,
+  createLinePath,
+  createPointScale,
+  getChartElementOpacity,
+  getChartInnerRect,
+  getStableChartGradientPrefix,
+  getNumberExtent,
+  linePointTransitionClasses,
+  stackSeriesData,
+  resolveChartPalette,
+  buildChartLegendItems,
+  buildChartSeriesKeys,
+  resolveMultiSeriesTooltipContent,
+  resolveSeriesData,
+  defaultSeriesXYTooltipFormatter
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var AreaChart = ({
   width = 320,
   height = 200,
@@ -52,9 +85,11 @@ var AreaChart = ({
   legendMarkerSize = 10,
   legendGap = 8,
   showTooltip = true,
-  gradient = false,
+  gradient = true,
   animated = false,
   pointHollow = false,
+  strokeGradient = false,
+  pointGradient = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -69,7 +104,11 @@ var AreaChart = ({
 }) => {
   const [hoveredPointInfo, setHoveredPointInfo] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-  const gradientPrefix = useMemo(() => getAreaGradientPrefix(), []);
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("area", gradientId),
+    [gradientId]
+  );
   const innerRect = useMemo(
     () => getChartInnerRect(width, height, padding),
     [width, height, padding]
@@ -136,9 +175,14 @@ var AreaChart = ({
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const seriesKeys = useMemo(
+    () => buildChartSeriesKeys(resolvedSeries, { prefix: "area-" }),
+    [resolvedSeries]
+  );
   const seriesData = useMemo(() => {
     const stackedData = stacked ? stackSeriesData(resolvedSeries.map((s) => s.data)) : null;
     return resolvedSeries.map((s, seriesIndex) => {
+      const seriesKey = seriesKeys[seriesIndex];
       const color = s.color ?? palette[seriesIndex % palette.length];
       const seriesFillColor = s.fillColor ?? color;
       const seriesFillOpacity = s.fillOpacity ?? fillOpacity;
@@ -179,6 +223,7 @@ var AreaChart = ({
       return {
         series: s,
         seriesIndex,
+        seriesKey,
         color,
         fillColor: seriesFillColor,
         fillOpacity: seriesFillOpacity,
@@ -196,6 +241,7 @@ var AreaChart = ({
     });
   }, [
     resolvedSeries,
+    seriesKeys,
     palette,
     resolvedXScale,
     resolvedYScale,
@@ -272,20 +318,23 @@ var AreaChart = ({
       desc,
       className: classNames(className),
       children: [
-        (gradient || animated) && /* @__PURE__ */ jsxs("defs", { children: [
+        (gradient || animated || strokeGradient || pointGradient) && /* @__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;
+                animation: tiger-area-draw var(--tiger-motion-duration-slow,1.2s) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)) forwards;
               }
               @keyframes tiger-area-draw {
                 from { stroke-dashoffset: 1; }
                 to { stroke-dashoffset: 0; }
               }
+              @media (prefers-reduced-motion: reduce) {
+                .tiger-area-animated { animation-duration: 0ms; }
+              }
             ` }),
           gradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxs(
             "linearGradient",
             {
-              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              id: `${gradientPrefix}-${sd.seriesKey}`,
               x1: "0",
               y1: "0",
               x2: "0",
@@ -295,7 +344,44 @@ var AreaChart = ({
                 /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: sd.fillColor, stopOpacity: 0.02 })
               ]
             },
-            `area-grad-${sd.seriesIndex}`
+            `area-grad-${sd.seriesKey}`
+          )),
+          pointGradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              id: `${gradientPrefix}-point-${sd.seriesKey}`,
+              cx: "0.5",
+              cy: "0.5",
+              r: "0.5",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 30%)` }),
+                /* @__PURE__ */ jsx("stop", { offset: "70%", stopColor: sd.color }),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: "100%",
+                    stopColor: `color-mix(in oklab, ${sd.color} 100%, black 12%)`
+                  }
+                )
+              ]
+            },
+            `point-grad-${sd.seriesKey}`
+          )),
+          strokeGradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-stroke-${sd.seriesKey}`,
+              x1: "0",
+              y1: "0",
+              x2: "1",
+              y2: "0",
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: `color-mix(in oklab, ${sd.color} 100%, white 12%)` }),
+                /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: sd.color }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: `color-mix(in oklab, ${sd.color} 100%, black 8%)` })
+              ]
+            },
+            `stroke-grad-${sd.seriesKey}`
           ))
         ] }),
         showGrid && /* @__PURE__ */ jsx(
@@ -342,6 +428,7 @@ var AreaChart = ({
             name: sd.series.name,
             type: "area",
             opacity: sd.opacity,
+            "data-series-key": sd.seriesKey,
             className: classNames(
               sd.series.className,
               (hoverable || selectable) && "cursor-pointer",
@@ -357,11 +444,12 @@ var AreaChart = ({
                 "path",
                 {
                   d: sd.areaPath,
-                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesIndex})` : sd.fillColor,
+                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesKey})` : sd.fillColor,
                   fillOpacity: gradient ? 1 : sd.fillOpacity,
                   stroke: "none",
                   className: "transition-opacity duration-300",
-                  "data-area-series": sd.seriesIndex
+                  "data-area-series": sd.seriesIndex,
+                  "data-series-key": sd.seriesKey
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -369,7 +457,7 @@ var AreaChart = ({
                 {
                   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,
@@ -377,17 +465,17 @@ var AreaChart = ({
                   strokeLinejoin: "round",
                   pathLength: animated ? 1 : void 0,
                   className: classNames(
-                    "transition-opacity duration-200",
+                    "transition-opacity [transition-duration:var(--tiger-motion-duration-base,200ms)]",
                     animated && "tiger-area-animated"
                   )
                 }
               )
             ]
           },
-          `series-${sd.seriesIndex}`
+          sd.seriesKey
         )),
         seriesData.map(
-          (sd) => sd.showPoints && /* @__PURE__ */ jsx("g", { opacity: sd.opacity, children: sd.points.map((point) => {
+          (sd) => sd.showPoints && /* @__PURE__ */ jsx("g", { opacity: sd.opacity, "data-series-key": sd.seriesKey, children: sd.points.map((point) => {
             const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
             const hoverSize = sd.pointSize + 2;
             return /* @__PURE__ */ jsx(
@@ -396,12 +484,13 @@ var AreaChart = ({
                 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: 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,
@@ -410,9 +499,9 @@ var AreaChart = ({
                   handlePointClick(sd.seriesIndex, point.pointIndex);
                 }
               },
-              `point-${sd.seriesIndex}-${point.pointIndex}`
+              `point-${sd.seriesKey}-${point.pointIndex}`
             );
-          }) }, `points-${sd.seriesIndex}`)
+          }) }, `points-${sd.seriesKey}`)
         )
       ]
     }
@@ -452,4 +541,7 @@ var AreaChart = ({
 };
 var AreaChart_default = AreaChart;
 
-export { AreaChart, AreaChart_default };
+export {
+  AreaChart,
+  AreaChart_default
+};

package/dist/{chunk-UE234MW4.mjs → chunk-VNVGSPBI.mjs}

@@ -1,8 +1,44 @@
-import { useState, useRef, useEffect, useMemo } from 'react';
-import { parseTime, getTimePickerLabels, getTimePeriodLabels, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, classNames, timePickerInputWrapperClasses, timePickerClearButtonClasses, TimePickerCloseIconPath, ClockIconPath, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, timePickerBaseClasses, to12HourFormat, isTimeInRange, formatTime, getCurrentTime, icon20ViewBox } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
 // src/components/TimePicker.tsx
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import {
+  classNames,
+  icon20ViewBox,
+  parseTime,
+  formatTime,
+  formatTimeDisplayWithLocale,
+  getTimePeriodLabels,
+  getTimePickerLabels,
+  getTimePickerOptionAriaLabel,
+  to12HourFormat,
+  to24HourFormat,
+  isTimeInRange,
+  generateHours,
+  generateMinutes,
+  generateSeconds,
+  getCurrentTime,
+  padTwo,
+  timePickerBaseClasses,
+  timePickerInputWrapperClasses,
+  getTimePickerInputClasses,
+  getTimePickerIconButtonClasses,
+  timePickerClearButtonClasses,
+  timePickerPanelClasses,
+  timePickerDesktopPanelContentClasses,
+  timePickerMobileWheelClasses,
+  timePickerMobileWheelSelectClasses,
+  timePickerRangeHeaderClasses,
+  getTimePickerRangeTabButtonClasses,
+  timePickerColumnClasses,
+  timePickerColumnHeaderClasses,
+  timePickerColumnListClasses,
+  getTimePickerItemClasses,
+  getTimePickerPeriodButtonClasses,
+  timePickerFooterClasses,
+  timePickerFooterButtonClasses,
+  ClockIconPath,
+  TimePickerCloseIconPath
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Icon = ({ path, className }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -78,7 +114,7 @@ var TimePicker = (allProps) => {
   const [selectedMinutes, setSelectedMinutes] = useState(parsedTime?.minutes ?? 0);
   const [selectedSeconds, setSelectedSeconds] = useState(parsedTime?.seconds ?? 0);
   const [selectedPeriod, setSelectedPeriod] = useState("AM");
-  const syncFromActiveValue = () => {
+  const syncFromActiveValue = useCallback(() => {
     const parsed = parseTime(activeValue);
     if (!parsed) return;
     setSelectedHours(parsed.hours);
@@ -88,10 +124,10 @@ var TimePicker = (allProps) => {
       const { period } = to12HourFormat(parsed.hours);
       setSelectedPeriod(period);
     }
-  };
+  }, [activeValue, format]);
   useEffect(() => {
     syncFromActiveValue();
-  }, [activeValue, format, activePart, isRangeMode]);
+  }, [syncFromActiveValue]);
   const labels = useMemo(
     () => getTimePickerLabels(locale, labelsOverrides),
     [locale, labelsOverrides]
@@ -422,7 +458,52 @@ var TimePicker = (allProps) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: timePickerPanelContentClasses, children: [
+          /* @__PURE__ */ jsxs("div", { className: timePickerMobileWheelClasses, children: [
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: format === "12" ? to12HourFormat(selectedHours).hours : selectedHours,
+                "aria-label": labels.hour,
+                onChange: (event) => selectHour(Number(event.target.value)),
+                children: hoursList.map((hour) => /* @__PURE__ */ jsx("option", { value: hour, disabled: isHourDisabled(hour), children: padTwo(hour) }, hour))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: selectedMinutes,
+                "aria-label": labels.minute,
+                onChange: (event) => selectMinute(Number(event.target.value)),
+                children: minutesList.map((minute) => /* @__PURE__ */ jsx("option", { value: minute, disabled: isMinuteDisabled(minute), children: padTwo(minute) }, minute))
+              }
+            ),
+            showSeconds && /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: selectedSeconds,
+                "aria-label": labels.second,
+                onChange: (event) => selectSecond(Number(event.target.value)),
+                children: secondsList.map((second) => /* @__PURE__ */ jsx("option", { value: second, children: padTwo(second) }, second))
+              }
+            ),
+            format === "12" && /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: selectedPeriod,
+                "aria-label": "Period",
+                onChange: (event) => selectPeriod(event.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "AM", children: periodLabels.am }),
+                  /* @__PURE__ */ jsx("option", { value: "PM", children: periodLabels.pm })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: timePickerDesktopPanelContentClasses, children: [
             /* @__PURE__ */ jsxs("div", { className: timePickerColumnClasses, children: [
               /* @__PURE__ */ jsx("div", { className: timePickerColumnHeaderClasses, children: labels.hour }),
               /* @__PURE__ */ jsx("div", { className: timePickerColumnListClasses, children: hoursList.map((hour) => {
@@ -444,7 +525,7 @@ var TimePicker = (allProps) => {
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: hour.toString().padStart(2, "0")
+                    children: padTwo(hour)
                   },
                   hour
                 );
@@ -470,7 +551,7 @@ var TimePicker = (allProps) => {
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: minute.toString().padStart(2, "0")
+                    children: padTwo(minute)
                   },
                   minute
                 );
@@ -494,7 +575,7 @@ var TimePicker = (allProps) => {
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: second.toString().padStart(2, "0")
+                    children: padTwo(second)
                   },
                   second
                 );
@@ -540,4 +621,6 @@ var TimePicker = (allProps) => {
   ] });
 };
 
-export { TimePicker };
+export {
+  TimePicker
+};

package/dist/{chunk-JUWFVIDP.mjs → chunk-VVNFXJMN.mjs}

@@ -1,8 +1,22 @@
-import { useCollapseContext } from './chunk-Y6557RWE.mjs';
-import { useMemo, useCallback } from 'react';
-import { isPanelActive, classNames, getCollapsePanelClasses, getCollapsePanelHeaderClasses, getCollapseIconClasses, collapseHeaderTextClasses, collapsePanelContentWrapperClasses, collapsePanelContentBaseClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  useCollapseContext
+} from "./chunk-Y6557RWE.mjs";
 
+// src/components/CollapsePanel.tsx
+import { useMemo, useCallback, useLayoutEffect, useRef } from "react";
+import {
+  classNames,
+  getCollapsePanelClasses,
+  getCollapsePanelHeaderClasses,
+  getCollapseIconClasses,
+  createCollapseTransitionController,
+  getInitialCollapseContentStyle,
+  collapseHeaderTextClasses,
+  collapsePanelContentWrapperClasses,
+  collapsePanelContentBaseClasses,
+  isPanelActive
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var CollapsePanel = ({
   panelKey,
   header,
@@ -14,12 +28,22 @@ var CollapsePanel = ({
   children
 }) => {
   const collapseContext = useCollapseContext();
+  const contentRef = useRef(null);
+  const transitionControllerRef = useRef(null);
+  const initialContentStyleRef = useRef(getInitialCollapseContentStyle(false));
+  const initialActiveRef = useRef(null);
   if (!collapseContext) {
     throw new Error("CollapsePanel must be used within a Collapse component");
   }
   const isActive = useMemo(() => {
     return isPanelActive(panelKey, collapseContext.activeKeys);
   }, [panelKey, collapseContext.activeKeys]);
+  if (initialActiveRef.current === null) {
+    initialActiveRef.current = isActive;
+  }
+  if (!transitionControllerRef.current) {
+    initialContentStyleRef.current = getInitialCollapseContentStyle(initialActiveRef.current);
+  }
   const panelClasses = useMemo(() => {
     return classNames(getCollapsePanelClasses(collapseContext.ghost, className));
   }, [collapseContext.ghost, className]);
@@ -33,7 +57,7 @@ var CollapsePanel = ({
     if (!disabled) {
       collapseContext.handlePanelClick(panelKey);
     }
-  }, [disabled, collapseContext.handlePanelClick, panelKey]);
+  }, [disabled, collapseContext, panelKey]);
   const handleKeyDown = useCallback(
     (event) => {
       if (disabled) {
@@ -44,8 +68,22 @@ var CollapsePanel = ({
         collapseContext.handlePanelClick(panelKey);
       }
     },
-    [disabled, collapseContext.handlePanelClick, panelKey]
+    [disabled, collapseContext, panelKey]
   );
+  useLayoutEffect(() => {
+    if (!contentRef.current) return void 0;
+    const controller = createCollapseTransitionController(contentRef.current, {
+      expanded: initialActiveRef.current ?? false
+    });
+    transitionControllerRef.current = controller;
+    return () => {
+      transitionControllerRef.current = null;
+      controller.dispose();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    transitionControllerRef.current?.update(isActive);
+  }, [isActive]);
   const arrowIcon = /* @__PURE__ */ jsx(
     "svg",
     {
@@ -89,11 +127,10 @@ var CollapsePanel = ({
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref: contentRef,
+        "data-tiger-collapse-content": "",
         className: collapsePanelContentWrapperClasses,
-        style: {
-          maxHeight: isActive ? "none" : "0",
-          opacity: isActive ? "1" : "0"
-        },
+        style: initialContentStyleRef.current,
         children: /* @__PURE__ */ jsx("div", { className: collapsePanelContentBaseClasses, children })
       }
     )
@@ -101,4 +138,7 @@ var CollapsePanel = ({
 };
 var CollapsePanel_default = CollapsePanel;
 
-export { CollapsePanel, CollapsePanel_default };
+export {
+  CollapsePanel,
+  CollapsePanel_default
+};

package/dist/chunk-W3VLCSJL.js

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Container.tsx
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Container = ({
+  maxWidth = false,
+  center = true,
+  padding = true,
+  children,
+  className,
+  as: Component = "div",
+  ...props
+}) => {
+  const containerClasses = _tigercatcore.getContainerClasses.call(void 0, {
+    maxWidth,
+    center,
+    padding,
+    className
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { ...props, className: containerClasses, children });
+};
+
+
+
+exports.Container = Container;