@expcat/tigercat-react 0.4.3 → 1.0.4

package/dist/chunk-YID7J6ZK.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var chunkHQ3QOT7H_js = require('./chunk-HQ3QOT7H.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Result = ({
+  status = "info",
+  title,
+  subTitle,
+  icon,
+  extra,
+  className,
+  children,
+  ...props
+}) => {
+  const colors = react.useMemo(() => tigercatCore.getResultColorScheme(status), [status]);
+  const iconPath = react.useMemo(() => tigercatCore.getResultIconPath(status), [status]);
+  const httpLabel = react.useMemo(() => tigercatCore.getResultHttpLabel(status), [status]);
+  const wrapperClasses = react.useMemo(() => tigercatCore.classNames(tigercatCore.resultBaseClasses, className), [className]);
+  const iconContainerCls = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.resultIconContainerBaseClasses, colors.iconBg),
+    [colors]
+  );
+  const iconSvgCls = react.useMemo(() => tigercatCore.classNames(tigercatCore.resultIconClasses, colors.iconColor), [colors]);
+  const titleCls = react.useMemo(() => tigercatCore.classNames(tigercatCore.resultTitleClasses, colors.titleColor), [colors]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, role: "status", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconContainerCls, children: icon !== void 0 ? icon : httpLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.classNames("text-5xl font-bold", colors.iconColor), children: httpLabel }) : /* @__PURE__ */ jsxRuntime.jsx(chunkHQ3QOT7H_js.StatusIcon, { path: iconPath, className: iconSvgCls }) }),
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleCls, children: title }),
+    subTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.resultSubTitleClasses, children: subTitle }),
+    extra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.resultExtraClasses, children: extra }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 w-full", children })
+  ] });
+};
+
+exports.Result = Result;

package/dist/chunk-YJ4W6DMX.mjs

@@ -0,0 +1,186 @@
+import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
+import { ChartLegend } from './chunk-Z6F67MJE.mjs';
+import { ChartTooltip } from './chunk-LVC43YX2.mjs';
+import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { useMemo } from 'react';
+import { getChartInnerRect, resolveChartPalette, computeSunburstArcs, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SunburstChart = ({
+  width = 320,
+  height = 320,
+  padding = 24,
+  data,
+  innerRadiusRatio = 0,
+  showLabels: _showLabels = true,
+  colors,
+  hoverable = false,
+  hoveredIndex: hoveredIndexProp,
+  activeOpacity = 1,
+  inactiveOpacity = 0.25,
+  selectable = false,
+  selectedIndex: selectedIndexProp,
+  showLegend = false,
+  legendPosition = "bottom",
+  legendMarkerSize = 10,
+  legendGap = 8,
+  showTooltip = true,
+  tooltipFormatter: _tooltipFormatter,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onArcClick,
+  onArcHover
+}) => {
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const outerRadius = useMemo(
+    () => Math.min(innerRect.width, innerRect.height) / 2,
+    [innerRect.width, innerRect.height]
+  );
+  const innerRadius = useMemo(
+    () => outerRadius * Math.max(0, Math.min(1, innerRadiusRatio)),
+    [outerRadius, innerRadiusRatio]
+  );
+  const cx = innerRect.width / 2;
+  const cy = innerRect.height / 2;
+  const arcs = useMemo(
+    () => computeSunburstArcs(data, {
+      cx,
+      cy,
+      innerRadius,
+      outerRadius,
+      colors: palette
+    }),
+    [data, cx, cy, innerRadius, outerRadius, palette]
+  );
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => {
+      const arc = arcs[index];
+      return arc ? { label: arc.label, value: arc.value } : {};
+    },
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      const arc = index !== null ? arcs[index] : null;
+      onArcHover?.(
+        index,
+        arc ? { label: arc.label, value: arc.value } : null
+      );
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onArcClick }
+  });
+  const rootArcs = useMemo(() => arcs.filter((a) => a.depth === 0), [arcs]);
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data: rootArcs,
+      palette,
+      activeIndex,
+      getLabel: (d) => d.label,
+      getColor: (d) => d.color
+    }),
+    [rootArcs, palette, activeIndex]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, arcs, void 0, (arc) => {
+      return `${arc.label}: ${arc.value}`;
+    }),
+    [resolvedHoveredIndex, arcs]
+  );
+  const interactive = hoverable || selectable;
+  const chart = /* @__PURE__ */ jsx(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: /* @__PURE__ */ jsx("g", { "data-series-type": "sunburst", children: arcs.map((arc) => {
+        const opacity = getChartElementOpacity(arc.index, activeIndex, {
+          activeOpacity,
+          inactiveOpacity
+        });
+        return /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: arc.path,
+            fill: arc.color,
+            opacity,
+            stroke: "#ffffff",
+            strokeWidth: 1,
+            className: classNames(interactive && "cursor-pointer"),
+            style: { transition: "opacity 0.2s ease-out" },
+            tabIndex: selectable ? 0 : void 0,
+            role: selectable ? "button" : "img",
+            "aria-label": arc.label,
+            onMouseEnter: (e) => handleMouseEnter(arc.index, e),
+            onMouseMove: handleMouseMove,
+            onMouseLeave: handleMouseLeave,
+            onClick: () => handleClick(arc.index)
+          },
+          `arc-${arc.index}`
+        );
+      }) })
+    }
+  );
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      content: tooltipContent,
+      visible: 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 { SunburstChart };

