@expcat/tigercat-react 0.3.0 → 0.3.69

package/dist/{chunk-OZLGNWET.js → chunk-Q57BYUUW.js}

@@ -1,11 +1,10 @@
 'use strict';
 
-var chunkGQMYCYZ4_js = require('./chunk-GQMYCYZ4.js');
-var chunkA3DJSVTE_js = require('./chunk-A3DJSVTE.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
+// src/components/List.tsx
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var LoadingSpinner = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
@@ -200,34 +199,24 @@ var List = ({
       paginationConfig.showTotal !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getSimplePaginationTotalClasses(), children: paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} items` }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.getSimplePaginationControlsClasses(), children: [
         paginationConfig.showSizeChanger !== false && /* @__PURE__ */ jsxRuntime.jsx(
-          chunkGQMYCYZ4_js.Select,
+          "select",
           {
-            size: "sm",
+            className: tigercatCore.getSimplePaginationSelectClasses(),
             value: currentPageSize,
-            onChange: (value) => {
-              if (value == null) return;
-              const nextSize = typeof value === "number" ? value : Number(value);
-              if (!Number.isFinite(nextSize)) return;
-              handlePageSizeChange(nextSize);
-            },
-            options: (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map((size2) => ({
-              label: `${size2} / page`,
-              value: size2
-            }))
+            onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+            children: (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map((size2) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: size2, children: [
+              size2,
+              " / page"
+            ] }, size2))
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.getSimplePaginationButtonsWrapperClasses(), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkA3DJSVTE_js.Button,
+            "button",
             {
-              size: "sm",
-              variant: "outline",
+              className: tigercatCore.getSimplePaginationButtonClasses(!hasPrev),
               disabled: !hasPrev,
               onClick: () => handlePageChange(currentPage - 1),
-              className: tigercatCore.classNames(
-                !hasPrev && "cursor-not-allowed",
-                hasPrev && "hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-              ),
               children: "Previous"
             }
           ),
@@ -238,16 +227,11 @@ var List = ({
             totalPages
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkA3DJSVTE_js.Button,
+            "button",
             {
-              size: "sm",
-              variant: "outline",
+              className: tigercatCore.getSimplePaginationButtonClasses(!hasNext),
               disabled: !hasNext,
               onClick: () => handlePageChange(currentPage + 1),
-              className: tigercatCore.classNames(
-                !hasNext && "cursor-not-allowed",
-                hasNext && "hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-              ),
               children: "Next"
             }
           )

package/dist/chunk-QAO5KANE.mjs

@@ -0,0 +1,36 @@
+import { createContext, useMemo } from 'react';
+import { classNames, getAlignClasses, getJustifyClasses, getGutterStyles } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Row.tsx
+var RowContext = createContext({});
+var Row = ({
+  gutter = 0,
+  align = "top",
+  justify = "start",
+  wrap = true,
+  children,
+  className,
+  style,
+  ...divProps
+}) => {
+  const rowClasses = useMemo(
+    () => classNames(
+      "flex",
+      "w-full",
+      wrap && "flex-wrap",
+      getAlignClasses(align),
+      getJustifyClasses(justify),
+      className
+    ),
+    [wrap, align, justify, className]
+  );
+  const mergedStyle = useMemo(
+    () => ({ ...getGutterStyles(gutter).rowStyle, ...style }),
+    [gutter, style]
+  );
+  const contextValue = useMemo(() => ({ gutter }), [gutter]);
+  return /* @__PURE__ */ jsx(RowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: rowClasses, style: mergedStyle, ...divProps, children }) });
+};
+
+export { Row, RowContext };

package/dist/{chunk-AITVDDCE.mjs → chunk-QGCQAJGL.mjs}

@@ -5,8 +5,8 @@ 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 { useMemo, useCallback } from 'react';
-import { getChartInnerRect, createBandScale, getNumberExtent, createLinearScale, DEFAULT_CHART_COLORS, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { useMemo } from 'react';
+import { getBarGradientPrefix, getChartInnerRect, createBandScale, getNumberExtent, createLinearScale, resolveChartPalette, clampBarWidth, ensureBarMinHeight, getChartElementOpacity, buildChartLegendItems, resolveChartTooltipContent, defaultXYTooltipFormatter, classNames, getBarValueLabelY, barValueLabelInsideClasses, barValueLabelClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var BarChart = ({
@@ -48,6 +48,13 @@ var BarChart = ({
   showTooltip = true,
   tooltipFormatter,
   legendFormatter,
+  showValueLabels = false,
+  valueLabelPosition = "top",
+  valueLabelFormatter,
+  barMinHeight = 0,
+  barMaxWidth,
+  gradient = false,
+  animated = false,
   title,
   desc,
   className,
@@ -56,6 +63,7 @@ var BarChart = ({
   onBarClick,
   onBarHover
 }) => {
+  const gradientPrefix = useMemo(() => getBarGradientPrefix(), []);
   const {
     tooltipPosition,
     resolvedHoveredIndex,
@@ -105,21 +113,25 @@ var BarChart = ({
     const extent = getNumberExtent(yValues, { includeZero: true });
     return createLinearScale(extent, [innerRect.height, 0]);
   }, [yScale, yValues, innerRect.height]);
-  const palette = useMemo(
-    () => colors && colors.length > 0 ? colors : barColor ? [barColor] : [...DEFAULT_CHART_COLORS],
-    [colors, barColor]
-  );
+  const palette = useMemo(() => resolveChartPalette(colors, barColor), [colors, barColor]);
   const bars = useMemo(() => {
     const scale = resolvedXScale;
-    const bandWidth = scale.bandwidth ?? (scale.step ? scale.step * 0.7 : innerRect.width / Math.max(1, data.length) * 0.8);
+    const rawBandWidth = scale.bandwidth ?? (scale.step ? scale.step * 0.7 : innerRect.width / Math.max(1, data.length) * 0.8);
+    const bandWidth = clampBarWidth(rawBandWidth, barMaxWidth);
+    const bandOffset = rawBandWidth > bandWidth ? (rawBandWidth - bandWidth) / 2 : 0;
     const baseline = resolvedYScale.map(0);
     return data.map((item, index) => {
       const xKey = scale.type === "linear" ? Number(item.x) : String(item.x);
       const xPos = scale.map(xKey);
-      const barX = scale.bandwidth ? xPos : xPos - bandWidth / 2;
+      const barX = (scale.bandwidth ? xPos : xPos - rawBandWidth / 2) + bandOffset;
       const barYValue = resolvedYScale.map(item.y);
-      const barHeight = Math.abs(baseline - barYValue);
-      const barY = Math.min(baseline, barYValue);
+      let barHeight = Math.abs(baseline - barYValue);
+      let barY = Math.min(baseline, barYValue);
+      if (barMinHeight > 0 && barHeight > 0) {
+        const clamped = ensureBarMinHeight(barY, barHeight, baseline, barMinHeight);
+        barY = clamped.y;
+        barHeight = clamped.height;
+      }
       const color = item.color ?? palette[index % palette.length];
       const opacity = getChartElementOpacity(index, activeIndex, {
         activeOpacity,
@@ -144,30 +156,29 @@ var BarChart = ({
     palette,
     activeIndex,
     activeOpacity,
-    inactiveOpacity
+    inactiveOpacity,
+    barMinHeight,
+    barMaxWidth
   ]);
   const legendItems = useMemo(
-    () => data.map((item, index) => ({
-      index,
-      label: legendFormatter ? legendFormatter(item, index) : item.label ?? String(item.x),
-      color: item.color ?? palette[index % palette.length],
-      active: activeIndex === null || activeIndex === index
-    })),
+    () => buildChartLegendItems({
+      data,
+      palette,
+      activeIndex,
+      getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : d.label ?? String(d.x),
+      getColor: (d, i) => d.color ?? palette[i % palette.length]
+    }),
     [data, legendFormatter, palette, activeIndex]
   );
-  const formatTooltip = useCallback(
-    (datum, index) => {
-      if (tooltipFormatter) return tooltipFormatter(datum, index);
-      const label = datum.label ?? String(datum.x);
-      return `${label}: ${datum.y}`;
-    },
-    [tooltipFormatter]
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(
+      resolvedHoveredIndex,
+      data,
+      tooltipFormatter,
+      defaultXYTooltipFormatter
+    ),
+    [resolvedHoveredIndex, data, tooltipFormatter]
   );
-  const tooltipContent = useMemo(() => {
-    if (resolvedHoveredIndex === null) return "";
-    const datum = data[resolvedHoveredIndex];
-    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
-  }, [resolvedHoveredIndex, data, formatTooltip]);
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
   const chart = /* @__PURE__ */ jsxs(
@@ -180,6 +191,21 @@ var BarChart = ({
       desc,
       className: classNames(className),
       children: [
+        gradient && /* @__PURE__ */ jsx("defs", { children: bars.map((bar) => /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${bar.index}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: bar.color, stopOpacity: 0.65 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: bar.color, stopOpacity: 1 })
+            ]
+          },
+          `grad-${bar.index}`
+        )) }),
         showGrid && /* @__PURE__ */ jsx(
           ChartGrid,
           {
@@ -226,12 +252,15 @@ var BarChart = ({
             height: bar.height,
             rx: barRadius,
             ry: barRadius,
-            fill: bar.color,
+            fill: gradient ? `url(#${gradientPrefix}-${bar.index})` : bar.color,
             opacity: bar.opacity,
             className: classNames(
-              "transition-opacity duration-150",
-              (hoverable || selectable) && "cursor-pointer"
+              "transition-[opacity,filter] duration-200",
+              (hoverable || selectable) && "cursor-pointer hover:brightness-110"
             ),
+            style: animated ? {
+              transition: "y 600ms cubic-bezier(.4,0,.2,1), height 600ms cubic-bezier(.4,0,.2,1), opacity 200ms ease-out, filter 200ms ease-out"
+            } : void 0,
             tabIndex: selectable ? 0 : void 0,
             onMouseEnter: (e) => handleMouseEnter(bar.index, e),
             onMouseMove: handleMouseMove,
@@ -240,7 +269,26 @@ var BarChart = ({
             onKeyDown: (e) => handleKeyDown(e, bar.index)
           },
           `bar-${bar.index}`
-        )) })
+        )) }),
+        showValueLabels && bars.map((bar) => {
+          const labelText = valueLabelFormatter ? valueLabelFormatter(bar.datum, bar.index) : String(bar.datum.y);
+          const labelY = getBarValueLabelY(bar.y, bar.height, valueLabelPosition, 8);
+          const isInside = valueLabelPosition === "inside";
+          return /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: bar.x + bar.width / 2,
+              y: labelY,
+              textAnchor: "middle",
+              dominantBaseline: isInside ? "central" : "auto",
+              className: isInside ? barValueLabelInsideClasses : barValueLabelClasses,
+              opacity: bar.opacity,
+              "data-value-label": "",
+              children: labelText
+            },
+            `label-${bar.index}`
+          );
+        })
       ]
     }
   );

