@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/chunk-KDURW5AS.mjs

@@ -1,231 +0,0 @@
-import {
-  useChartInteraction
-} from "./chunk-JZZPLKTW.mjs";
-import {
-  ChartTooltip
-} from "./chunk-YORCCCQX.mjs";
-import {
-  ChartCanvas
-} from "./chunk-CUAXRBKO.mjs";
-import {
-  ChartLegend
-} from "./chunk-F2ITBDUS.mjs";
-
-// src/components/FunnelChart.tsx
-import { useId, useMemo } from "react";
-import {
-  classNames,
-  computeFunnelSegments,
-  getChartElementOpacity,
-  getChartInnerRect,
-  getStableChartGradientPrefix,
-  resolveChartPalette,
-  buildChartLegendItems,
-  resolveChartTooltipContent,
-  chartAxisTickTextClasses
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var FunnelChart = ({
-  width = 320,
-  height = 300,
-  padding = 24,
-  data,
-  direction: _direction = "vertical",
-  gap = 2,
-  pinch = false,
-  colors,
-  gradient = false,
-  hoverable = false,
-  hoveredIndex: hoveredIndexProp,
-  activeOpacity = 1,
-  inactiveOpacity = 0.25,
-  selectable = false,
-  selectedIndex: selectedIndexProp,
-  showLegend = false,
-  legendPosition = "bottom",
-  legendMarkerSize = 10,
-  legendGap = 8,
-  showTooltip = true,
-  tooltipFormatter,
-  title,
-  desc,
-  className,
-  onHoveredIndexChange,
-  onSelectedIndexChange,
-  onSegmentClick,
-  onSegmentHover
-}) => {
-  const {
-    tooltipPosition,
-    resolvedHoveredIndex,
-    activeIndex,
-    handleMouseEnter,
-    handleMouseMove,
-    handleMouseLeave,
-    handleClick,
-    handleKeyDown,
-    handleLegendClick,
-    handleLegendHover,
-    handleLegendLeave,
-    wrapperClasses
-  } = useChartInteraction({
-    hoverable,
-    showTooltip,
-    hoveredIndexProp,
-    selectable,
-    selectedIndexProp,
-    activeOpacity,
-    inactiveOpacity,
-    legendPosition,
-    getData: (index) => data[index],
-    onHoveredIndexChange: (index) => {
-      onHoveredIndexChange?.(index);
-      onSegmentHover?.(index, index !== null ? data[index] : null);
-    },
-    onSelectedIndexChange,
-    callbacks: { onClick: onSegmentClick }
-  });
-  const innerRect = useMemo(
-    () => getChartInnerRect(width, height, padding),
-    [width, height, padding]
-  );
-  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
-  const segments = useMemo(
-    () => computeFunnelSegments(data, {
-      width: innerRect.width,
-      height: innerRect.height,
-      gap,
-      pinch,
-      colors: palette
-    }),
-    [data, innerRect.width, innerRect.height, gap, pinch, palette]
-  );
-  const total = useMemo(() => data.reduce((s, d) => s + d.value, 0), [data]);
-  const gradientId = useId();
-  const gradientPrefix = useMemo(
-    () => getStableChartGradientPrefix("funnel", gradientId),
-    [gradientId]
-  );
-  const legendItems = useMemo(
-    () => buildChartLegendItems({
-      data,
-      palette,
-      activeIndex,
-      getLabel: (d, i) => d.label ?? `Stage ${i + 1}`,
-      getColor: (d, i) => d.color ?? palette[i % palette.length]
-    }),
-    [data, palette, activeIndex]
-  );
-  const tooltipContent = useMemo(
-    () => resolveChartTooltipContent(resolvedHoveredIndex, data, tooltipFormatter, (datum, index) => {
-      const pct = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
-      const label = datum.label ?? `Stage ${index + 1}`;
-      return `${label}: ${datum.value} (${pct}%)`;
-    }),
-    [resolvedHoveredIndex, data, tooltipFormatter, total]
-  );
-  const interactive = hoverable || selectable;
-  const chart = /* @__PURE__ */ jsxs(
-    ChartCanvas,
-    {
-      width,
-      height,
-      padding,
-      title,
-      desc,
-      className: classNames(className),
-      children: [
-        gradient && /* @__PURE__ */ jsx("defs", { children: segments.map((seg) => /* @__PURE__ */ jsxs(
-          "linearGradient",
-          {
-            id: `${gradientPrefix}-${seg.index}`,
-            x1: 0,
-            y1: 0,
-            x2: 0,
-            y2: 1,
-            children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: seg.color, stopOpacity: 1 }),
-              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: seg.color, stopOpacity: 0.55 })
-            ]
-          },
-          `grad-${seg.index}`
-        )) }),
-        /* @__PURE__ */ jsx("g", { "data-series-type": "funnel", children: segments.map((seg) => {
-          const opacity = getChartElementOpacity(seg.index, activeIndex, {
-            activeOpacity,
-            inactiveOpacity
-          });
-          return /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: seg.path,
-              fill: gradient ? `url(#${gradientPrefix}-${seg.index})` : seg.color,
-              opacity,
-              className: classNames(interactive && "cursor-pointer"),
-              style: {
-                transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)"
-              },
-              tabIndex: selectable ? 0 : void 0,
-              role: selectable ? "button" : "img",
-              "aria-label": seg.label,
-              onMouseEnter: (e) => handleMouseEnter(seg.index, e),
-              onMouseMove: handleMouseMove,
-              onMouseLeave: handleMouseLeave,
-              onClick: () => handleClick(seg.index),
-              onKeyDown: (e) => handleKeyDown(e, seg.index)
-            },
-            `seg-${seg.index}`
-          );
-        }) }),
-        segments.map((seg) => /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: seg.cx,
-            y: seg.cy,
-            className: chartAxisTickTextClasses,
-            textAnchor: "middle",
-            dominantBaseline: "middle",
-            children: seg.label
-          },
-          `label-${seg.index}`
-        ))
-      ]
-    }
-  );
-  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
-    ChartTooltip,
-    {
-      content: tooltipContent,
-      open: resolvedHoveredIndex !== null && tooltipContent !== "",
-      x: tooltipPosition.x,
-      y: tooltipPosition.y
-    }
-  ) : null;
-  if (!showLegend) {
-    return /* @__PURE__ */ jsxs("div", { className: "inline-block relative", children: [
-      chart,
-      tooltip
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
-    chart,
-    /* @__PURE__ */ jsx(
-      ChartLegend,
-      {
-        items: legendItems,
-        position: legendPosition,
-        markerSize: legendMarkerSize,
-        gap: legendGap,
-        interactive,
-        onItemClick: handleLegendClick,
-        onItemHover: handleLegendHover,
-        onItemLeave: handleLegendLeave
-      }
-    ),
-    tooltip
-  ] });
-};
-
-export {
-  FunnelChart
-};