package/dist/chunk-YLZEOXFS.mjs

@@ -0,0 +1,116 @@
+import React, { useState, useRef, useMemo, useCallback } from 'react';
+import { countLines, generateLineNumbers, getCodeEditorContainerClasses, handleTabKey, getLineNumberClasses, classNames, codeEditorHighlightClasses, codeEditorTextareaClasses, tokenizeLine, getTokenClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/CodeEditor.tsx
+var CodeEditor = ({
+  value: controlledValue,
+  defaultValue = "",
+  language = "plain",
+  theme = "light",
+  readOnly = false,
+  lineNumbers = true,
+  tabSize = 2,
+  placeholder,
+  wordWrap = false,
+  minLines = 3,
+  maxLines = 0,
+  disabled = false,
+  className,
+  style,
+  onChange
+}) => {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const textareaRef = useRef(null);
+  const code = controlledValue !== void 0 ? controlledValue : internalValue;
+  const lines = useMemo(() => code.split("\n"), [code]);
+  const lineCount = useMemo(() => countLines(code), [code]);
+  const lineNums = useMemo(() => generateLineNumbers(lineCount), [lineCount]);
+  const containerClasses = useMemo(
+    () => getCodeEditorContainerClasses(theme, disabled, className),
+    [theme, disabled, className]
+  );
+  const containerStyle = useMemo(() => {
+    const lineHeight = 1.625;
+    const s = { ...style };
+    if (minLines > 0) s.minHeight = `${minLines * lineHeight + 1.5}rem`;
+    if (maxLines > 0) s.maxHeight = `${maxLines * lineHeight + 1.5}rem`;
+    return s;
+  }, [minLines, maxLines, style]);
+  const handleInput = useCallback(
+    (e) => {
+      const val = e.target.value;
+      setInternalValue(val);
+      onChange?.(val);
+    },
+    [onChange]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const ta = textareaRef.current;
+        if (!ta) return;
+        const result = handleTabKey(ta.value, ta.selectionStart, ta.selectionEnd, tabSize);
+        setInternalValue(result.value);
+        onChange?.(result.value);
+        requestAnimationFrame(() => {
+          ta.selectionStart = result.selectionStart;
+          ta.selectionEnd = result.selectionStart;
+        });
+      }
+    },
+    [tabSize, onChange]
+  );
+  const wrapClass = wordWrap ? "whitespace-pre-wrap break-all" : "";
+  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);
+  };
+  const renderLine = (line, lineIndex) => {
+    const tokens = tokenizeLine(line, language);
+    return /* @__PURE__ */ jsxs("div", { className: "min-h-[1.625rem]", children: [
+      tokens.map(renderToken),
+      line === "" ? "\n" : null
+    ] }, lineIndex);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: containerClasses,
+      style: containerStyle,
+      "data-language": language,
+      "data-theme": theme,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full", 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 overflow-auto", children: [
+          /* @__PURE__ */ jsx("div", { className: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: lines.map(renderLine) }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              className: classNames(codeEditorTextareaClasses, wrapClass),
+              value: code,
+              onChange: handleInput,
+              onKeyDown: handleKeyDown,
+              readOnly: readOnly || disabled,
+              disabled,
+              placeholder,
+              spellCheck: false,
+              autoCapitalize: "off",
+              autoComplete: "off",
+              autoCorrect: "off",
+              "data-gramm": "false",
+              "aria-label": "Code editor",
+              role: "textbox",
+              "aria-multiline": true
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+var CodeEditor_default = CodeEditor;
+
+export { CodeEditor, CodeEditor_default };

package/dist/chunk-YPHOVEVU.mjs

@@ -0,0 +1,118 @@
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { extractMentionQuery, classNames, getMentionsInputClasses, mentionsDropdownClasses, getMentionsOptionClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Mentions.tsx
+var Mentions = ({
+  value = "",
+  prefix: triggerPrefix = "@",
+  options = [],
+  placeholder,
+  disabled = false,
+  size = "md",
+  rows = 3,
+  onChange,
+  onSelect,
+  className
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [query, setQuery] = useState("");
+  const mentionStartRef = useRef(-1);
+  const textareaRef = useRef(null);
+  const containerRef = useRef(null);
+  const filteredOptions = useMemo(() => {
+    if (!query) return options;
+    const q = query.toLowerCase();
+    return options.filter((o) => !o.disabled && o.label.toLowerCase().includes(q));
+  }, [options, query]);
+  const handleInput = useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      onChange?.(newValue);
+      const cursorPos = e.target.selectionStart ?? newValue.length;
+      const result = extractMentionQuery(newValue, cursorPos, triggerPrefix);
+      if (result && options.length > 0) {
+        setQuery(result.query);
+        mentionStartRef.current = result.startPos;
+        setIsOpen(true);
+        setActiveIndex(0);
+      } else {
+        setIsOpen(false);
+      }
+    },
+    [onChange, triggerPrefix, options.length]
+  );
+  const selectOption = useCallback(
+    (option) => {
+      if (option.disabled) return;
+      const before = value.slice(0, mentionStartRef.current);
+      const cursorPos = textareaRef.current?.selectionStart ?? value.length;
+      const after = value.slice(cursorPos);
+      const newValue = `${before}${triggerPrefix}${option.value} ${after}`;
+      onChange?.(newValue);
+      onSelect?.(option);
+      setIsOpen(false);
+    },
+    [value, triggerPrefix, onChange, onSelect]
+  );
+  const handleKeydown = useCallback(
+    (e) => {
+      if (!isOpen) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((prev) => (prev + 1) % filteredOptions.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((prev) => (prev - 1 + filteredOptions.length) % filteredOptions.length);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const opt = filteredOptions[activeIndex];
+        if (opt) selectOption(opt);
+      } else if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    },
+    [isOpen, filteredOptions, activeIndex, selectOption]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen]);
+  const wrapperClass = classNames("relative", className);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: wrapperClass, children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        value,
+        className: getMentionsInputClasses(size, disabled),
+        placeholder,
+        disabled,
+        rows,
+        onChange: handleInput,
+        onKeyDown: handleKeydown
+      }
+    ),
+    isOpen && filteredOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: mentionsDropdownClasses, role: "listbox", children: filteredOptions.map((opt, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: getMentionsOptionClasses(i === activeIndex, !!opt.disabled),
+        role: "option",
+        "aria-selected": i === activeIndex,
+        onClick: () => selectOption(opt),
+        children: opt.label
+      },
+      opt.value
+    )) })
+  ] });
+};
+var Mentions_default = Mentions;
+
+export { Mentions, Mentions_default };