package/dist/{chunk-JOHKSMJM.mjs → chunk-QLHFXYWA.mjs}

@@ -1,5 +1,5 @@
 import React, { forwardRef, useState, useRef, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
-import { classNames, getCarouselContainerClasses, carouselTrackFadeClasses, carouselTrackScrollClasses, getScrollTransform, carouselSlideBaseClasses, getCarouselDotsClasses, clampSlideIndex, getNextSlideIndex, getPrevSlideIndex, isPrevDisabled, isNextDisabled, getCarouselArrowClasses, carouselPrevArrowPath, carouselNextArrowPath, getCarouselDotClasses } from '@expcat/tigercat-core';
+import { classNames, getCarouselContainerClasses, carouselTrackFadeClasses, carouselTrackScrollClasses, getScrollTransform, getCarouselDotsClasses, clampSlideIndex, getNextSlideIndex, getPrevSlideIndex, isPrevDisabled, isNextDisabled, getCarouselDotClasses, carouselSlideBaseClasses, getCarouselArrowClasses, carouselPrevArrowPath, carouselNextArrowPath } from '@expcat/tigercat-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/components/Carousel.tsx
@@ -24,7 +24,12 @@ var Carousel = forwardRef(
   }, ref) => {
     const [currentIndex, setCurrentIndex] = useState(initialSlide);
     const [isPaused, setIsPaused] = useState(false);
-    const autoplayTimerRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    const onBeforeChangeRef = useRef(onBeforeChange);
+    onChangeRef.current = onChange;
+    onBeforeChangeRef.current = onBeforeChange;
+    const currentIndexRef = useRef(currentIndex);
+    currentIndexRef.current = currentIndex;
     const slides = useMemo(() => {
       return React.Children.toArray(children).filter((child) => React.isValidElement(child));
     }, [children]);
@@ -34,10 +39,7 @@ var Carousel = forwardRef(
       [className]
     );
     const trackClasses = useMemo(() => {
-      if (effect === "fade") {
-        return carouselTrackFadeClasses;
-      }
-      return carouselTrackScrollClasses;
+      return effect === "fade" ? carouselTrackFadeClasses : carouselTrackScrollClasses;
     }, [effect]);
     const trackStyle = useMemo(() => {
       if (effect === "scroll") {
@@ -48,26 +50,19 @@ var Carousel = forwardRef(
       }
       return {};
     }, [effect, currentIndex, speed]);
-    const getSlideClasses = useCallback(
-      (index) => {
-        const isActive = index === currentIndex;
-        if (effect === "fade") {
-          const positionClass = index === 0 ? "relative" : "absolute inset-0";
-          return classNames(
-            positionClass,
-            "w-full transition-opacity ease-in-out",
-            isActive ? "opacity-100 z-10" : "opacity-0 z-0"
-          );
-        }
-        return carouselSlideBaseClasses;
-      },
-      [effect, currentIndex]
-    );
-    const getSlideStyle = useCallback(() => {
-      return {
-        transitionDuration: `${speed}ms`
-      };
-    }, [speed]);
+    const slideStyle = useMemo(() => ({ transitionDuration: `${speed}ms` }), [speed]);
+    const getSlideClasses = (index) => {
+      const isActive = index === currentIndex;
+      if (effect === "fade") {
+        const positionClass = index === 0 ? "relative" : "absolute inset-0";
+        return classNames(
+          positionClass,
+          "w-full transition-opacity ease-in-out",
+          isActive ? "opacity-100 z-10" : "opacity-0 z-0"
+        );
+      }
+      return carouselSlideBaseClasses;
+    };
     const dotsClasses = useMemo(() => {
       return getCarouselDotsClasses(dotPosition);
     }, [dotPosition]);
@@ -104,28 +99,18 @@ var Carousel = forwardRef(
       [next, prev, goTo]
     );
     useEffect(() => {
-      if (autoplay && !isPaused) {
-        if (autoplayTimerRef.current) {
-          clearInterval(autoplayTimerRef.current);
-        }
-        autoplayTimerRef.current = setInterval(() => {
-          setCurrentIndex((prevIndex) => {
-            const nextIdx = getNextSlideIndex(prevIndex, slideCount, infinite);
-            if (nextIdx !== prevIndex) {
-              onBeforeChange?.(prevIndex, nextIdx);
-              onChange?.(nextIdx, prevIndex);
-            }
-            return nextIdx;
-          });
-        }, autoplaySpeed);
-      }
-      return () => {
-        if (autoplayTimerRef.current) {
-          clearInterval(autoplayTimerRef.current);
-          autoplayTimerRef.current = null;
+      if (!autoplay || isPaused) return;
+      const timer = setInterval(() => {
+        const curr = currentIndexRef.current;
+        const nextIdx = getNextSlideIndex(curr, slideCount, infinite);
+        if (nextIdx !== curr) {
+          onBeforeChangeRef.current?.(curr, nextIdx);
+          setCurrentIndex(nextIdx);
+          onChangeRef.current?.(nextIdx, curr);
         }
-      };
-    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite, onChange, onBeforeChange]);
+      }, autoplaySpeed);
+      return () => clearInterval(timer);
+    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite]);
     const handleMouseEnter = useCallback(() => {
       if (pauseOnHover && autoplay) {
         setIsPaused(true);
@@ -154,57 +139,35 @@ var Carousel = forwardRef(
       () => isNextDisabled(currentIndex, slideCount, infinite),
       [currentIndex, slideCount, infinite]
     );
-    const renderArrows = () => {
-      if (!arrows) return null;
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: getCarouselArrowClasses("prev", isPrevArrowDisabled),
-            onClick: prev,
-            disabled: isPrevArrowDisabled,
-            "aria-label": "Previous slide",
-            children: /* @__PURE__ */ jsx(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                className: "w-6 h-6",
-                children: /* @__PURE__ */ jsx("path", { d: carouselPrevArrowPath })
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
+    const renderArrowButton = (type, disabled, onClick, path) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getCarouselArrowClasses(type, disabled),
+        onClick,
+        disabled,
+        "aria-label": type === "prev" ? "Previous slide" : "Next slide",
+        children: /* @__PURE__ */ jsx(
+          "svg",
           {
-            type: "button",
-            className: getCarouselArrowClasses("next", isNextArrowDisabled),
-            onClick: next,
-            disabled: isNextArrowDisabled,
-            "aria-label": "Next slide",
-            children: /* @__PURE__ */ jsx(
-              "svg",
-              {
-                xmlns: "http://www.w3.org/2000/svg",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                className: "w-6 h-6",
-                children: /* @__PURE__ */ jsx("path", { d: carouselNextArrowPath })
-              }
-            )
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "w-6 h-6",
+            children: /* @__PURE__ */ jsx("path", { d: path })
           }
         )
+      }
+    );
+    const renderArrows = () => {
+      if (!arrows) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderArrowButton("prev", isPrevArrowDisabled, prev, carouselPrevArrowPath),
+        renderArrowButton("next", isNextArrowDisabled, next, carouselNextArrowPath)
       ] });
     };
     const renderDots = () => {
@@ -226,7 +189,7 @@ var Carousel = forwardRef(
         "div",
         {
           className: getSlideClasses(index),
-          style: effect === "fade" ? getSlideStyle() : void 0,
+          style: effect === "fade" ? slideStyle : void 0,
           role: "group",
           "aria-roledescription": "slide",
           "aria-label": `Slide ${index + 1} of ${slideCount}`,