package/dist/chunk-KKN7KLTB.mjs

@@ -1,84 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/QRCode.tsx
-import { useMemo } from "react";
-import { classNames, mergeTigerLocale, resolveLocaleText } from "@expcat/tigercat-core";
-import {
-  qrcodeContainerClasses,
-  qrcodeOverlayClasses,
-  qrcodeExpiredTextClasses,
-  qrcodeRefreshClasses,
-  generateQRMatrix
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var QRCode = ({
-  value,
-  size = 128,
-  color = "#000000",
-  bgColor = "#ffffff",
-  status = "active",
-  onRefresh,
-  className,
-  locale
-}) => {
-  const config = useTigerConfig();
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const matrix = useMemo(() => generateQRMatrix(value), [value]);
-  const moduleSize = useMemo(() => size / matrix.length, [size, matrix.length]);
-  const containerClass = classNames(qrcodeContainerClasses, className);
-  const ariaLabel = resolveLocaleText("QR Code", mergedLocale?.qrcode?.ariaLabel);
-  const expiredText = resolveLocaleText("QR code expired", mergedLocale?.qrcode?.expiredText);
-  const refreshText = resolveLocaleText("Refresh", mergedLocale?.qrcode?.refreshText);
-  const loadingText = resolveLocaleText(
-    "Loading...",
-    mergedLocale?.qrcode?.loadingText,
-    mergedLocale?.common?.loadingText
-  );
-  return /* @__PURE__ */ jsxs("div", { className: containerClass, style: { width: size, height: size }, children: [
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        width: size,
-        height: size,
-        viewBox: `0 0 ${size} ${size}`,
-        xmlns: "http://www.w3.org/2000/svg",
-        role: "img",
-        "aria-label": ariaLabel,
-        children: [
-          /* @__PURE__ */ jsx("rect", { width: size, height: size, fill: bgColor }),
-          matrix.flatMap(
-            (row, r) => row.map(
-              (cell, c) => cell ? /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: c * moduleSize,
-                  y: r * moduleSize,
-                  width: moduleSize,
-                  height: moduleSize,
-                  fill: color
-                },
-                `${r}-${c}`
-              ) : null
-            )
-          )
-        ]
-      }
-    ),
-    status === "expired" && /* @__PURE__ */ jsxs("div", { className: qrcodeOverlayClasses, children: [
-      /* @__PURE__ */ jsx("span", { className: qrcodeExpiredTextClasses, children: expiredText }),
-      /* @__PURE__ */ jsx("span", { className: qrcodeRefreshClasses, onClick: onRefresh, children: refreshText })
-    ] }),
-    status === "loading" && /* @__PURE__ */ jsx("div", { className: qrcodeOverlayClasses, children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: loadingText }) })
-  ] });
-};
-var QRCode_default = QRCode;
-
-export {
-  QRCode,
-  QRCode_default
-};

