@expcat/tigercat-react 0.2.27 → 0.3.69

package/dist/{chunk-C52ZCGYG.mjs → chunk-6PXNWGR5.mjs}

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useId, useMemo, useState, useCallback } from 'react';
-import { classNames, getTabsContainerClasses, getTabNavClasses, getTabNavListClasses, tabContentBaseClasses, isKeyActive, getTabItemClasses, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD, closeIconPathStrokeWidth, closeIconPathStrokeLinejoin, closeIconPathStrokeLinecap, tabAddButtonClasses } from '@expcat/tigercat-core';
+import { classNames, getTabsContainerClasses, getTabNavClasses, getTabNavListClasses, isKeyActive, getTabItemClasses, getTabPaneClasses, tabCloseButtonClasses, closeIconViewBox, closeIconPathD, tabAddButtonClasses, tabContentBaseClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/TabPane.tsx
@@ -37,39 +37,26 @@ var Tabs = ({
   const tabNavListClasses = useMemo(() => {
     return getTabNavListClasses(tabPosition, centered);
   }, [tabPosition, centered]);
-  const tabContentClasses = useMemo(() => {
-    return tabContentBaseClasses;
-  }, []);
   const { tabItems, tabPanes, firstTabKey } = useMemo(() => {
     const items = [];
     const panes = [];
     let firstKey;
-    const childrenArray = [];
     React.Children.forEach(children, (child) => {
-      if (React.isValidElement(child) && child.type === TabPane) {
-        childrenArray.push(child);
-      }
-    });
-    const resolvedFirstKey = childrenArray[0]?.props.tabKey;
-    if (resolvedFirstKey !== void 0) {
-      firstKey = resolvedFirstKey;
-    }
-    const resolvedActiveKey = controlledActiveKey !== void 0 ? controlledActiveKey : defaultActiveKey !== void 0 ? defaultActiveKey : firstKey;
-    childrenArray.forEach((child) => {
-      if (React.isValidElement(child) && child.type === TabPane) {
-        const key = child.props.tabKey;
-        const tabId = `${idBase}-tab-${String(key)}`;
-        const panelId = `${idBase}-panel-${String(key)}`;
-        items.push(
-          React.cloneElement(child, {
-            renderMode: "tab",
-            tabId,
-            panelId,
-            tabIndex: key === resolvedActiveKey ? 0 : -1
-          })
-        );
-        panes.push(React.cloneElement(child, { renderMode: "pane", tabId, panelId }));
-      }
+      if (!React.isValidElement(child) || child.type !== TabPane) return;
+      const key = child.props.tabKey;
+      if (firstKey === void 0) firstKey = key;
+      const resolvedActiveKey = controlledActiveKey ?? defaultActiveKey ?? firstKey;
+      const tabId = `${idBase}-tab-${String(key)}`;
+      const panelId = `${idBase}-panel-${String(key)}`;
+      items.push(
+        React.cloneElement(child, {
+          renderMode: "tab",
+          tabId,
+          panelId,
+          tabIndex: key === resolvedActiveKey ? 0 : -1
+        })
+      );
+      panes.push(React.cloneElement(child, { renderMode: "pane", tabId, panelId }));
     });
     return { tabItems: items, tabPanes: panes, firstTabKey: firstKey };
   }, [children, controlledActiveKey, defaultActiveKey, idBase]);
@@ -121,38 +108,35 @@ var Tabs = ({
       handleTabClose
     ]
   );
-  const tabNavContent = /* @__PURE__ */ jsx("div", { className: tabNavClasses, role: "tablist", children: /* @__PURE__ */ jsxs("div", { className: tabNavListClasses, children: [
-    tabItems,
-    type === "editable-card" && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: tabAddButtonClasses,
-        onClick: handleTabAdd,
-        "aria-label": "Add tab",
-        children: "+"
-      }
-    )
-  ] }) });
-  const tabContent = /* @__PURE__ */ jsx("div", { className: tabContentClasses, children: tabPanes });
-  let content;
-  if (tabPosition === "left" || tabPosition === "right") {
-    content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      tabNavContent,
-      tabContent
-    ] });
-  } else if (tabPosition === "bottom") {
-    content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      tabContent,
-      tabNavContent
-    ] });
-  } else {
-    content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      tabNavContent,
-      tabContent
-    ] });
-  }
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, style, children: content }) });
+  const tabNavContent = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tabNavClasses,
+      role: "tablist",
+      "aria-orientation": tabPosition === "left" || tabPosition === "right" ? "vertical" : "horizontal",
+      children: /* @__PURE__ */ jsxs("div", { className: tabNavListClasses, children: [
+        tabItems,
+        type === "editable-card" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: tabAddButtonClasses,
+            onClick: handleTabAdd,
+            "aria-label": "Add tab",
+            children: "+"
+          }
+        )
+      ] })
+    }
+  );
+  const tabContent = /* @__PURE__ */ jsx("div", { className: tabContentBaseClasses, children: tabPanes });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: containerClasses, style, children: tabPosition === "bottom" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    tabContent,
+    tabNavContent
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    tabNavContent,
+    tabContent
+  ] }) }) });
 };
 var TabPane = ({
   tabKey,
@@ -179,7 +163,7 @@ var TabPane = ({
     return closable !== void 0 ? closable : tabsContext.closable && tabsContext.type === "editable-card";
   }, [closable, tabsContext.closable, tabsContext.type]);
   const tabItemClasses = useMemo(() => {
-    return classNames(getTabItemClasses(isActive, disabled, tabsContext.type, tabsContext.size));
+    return getTabItemClasses(isActive, disabled, tabsContext.type, tabsContext.size);
   }, [isActive, disabled, tabsContext.type, tabsContext.size]);
   const tabPaneClasses = useMemo(() => {
     return classNames(getTabPaneClasses(isActive), className);
@@ -280,9 +264,9 @@ var TabPane = ({
               children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: closeIconViewBox, children: /* @__PURE__ */ jsx(
                 "path",
                 {
-                  strokeLinecap: closeIconPathStrokeLinecap,
-                  strokeLinejoin: closeIconPathStrokeLinejoin,
-                  strokeWidth: closeIconPathStrokeWidth,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
                   d: closeIconPathD
                 }
               ) })

package/dist/{chunk-P273E6XE.js → chunk-72MWKUBC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkJW64IJP2_js = require('./chunk-JW64IJP2.js');
+var chunkXWRJVNB6_js = require('./chunk-XWRJVNB6.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -9,6 +9,21 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+function hasRequiredRule(maybeRules) {
+  if (!maybeRules) return false;
+  const ruleArr = Array.isArray(maybeRules) ? maybeRules : [maybeRules];
+  return ruleArr.some((rule) => !!rule && typeof rule === "object" && !!rule.required);
+}
+function mergeAriaDescribedBy(existing, next) {
+  if (!existing) return next;
+  if (!next) return existing;
+  const parts = new Set(
+    `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
+  );
+  return Array.from(parts).join(" ");
+}
+var FIELD_CLASSES = tigercatCore.getFormItemFieldClasses();
+var ASTERISK_CLASSES = tigercatCore.getFormItemAsteriskClasses();
 var FormItem = ({
   name,
   label,
@@ -21,28 +36,15 @@ var FormItem = ({
   children,
   className
 }) => {
-  const formContext = chunkJW64IJP2_js.useFormContext();
+  const formContext = chunkXWRJVNB6_js.useFormContext();
   const [errorMessage, setErrorMessage] = React.useState("");
+  const [shakeTrigger, setShakeTrigger] = React.useState(0);
+  const prevFormErrorRef = React.useRef("");
   const reactId = React.useId();
-  const baseId = React.useMemo(() => `tiger-form-item-${reactId}`, [reactId]);
+  const baseId = `tiger-form-item-${reactId}`;
   const labelId = `${baseId}-label`;
   const fieldId = `${baseId}-field`;
   const errorId = `${baseId}-error`;
-  const mergeAriaDescribedBy = React.useCallback(
-    (existing, next) => {
-      if (!existing) {
-        return next;
-      }
-      if (!next) {
-        return existing;
-      }
-      const parts = new Set(
-        `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
-      );
-      return Array.from(parts).join(" ");
-    },
-    []
-  );
   const actualSize = size || formContext?.size || "md";
   const labelPosition = formContext?.labelPosition || "right";
   const labelAlign = formContext?.labelAlign || "right";
@@ -58,14 +60,12 @@ var FormItem = ({
       return required;
     }
     if (rules) {
-      const ruleArray = Array.isArray(rules) ? rules : [rules];
-      return ruleArray.some((rule) => rule.required);
+      return hasRequiredRule(rules);
     }
     if (name && formContext?.rules) {
       const fieldRules = formContext.rules[name];
       if (fieldRules) {
-        const ruleArray = Array.isArray(fieldRules) ? fieldRules : [fieldRules];
-        return ruleArray.some((rule) => rule.required);
+        return hasRequiredRule(fieldRules);
       }
     }
     return false;
@@ -76,8 +76,12 @@ var FormItem = ({
   );
   React.useEffect(() => {
     if (name && formContext?.errors) {
-      const error = tigercatCore.getFieldError(name, formContext.errors);
-      setErrorMessage(error || "");
+      const error = tigercatCore.getFieldError(name, formContext.errors) || "";
+      setErrorMessage(error);
+      if (error && error !== prevFormErrorRef.current) {
+        setShakeTrigger((prev) => prev + 1);
+      }
+      prevFormErrorRef.current = error;
     }
   }, [name, formContext?.errors]);
   React.useEffect(() => {
@@ -106,7 +110,7 @@ var FormItem = ({
       formContext.validateField(name, rules, "change");
     }
   }, [name, formContext, rules]);
-  const hasError = React.useMemo(() => !!errorMessage, [errorMessage]);
+  const hasError = !!errorMessage;
   const describedById = React.useMemo(
     () => showMessage && hasError ? errorId : void 0,
     [showMessage, hasError, errorId]
@@ -119,6 +123,7 @@ var FormItem = ({
     return React__default.default.Children.toArray(children)[0] ?? null;
   }, [children]);
   const isClonableChild = React__default.default.isValidElement(onlyChild);
+  const isNativeElement = isClonableChild && typeof onlyChild.type === "string";
   const childId = isClonableChild ? onlyChild.props.id : void 0;
   const effectiveFieldId = childId ?? fieldId;
   const enhancedChild = React.useMemo(() => {
@@ -127,6 +132,9 @@ var FormItem = ({
     }
     const nextProps = {
       id: effectiveFieldId,
+      status: !isNativeElement && hasError ? "error" : onlyChild.props.status,
+      errorMessage: !isNativeElement && hasError && !showMessage ? errorMessage : onlyChild.props.errorMessage,
+      _shakeTrigger: !isNativeElement && hasError ? shakeTrigger : void 0,
       "aria-invalid": hasError ? true : onlyChild.props["aria-invalid"],
       "aria-required": isRequired ? true : onlyChild.props["aria-required"],
       "aria-describedby": mergeAriaDescribedBy(onlyChild.props["aria-describedby"], describedById),
@@ -146,30 +154,35 @@ var FormItem = ({
     onlyChild,
     effectiveFieldId,
     hasError,
+    errorMessage,
+    showMessage,
+    shakeTrigger,
     isRequired,
-    mergeAriaDescribedBy,
+    isNativeElement,
     describedById,
     handleBlur,
     handleChange
   ]);
   const formItemClasses = React.useMemo(
     () => tigercatCore.classNames(
-      "tiger-form-item",
-      `tiger-form-item--${actualSize}`,
-      `tiger-form-item--label-${labelPosition}`,
-      hasError && "tiger-form-item--error",
-      formContext?.disabled && "tiger-form-item--disabled",
+      tigercatCore.getFormItemClasses({
+        size: actualSize,
+        labelPosition,
+        hasError,
+        disabled: formContext?.disabled
+      }),
       className
     ),
     [actualSize, labelPosition, hasError, formContext?.disabled, className]
   );
   const labelClasses = React.useMemo(
-    () => tigercatCore.classNames(
-      "tiger-form-item__label",
-      `tiger-form-item__label--${labelAlign}`,
-      isRequired && "tiger-form-item__label--required"
-    ),
-    [labelAlign, isRequired]
+    () => tigercatCore.getFormItemLabelClasses({
+      size: actualSize,
+      labelAlign,
+      labelPosition,
+      isRequired
+    }),
+    [actualSize, labelAlign, labelPosition, isRequired]
   );
   const labelStyles = React.useMemo(() => {
     if (labelPosition === "top") {
@@ -178,9 +191,10 @@ var FormItem = ({
     return actualLabelWidth ? { width: actualLabelWidth } : {};
   }, [labelPosition, actualLabelWidth]);
   const errorClasses = React.useMemo(
-    () => tigercatCore.classNames("tiger-form-item__error", hasError && "tiger-form-item__error--show"),
-    [hasError]
+    () => tigercatCore.classNames(tigercatCore.getFormItemErrorClasses(actualSize), hasError && "opacity-100"),
+    [actualSize, hasError]
   );
+  const contentClasses = React.useMemo(() => tigercatCore.getFormItemContentClasses(labelPosition), [labelPosition]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: formItemClasses, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
@@ -190,16 +204,16 @@ var FormItem = ({
         style: labelStyles,
         htmlFor: isClonableChild ? effectiveFieldId : void 0,
         children: [
-          isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiger-form-item__asterisk", children: "*" }),
+          isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ASTERISK_CLASSES, children: "*" }),
           label
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiger-form-item__content", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClasses, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "tiger-form-item__field",
+          className: FIELD_CLASSES,
           role: "group",
           "aria-labelledby": label ? labelId : void 0,
           "aria-describedby": describedById,
@@ -210,7 +224,16 @@ var FormItem = ({
           children: enhancedChild
         }
       ),
-      showMessage && hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, role: "alert", className: errorClasses, children: errorMessage })
+      showMessage && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: hasError ? errorId : void 0,
+          role: hasError ? "alert" : void 0,
+          className: errorClasses,
+          "aria-hidden": hasError ? void 0 : true,
+          children: hasError ? errorMessage : ""
+        }
+      )
     ] })
   ] });
 };

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

@@ -1,12 +1,12 @@
 import { useChartInteraction } from './chunk-3CDAG4HD.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 { ChartAxis } from './chunk-RQSQXQN6.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.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}`)
+        )
       ]
     }
   );