@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-5XI3Q6A6.mjs

@@ -0,0 +1,279 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/CodeEditor.tsx
+import React, {
+  useState,
+  useRef,
+  useMemo,
+  useCallback,
+  useLayoutEffect,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import {
+  classNames,
+  getCodeEditorContainerClasses,
+  getLineNumberClasses,
+  getTokenClasses,
+  generateLineNumbers,
+  handleTabKey,
+  getActiveLineIndex,
+  getCodeEditorActiveLineClasses,
+  codeEditorTextareaClasses,
+  codeEditorHighlightClasses,
+  codeEditorScrollerClasses,
+  getCodeEditorWrapClass,
+  getCodeEditorThemeVars,
+  getCodeEditorHeightStyle,
+  buildCodeEditorLineModels,
+  resolveEditorTabAction,
+  getCodeEditorLabels,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CodeEditor = forwardRef(function CodeEditor2({
+  value: controlledValue,
+  defaultValue = "",
+  language = "plain",
+  theme = "light",
+  readOnly = false,
+  lineNumbers = true,
+  tabSize = 2,
+  placeholder,
+  wordWrap = false,
+  minLines = 3,
+  maxLines = 0,
+  highlightActiveLine = true,
+  disabled = false,
+  className,
+  style,
+  onChange,
+  highlighter,
+  locale,
+  labels: labelsOverride,
+  ariaLabel,
+  name,
+  id,
+  ...restProps
+}, ref) {
+  const config = useTigerConfig();
+  const formItemControl = useFormItemControlContext();
+  const formBoundValue = formItemControl?.value;
+  const resolvedValue = controlledValue !== void 0 ? controlledValue : typeof formBoundValue === "string" ? formBoundValue : void 0;
+  const [code, setCode] = useControlledState({
+    value: resolvedValue,
+    defaultValue,
+    onChange: (next) => {
+      onChange?.(next);
+      formItemControl?.onChange?.(next);
+    }
+  });
+  const [activeLine, setActiveLine] = useState(0);
+  const [allowTabExit, setAllowTabExit] = useState(false);
+  const textareaRef = useRef(null);
+  const pendingSelection = useRef(null);
+  const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getCodeEditorLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  useImperativeHandle(ref, () => textareaRef.current);
+  useLayoutEffect(() => {
+    const pending = pendingSelection.current;
+    if (!pending || !textareaRef.current) return;
+    pendingSelection.current = null;
+    textareaRef.current.selectionStart = pending.start;
+    textareaRef.current.selectionEnd = pending.end;
+  });
+  const model = useMemo(
+    () => buildCodeEditorLineModels({
+      value: code,
+      language,
+      theme,
+      activeLine,
+      highlightActiveLine,
+      disabled: effectiveDisabled,
+      highlighter
+    }),
+    [code, language, theme, activeLine, highlightActiveLine, effectiveDisabled, highlighter]
+  );
+  const lineNums = useMemo(() => generateLineNumbers(model.lines.length), [model.lines.length]);
+  const containerClasses = useMemo(
+    () => getCodeEditorContainerClasses(theme, effectiveDisabled, className),
+    [theme, effectiveDisabled, className]
+  );
+  const containerStyle = useMemo(() => {
+    const height = getCodeEditorHeightStyle(minLines, maxLines);
+    const themeVars = getCodeEditorThemeVars(theme);
+    return { ...height, ...themeVars, ...style };
+  }, [minLines, maxLines, theme, style]);
+  const updateActiveLine = useCallback(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    setActiveLine(getActiveLineIndex(ta.value, ta.selectionStart));
+  }, []);
+  const handleInput = useCallback(
+    (e) => {
+      const val = e.target.value;
+      setCode(val);
+      setActiveLine(getActiveLineIndex(val, e.target.selectionStart));
+    },
+    [setCode]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      const action = resolveEditorTabAction(e, {
+        readOnly,
+        disabled: effectiveDisabled,
+        allowTabExit
+      });
+      if (action === "arm-exit") {
+        setAllowTabExit(true);
+        return;
+      }
+      if (action === "passthrough") {
+        if (e.key !== "Tab") setAllowTabExit(false);
+        return;
+      }
+      e.preventDefault();
+      setAllowTabExit(false);
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const result = handleTabKey(ta.value, ta.selectionStart, ta.selectionEnd, tabSize, {
+        shift: action === "outdent"
+      });
+      pendingSelection.current = {
+        start: result.selectionStart,
+        end: result.selectionEnd
+      };
+      setCode(result.value);
+    },
+    [allowTabExit, effectiveDisabled, readOnly, setCode, tabSize]
+  );
+  const wrapClass = getCodeEditorWrapClass(wordWrap);
+  const activeLineClass = getCodeEditorActiveLineClasses(theme);
+  const {
+    id: _ignoredId,
+    name: _ignoredName,
+    onFocus,
+    onBlur,
+    "aria-label": ariaLabelAttr,
+    "aria-labelledby": ariaLabelledBy,
+    ...containerRest
+  } = restProps;
+  const hostRest = {};
+  const extraContainer = {};
+  for (const [key, val] of Object.entries(containerRest)) {
+    if (key.startsWith("data-") || key.startsWith("aria-") || key === "onFocus" || key === "onBlur") {
+      if (key === "data-language" || key === "data-theme") extraContainer[key] = val;
+      else hostRest[key] = val;
+    } else {
+      extraContainer[key] = val;
+    }
+  }
+  const renderToken = (token, idx) => {
+    const cls = getTokenClasses(token.type, theme);
+    return cls ? /* @__PURE__ */ jsx("span", { className: cls, children: token.value }, idx) : /* @__PURE__ */ jsx(React.Fragment, { children: token.value }, idx);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      style: containerStyle,
+      "data-language": language,
+      "data-theme": theme,
+      ...extraContainer,
+      children: /* @__PURE__ */ jsxs("div", { className: codeEditorScrollerClasses, "data-tiger-code-scroller": "", children: [
+        lineNumbers && /* @__PURE__ */ jsx("div", { className: getLineNumberClasses(theme), "aria-hidden": "true", children: lineNums.map((n) => /* @__PURE__ */ jsx("div", { className: "min-h-[1.625rem]", children: n }, n)) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+          model.blockHtml !== null ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(codeEditorHighlightClasses, wrapClass),
+              "aria-hidden": "true",
+              dangerouslySetInnerHTML: { __html: model.blockHtml }
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: model.lines.map((line) => {
+            const lineClass = classNames("min-h-[1.625rem]", line.isActive && activeLineClass);
+            if (line.html !== null) {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: lineClass,
+                  "data-active-line": line.isActive ? "" : void 0,
+                  dangerouslySetInnerHTML: { __html: line.html }
+                },
+                line.index
+              );
+            }
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: lineClass,
+                "data-active-line": line.isActive ? "" : void 0,
+                children: [
+                  (line.tokens ?? []).map(renderToken),
+                  line.text === "" ? "\n" : null
+                ]
+              },
+              line.index
+            );
+          }) }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: classNames(codeEditorTextareaClasses, wrapClass),
+              value: code,
+              onChange: handleInput,
+              onKeyDown: handleKeyDown,
+              onSelect: updateActiveLine,
+              onClick: updateActiveLine,
+              onKeyUp: updateActiveLine,
+              onFocus,
+              onBlur: (event) => {
+                formItemControl?.onBlur?.();
+                onBlur?.(event);
+              },
+              readOnly: readOnly || effectiveDisabled,
+              disabled: effectiveDisabled,
+              placeholder,
+              spellCheck: false,
+              autoCapitalize: "off",
+              autoComplete: "off",
+              autoCorrect: "off",
+              "data-gramm": "false",
+              id: effectiveId,
+              name: effectiveName,
+              "aria-label": ariaLabel ?? ariaLabelAttr ?? labels.editorAriaLabel,
+              "aria-labelledby": ariaLabelledBy ?? formItemControl?.labelId,
+              "aria-multiline": true,
+              "aria-describedby": formItemControl?.describedBy,
+              ...hostRest
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+});
+var CodeEditor_default = CodeEditor;
+
+export {
+  CodeEditor,
+  CodeEditor_default
+};

package/dist/{chunk-NT7GW2FD.mjs → chunk-635ACZQW.mjs}

@@ -1,6 +1,7 @@
 // src/components/AspectRatio.tsx
 import { forwardRef, useMemo } from "react";
 import {
+  classNames,
   getAspectRatioContentClasses,
   getAspectRatioRootClasses,
   getAspectRatioStyle,
@@ -18,7 +19,7 @@ var AspectRatio = forwardRef(
   }, ref) => {
     const rootClasses = useMemo(() => getAspectRatioRootClasses(className), [className]);
     const contentClasses = useMemo(
-      () => getAspectRatioContentClasses(contentClassName),
+      () => classNames(getAspectRatioContentClasses(), contentClassName),
       [contentClassName]
     );
     const style = useMemo(
@@ -28,7 +29,7 @@ var AspectRatio = forwardRef(
       }),
       [ratio, styleProp]
     );
-    return /* @__PURE__ */ jsx("div", { ref, "data-aspect-ratio": "", className: rootClasses, style, ...rest, children: /* @__PURE__ */ jsx("div", { "data-aspect-ratio-content": "", className: contentClasses, children }) });
+    return /* @__PURE__ */ jsx("div", { ...rest, ref, "data-aspect-ratio": "", className: rootClasses, style, children: /* @__PURE__ */ jsx("div", { "data-aspect-ratio-content": "", className: contentClasses, children }) });
   }
 );
 AspectRatio.displayName = "AspectRatio";