package/dist/chunk-KQ4ZKXXN.mjs

@@ -1,118 +0,0 @@
-// src/components/Segmented.tsx
-import {
-  getSegmentedContainerClasses,
-  getSegmentedContainerStyle,
-  getSegmentedIndicatorClasses,
-  getSegmentedIndicatorStyle,
-  getSegmentedOptionClasses,
-  classNames
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Segmented = ({
-  value,
-  options = [],
-  disabled = false,
-  size = "md",
-  block = false,
-  className,
-  onChange,
-  ...rest
-}) => {
-  function handleSelect(opt) {
-    if (opt.disabled || disabled) return;
-    if (opt.value === value) return;
-    onChange?.(opt.value);
-  }
-  const selectedIndex = options.findIndex((opt) => opt.value === value);
-  const firstEnabledIndex = options.findIndex((opt) => !opt.disabled);
-  const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;
-  function focusOption(container, index) {
-    if (!container) return;
-    const els = container.querySelectorAll('[role="radio"]');
-    els[index]?.focus();
-  }
-  function handleKeyDown(e, index) {
-    if (disabled) return;
-    const enabledIdxs = options.reduce((acc, opt, i) => {
-      if (!opt.disabled) acc.push(i);
-      return acc;
-    }, []);
-    if (enabledIdxs.length === 0) return;
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleSelect(options[index]);
-      return;
-    }
-    const pos = enabledIdxs.indexOf(index);
-    let target = null;
-    switch (e.key) {
-      case "ArrowRight":
-      case "ArrowDown":
-        target = enabledIdxs[(pos + 1 + enabledIdxs.length) % enabledIdxs.length];
-        break;
-      case "ArrowLeft":
-      case "ArrowUp":
-        target = enabledIdxs[(pos - 1 + enabledIdxs.length) % enabledIdxs.length];
-        break;
-      case "Home":
-        target = enabledIdxs[0];
-        break;
-      case "End":
-        target = enabledIdxs[enabledIdxs.length - 1];
-        break;
-      default:
-        return;
-    }
-    if (target == null) return;
-    e.preventDefault();
-    const container = e.currentTarget.closest('[role="radiogroup"]');
-    focusOption(container, target);
-    handleSelect(options[target]);
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...rest,
-      className: classNames(getSegmentedContainerClasses(size, block), className),
-      style: getSegmentedContainerStyle(options.length),
-      role: "radiogroup",
-      "aria-disabled": disabled || void 0,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-tiger-segmented-indicator": "true",
-            "aria-hidden": "true",
-            className: getSegmentedIndicatorClasses(size),
-            style: getSegmentedIndicatorStyle(selectedIndex, options.length, size)
-          }
-        ),
-        options.map((opt, index) => {
-          const selected = opt.value === value;
-          const isDisabled = !!opt.disabled || disabled;
-          return /* @__PURE__ */ jsx(
-            "label",
-            {
-              className: classNames(
-                getSegmentedOptionClasses(size, selected, isDisabled),
-                block ? "flex-1 text-center" : ""
-              ),
-              role: "radio",
-              "aria-checked": selected,
-              "aria-disabled": isDisabled,
-              tabIndex: isDisabled ? -1 : index === rovingIndex ? 0 : -1,
-              onClick: () => handleSelect(opt),
-              onKeyDown: (e) => handleKeyDown(e, index),
-              children: /* @__PURE__ */ jsx("span", { children: opt.label })
-            },
-            opt.value
-          );
-        })
-      ]
-    }
-  );
-};
-
-export {
-  Segmented
-};

