@expcat/tigercat-react 0.3.0 → 0.3.70

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-QFYS5QIZ.mjs

@@ -0,0 +1,142 @@
+import { Modal } from './chunk-JNLX47UL.mjs';
+import { ImageCropper } from './chunk-2EOXY2LP.mjs';
+import { Button } from './chunk-ENSLMM3L.mjs';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, uploadPlusIconPath } from '@expcat/tigercat-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var CropUpload = ({
+  accept = "image/*",
+  disabled = false,
+  maxSize,
+  cropperProps,
+  modalTitle = "\u88C1\u526A\u56FE\u7247",
+  modalWidth = 520,
+  className,
+  children,
+  onCropComplete,
+  onError
+}) => {
+  const fileInputRef = useRef(null);
+  const cropperRef = useRef(null);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [imageSrc, setImageSrc] = useState("");
+  const [cropping, setCropping] = useState(false);
+  const handleTriggerClick = useCallback(() => {
+    if (disabled) return;
+    fileInputRef.current?.click();
+  }, [disabled]);
+  const handleFileChange = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      if (maxSize && file.size > maxSize) {
+        onError?.(new Error(`File size exceeds maximum of ${maxSize} bytes`));
+        e.target.value = "";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        setImageSrc(ev.target?.result);
+        setModalVisible(true);
+      };
+      reader.readAsDataURL(file);
+      e.target.value = "";
+    },
+    [maxSize, onError]
+  );
+  const handleConfirm = useCallback(async () => {
+    if (!cropperRef.current) return;
+    setCropping(true);
+    try {
+      const result = await cropperRef.current.getCropResult();
+      onCropComplete?.(result);
+      setModalVisible(false);
+    } catch (err) {
+      onError?.(err);
+    } finally {
+      setCropping(false);
+    }
+  }, [onCropComplete, onError]);
+  const handleCancel = useCallback(() => {
+    setModalVisible(false);
+    setImageSrc("");
+  }, []);
+  const triggerClasses = useMemo(
+    () => classNames(disabled ? cropUploadTriggerDisabledClasses : cropUploadTriggerClasses, className),
+    [disabled, className]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTriggerClick();
+      }
+    },
+    [handleTriggerClick]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "tiger-crop-upload inline-block", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: triggerClasses,
+        onClick: handleTriggerClick,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": "Select image to crop and upload",
+        "aria-disabled": disabled ? "true" : void 0,
+        onKeyDown: handleKeyDown,
+        children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-5 h-5",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: "2",
+                  d: uploadPlusIconPath
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "\u9009\u62E9\u56FE\u7247" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: modalVisible,
+        size: "lg",
+        title: modalTitle,
+        closable: true,
+        maskClosable: false,
+        onClose: handleCancel,
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "\u53D6\u6D88" }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, loading: cropping, children: "\u786E\u8BA4\u88C1\u526A" })
+        ] }),
+        children: imageSrc && /* @__PURE__ */ jsx(ImageCropper, { ref: cropperRef, src: imageSrc, ...cropperProps })
+      }
+    )
+  ] });
+};
+
+export { CropUpload };

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-QIJG42YQ.mjs

@@ -0,0 +1,54 @@
+import { ImagePreview } from './chunk-5CLXOFRZ.mjs';
+import { createContext, useState, useRef, useCallback, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ImageGroupContext = createContext(null);
+var ImageGroup = ({
+  preview = true,
+  onPreviewVisibleChange,
+  children,
+  className
+}) => {
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState(0);
+  const imagesRef = useRef([]);
+  const register = useCallback((src) => {
+    const idx = imagesRef.current.length;
+    imagesRef.current = [...imagesRef.current, src];
+    return idx;
+  }, []);
+  const unregister = useCallback((src) => {
+    imagesRef.current = imagesRef.current.filter((s) => s !== src);
+  }, []);
+  const openPreview = useCallback(
+    (index) => {
+      if (!preview) return;
+      setPreviewIndex(index);
+      setPreviewVisible(true);
+      onPreviewVisibleChange?.(true);
+    },
+    [preview, onPreviewVisibleChange]
+  );
+  const contextValue = useMemo(
+    () => ({ register, unregister, openPreview }),
+    [register, unregister, openPreview]
+  );
+  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: className || "tiger-image-group", role: "group", children: [
+    children,
+    preview && /* @__PURE__ */ jsx(
+      ImagePreview,
+      {
+        visible: previewVisible,
+        images: imagesRef.current,
+        currentIndex: previewIndex,
+        onVisibleChange: (val) => {
+          setPreviewVisible(val);
+          if (!val) onPreviewVisibleChange?.(false);
+        },
+        onCurrentIndexChange: setPreviewIndex
+      }
+    )
+  ] }) });
+};
+
+export { ImageGroup, ImageGroupContext };