@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/{chunk-UBKOITHT.mjs → chunk-FQW26554.mjs}

@@ -1,6 +1,6 @@
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
-import React, { useMemo } from 'react';
-import { getChartInnerRect, valueToGaugeAngle, computeGaugeTicks, createGaugeArcPath, createGaugeNeedlePath, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
+import React, { useMemo, useState, useRef, useEffect } from 'react';
+import { getChartInnerRect, valueToGaugeAngle, createGaugeAnimation, computeGaugeTicks, createGaugeArcPath, createGaugeNeedlePath, getGaugeGradientPrefix, classNames, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var GaugeChart = ({
@@ -20,6 +20,7 @@ var GaugeChart = ({
   segments,
   trackColor = "var(--tiger-border,#e5e7eb)",
   color = "var(--tiger-primary,#2563eb)",
+  gradient = false,
   title: chartTitle,
   desc,
   className
@@ -38,14 +39,30 @@ var GaugeChart = ({
     () => valueToGaugeAngle(value, min, max, startAngle, endAngle),
     [value, min, max, startAngle, endAngle]
   );
+  const [animatedAngle, setAnimatedAngle] = useState(needleAngle);
+  const prevAngleRef = useRef(needleAngle);
+  useEffect(() => {
+    const from = prevAngleRef.current;
+    const to = needleAngle;
+    prevAngleRef.current = to;
+    if (from === to) return;
+    const ctrl = createGaugeAnimation({
+      from,
+      to,
+      onUpdate: (v) => setAnimatedAngle(v)
+    });
+    return () => ctrl.stop();
+  }, [needleAngle]);
   const ticks = useMemo(
     () => showTicks ? computeGaugeTicks(cx, cy, radius, min, max, startAngle, endAngle, tickCount) : [],
     [showTicks, cx, cy, radius, min, max, startAngle, endAngle, tickCount]
   );
   const trackPath = createGaugeArcPath(cx, cy, radius, startAngle, endAngle, arcWidth);
-  const valuePath = needleAngle > startAngle ? createGaugeArcPath(cx, cy, radius, startAngle, needleAngle, arcWidth) : null;
-  const needlePath = createGaugeNeedlePath(cx, cy, radius - arcWidth - 6, needleAngle);
+  const valuePath = animatedAngle > startAngle ? createGaugeArcPath(cx, cy, radius, startAngle, animatedAngle, arcWidth) : null;
+  const needlePath = createGaugeNeedlePath(cx, cy, radius - arcWidth - 6, animatedAngle);
   const formattedValue = valueFormatter ? valueFormatter(value) : `${value}`;
+  const gradientPrefix = useMemo(() => getGaugeGradientPrefix(), []);
+  const valueGradientId = `${gradientPrefix}-value`;
   return /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -56,6 +73,10 @@ var GaugeChart = ({
       desc,
       className: classNames(className),
       children: [
+        gradient && !segments && valuePath && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: valueGradientId, x1: 0, y1: 0, x2: 0, y2: 1, children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.55 })
+        ] }) }),
         /* @__PURE__ */ jsx("path", { d: trackPath, fill: trackColor, strokeWidth: 0 }),
         segments ? segments.map((seg, i) => {
           const sStart = valueToGaugeAngle(seg.range[0], min, max, startAngle, endAngle);
@@ -73,9 +94,8 @@ var GaugeChart = ({
           "path",
           {
             d: valuePath,
-            fill: color,
-            strokeWidth: 0,
-            style: { transition: "all 0.3s ease-out" }
+            fill: gradient ? `url(#${valueGradientId})` : color,
+            strokeWidth: 0
           }
         ),
         ticks.map((tick, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
@@ -107,8 +127,7 @@ var GaugeChart = ({
           "path",
           {
             d: needlePath,
-            fill: "var(--tiger-text,#374151)",
-            style: { transition: "all 0.3s ease-out" }
+            fill: "var(--tiger-text,#374151)"
           }
         ),
         /* @__PURE__ */ jsx("circle", { cx, cy, r: 5, fill: "var(--tiger-text,#374151)" }),
@@ -117,7 +136,7 @@ var GaugeChart = ({
           {
             x: cx,
             y: cy + radius * 0.35,
-            className: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold",
+            className: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold tabular-nums",
             textAnchor: "middle",
             dominantBaseline: "middle",
             children: formattedValue

package/dist/{chunk-DEQWHJLQ.mjs → chunk-FW3O54GP.mjs}

@@ -1,9 +1,9 @@
-import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
-import { ChartLegend } from './chunk-Z6F67MJE.mjs';
+import { useChartInteraction } from './chunk-6QML6T3Y.mjs';
+import { ChartLegend } from './chunk-UBP7HZSU.mjs';
 import { ChartSeries } from './chunk-SDLMB34Y.mjs';
-import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
 import { ChartAxis } from './chunk-RQSQXQN6.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
 import { ChartGrid } from './chunk-677VSTPW.mjs';
 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';
@@ -258,9 +258,13 @@ var BarChart = ({
               "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,
+            style: {
+              rx: `var(--tiger-chart-bar-radius, ${barRadius}px)`,
+              ry: `var(--tiger-chart-bar-radius, ${barRadius}px)`,
+              ...animated ? {
+                transition: "y var(--tiger-motion-duration-slow,600ms) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)), height var(--tiger-motion-duration-slow,600ms) var(--tiger-motion-ease-emphasized,cubic-bezier(.4,0,.2,1)), opacity 200ms ease-out, filter 200ms ease-out"
+              } : null
+            },
             tabIndex: selectable ? 0 : void 0,
             onMouseEnter: (e) => handleMouseEnter(bar.index, e),
             onMouseMove: handleMouseMove,

package/dist/chunk-G3PBQ4B4.mjs

@@ -0,0 +1,60 @@
+import { getSegmentedContainerStyle, classNames, getSegmentedIndicatorStyle, getSegmentedIndicatorClasses, getSegmentedOptionClasses, getSegmentedContainerClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Segmented.tsx
+var Segmented = ({
+  value,
+  options = [],
+  disabled = false,
+  size = "md",
+  block = false,
+  className,
+  onChange
+}) => {
+  function handleSelect(opt) {
+    if (opt.disabled || disabled) return;
+    if (opt.value === value) return;
+    onChange?.(opt.value);
+  }
+  const selectedIndex = options.findIndex((opt) => opt.value === value);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(getSegmentedContainerClasses(size, block), className),
+      style: getSegmentedContainerStyle(options.length),
+      role: "radiogroup",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-tiger-segmented-indicator": "true",
+            "aria-hidden": "true",
+            className: getSegmentedIndicatorClasses(size),
+            style: getSegmentedIndicatorStyle(selectedIndex, options.length, size)
+          }
+        ),
+        options.map((opt) => {
+          const selected = opt.value === value;
+          const isDisabled = !!opt.disabled || disabled;
+          return /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: classNames(
+                getSegmentedOptionClasses(size, selected, isDisabled),
+                block ? "flex-1 text-center" : ""
+              ),
+              role: "radio",
+              "aria-checked": selected,
+              "aria-disabled": isDisabled,
+              onClick: () => handleSelect(opt),
+              children: /* @__PURE__ */ jsx("span", { children: opt.label })
+            },
+            opt.value
+          );
+        })
+      ]
+    }
+  );
+};
+
+export { Segmented };

package/dist/{chunk-HWWNBCFB.js → chunk-GAT4ZATZ.js}

@@ -1,5 +1,6 @@
 'use strict';
 
+var chunkX7WESYRG_js = require('./chunk-X7WESYRG.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -8,7 +9,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-// src/components/List.tsx
 var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
 var LoadingSpinner = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
@@ -36,6 +36,10 @@ var List = ({
   footer,
   pagination = false,
   grid,
+  virtual = false,
+  virtualHeight = 400,
+  virtualItemHeight = 40,
+  virtualOverscan = 5,
   rowKey = "key",
   hoverable = false,
   renderItem,
@@ -217,6 +221,18 @@ var List = ({
         }
       );
     }
+    if (virtual) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        chunkX7WESYRG_js.VirtualList,
+        {
+          itemCount: paginatedData.length,
+          itemHeight: virtualItemHeight,
+          height: virtualHeight,
+          overscan: virtualOverscan,
+          renderItem: ({ index }) => renderListItem(paginatedData[index], index)
+        }
+      );
+    }
     return items;
   };
   const renderPagination = () => {