package/dist/chunk-KRDHM5KB.mjs

@@ -1,259 +0,0 @@
-import {
-  useFormItemControlContext
-} from "./chunk-F6T3OLTQ.mjs";
-import {
-  useControlledState
-} from "./chunk-MEFARVQI.mjs";
-import {
-  Tag
-} from "./chunk-7EXOY7GD.mjs";
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/TagsInput.tsx
-import { useEffect, useId, useRef, useState } from "react";
-import {
-  addTags,
-  classNames,
-  extractTagCandidates,
-  formatRemoveTagLabel,
-  getTagsInputClearButtonClasses,
-  getTagsInputContainerClasses,
-  getTagsInputErrorClasses,
-  getTagsInputHighlightClasses,
-  getTagsInputInnerInputClasses,
-  getTagsInputLabels,
-  injectShakeStyle,
-  removeTagAt,
-  SHAKE_CLASS,
-  splitTagInput
-} from "@expcat/tigercat-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var TagsInput = ({
-  size = "md",
-  status: statusProp,
-  errorMessage: errorMessageProp,
-  _shakeTrigger: shakeTriggerProp,
-  value,
-  defaultValue,
-  placeholder = "",
-  allowDuplicates = false,
-  max,
-  delimiters = [","],
-  addOnBlur = false,
-  beforeAdd,
-  clearable = false,
-  disabled = false,
-  readonly = false,
-  name,
-  id,
-  removeTagAriaLabel,
-  onChange,
-  onAdd,
-  onRemove,
-  onClear,
-  onFocus,
-  onBlur,
-  className,
-  style,
-  ...rest
-}) => {
-  injectShakeStyle();
-  const config = useTigerConfig();
-  const formItemControl = useFormItemControlContext();
-  const status = statusProp ?? formItemControl?.status ?? "default";
-  const errorMessage = errorMessageProp ?? formItemControl?.errorMessage;
-  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
-  const labels = getTagsInputLabels(config.locale);
-  const reactId = useId();
-  const errorMsgId = `tiger-tags-input-error-${reactId}`;
-  const containerRef = useRef(null);
-  const inputRef = useRef(null);
-  const [tags, setTags] = useControlledState(value, defaultValue ?? [], onChange);
-  const [inputText, setInputText] = useState("");
-  const [highlightedIndex, setHighlightedIndex] = useState(null);
-  useEffect(() => {
-    if (status === "error" && containerRef.current) {
-      const el = containerRef.current;
-      el.classList.remove(SHAKE_CLASS);
-      void el.offsetWidth;
-      el.classList.add(SHAKE_CLASS);
-    }
-  }, [status, shakeTrigger]);
-  const isInteractive = !disabled && !readonly;
-  const commitCandidates = (candidates) => {
-    const prepared = [];
-    for (const raw of candidates) {
-      if (!beforeAdd) {
-        prepared.push(raw);
-        continue;
-      }
-      const result = beforeAdd(raw.trim());
-      if (result === false) continue;
-      prepared.push(typeof result === "string" ? result : raw);
-    }
-    if (prepared.length === 0) return { added: [] };
-    const { tags: nextTags, added } = addTags(tags, prepared, { allowDuplicates, max });
-    if (added.length > 0) {
-      setTags(nextTags);
-      added.forEach((tag) => onAdd?.(tag));
-    }
-    return { added };
-  };
-  const handleInputChange = (event) => {
-    if (!isInteractive) return;
-    setHighlightedIndex(null);
-    const { candidates, pending } = extractTagCandidates(event.currentTarget.value, delimiters);
-    if (candidates.length > 0) commitCandidates(candidates);
-    setInputText(pending);
-  };
-  const removeAt = (index) => {
-    const tag = tags[index];
-    if (tag === void 0) return;
-    setTags(removeTagAt(tags, index));
-    onRemove?.(tag, index);
-  };
-  const handleKeyDown = (event) => {
-    if (!isInteractive) return;
-    if (event.key === "Enter") {
-      event.preventDefault();
-      if (inputText.trim()) {
-        const { added } = commitCandidates([inputText]);
-        if (added.length > 0) setInputText("");
-      }
-      return;
-    }
-    if (event.key === "Backspace" && inputText === "") {
-      if (highlightedIndex !== null) {
-        removeAt(highlightedIndex);
-        setHighlightedIndex(null);
-      } else if (tags.length > 0) {
-        setHighlightedIndex(tags.length - 1);
-      }
-      return;
-    }
-    if (event.key === "ArrowLeft" && inputText === "" && tags.length > 0) {
-      setHighlightedIndex((prev) => {
-        if (prev === null) return tags.length - 1;
-        return Math.max(0, prev - 1);
-      });
-      return;
-    }
-    if (event.key === "ArrowRight" && highlightedIndex !== null) {
-      setHighlightedIndex((prev) => {
-        if (prev === null || prev >= tags.length - 1) return null;
-        return prev + 1;
-      });
-      return;
-    }
-    if (event.key === "Escape" && highlightedIndex !== null) {
-      setHighlightedIndex(null);
-      return;
-    }
-    if (highlightedIndex !== null) setHighlightedIndex(null);
-  };
-  const handlePaste = (event) => {
-    if (!isInteractive) return;
-    const text = event.clipboardData.getData("text");
-    const candidates = splitTagInput(text, delimiters);
-    if (candidates.length <= 1) return;
-    event.preventDefault();
-    commitCandidates(candidates);
-    setInputText("");
-  };
-  const handleBlur = (event) => {
-    setHighlightedIndex(null);
-    if (addOnBlur && inputText.trim() && isInteractive) {
-      const { added } = commitCandidates([inputText]);
-      if (added.length > 0) setInputText("");
-    }
-    onBlur?.(event);
-  };
-  const handleClear = () => {
-    if (!isInteractive || tags.length === 0) return;
-    setTags([]);
-    setInputText("");
-    setHighlightedIndex(null);
-    onClear?.();
-    inputRef.current?.focus();
-  };
-  const focusInput = (event) => {
-    if (event.target === containerRef.current) inputRef.current?.focus();
-  };
-  const activeError = status === "error" && !!errorMessage;
-  const isFull = max !== void 0 && tags.length >= max;
-  const removeLabelTemplate = removeTagAriaLabel ?? labels.removeTagLabel;
-  const containerNode = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...rest,
-      ref: containerRef,
-      id,
-      className: classNames(getTagsInputContainerClasses(size, status, { disabled }), className),
-      style,
-      "data-state": isFull ? "full" : void 0,
-      onClick: focusInput,
-      children: [
-        tags.map((tag, index) => /* @__PURE__ */ jsx(
-          Tag,
-          {
-            size: size === "lg" ? "md" : "sm",
-            closable: isInteractive,
-            closeAriaLabel: formatRemoveTagLabel(removeLabelTemplate, tag),
-            className: index === highlightedIndex ? getTagsInputHighlightClasses() : void 0,
-            onClose: (event) => {
-              event.preventDefault();
-              removeAt(index);
-            },
-            children: tag
-          },
-          `${tag}-${index}`
-        )),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            className: getTagsInputInnerInputClasses(),
-            type: "text",
-            value: inputText,
-            placeholder: tags.length === 0 ? placeholder : "",
-            disabled,
-            readOnly: readonly,
-            id: id ? `${id}-input` : void 0,
-            ...status === "error" ? { "aria-invalid": true } : {},
-            ...activeError ? { "aria-describedby": errorMsgId } : {},
-            onChange: handleInputChange,
-            onKeyDown: handleKeyDown,
-            onPaste: handlePaste,
-            onFocus,
-            onBlur: handleBlur
-          }
-        ),
-        clearable && tags.length > 0 && isInteractive && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: getTagsInputClearButtonClasses(),
-            onClick: handleClear,
-            "aria-label": labels.clearAllLabel,
-            tabIndex: -1,
-            children: "\u2715"
-          }
-        ),
-        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: tags.join(",") })
-      ]
-    }
-  );
-  if (!activeError) return containerNode;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    containerNode,
-    /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getTagsInputErrorClasses(), children: errorMessage })
-  ] });
-};
-var TagsInput_default = TagsInput;
-
-export {
-  TagsInput,
-  TagsInput_default
-};