@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-BP24PM37.mjs

@@ -0,0 +1,397 @@
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/InputNumber.tsx
+import { useState, useCallback, useMemo, useRef, useEffect, forwardRef } from "react";
+import {
+  classNames,
+  getInputNumberWrapperClasses,
+  getInputNumberSizeClasses,
+  getInputNumberInputClasses,
+  getInputNumberStepButtonClasses,
+  getInputNumberSideButtonClasses,
+  inputNumberControlsRightClasses,
+  inputNumberUpIconPathD,
+  inputNumberDownIconPathD,
+  inputNumberMinusIconPathD,
+  inputNumberPlusIconPathD,
+  stepValue,
+  isAtMin,
+  isAtMax,
+  formatInputNumberDisplay,
+  formatInputNumberEditingDisplay,
+  parseInputNumberValue,
+  commitInputNumberValue,
+  getInputNumberKeyboardNextValue,
+  resolveInputNumberControlsLayout,
+  createRafRepeatActionController,
+  mergeAriaDescribedBy,
+  resolveReadOnlyFlag,
+  runShakeAnimation,
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  getInputNumberLabels
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var InputNumber = forwardRef(function InputNumber2({
+  value: controlledValue,
+  defaultValue,
+  size,
+  status: statusProp,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  precision,
+  disabled = false,
+  readonly: readonlyProp,
+  readOnly: readOnlyProp,
+  placeholder,
+  name,
+  id,
+  keyboard = true,
+  controls = true,
+  controlsPosition = "right",
+  formatter,
+  parser,
+  autoFocus = false,
+  incrementAriaLabel,
+  decrementAriaLabel,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  className,
+  style,
+  _shakeTrigger: shakeTriggerProp,
+  ...rest
+}, ref) {
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const config = useTigerConfig();
+  const labels = getInputNumberLabels(config.locale, {
+    incrementAriaLabel,
+    decrementAriaLabel
+  });
+  const inGroup = inputGroup != null;
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
+  const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+  const isReadOnly = resolveReadOnlyFlag(readonlyProp, readOnlyProp);
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const formBoundValue = formItemControl?.value;
+  const resolvedValue = controlledValue !== void 0 ? controlledValue : formItemControl?.name ? typeof formBoundValue === "number" ? formBoundValue : null : void 0;
+  const inputRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const mountedRef = useRef(false);
+  const focusedRef = useRef(false);
+  const repeatControllerRef = useRef(createRafRepeatActionController());
+  const repeatValueRef = useRef(null);
+  const suppressNextClickRef = useRef(false);
+  const [focused, setFocused] = useState(false);
+  const [currentValue, setValue] = useControlledState({
+    value: resolvedValue,
+    defaultValue: defaultValue ?? null,
+    onChange
+  });
+  const [displayValue, setDisplayValue] = useState("");
+  const setInputRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  const toDisplayValue = useCallback(
+    (val, editing) => editing ? formatInputNumberEditingDisplay(val, precision) : formatInputNumberDisplay(val, { formatter, precision }),
+    [formatter, precision]
+  );
+  useEffect(() => {
+    focusedRef.current = focused;
+  }, [focused]);
+  useEffect(() => {
+    if (!focused) setDisplayValue(toDisplayValue(currentValue, false));
+  }, [currentValue, focused, toDisplayValue]);
+  useEffect(() => () => repeatControllerRef.current.stop(), []);
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (status === "error") runShakeAnimation(wrapperRef.current);
+  }, [status, shakeTrigger]);
+  const commit = (raw, nextFocused = focusedRef.current) => {
+    const { value: next, changed } = commitInputNumberValue(raw, currentValue, {
+      min,
+      max,
+      precision
+    });
+    if (changed) {
+      setValue(next);
+      formItemControl?.onChange?.(next);
+    }
+    setDisplayValue(toDisplayValue(next, nextFocused));
+    return next;
+  };
+  const handleStep = (direction, baseValue = currentValue) => {
+    if (effectiveDisabled || isReadOnly) return baseValue ?? null;
+    const next = stepValue(baseValue, step, direction, min, max, precision);
+    return commit(next);
+  };
+  const handleStepClick = (direction) => {
+    if (suppressNextClickRef.current) {
+      suppressNextClickRef.current = false;
+      return;
+    }
+    handleStep(direction);
+  };
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  const startStepRepeat = (direction) => {
+    return (event) => {
+      event.preventDefault();
+      if (effectiveDisabled || isReadOnly) return;
+      if (direction === "down" && isAtMin(currentValue, min)) return;
+      if (direction === "up" && isAtMax(currentValue, max)) return;
+      suppressNextClickRef.current = true;
+      repeatValueRef.current = currentValue;
+      repeatControllerRef.current.start(() => {
+        const baseValue = repeatValueRef.current;
+        const nextValue = handleStep(direction, baseValue);
+        repeatValueRef.current = nextValue;
+        if (nextValue === baseValue) repeatControllerRef.current.stop();
+      });
+      focusInput();
+    };
+  };
+  const stopStepRepeat = () => {
+    repeatControllerRef.current.stop();
+  };
+  const handleInput = (e) => {
+    setDisplayValue(e.target.value);
+  };
+  const handleBlur = (e) => {
+    const parsed = parseInputNumberValue(displayValue, { parser });
+    commit(parsed, false);
+    setFocused(false);
+    formItemControl?.onBlur?.();
+    onBlur?.(e);
+  };
+  const handleFocus = (e) => {
+    setFocused(true);
+    setDisplayValue(toDisplayValue(currentValue, true));
+    onFocus?.(e);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      commit(parseInputNumberValue(displayValue, { parser }));
+    } else {
+      const next = getInputNumberKeyboardNextValue(e.key, currentValue, {
+        min,
+        max,
+        step,
+        precision,
+        keyboard: keyboard && !effectiveDisabled && !isReadOnly
+      });
+      if (next !== void 0) {
+        e.preventDefault();
+        commit(next);
+      }
+    }
+    onKeyDown?.(e);
+  };
+  const atMin = isAtMin(currentValue, min);
+  const atMax = isAtMax(currentValue, max);
+  const layout = resolveInputNumberControlsLayout(controls, controlsPosition);
+  const stepDisabled = effectiveDisabled || isReadOnly;
+  const wrapperClasses = useMemo(
+    () => classNames(
+      getInputNumberWrapperClasses({
+        disabled: effectiveDisabled,
+        inGroup,
+        status
+      }),
+      getInputNumberSizeClasses(effectiveSize),
+      className
+    ),
+    [effectiveDisabled, inGroup, status, effectiveSize, className]
+  );
+  const inputClasses = useMemo(
+    () => getInputNumberInputClasses(effectiveSize, layout),
+    [effectiveSize, layout]
+  );
+  const valueText = currentValue == null ? labels.emptyAriaValueText : formatter ? formatter(currentValue) : String(currentValue);
+  const describedBy = mergeAriaDescribedBy(
+    typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: wrapperClasses,
+      style,
+      ...{ [TIGER_CHROME_ATTR]: "" },
+      onAnimationEnd: () => wrapperRef.current?.classList.remove(SHAKE_CLASS),
+      children: [
+        layout === "both" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": "true",
+            "aria-label": labels.decrementAriaLabel,
+            className: getInputNumberSideButtonClasses("start", stepDisabled || atMin),
+            disabled: stepDisabled || atMin,
+            onPointerDown: startStepRepeat("down"),
+            onPointerUp: stopStepRepeat,
+            onPointerLeave: stopStepRepeat,
+            onPointerCancel: stopStepRepeat,
+            onClick: () => handleStepClick("down"),
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                className: "w-4 h-4",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { d: inputNumberMinusIconPathD })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...rest,
+            ref: setInputRefs,
+            type: "text",
+            inputMode: "decimal",
+            role: "spinbutton",
+            autoFocus,
+            "aria-valuemin": min === -Infinity ? void 0 : min,
+            "aria-valuemax": max === Infinity ? void 0 : max,
+            "aria-valuenow": currentValue ?? void 0,
+            "aria-valuetext": valueText,
+            "aria-invalid": status === "error" ? true : void 0,
+            "aria-describedby": describedBy,
+            className: inputClasses,
+            value: displayValue,
+            placeholder,
+            disabled: effectiveDisabled,
+            readOnly: isReadOnly,
+            name: effectiveName,
+            id: effectiveId,
+            onChange: handleInput,
+            onBlur: handleBlur,
+            onFocus: handleFocus,
+            onKeyDown: handleKeyDown
+          }
+        ),
+        layout === "both" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            "aria-hidden": "true",
+            "aria-label": labels.incrementAriaLabel,
+            className: getInputNumberSideButtonClasses("end", stepDisabled || atMax),
+            disabled: stepDisabled || atMax,
+            onPointerDown: startStepRepeat("up"),
+            onPointerUp: stopStepRepeat,
+            onPointerLeave: stopStepRepeat,
+            onPointerCancel: stopStepRepeat,
+            onClick: () => handleStepClick("up"),
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                className: "w-4 h-4",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { d: inputNumberPlusIconPathD })
+              }
+            )
+          }
+        ),
+        layout === "end" && /* @__PURE__ */ jsxs("div", { className: inputNumberControlsRightClasses, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              "aria-label": labels.incrementAriaLabel,
+              className: getInputNumberStepButtonClasses("up", stepDisabled || atMax),
+              disabled: stepDisabled || atMax,
+              onPointerDown: startStepRepeat("up"),
+              onPointerUp: stopStepRepeat,
+              onPointerLeave: stopStepRepeat,
+              onPointerCancel: stopStepRepeat,
+              onClick: () => handleStepClick("up"),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "currentColor",
+                  className: "w-3 h-3",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: inputNumberUpIconPathD })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              "aria-label": labels.decrementAriaLabel,
+              className: getInputNumberStepButtonClasses("down", stepDisabled || atMin),
+              disabled: stepDisabled || atMin,
+              onPointerDown: startStepRepeat("down"),
+              onPointerUp: stopStepRepeat,
+              onPointerLeave: stopStepRepeat,
+              onPointerCancel: stopStepRepeat,
+              onClick: () => handleStepClick("down"),
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "currentColor",
+                  className: "w-3 h-3",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx("path", { d: inputNumberDownIconPathD })
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+InputNumber.displayName = "InputNumber";
+
+export {
+  InputNumber
+};

