@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-2N6WZ5Z5.mjs

@@ -0,0 +1,427 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Slider.tsx
+import { useRef, useEffect, useCallback, useMemo, memo, forwardRef, useState } from "react";
+import {
+  sliderRangeClasses,
+  sliderHitAreaClasses,
+  getSliderRootClasses,
+  getSliderTrackClasses,
+  getSliderThumbClasses,
+  getSliderTooltipClasses,
+  sliderGetPercentage,
+  sliderGetValueFromClientX,
+  sliderGetKeyboardValue,
+  sliderResolveMarks,
+  sliderValuesEqual,
+  sliderApplyThumbValue,
+  sliderPickRangeThumb,
+  sliderThumbInsetStyle,
+  sliderRangeFillStyle,
+  sliderSortRange,
+  resolveSliderThumbName,
+  getSliderLabels,
+  mergeAriaDescribedBy,
+  createDocumentDragSession,
+  getElementTextDirection
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function displaySliderValue(value, range, min, max) {
+  if (range) {
+    const tuple = Array.isArray(value) ? value : [min, max];
+    const a = Math.min(Math.max(tuple[0], min), max);
+    const b = Math.min(Math.max(tuple[1], min), max);
+    return sliderSortRange([a, b]);
+  }
+  const n = typeof value === "number" ? value : value[0];
+  return Math.min(Math.max(n, min), max);
+}
+var Thumb = memo(
+  ({
+    value,
+    thumbType = null,
+    disabled,
+    tooltip,
+    showTooltip,
+    focused,
+    activeThumb,
+    isDragging,
+    min,
+    max,
+    ariaLabel,
+    ariaLabelledby,
+    ariaDescribedby,
+    id,
+    thumbClasses,
+    tooltipClasses,
+    rtl,
+    thumbRef,
+    onPointerDown,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    onHoverChange,
+    getPercentage
+  }) => {
+    const pct = getPercentage(value);
+    const showThumbTooltip = tooltip && (showTooltip || focused || isDragging) && (thumbType === activeThumb || thumbType === null || !activeThumb && thumbType === null);
+    const zIndex = activeThumb && thumbType ? activeThumb === thumbType ? 2 : 1 : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: thumbRef,
+        id,
+        className: thumbClasses,
+        style: { ...sliderThumbInsetStyle(pct, rtl), zIndex },
+        tabIndex: disabled ? -1 : 0,
+        role: "slider",
+        "aria-valuenow": value,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-orientation": "horizontal",
+        "aria-disabled": disabled || void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        "aria-valuetext": String(value),
+        onPointerDown: (e) => onPointerDown(e, thumbType),
+        onMouseEnter: () => onHoverChange(true),
+        onMouseLeave: () => onHoverChange(false),
+        onFocus,
+        onBlur,
+        onKeyDown: (e) => onKeyDown(e, value, thumbType),
+        children: showThumbTooltip && /* @__PURE__ */ jsx("div", { className: tooltipClasses, children: value })
+      }
+    );
+  }
+);
+var Slider = forwardRef(function Slider2({
+  value: controlledValue,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  marks = false,
+  tooltip = true,
+  size = "md",
+  range = false,
+  status: statusProp,
+  onChange,
+  className,
+  id,
+  onPointerDown,
+  ...props
+}, ref) {
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    ...divProps
+  } = props;
+  const formItemControl = useFormItemControlContext();
+  const config = useTigerConfig();
+  const labels = getSliderLabels(config.locale);
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const effectiveId = id ?? formItemControl?.id;
+  const describedBy = mergeAriaDescribedBy(
+    typeof ariaDescribedby === "string" ? ariaDescribedby : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof ariaLabelledby === "string" && ariaLabelledby.trim() ? ariaLabelledby : formItemControl?.labelId;
+  const [internalValue, setInternalValue] = useControlledState({
+    value: controlledValue,
+    defaultValue: defaultValue ?? (range ? [min, max] : min),
+    onChange: (next) => {
+      onChange?.(next);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const displayed = displaySliderValue(internalValue, range, min, max);
+  const valueRef = useRef(displayed);
+  valueRef.current = displayed;
+  const [isDragging, setIsDragging] = useState(false);
+  const [activeThumb, setActiveThumb] = useState(null);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [focusedThumb, setFocusedThumb] = useState(null);
+  const trackRef = useRef(null);
+  const rootRef = useRef(null);
+  const thumbRef = useRef(null);
+  const dragSessionRef = useRef(null);
+  const activeThumbRef = useRef(null);
+  const setRootRef = (node) => {
+    rootRef.current = node;
+    if (range) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+  const setSingleThumbRef = (node) => {
+    thumbRef.current = node;
+    if (!range) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+  const rtl = getElementTextDirection(trackRef.current ?? rootRef.current) === "rtl";
+  const getPercentage = useCallback(
+    (val) => sliderGetPercentage(val, min, max),
+    [min, max]
+  );
+  const commit = useCallback(
+    (next) => {
+      const current = valueRef.current;
+      if (sliderValuesEqual(current, next)) return;
+      setInternalValue(next);
+    },
+    [setInternalValue]
+  );
+  const stopDrag = useCallback(() => {
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = null;
+    setIsDragging(false);
+    setActiveThumb(null);
+    activeThumbRef.current = null;
+    setShowTooltip(false);
+  }, []);
+  useEffect(() => () => stopDrag(), [stopDrag]);
+  const handlePointerDown = (event, thumb) => {
+    onPointerDown?.(event);
+    if (event.defaultPrevented || effectiveDisabled) return;
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const track = trackRef.current;
+    if (!track) return;
+    const rect = track.getBoundingClientRect();
+    const isRtl = getElementTextDirection(track) === "rtl";
+    const pointerValue = sliderGetValueFromClientX(event.clientX, rect, min, max, step, isRtl);
+    const current = valueRef.current;
+    const which = range && Array.isArray(current) ? thumb ?? sliderPickRangeThumb(current, pointerValue) : null;
+    activeThumbRef.current = which;
+    setActiveThumb(which);
+    setIsDragging(true);
+    if (tooltip) setShowTooltip(true);
+    const next = sliderApplyThumbValue(current, pointerValue, which, range);
+    commit(next);
+    event.currentTarget.focus();
+    dragSessionRef.current?.dispose();
+    dragSessionRef.current = createDocumentDragSession({
+      startX: event.clientX,
+      startY: event.clientY,
+      ownerDocument: event.currentTarget.ownerDocument,
+      pointerId: event.pointerId,
+      pointerTarget: event.currentTarget,
+      onMove: ({ event: moveEvent, currentX }) => {
+        if (moveEvent.cancelable) moveEvent.preventDefault();
+        const box = trackRef.current?.getBoundingClientRect();
+        if (!box) return;
+        const dir = getElementTextDirection(trackRef.current) === "rtl";
+        const moved = sliderGetValueFromClientX(currentX, box, min, max, step, dir);
+        commit(sliderApplyThumbValue(valueRef.current, moved, activeThumbRef.current, range));
+      },
+      onEnd: () => {
+        dragSessionRef.current = null;
+        setIsDragging(false);
+        setActiveThumb(null);
+        activeThumbRef.current = null;
+        setShowTooltip(false);
+      }
+    });
+  };
+  const handleTrackPointerDown = (event) => {
+    if (event.target !== event.currentTarget && event.target.closest('[role="slider"]')) {
+      return;
+    }
+    handlePointerDown(event, null);
+  };
+  const handleKeyDown = useCallback(
+    (e, value, thumbType) => {
+      if (effectiveDisabled) return;
+      const isRtl = getElementTextDirection(trackRef.current) === "rtl";
+      const newValue = sliderGetKeyboardValue(e.key, value, min, max, step, void 0, isRtl);
+      if (newValue === null) return;
+      e.preventDefault();
+      const current = valueRef.current;
+      const next = sliderApplyThumbValue(current, newValue, thumbType, range);
+      commit(next);
+    },
+    [effectiveDisabled, min, max, step, range, commit]
+  );
+  const trackClasses = useMemo(
+    () => getSliderTrackClasses(size, effectiveDisabled),
+    [size, effectiveDisabled]
+  );
+  const rangeStyles = useMemo(() => {
+    if (range && Array.isArray(displayed)) {
+      return sliderRangeFillStyle(getPercentage(displayed[0]), getPercentage(displayed[1]), rtl);
+    }
+    const val = typeof displayed === "number" ? displayed : displayed[0];
+    return sliderRangeFillStyle(0, getPercentage(val), rtl);
+  }, [range, displayed, getPercentage, rtl]);
+  const thumbClasses = useMemo(
+    () => getSliderThumbClasses(size, effectiveDisabled, isDragging),
+    [size, effectiveDisabled, isDragging]
+  );
+  const tooltipClasses = useMemo(() => getSliderTooltipClasses(size), [size]);
+  const marksObj = sliderResolveMarks(marks, min, max, step);
+  const named = resolveSliderThumbName({
+    thumb: null,
+    range: false,
+    ariaLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+    ariaLabelledby: labelledby,
+    labels
+  });
+  const minNamed = resolveSliderThumbName({
+    thumb: "min",
+    range: true,
+    ariaLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+    ariaLabelledby: labelledby,
+    labels
+  });
+  const maxNamed = resolveSliderThumbName({
+    thumb: "max",
+    range: true,
+    ariaLabel: typeof ariaLabel === "string" ? ariaLabel : void 0,
+    ariaLabelledby: labelledby,
+    labels
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...divProps,
+      ref: setRootRef,
+      className: getSliderRootClasses(effectiveDisabled, className),
+      "data-status": status === "default" ? void 0 : status,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: sliderHitAreaClasses, onPointerDown: handleTrackPointerDown, children: /* @__PURE__ */ jsxs("div", { ref: trackRef, className: trackClasses, onPointerDown: handleTrackPointerDown, children: [
+          /* @__PURE__ */ jsx("div", { className: sliderRangeClasses, style: rangeStyles }),
+          range && Array.isArray(displayed) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Thumb,
+              {
+                value: displayed[0],
+                thumbType: "min",
+                disabled: effectiveDisabled,
+                tooltip,
+                showTooltip,
+                focused: focusedThumb === "min",
+                activeThumb,
+                isDragging,
+                min,
+                max,
+                ariaLabel: minNamed.ariaLabel,
+                ariaLabelledby: minNamed.ariaLabelledby,
+                ariaDescribedby: describedBy,
+                id: effectiveId,
+                thumbClasses,
+                tooltipClasses,
+                rtl,
+                onPointerDown: handlePointerDown,
+                onKeyDown: handleKeyDown,
+                onHoverChange: (hover) => {
+                  if (tooltip) setShowTooltip(hover);
+                },
+                onFocus: () => setFocusedThumb("min"),
+                onBlur: () => {
+                  setFocusedThumb(null);
+                  formItemControl?.onBlur?.();
+                },
+                getPercentage
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Thumb,
+              {
+                value: displayed[1],
+                thumbType: "max",
+                disabled: effectiveDisabled,
+                tooltip,
+                showTooltip,
+                focused: focusedThumb === "max",
+                activeThumb,
+                isDragging,
+                min,
+                max,
+                ariaLabel: maxNamed.ariaLabel,
+                ariaLabelledby: maxNamed.ariaLabelledby,
+                ariaDescribedby: describedBy,
+                thumbClasses,
+                tooltipClasses,
+                rtl,
+                onPointerDown: handlePointerDown,
+                onKeyDown: handleKeyDown,
+                onHoverChange: (hover) => {
+                  if (tooltip) setShowTooltip(hover);
+                },
+                onFocus: () => setFocusedThumb("max"),
+                onBlur: () => {
+                  setFocusedThumb(null);
+                  formItemControl?.onBlur?.();
+                },
+                getPercentage
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            Thumb,
+            {
+              value: typeof displayed === "number" ? displayed : displayed[0],
+              disabled: effectiveDisabled,
+              tooltip,
+              showTooltip,
+              focused: focusedThumb === "single",
+              activeThumb,
+              isDragging,
+              min,
+              max,
+              ariaLabel: named.ariaLabel,
+              ariaLabelledby: named.ariaLabelledby,
+              ariaDescribedby: describedBy,
+              id: effectiveId,
+              thumbClasses,
+              tooltipClasses,
+              rtl,
+              thumbRef: setSingleThumbRef,
+              onPointerDown: handlePointerDown,
+              onKeyDown: handleKeyDown,
+              onHoverChange: (hover) => {
+                if (tooltip) setShowTooltip(hover);
+              },
+              onFocus: () => setFocusedThumb("single"),
+              onBlur: () => {
+                setFocusedThumb(null);
+                formItemControl?.onBlur?.();
+              },
+              getPercentage
+            }
+          )
+        ] }) }),
+        Object.keys(marksObj).length > 0 && /* @__PURE__ */ jsx("div", { className: "relative w-full mt-2 h-4", children: Object.entries(marksObj).map(([key, label]) => {
+          const markValue = Number(key);
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute text-xs text-[var(--tiger-text-muted,#6b7280)] -translate-x-1/2",
+              style: sliderThumbInsetStyle(getPercentage(markValue), rtl),
+              children: label
+            },
+            key
+          );
+        }) })
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+
+export {
+  Slider
+};

package/dist/chunk-2PC625DX.mjs

@@ -0,0 +1,88 @@
+// src/components/ChartGrid.tsx
+import { useMemo } from "react";
+import {
+  chartGridLineClasses,
+  classNames,
+  getChartGridLines
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var ChartGrid = ({
+  xScale,
+  yScale,
+  xRange,
+  yRange,
+  width,
+  height,
+  show = "both",
+  xTicks = 5,
+  yTicks = 5,
+  xTickValues,
+  yTickValues,
+  lineStyle = "solid",
+  strokeWidth = 1,
+  x = 0,
+  y = 0,
+  className,
+  ...props
+}) => {
+  const lines = useMemo(
+    () => getChartGridLines({
+      xScale,
+      yScale,
+      xRange,
+      yRange,
+      width,
+      height,
+      show,
+      xTicks,
+      yTicks,
+      xTickValues,
+      yTickValues,
+      lineStyle,
+      strokeWidth
+    }),
+    [
+      xScale,
+      yScale,
+      xRange,
+      yRange,
+      width,
+      height,
+      show,
+      xTicks,
+      yTicks,
+      xTickValues,
+      yTickValues,
+      lineStyle,
+      strokeWidth
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      ...props,
+      className: classNames(className),
+      transform: `translate(${x}, ${y})`,
+      "aria-hidden": "true",
+      children: lines.map((line) => /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: line.x1,
+          y1: line.y1,
+          x2: line.x2,
+          y2: line.y2,
+          className: chartGridLineClasses,
+          strokeWidth: line.strokeWidth,
+          strokeDasharray: line.strokeDasharray
+        },
+        line.key
+      ))
+    }
+  );
+};
+var ChartGrid_default = ChartGrid;
+
+export {
+  ChartGrid,
+  ChartGrid_default
+};

package/dist/chunk-2QJGXENY.mjs

@@ -0,0 +1,85 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/Statistic.tsx
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import {
+  statisticBaseClasses,
+  getStatisticTitleClasses,
+  getStatisticValueClasses,
+  statisticPrefixClasses,
+  statisticSuffixClasses,
+  formatStatisticValue,
+  canAnimateStatisticValue,
+  createStatisticNumberAnimation,
+  resolveStatisticPrecision,
+  statisticPrefersReducedMotion,
+  classNames,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Statistic = forwardRef(function Statistic2({
+  title,
+  value,
+  precision,
+  prefix,
+  suffix,
+  groupSeparator = false,
+  animated = false,
+  animationDuration,
+  size = "md",
+  className,
+  locale,
+  ...rest
+}, ref) {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const localeId = mergedLocale?.locale;
+  const [displayValue, setDisplayValue] = useState(value);
+  const currentNumberRef = useRef(canAnimateStatisticValue(value) ? value : 0);
+  const hasPlayedRef = useRef(false);
+  useEffect(() => {
+    if (!animated || !canAnimateStatisticValue(value) || statisticPrefersReducedMotion()) {
+      setDisplayValue(value);
+      if (canAnimateStatisticValue(value)) currentNumberRef.current = value;
+      return void 0;
+    }
+    const from = hasPlayedRef.current ? currentNumberRef.current : 0;
+    hasPlayedRef.current = true;
+    const controller = createStatisticNumberAnimation({
+      from,
+      to: value,
+      duration: animationDuration,
+      onUpdate: (next) => {
+        currentNumberRef.current = next;
+        setDisplayValue(next);
+      },
+      onComplete: () => {
+        currentNumberRef.current = value;
+        setDisplayValue(value);
+      }
+    });
+    return controller.stop;
+  }, [value, animated, animationDuration]);
+  const formatPrecision = canAnimateStatisticValue(value) ? resolveStatisticPrecision(value, precision) : precision;
+  const formatted = useMemo(
+    () => formatStatisticValue(displayValue, formatPrecision, groupSeparator, localeId),
+    [displayValue, formatPrecision, groupSeparator, localeId]
+  );
+  return /* @__PURE__ */ jsxs("div", { ref, className: classNames(statisticBaseClasses, className), ...rest, children: [
+    title ? /* @__PURE__ */ jsx("div", { className: getStatisticTitleClasses(size), children: title }) : null,
+    /* @__PURE__ */ jsxs("div", { className: getStatisticValueClasses(size), children: [
+      prefix ? /* @__PURE__ */ jsx("span", { className: statisticPrefixClasses, children: prefix }) : null,
+      /* @__PURE__ */ jsx("span", { children: formatted }),
+      suffix ? /* @__PURE__ */ jsx("span", { className: statisticSuffixClasses, children: suffix }) : null
+    ] })
+  ] });
+});
+
+export {
+  Statistic
+};

package/dist/chunk-2SN5JTST.mjs

@@ -0,0 +1,99 @@
+// src/components/Watermark.tsx
+import { forwardRef, useEffect, useRef, useState } from "react";
+import {
+  classNames,
+  watermarkDefaults,
+  watermarkWrapperClasses,
+  resolveWatermarkFont,
+  createWatermarkRenderController,
+  getWatermarkOverlayStyle
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Watermark = forwardRef(function Watermark2({
+  content,
+  image,
+  width = watermarkDefaults.width,
+  height = watermarkDefaults.height,
+  rotate = watermarkDefaults.rotate,
+  zIndex = watermarkDefaults.zIndex,
+  gapX = watermarkDefaults.gapX,
+  gapY = watermarkDefaults.gapY,
+  offsetX = watermarkDefaults.offsetX,
+  offsetY = watermarkDefaults.offsetY,
+  font,
+  className,
+  children,
+  ...props
+}, ref) {
+  const [base64, setBase64] = useState();
+  const [overlayKey, setOverlayKey] = useState(0);
+  const wrapperRef = useRef(null);
+  const renderControllerRef = useRef(null);
+  const optionsRef = useRef({ content, image, width, height, rotate, gapX, gapY, font });
+  optionsRef.current = { content, image, width, height, rotate, gapX, gapY, font };
+  useEffect(() => {
+    const target = wrapperRef.current;
+    if (!target) return;
+    const controller = createWatermarkRenderController({
+      getRenderOptions: () => {
+        const next = optionsRef.current;
+        return {
+          content: next.content,
+          image: next.image,
+          width: next.width,
+          height: next.height,
+          gapX: next.gapX,
+          gapY: next.gapY,
+          rotate: next.rotate,
+          font: resolveWatermarkFont(next.font)
+        };
+      },
+      onRender: setBase64,
+      onTamper: () => setOverlayKey((key) => key + 1)
+    });
+    renderControllerRef.current = controller;
+    controller.observe(target);
+    controller.render();
+    return () => {
+      controller.disconnect();
+      if (renderControllerRef.current === controller) {
+        renderControllerRef.current = null;
+      }
+    };
+  }, []);
+  const fontKey = `${font?.fontSize ?? ""}|${font?.fontFamily ?? ""}|${font?.fontWeight ?? ""}|${font?.color ?? ""}`;
+  const contentKey = Array.isArray(content) ? content.join("\n") : content ?? "";
+  useEffect(() => {
+    renderControllerRef.current?.render();
+  }, [contentKey, image, width, height, rotate, gapX, gapY, fontKey]);
+  const overlayStyle = getWatermarkOverlayStyle({
+    base64Url: base64,
+    width,
+    height,
+    gapX,
+    gapY,
+    offsetX,
+    offsetY,
+    zIndex
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (node) => {
+        wrapperRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: classNames(watermarkWrapperClasses, className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx("div", { "data-watermark": "true", "aria-hidden": "true", style: overlayStyle }, overlayKey)
+      ]
+    }
+  );
+});
+
+export {
+  Watermark
+};