@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-AYFKHWJS.mjs → chunk-C4UZFBFV.mjs}

@@ -1,59 +1,70 @@
-import {
-  useResponsiveChartSize
-} from "./chunk-5JETWHLJ.mjs";
 import {
   useChartInteraction
-} from "./chunk-JZZPLKTW.mjs";
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
 import {
   ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
+} from "./chunk-ST4NN6XV.mjs";
 import {
   ChartTooltip
-} from "./chunk-YORCCCQX.mjs";
+} from "./chunk-IPI45RUK.mjs";
 import {
   ChartAxis
-} from "./chunk-RQSQXQN6.mjs";
+} from "./chunk-XZFHPHV5.mjs";
 import {
   ChartCanvas
-} from "./chunk-CUAXRBKO.mjs";
+} from "./chunk-OP77MPGN.mjs";
 import {
   ChartGrid
-} from "./chunk-677VSTPW.mjs";
+} from "./chunk-2PC625DX.mjs";
 import {
   ChartLegend
-} from "./chunk-F2ITBDUS.mjs";
+} from "./chunk-A4JRK5SM.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/BarChart.tsx
 import { useId, useMemo } from "react";
 import {
   classNames,
-  clampBarWidth,
   createBandScale,
   createLinearScale,
-  ensureBarMinHeight,
   getStableChartGradientPrefix,
   getBarValueLabelY,
-  getChartElementOpacity,
   getNumberExtent,
   resolveChartPalette,
   buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  DEFAULT_CHART_PADDING,
   resolveChartTooltipContent,
   defaultXYTooltipFormatter,
   barValueLabelClasses,
-  barValueLabelInsideClasses
+  barValueLabelInsideClasses,
+  barInteractiveClasses,
+  BAR_ANIMATED_CLASS,
+  layoutBarRects,
+  resolveBarCornerRadius,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  getChartLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_CARTESIAN_PADDING = { top: 24, right: 24, bottom: 52, left: 52 };
 var BarChart = ({
   width = 320,
   height = 200,
-  padding = DEFAULT_CARTESIAN_PADDING,
+  padding = DEFAULT_CHART_PADDING,
   responsive = false,
   data,
   xScale,
   yScale,
   barColor = "var(--tiger-primary,#2563eb)",
-  barRadius = 4,
+  barRadius,
   barPaddingInner = 0.2,
   barPaddingOuter = 0.1,
   showGrid = true,
@@ -99,14 +110,19 @@ var BarChart = ({
   onBarClick,
   onBarHover
 }) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
   const gradientId = useId();
   const gradientPrefix = useMemo(
     () => getStableChartGradientPrefix("bar", gradientId),
     [gradientId]
   );
+  const interactive = hoverable || selectable || Boolean(onBarClick);
+  const corner = resolveBarCornerRadius(barRadius);
   const {
     tooltipPosition,
     resolvedHoveredIndex,
+    resolvedSelectedIndex,
     activeIndex,
     handleMouseEnter,
     handleMouseMove,
@@ -115,8 +131,7 @@ var BarChart = ({
     handleKeyDown,
     handleLegendClick,
     handleLegendHover,
-    handleLegendLeave,
-    wrapperClasses
+    handleLegendLeave
   } = useChartInteraction({
     hoverable,
     showTooltip,
@@ -132,8 +147,8 @@ var BarChart = ({
       onBarHover?.(index, index !== null ? data[index] : null);
     },
     onSelectedIndexChange,
-    callbacks: {
-      onClick: onBarClick
+    onClick: (index, datum) => {
+      if (datum !== void 0) onBarClick?.(index, datum);
     }
   });
   const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
@@ -143,7 +158,10 @@ var BarChart = ({
     responsive
   );
   const xDomain = useMemo(() => data.map((item) => String(item.x)), [data]);
-  const yValues = useMemo(() => data.map((item) => item.y), [data]);
+  const yValues = useMemo(
+    () => data.map((item) => item.y).filter((value) => Number.isFinite(value)),
+    [data]
+  );
   const resolvedXScale = useMemo(() => {
     if (xScale) return xScale;
     return createBandScale(xDomain, [0, innerRect.width], {
@@ -157,61 +175,39 @@ var BarChart = ({
     return createLinearScale(extent, [innerRect.height, 0]);
   }, [yScale, yValues, innerRect.height]);
   const palette = useMemo(() => resolveChartPalette(colors, barColor), [colors, barColor]);
-  const bars = useMemo(() => {
-    const scale = resolvedXScale;
-    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 - rawBandWidth / 2) + bandOffset;
-      const barYValue = resolvedYScale.map(item.y);
-      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,
-        inactiveOpacity
-      });
-      return {
-        x: barX,
-        y: barY,
-        width: bandWidth,
-        height: barHeight,
-        color,
-        opacity,
-        datum: item,
-        index
-      };
-    });
-  }, [
-    resolvedXScale,
-    resolvedYScale,
-    data,
-    innerRect.width,
-    palette,
-    activeIndex,
-    activeOpacity,
-    inactiveOpacity,
-    barMinHeight,
-    barMaxWidth
-  ]);
+  const bars = useMemo(
+    () => layoutBarRects(data, resolvedXScale, resolvedYScale, {
+      barMaxWidth,
+      barMinHeight,
+      palette,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity,
+      innerWidth: innerRect.width
+    }),
+    [
+      resolvedXScale,
+      resolvedYScale,
+      data,
+      innerRect.width,
+      palette,
+      activeIndex,
+      activeOpacity,
+      inactiveOpacity,
+      barMinHeight,
+      barMaxWidth
+    ]
+  );
   const legendItems = useMemo(
     () => buildChartLegendItems({
       data,
       palette,
       activeIndex,
+      selectedIndex: resolvedSelectedIndex,
       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]
+    [data, legendFormatter, palette, activeIndex, resolvedSelectedIndex]
   );
   const tooltipContent = useMemo(
     () => resolveChartTooltipContent(
@@ -224,6 +220,21 @@ var BarChart = ({
   );
   const shouldShowXAxis = showAxis && showXAxis;
   const shouldShowYAxis = showAxis && showYAxis;
+  const visualActive = bars.findIndex((bar) => bar.index === (activeIndex ?? resolvedHoveredIndex));
+  const handleBarKeyDown = (event, visualIndex) => {
+    if (isChartNavigationKey(event.key)) {
+      event.preventDefault();
+      const nextVisual = nextChartRovingIndex(visualIndex, event.key, bars.length);
+      const next = bars[nextVisual];
+      const node = event.currentTarget.parentElement?.querySelector(
+        `[data-bar-index="${next.index}"]`
+      );
+      if (node instanceof SVGElement) node.focus();
+      handleMouseEnter(next.index, event);
+      return;
+    }
+    handleKeyDown(event, bars[visualIndex].index);
+  };
   const chart = /* @__PURE__ */ jsxs(
     ChartCanvas,
     {
@@ -233,7 +244,6 @@ var BarChart = ({
       responsive,
       title,
       desc,
-      className: classNames(className),
       onResolvedSizeChange,
       children: [
         gradient && /* @__PURE__ */ jsx("defs", { children: bars.map((bar) => /* @__PURE__ */ jsxs(
@@ -288,43 +298,43 @@ var BarChart = ({
             label: yAxisLabel
           }
         ),
-        /* @__PURE__ */ jsx(ChartSeries, { data, type: "bar", children: bars.map((bar) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(ChartSeries, { data, type: "bar", children: bars.map((bar, visualIndex) => /* @__PURE__ */ jsx(
           "rect",
           {
             x: bar.x,
             y: bar.y,
             width: bar.width,
             height: bar.height,
-            rx: barRadius,
-            ry: barRadius,
+            rx: corner.rx,
+            ry: corner.ry,
             fill: gradient ? `url(#${gradientPrefix}-${bar.index})` : bar.color,
             opacity: bar.opacity,
             className: classNames(
-              "transition-[opacity,filter] [transition-duration:var(--tiger-motion-duration-base,200ms)] [transition-timing-function:var(--tiger-motion-ease-decelerate,ease-out)]",
-              (hoverable || selectable) && "cursor-pointer hover:brightness-110"
+              animated && BAR_ANIMATED_CLASS,
+              interactive && barInteractiveClasses
             ),
-            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 var(--tiger-motion-duration-base,200ms) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-base,200ms) var(--tiger-motion-ease-decelerate,ease-out)"
-              } : null
-            },
-            tabIndex: selectable ? 0 : void 0,
-            role: selectable ? "button" : "img",
-            "aria-label": bar.datum.label ?? String(bar.datum.x),
+            style: corner.style ? {
+              rx: "var(--tiger-chart-bar-radius, 4px)",
+              ry: "var(--tiger-chart-bar-radius, 4px)"
+            } : void 0,
+            tabIndex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+            role: interactive ? "button" : void 0,
+            "aria-hidden": interactive ? void 0 : true,
+            "aria-label": interactive ? bar.datum.label ?? defaultXYTooltipFormatter(bar.datum, bar.index) : void 0,
             "data-bar-index": bar.index,
             onMouseEnter: (e) => handleMouseEnter(bar.index, e),
             onMouseMove: handleMouseMove,
             onMouseLeave: handleMouseLeave,
             onClick: () => handleClick(bar.index),
-            onKeyDown: (e) => handleKeyDown(e, bar.index)
+            onKeyDown: (e) => handleBarKeyDown(e, visualIndex)
           },
           `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 labelY = getBarValueLabelY(bar.y, bar.height, valueLabelPosition, 8, {
+            negative: bar.negative
+          });
           const isInside = valueLabelPosition === "inside";
           return /* @__PURE__ */ jsx(
             "text",
@@ -332,7 +342,7 @@ var BarChart = ({
               x: bar.x + bar.width / 2,
               y: labelY,
               textAnchor: "middle",
-              dominantBaseline: isInside ? "central" : "auto",
+              dominantBaseline: isInside ? "central" : bar.negative ? "hanging" : "auto",
               className: isInside ? barValueLabelInsideClasses : barValueLabelClasses,
               opacity: bar.opacity,
               "data-value-label": "",
@@ -353,29 +363,35 @@ var BarChart = ({
       y: tooltipPosition.y
     }
   );
-  if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: classNames("relative", responsive ? "block w-full min-w-0" : "inline-block"), children: [
-      chart,
-      tooltip
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: classNames(wrapperClasses, responsive && "w-full min-w-0"), children: [
-    chart,
-    /* @__PURE__ */ jsx(
-      ChartLegend,
-      {
-        items: legendItems,
-        position: legendPosition,
-        markerSize: legendMarkerSize,
-        gap: legendGap,
-        interactive: hoverable || selectable,
-        onItemClick: handleLegendClick,
-        onItemHover: handleLegendHover,
-        onItemLeave: handleLegendLeave
-      }
-    ),
-    tooltip
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getCartesianChartShellClasses({
+        showLegend,
+        legendPosition,
+        responsive,
+        className
+      }),
+      children: [
+        chart,
+        showLegend ? /* @__PURE__ */ jsx(
+          ChartLegend,
+          {
+            items: legendItems,
+            orientation: chartLegendOrientationFromPosition(legendPosition),
+            markerSize: legendMarkerSize,
+            gap: legendGap,
+            interactive: hoverable || selectable,
+            ariaLabel: labels.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }
+        ) : null,
+        tooltip
+      ]
+    }
+  );
 };
 var BarChart_default = BarChart;
 

package/dist/chunk-C6FS67EL.mjs

@@ -0,0 +1,260 @@
+import {
+  Icon
+} from "./chunk-WPRXOO6N.mjs";
+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/MaskInput.tsx
+import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef } from "react";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  applyMaskInput,
+  classNames,
+  formatMaskValue,
+  getInputClearButtonClasses,
+  getInputErrorClasses,
+  getInputFieldClasses,
+  getInputLabels,
+  getInputWrapperClasses,
+  getMaskInputMode,
+  mergeAriaDescribedBy,
+  parseMask,
+  resolveReadOnlyFlag,
+  runShakeAnimation,
+  shouldEmitMaskComplete
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MaskInput = forwardRef(function MaskInput2({
+  size,
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
+  mask,
+  tokens,
+  value,
+  defaultValue,
+  placeholder = "",
+  disabled = false,
+  readonly: readonlyProp,
+  readOnly: readOnlyProp,
+  clearable = false,
+  name,
+  id,
+  autoComplete,
+  autoFocus = false,
+  onChange,
+  onComplete,
+  onFocus,
+  onBlur,
+  onClear,
+  className,
+  style,
+  type,
+  inputMode,
+  ...rest
+}, ref) {
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const config = useTigerConfig();
+  const labels = useMemo(() => getInputLabels(config.locale), [config.locale]);
+  const inGroup = inputGroup != null;
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const errorMessage = errorMessageProp;
+  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 = value !== void 0 ? value : typeof formBoundValue === "string" ? formBoundValue : void 0;
+  const chromeRef = useRef(null);
+  const inputRef = useRef(null);
+  const isComposing = useRef(false);
+  const pendingCaret = useRef(null);
+  const mountedRef = useRef(false);
+  const reactId = useId();
+  const errorMsgId = `tiger-mask-input-error-${reactId}`;
+  const spec = useMemo(() => parseMask(mask, tokens), [mask, tokens]);
+  const [rawValue, setRawValue] = useControlledState({
+    value: resolvedValue,
+    defaultValue: defaultValue ?? "",
+    onChange: (next, detail) => {
+      onChange?.(next, detail);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const formatted = useMemo(() => formatMaskValue(rawValue, spec), [rawValue, spec]);
+  const maskedValue = formatted.maskedValue;
+  const resolvedInputMode = inputMode ?? getMaskInputMode(mask, spec);
+  const setRefs = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (status === "error") runShakeAnimation(chromeRef.current ?? inputRef.current);
+  }, [status, shakeTrigger]);
+  useLayoutEffect(() => {
+    if (pendingCaret.current !== null && inputRef.current) {
+      const caret = pendingCaret.current;
+      inputRef.current.setSelectionRange(caret, caret);
+      pendingCaret.current = null;
+    }
+  });
+  const commit = (raw, detail, wasCompleted) => {
+    setRawValue(raw, detail);
+    if (shouldEmitMaskComplete(wasCompleted, detail.completed)) {
+      onComplete?.(raw, detail.maskedValue);
+    }
+  };
+  const applyValue = (inputValue, caret) => {
+    const wasCompleted = formatted.completed;
+    const result = applyMaskInput(inputValue, caret, spec, maskedValue);
+    if (inputRef.current) inputRef.current.value = result.maskedValue;
+    pendingCaret.current = result.caret;
+    commit(
+      result.rawValue,
+      { maskedValue: result.maskedValue, completed: result.completed },
+      wasCompleted
+    );
+  };
+  const handleInput = (event) => {
+    if (isComposing.current) return;
+    const target = event.currentTarget;
+    applyValue(target.value, target.selectionStart ?? target.value.length);
+  };
+  const handlePaste = (event) => {
+    if (effectiveDisabled || isReadOnly) return;
+    event.preventDefault();
+    const input = event.currentTarget;
+    const text = event.clipboardData.getData("text");
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? input.value.length;
+    applyValue(input.value.slice(0, start) + text + input.value.slice(end), start + text.length);
+  };
+  const handleClear = () => {
+    setRawValue("", { maskedValue: "", completed: false });
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const handleBlur = (event) => {
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const activeError = status === "error" && !!errorMessage;
+  const showClear = clearable && !effectiveDisabled && !isReadOnly && rawValue.length > 0;
+  const hasExtras = activeError;
+  const describedBy = mergeAriaDescribedBy(
+    mergeAriaDescribedBy(
+      typeof rest["aria-describedby"] === "string" ? rest["aria-describedby"] : void 0,
+      activeError ? errorMsgId : void 0
+    ),
+    formItemControl?.describedBy
+  );
+  const field = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      ref: setRefs,
+      className: getInputFieldClasses({
+        size: effectiveSize,
+        status,
+        hasSuffix: showClear,
+        inGroup: false
+      }),
+      type: type ?? "text",
+      inputMode: resolvedInputMode,
+      value: maskedValue,
+      placeholder,
+      disabled: effectiveDisabled,
+      readOnly: isReadOnly,
+      id: effectiveId,
+      autoComplete,
+      autoFocus,
+      "aria-invalid": status === "error" ? true : rest["aria-invalid"],
+      "aria-required": formItemControl?.required ? true : rest["aria-required"],
+      "aria-describedby": describedBy,
+      onInput: handleInput,
+      onChange: () => {
+      },
+      onPaste: handlePaste,
+      onCompositionStart: () => {
+        isComposing.current = true;
+      },
+      onCompositionEnd: (event) => {
+        isComposing.current = false;
+        const target = event.currentTarget;
+        applyValue(target.value, target.selectionStart ?? target.value.length);
+      },
+      onFocus,
+      onBlur: handleBlur
+    }
+  );
+  const chrome = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: chromeRef,
+      ...{ [TIGER_CHROME_ATTR]: "" },
+      className: classNames(
+        getInputWrapperClasses(status, { inGroup: inGroup && !hasExtras }),
+        !hasExtras ? className : void 0
+      ),
+      style: !hasExtras ? style : void 0,
+      onAnimationEnd: () => chromeRef.current?.classList.remove(SHAKE_CLASS),
+      children: [
+        field,
+        effectiveName ? /* @__PURE__ */ jsx("input", { type: "hidden", name: effectiveName, value: rawValue, disabled: effectiveDisabled }) : null,
+        showClear ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getInputClearButtonClasses(effectiveSize),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: handleClear,
+            "aria-label": labels.clearAriaLabel,
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: "sm", "aria-hidden": true })
+          }
+        ) : null
+      ]
+    }
+  );
+  if (!hasExtras) return chrome;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(
+        inGroup ? "flex flex-col flex-1 min-w-0" : "flex flex-col w-full",
+        className
+      ),
+      style,
+      children: [
+        chrome,
+        activeError ? /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(effectiveSize), "aria-live": "polite", children: errorMessage }) : null
+      ]
+    }
+  );
+});
+MaskInput.displayName = "MaskInput";
+var MaskInput_default = MaskInput;
+
+export {
+  MaskInput,
+  MaskInput_default
+};