package/dist/chunk-BVSR27AF.mjs

@@ -0,0 +1,287 @@
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
+import {
+  ChartTooltip
+} from "./chunk-JX2WKSVM.mjs";
+import {
+  ChartCanvas
+} from "./chunk-OP77MPGN.mjs";
+
+// src/components/GaugeChart.tsx
+import React, { useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  layoutGauge,
+  createGaugeAnimation,
+  createGaugeArcPath,
+  createGaugeNeedlePath,
+  getStableChartGradientPrefix,
+  chartAxisTickTextClasses,
+  getCartesianChartShellClasses,
+  DEFAULT_GAUGE_END_ANGLE,
+  DEFAULT_GAUGE_HEIGHT,
+  DEFAULT_GAUGE_START_ANGLE,
+  DEFAULT_GAUGE_WIDTH
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GaugeChart = ({
+  width = DEFAULT_GAUGE_WIDTH,
+  height = DEFAULT_GAUGE_HEIGHT,
+  padding = 24,
+  responsive = false,
+  value,
+  min = 0,
+  max = 100,
+  startAngle = DEFAULT_GAUGE_START_ANGLE,
+  endAngle = DEFAULT_GAUGE_END_ANGLE,
+  arcWidth = 20,
+  showTicks = true,
+  tickCount = 5,
+  valueFormatter,
+  tooltipFormatter,
+  label,
+  segments,
+  trackColor = "var(--tiger-border,#e5e7eb)",
+  color = "var(--tiger-primary,#2563eb)",
+  gradient = false,
+  animated = true,
+  showTooltip = true,
+  title: chartTitle,
+  desc,
+  className
+}) => {
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
+  );
+  const geometry = useMemo(
+    () => layoutGauge({
+      innerWidth: innerRect.width,
+      innerHeight: innerRect.height,
+      value,
+      min,
+      max,
+      startAngle,
+      endAngle,
+      arcWidth,
+      showTicks,
+      tickCount,
+      segments,
+      valueFormatter,
+      label
+    }),
+    [
+      innerRect.width,
+      innerRect.height,
+      value,
+      min,
+      max,
+      startAngle,
+      endAngle,
+      arcWidth,
+      showTicks,
+      tickCount,
+      segments,
+      valueFormatter,
+      label
+    ]
+  );
+  const [animatedAngle, setAnimatedAngle] = useState(geometry.valueAngle);
+  const prevAngleRef = useRef(geometry.valueAngle);
+  useEffect(() => {
+    const from = prevAngleRef.current;
+    const to = geometry.valueAngle;
+    prevAngleRef.current = to;
+    if (!animated || from === to) {
+      setAnimatedAngle(to);
+      return;
+    }
+    const ctrl = createGaugeAnimation({
+      from,
+      to,
+      onUpdate: (next) => setAnimatedAngle(next)
+    });
+    return () => ctrl.stop();
+  }, [geometry.valueAngle, animated]);
+  const needlePath = useMemo(
+    () => createGaugeNeedlePath(
+      geometry.cx,
+      geometry.cy,
+      Math.max(0, geometry.radius - arcWidth - 6),
+      animatedAngle
+    ),
+    [geometry.cx, geometry.cy, geometry.radius, arcWidth, animatedAngle]
+  );
+  const valuePath = useMemo(() => {
+    if (animatedAngle === geometry.startAngle) return null;
+    return createGaugeArcPath(
+      geometry.cx,
+      geometry.cy,
+      geometry.radius,
+      geometry.startAngle,
+      animatedAngle,
+      arcWidth
+    );
+  }, [animatedAngle, geometry.cx, geometry.cy, geometry.radius, geometry.startAngle, arcWidth]);
+  const formattedValue = geometry.valueText.text;
+  const [tooltip, setTooltip] = useState({ open: false, x: 0, y: 0 });
+  const tooltipContent = tooltipFormatter ? tooltipFormatter(value) : label ? `${label}: ${formattedValue}` : formattedValue;
+  const handleTooltipMove = (e) => {
+    if (!showTooltip) return;
+    setTooltip({ open: true, x: e.clientX, y: e.clientY });
+  };
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("gauge", gradientId),
+    [gradientId]
+  );
+  const valueGradientId = `${gradientPrefix}-value`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend: false,
+        responsive,
+        className
+      }),
+      role: "meter",
+      "aria-valuenow": Number.isFinite(value) ? value : void 0,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuetext": formattedValue,
+      "aria-label": label ?? chartTitle ?? formattedValue,
+      onMouseMove: handleTooltipMove,
+      onMouseLeave: () => setTooltip((current) => ({ ...current, open: false })),
+      children: [
+        /* @__PURE__ */ jsxs(
+          ChartCanvas,
+          {
+            width,
+            height,
+            padding,
+            responsive,
+            title: chartTitle,
+            desc,
+            onResolvedSizeChange,
+            children: [
+              gradient && valuePath && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                "linearGradient",
+                {
+                  id: valueGradientId,
+                  gradientUnits: "userSpaceOnUse",
+                  x1: geometry.cx,
+                  y1: geometry.cy - geometry.radius,
+                  x2: geometry.cx,
+                  y2: geometry.cy + geometry.radius,
+                  children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.55 })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("path", { d: geometry.trackPath, fill: trackColor, strokeWidth: 0, "aria-hidden": "true" }),
+              geometry.segmentPaths.map((seg, index) => /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: seg.path,
+                  fill: seg.color,
+                  strokeWidth: 0,
+                  "aria-hidden": "true"
+                },
+                `seg-${index}`
+              )),
+              valuePath && /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: valuePath,
+                  fill: gradient ? `url(#${valueGradientId})` : color,
+                  strokeWidth: 0,
+                  "aria-hidden": "true"
+                }
+              ),
+              geometry.ticks.map((tick, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: tick.x1,
+                    y1: tick.y1,
+                    x2: tick.x2,
+                    y2: tick.y2,
+                    stroke: "var(--tiger-text-secondary,#6b7280)",
+                    strokeWidth: 1,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: tick.labelX,
+                    y: tick.labelY,
+                    className: chartAxisTickTextClasses,
+                    textAnchor: "middle",
+                    dominantBaseline: "middle",
+                    style: { fontSize: "10px" },
+                    "aria-hidden": "true",
+                    children: tick.label
+                  }
+                )
+              ] }, `tick-${index}`)),
+              /* @__PURE__ */ jsx("path", { d: needlePath, fill: "var(--tiger-text,#374151)", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: geometry.cx,
+                  cy: geometry.cy,
+                  r: 5,
+                  fill: "var(--tiger-text,#374151)",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: geometry.valueText.x,
+                  y: geometry.valueText.y,
+                  className: "fill-[color:var(--tiger-text,#374151)] text-lg font-semibold tabular-nums",
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  "aria-hidden": "true",
+                  children: formattedValue
+                }
+              ),
+              geometry.labelText && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: geometry.labelText.x,
+                  y: geometry.labelText.y,
+                  className: chartAxisTickTextClasses,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  "aria-hidden": "true",
+                  children: geometry.labelText.text
+                }
+              )
+            ]
+          }
+        ),
+        showTooltip && /* @__PURE__ */ jsx(
+          ChartTooltip,
+          {
+            content: tooltipContent,
+            open: tooltip.open && tooltipContent !== "",
+            x: tooltip.x,
+            y: tooltip.y
+          }
+        )
+      ]
+    }
+  );
+};
+var GaugeChart_default = GaugeChart;
+
+export {
+  GaugeChart,
+  GaugeChart_default
+};