@expcat/tigercat-react 0.2.27 → 0.3.69

package/dist/chunk-PTEDJ6MA.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Space.tsx
+var Space = ({
+  direction = "horizontal",
+  size = "md",
+  align = "start",
+  wrap = false,
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const gapStyle = tigercatCore.getSpaceStyle(size);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: tigercatCore.getSpaceClasses({ direction, size, align, wrap }, className),
+      style: gapStyle ? { ...gapStyle, ...style } : style,
+      children
+    }
+  );
+};
+
+exports.Space = Space;

package/dist/{chunk-D3I2SY7X.js → chunk-PWZB45Z7.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkLXA2YBAO_js = require('./chunk-LXA2YBAO.js');
-var chunk3WPKVV4N_js = require('./chunk-3WPKVV4N.js');
-var chunkQFVE7GKD_js = require('./chunk-QFVE7GKD.js');
+var chunkGJEWBALW_js = require('./chunk-GJEWBALW.js');
+var chunkA3PYG3D6_js = require('./chunk-A3PYG3D6.js');
+var chunkIBYIPXIO_js = require('./chunk-IBYIPXIO.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -22,50 +22,6 @@ var ExpandIcon = ({ expanded }) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z" })
   }
 );
-function getMenuButtonsWithin(menuEl) {
-  return Array.from(
-    menuEl.querySelectorAll('button[data-tiger-menuitem="true"]')
-  ).filter((el) => !el.disabled && !el.closest('[data-tiger-menu-hidden="true"]'));
-}
-function roveFocus(current, next) {
-  const menuEl = current.closest('ul[role="menu"]');
-  if (!menuEl) {
-    next.focus();
-    return;
-  }
-  const items = getMenuButtonsWithin(menuEl);
-  items.forEach((el) => {
-    el.tabIndex = el === next ? 0 : -1;
-  });
-  next.focus();
-}
-function moveFocus(current, delta) {
-  const menuEl = current.closest('ul[role="menu"]');
-  if (!menuEl) return;
-  const items = getMenuButtonsWithin(menuEl);
-  const currentIndex = items.indexOf(current);
-  if (currentIndex < 0) return;
-  const nextIndex = (currentIndex + delta + items.length) % items.length;
-  roveFocus(current, items[nextIndex]);
-}
-function focusEdge(current, edge) {
-  const menuEl = current.closest('ul[role="menu"]');
-  if (!menuEl) return;
-  const items = getMenuButtonsWithin(menuEl);
-  if (items.length === 0) return;
-  roveFocus(current, edge === "start" ? items[0] : items[items.length - 1]);
-}
-function focusFirstChildItemFromTitle(titleEl) {
-  const li = titleEl.closest("li");
-  const submenu = li?.querySelector('ul[role="menu"]');
-  if (!submenu) return;
-  const items = getMenuButtonsWithin(submenu);
-  if (items.length === 0) return;
-  items.forEach((el, idx) => {
-    el.tabIndex = idx === 0 ? 0 : -1;
-  });
-  items[0].focus();
-}
 var SubMenu = ({
   itemKey,
   title = "",
@@ -76,7 +32,7 @@ var SubMenu = ({
   children,
   collapsed: collapsedOverride
 }) => {
-  const menuContext = chunkQFVE7GKD_js.useMenuContext();
+  const menuContext = chunkIBYIPXIO_js.useMenuContext();
   if (!menuContext) {
     console.warn("SubMenu must be used within Menu component");
   }
@@ -96,8 +52,8 @@ var SubMenu = ({
   }, [hasRenderedInline, isExpanded, isInlineOrVertical]);
   const titleClasses = React.useMemo(() => {
     if (!menuContext) return "";
-    return tigercatCore.getSubMenuTitleClasses(menuContext.theme, disabled);
-  }, [menuContext, disabled]);
+    return tigercatCore.classNames(tigercatCore.getSubMenuTitleClasses(menuContext.theme, disabled), className);
+  }, [menuContext, disabled, className]);
   const contentClasses = React.useMemo(() => {
     if (!menuContext) return "";
     if (menuContext.mode === "horizontal") return tigercatCore.submenuContentHorizontalClasses;
@@ -130,7 +86,7 @@ var SubMenu = ({
       if (!menuContext) return;
       setHasRenderedInline(true);
       menuContext.handleOpenChange(itemKey);
-      setTimeout(() => focusFirstChildItemFromTitle(titleEl), 0);
+      setTimeout(() => tigercatCore.focusFirstChildItem(titleEl), 0);
     },
     [menuContext, itemKey]
   );
@@ -145,22 +101,22 @@ var SubMenu = ({
       const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
       if (event.key === nextKey) {
         event.preventDefault();
-        moveFocus(current, 1);
+        tigercatCore.moveFocusInMenu(current, 1);
         return;
       }
       if (event.key === prevKey) {
         event.preventDefault();
-        moveFocus(current, -1);
+        tigercatCore.moveFocusInMenu(current, -1);
         return;
       }
       if (event.key === "Home") {
         event.preventDefault();
-        focusEdge(current, "start");
+        tigercatCore.focusMenuEdge(current, "start");
         return;
       }
       if (event.key === "End") {
         event.preventDefault();
-        focusEdge(current, "end");
+        tigercatCore.focusMenuEdge(current, "end");
         return;
       }
       if (event.key === "Escape" || event.key === "ArrowLeft") {
@@ -225,7 +181,7 @@ var SubMenu = ({
     const nextLevel = level + 1;
     const enhancedChildren = React__default.default.Children.map(children, (child) => {
       if (!React__default.default.isValidElement(child)) return child;
-      if (child.type === chunk3WPKVV4N_js.MenuItem || child.type === SubMenu || child.type === chunkLXA2YBAO_js.MenuItemGroup) {
+      if (child.type === chunkA3PYG3D6_js.MenuItem || child.type === SubMenu || child.type === chunkGJEWBALW_js.MenuItemGroup) {
         return React__default.default.cloneElement(
           child,
           {
@@ -266,10 +222,7 @@ var SubMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "li",
     {
-      className: tigercatCore.classNames(
-        menuContext.mode === "horizontal" || isPopup ? "relative" : "",
-        className
-      ),
+      className: menuContext.mode === "horizontal" || isPopup ? "relative" : "",
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       role: "none",

package/dist/{chunk-GZPMLPRW.js → chunk-PXPUPQRO.js}

@@ -35,7 +35,7 @@ var CollapsePanel = ({
     if (!disabled) {
       collapseContext.handlePanelClick(panelKey);
     }
-  }, [disabled, collapseContext, panelKey]);
+  }, [disabled, collapseContext.handlePanelClick, panelKey]);
   const handleKeyDown = react.useCallback(
     (event) => {
       if (disabled) {
@@ -46,7 +46,7 @@ var CollapsePanel = ({
         collapseContext.handlePanelClick(panelKey);
       }
     },
-    [disabled, collapseContext, panelKey]
+    [disabled, collapseContext.handlePanelClick, panelKey]
   );
   const arrowIcon = /* @__PURE__ */ jsxRuntime.jsx(
     "svg",

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-AFFSBNYB.mjs → chunk-QGCQAJGL.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 { 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}`
+          );
+        })
       ]
     }
   );