package/dist/chunk-65CDWNRJ.mjs

@@ -0,0 +1,314 @@
+import {
+  useChartInteraction
+} from "./chunk-7H7EKANG.mjs";
+import {
+  useResponsiveChartSize
+} from "./chunk-7P4R3NVO.mjs";
+import {
+  ChartTooltip
+} from "./chunk-IPI45RUK.mjs";
+import {
+  ChartCanvas
+} from "./chunk-OP77MPGN.mjs";
+import {
+  ChartLegend
+} from "./chunk-A4JRK5SM.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/TreeMapChart.tsx
+import React, { useId, useMemo } from "react";
+import {
+  classNames,
+  layoutTreeMap,
+  getChartElementOpacity,
+  getStableChartGradientPrefix,
+  resolveChartPalette,
+  buildChartLegendItems,
+  chartLegendOrientationFromPosition,
+  getCartesianChartShellClasses,
+  chartMarkTabIndex,
+  nextChartRovingIndex,
+  isChartNavigationKey,
+  getChartLabels,
+  mergeTigerLocale,
+  formatChartTemplate,
+  treemapNodeTransitionClasses,
+  DEFAULT_TREEMAP_WIDTH,
+  DEFAULT_TREEMAP_HEIGHT,
+  DEFAULT_TREEMAP_PADDING,
+  DEFAULT_TREEMAP_GAP,
+  DEFAULT_TREEMAP_NODE_RADIUS,
+  DEFAULT_TREEMAP_MIN_LABEL_SIZE
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TreeMapChart = ({
+  width = DEFAULT_TREEMAP_WIDTH,
+  height = DEFAULT_TREEMAP_HEIGHT,
+  padding = DEFAULT_TREEMAP_PADDING,
+  responsive = false,
+  data,
+  gap = DEFAULT_TREEMAP_GAP,
+  showLabels = true,
+  minLabelSize = DEFAULT_TREEMAP_MIN_LABEL_SIZE,
+  nodeRadius = DEFAULT_TREEMAP_NODE_RADIUS,
+  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,
+  onNodeClick,
+  onNodeHover
+}) => {
+  const config = useTigerConfig();
+  const labels = useMemo(() => getChartLabels(mergeTigerLocale(config.locale)), [config.locale]);
+  const interactive = hoverable || selectable || Boolean(onNodeClick);
+  const { innerRect, onResolvedSizeChange } = useResponsiveChartSize(
+    width,
+    height,
+    padding,
+    responsive
+  );
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const gradientId = useId();
+  const gradientPrefix = useMemo(
+    () => getStableChartGradientPrefix("treemap", gradientId),
+    [gradientId]
+  );
+  const nodes = useMemo(
+    () => layoutTreeMap(data, {
+      width: innerRect.width,
+      height: innerRect.height,
+      gap,
+      colors: palette,
+      minLabelSize
+    }),
+    [data, innerRect.width, innerRect.height, gap, palette, minLabelSize]
+  );
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    resolvedSelectedIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleKeyDown,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave
+  } = useChartInteraction({
+    hoverable,
+    showTooltip,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => nodes[index]?.datum,
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      onNodeHover?.(index, index !== null ? nodes[index]?.datum ?? null : null);
+    },
+    onSelectedIndexChange,
+    onClick: (index, datum) => {
+      if (datum !== void 0) onNodeClick?.(index, datum);
+    }
+  });
+  const rootTotal = useMemo(
+    () => nodes.filter((node) => node.depth === 0).reduce((sum, node) => sum + node.value, 0),
+    [nodes]
+  );
+  const roots = useMemo(() => nodes.filter((node) => node.depth === 0), [nodes]);
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data: roots.map((node) => node.datum),
+      palette,
+      activeIndex,
+      selectedIndex: resolvedSelectedIndex,
+      getLabel: (d) => d.label,
+      getColor: (_d, i) => roots[i]?.color ?? palette[i % palette.length]
+    }).map((item, i) => ({ ...item, index: roots[i]?.index ?? item.index })),
+    [roots, palette, activeIndex, resolvedSelectedIndex]
+  );
+  const tooltipContent = useMemo(() => {
+    if (resolvedHoveredIndex === null) return "";
+    const node = nodes[resolvedHoveredIndex];
+    if (!node) return "";
+    if (tooltipFormatter) return tooltipFormatter(node.datum, node.index);
+    const percent = rootTotal > 0 ? (node.value / rootTotal * 100).toFixed(1) : "0";
+    return formatChartTemplate(labels.treemapTooltip, {
+      label: node.label,
+      value: node.value,
+      percent
+    });
+  }, [resolvedHoveredIndex, nodes, tooltipFormatter, rootTotal, labels.treemapTooltip]);
+  const visualActive = nodes.findIndex(
+    (node) => node.index === (activeIndex ?? resolvedHoveredIndex)
+  );
+  const handleNodeKeyDown = (event, visualIndex) => {
+    if (isChartNavigationKey(event.key)) {
+      event.preventDefault();
+      const nextVisual = nextChartRovingIndex(visualIndex, event.key, nodes.length);
+      const next = nodes[nextVisual];
+      const node = event.currentTarget.parentElement?.querySelector(
+        `[data-treemap-node][data-index="${next.index}"]`
+      );
+      if (node instanceof SVGElement) node.focus();
+      handleMouseEnter(next.index, event);
+      return;
+    }
+    handleKeyDown(event, nodes[visualIndex].index);
+  };
+  const chart = /* @__PURE__ */ jsxs(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      responsive,
+      title,
+      desc,
+      onResolvedSizeChange,
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          gradient && nodes.map((node) => /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-${node.index}`,
+              gradientUnits: "userSpaceOnUse",
+              x1: 0,
+              y1: 0,
+              x2: 0,
+              y2: innerRect.height,
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: node.color, stopOpacity: 1 }),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: node.color, stopOpacity: 0.7 })
+              ]
+            },
+            `grad-${node.index}`
+          )),
+          nodes.map((node) => /* @__PURE__ */ jsx("clipPath", { id: `${gradientPrefix}-clip-${node.index}`, children: /* @__PURE__ */ jsx("rect", { x: node.x, y: node.y, width: node.w, height: node.h }) }, `clip-${node.index}`))
+        ] }),
+        /* @__PURE__ */ jsx("g", { "data-series-type": "treemap", children: nodes.map((node, visualIndex) => {
+          const opacity = getChartElementOpacity(node.index, activeIndex, {
+            activeOpacity,
+            inactiveOpacity
+          });
+          const percent = rootTotal > 0 ? (node.value / rootTotal * 100).toFixed(1) : "0";
+          const ariaLabel = formatChartTemplate(labels.treemapTooltip, {
+            label: node.label,
+            value: node.value,
+            percent
+          });
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: node.x,
+                y: node.y,
+                width: node.w,
+                height: node.h,
+                rx: nodeRadius,
+                fill: gradient ? `url(#${gradientPrefix}-${node.index})` : node.color,
+                opacity,
+                "data-treemap-node": "",
+                "data-index": node.index,
+                className: classNames(
+                  interactive && "cursor-pointer",
+                  treemapNodeTransitionClasses
+                ),
+                tabIndex: interactive ? chartMarkTabIndex(visualIndex, visualActive < 0 ? null : visualActive) : void 0,
+                role: interactive ? "button" : void 0,
+                "aria-hidden": interactive ? void 0 : true,
+                "aria-label": interactive ? ariaLabel : void 0,
+                onMouseEnter: (e) => handleMouseEnter(node.index, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onFocus: (e) => handleMouseEnter(node.index, e),
+                onClick: () => handleClick(node.index),
+                onKeyDown: (e) => handleNodeKeyDown(e, visualIndex)
+              }
+            ),
+            showLabels && node.showLabel && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: node.x + node.w / 2,
+                y: node.y + Math.min(14, node.h / 2),
+                fill: node.labelFill,
+                className: "pointer-events-none select-none",
+                textAnchor: "middle",
+                dominantBaseline: "middle",
+                fontSize: node.fontSize,
+                clipPath: `url(#${gradientPrefix}-clip-${node.index})`,
+                "aria-hidden": "true",
+                children: node.label
+              }
+            )
+          ] }, `node-${node.index}`);
+        }) })
+      ]
+    }
+  );
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      open: resolvedHoveredIndex !== null && tooltipContent !== "",
+      x: tooltipPosition.x,
+      y: tooltipPosition.y
+    }
+  ) : null;
+  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,
+            ariaLabel: labels.legendAriaLabel,
+            onItemClick: handleLegendClick,
+            onItemHover: handleLegendHover,
+            onItemLeave: handleLegendLeave
+          }
+        ) : null,
+        tooltip
+      ]
+    }
+  );
+};
+var TreeMapChart_default = TreeMapChart;
+
+export {
+  TreeMapChart,
+  TreeMapChart_default
+};