@expcat/tigercat-react 0.4.2 → 1.0.0

package/dist/chunk-VUD4BU4K.mjs

@@ -0,0 +1,192 @@
+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 React, { useMemo } from 'react';
+import { getChartInnerRect, resolveChartPalette, computeTreeMapNodes, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var TreeMapChart = ({
+  width = 400,
+  height = 300,
+  padding = 8,
+  data,
+  gap = 2,
+  showLabels = true,
+  minLabelSize = 10,
+  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,
+  title,
+  desc,
+  className,
+  onHoveredIndexChange,
+  onSelectedIndexChange,
+  onNodeClick,
+  onNodeHover
+}) => {
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [width, height, padding]
+  );
+  const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const nodes = useMemo(
+    () => computeTreeMapNodes(data, {
+      width: innerRect.width,
+      height: innerRect.height,
+      gap,
+      colors: palette
+    }),
+    [data, innerRect.width, innerRect.height, gap, palette]
+  );
+  const {
+    tooltipPosition,
+    resolvedHoveredIndex,
+    activeIndex,
+    handleMouseEnter,
+    handleMouseMove,
+    handleMouseLeave,
+    handleClick,
+    handleLegendClick,
+    handleLegendHover,
+    handleLegendLeave,
+    wrapperClasses
+  } = useChartInteraction({
+    hoverable,
+    hoveredIndexProp,
+    selectable,
+    selectedIndexProp,
+    activeOpacity,
+    inactiveOpacity,
+    legendPosition,
+    getData: (index) => {
+      const node = nodes[index];
+      return node ? { label: node.label, value: node.value } : {};
+    },
+    onHoveredIndexChange: (index) => {
+      onHoveredIndexChange?.(index);
+      const node = index !== null ? nodes[index] : null;
+      onNodeHover?.(
+        index,
+        node ? { label: node.label, value: node.value } : null
+      );
+    },
+    onSelectedIndexChange,
+    callbacks: { onClick: onNodeClick }
+  });
+  const total = useMemo(() => nodes.reduce((s, n) => s + n.value, 0), [nodes]);
+  const legendItems = useMemo(
+    () => buildChartLegendItems({
+      data: nodes,
+      palette,
+      activeIndex,
+      getLabel: (d) => d.label,
+      getColor: (d) => d.color
+    }),
+    [nodes, palette, activeIndex]
+  );
+  const tooltipContent = useMemo(
+    () => resolveChartTooltipContent(resolvedHoveredIndex, nodes, void 0, (node) => {
+      const pct = total > 0 ? (node.value / total * 100).toFixed(1) : "0";
+      return `${node.label}: ${node.value} (${pct}%)`;
+    }),
+    [resolvedHoveredIndex, nodes, total]
+  );
+  const interactive = hoverable || selectable;
+  const chart = /* @__PURE__ */ jsx(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      children: /* @__PURE__ */ jsx("g", { "data-series-type": "treemap", children: nodes.map((node) => {
+        const opacity = getChartElementOpacity(node.index, activeIndex, {
+          activeOpacity,
+          inactiveOpacity
+        });
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: node.x,
+              y: node.y,
+              width: node.w,
+              height: node.h,
+              rx: 2,
+              fill: node.color,
+              opacity,
+              className: classNames(interactive && "cursor-pointer"),
+              style: { transition: "opacity 0.2s ease-out" },
+              onMouseEnter: (e) => handleMouseEnter(node.index, e),
+              onMouseMove: handleMouseMove,
+              onMouseLeave: handleMouseLeave,
+              onClick: () => handleClick(node.index)
+            }
+          ),
+          showLabels && node.w > 30 && node.h > minLabelSize + 4 && /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: node.x + node.w / 2,
+              y: node.y + node.h / 2,
+              className: "fill-white text-xs",
+              textAnchor: "middle",
+              dominantBaseline: "middle",
+              style: {
+                pointerEvents: "none",
+                fontSize: `${Math.min(12, node.h * 0.3)}px`
+              },
+              children: node.label
+            }
+          )
+        ] }, `node-${node.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 { TreeMapChart };

package/dist/{chunk-XWNVBCJA.js → chunk-VWMVWZMD.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkYV6Y7C43_js = require('./chunk-YV6Y7C43.js');
-var chunkQ57BYUUW_js = require('./chunk-Q57BYUUW.js');
-var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var chunkSDWJSALH_js = require('./chunk-SDWJSALH.js');
+var chunkHWWNBCFB_js = require('./chunk-HWWNBCFB.js');
+var chunkBCNKTT5C_js = require('./chunk-BCNKTT5C.js');
 var chunk2GKTVAAB_js = require('./chunk-2GKTVAAB.js');
-var chunkI5TCE5E7_js = require('./chunk-I5TCE5E7.js');
-var chunkSSQOCZ6O_js = require('./chunk-SSQOCZ6O.js');
+var chunkUF3DXKCI_js = require('./chunk-UF3DXKCI.js');
+var chunkUIO6O4MI_js = require('./chunk-UIO6O4MI.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -158,13 +158,13 @@ var NotificationCenter = ({
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_js.Text, { tag: "span", size: "sm", weight: isRead ? "normal" : "semibold", children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkUF3DXKCI_js.Text, { tag: "span", size: "sm", weight: isRead ? "normal" : "semibold", children: item.title }),
               timeText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[var(--tiger-text-muted,#6b7280)] whitespace-nowrap flex-shrink-0", children: timeText }) : null
             ] }),
             item.description ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2 leading-relaxed", children: item.description }) : null
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkF24IF2QL_js.Button,
+            chunkBCNKTT5C_js.Button,
             {
               size: "sm",
               variant: "ghost",
@@ -187,7 +187,7 @@ var NotificationCenter = ({
     );
   };
   const renderList = (listItems) => /* @__PURE__ */ jsxRuntime.jsx(
-    chunkQ57BYUUW_js.List,
+    chunkHWWNBCFB_js.List,
     {
       dataSource: listItems,
       split: true,
@@ -203,7 +203,7 @@ var NotificationCenter = ({
     { key: "unread", label: unreadLabel },
     { key: "read", label: readLabel }
   ];
-  const content = loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(chunk2GKTVAAB_js.Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(chunkYV6Y7C43_js.Tabs, { type: "line", size: "small", activeKey: currentGroupKey, onChange: handleGroupChange, children: resolvedGroups.map((group, index) => {
+  const content = loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsxRuntime.jsx(chunk2GKTVAAB_js.Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(chunkSDWJSALH_js.Tabs, { type: "line", size: "small", activeKey: currentGroupKey, onChange: handleGroupChange, children: resolvedGroups.map((group, index) => {
     const effectiveGroup = effectiveGroups.find(
       (eg, ei) => getGroupKey(eg, ei) === getGroupKey(group, index)
     );
@@ -212,7 +212,7 @@ var NotificationCenter = ({
     const labelBase = group.title || String(group.key ?? index);
     const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      chunkYV6Y7C43_js.TabPane,
+      chunkSDWJSALH_js.TabPane,
       {
         tabKey: getGroupKey(group, index),
         label,
@@ -222,17 +222,17 @@ var NotificationCenter = ({
     );
   }) }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto", children: renderList(filterItems(effectiveItems, currentReadFilter)) });
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClasses, ...props, "data-tiger-notification-center": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-    chunkSSQOCZ6O_js.Card,
+    chunkUIO6O4MI_js.Card,
     {
       variant: "bordered",
       className: "w-full",
       header: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_js.Text, { tag: "div", size: "base", weight: "bold", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkUF3DXKCI_js.Text, { tag: "div", size: "base", weight: "bold", children: title }),
             totalUnread > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white", children: totalUnread }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkBCNKTT5C_js.Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex rounded-md border border-[var(--tiger-border,#e5e7eb)] overflow-hidden self-start", children: filterButtons.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",

package/dist/{chunk-JWFEJ4XG.js → chunk-WGPUGPYE.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkQL6UEG3U_js = require('./chunk-QL6UEG3U.js');
+var chunk2XOFRGY6_js = require('./chunk-2XOFRGY6.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -225,7 +225,7 @@ var TaskBoard = ({
   style,
   ...rest
 }) => {
-  const config = chunkQL6UEG3U_js.useTigerConfig();
+  const config = chunk2XOFRGY6_js.useTigerConfig();
   const mergedLocale = React.useMemo(
     () => tigercatCore.mergeTigerLocale(config.locale, locale),
     [config.locale, locale]

package/dist/chunk-WIWTY74F.mjs

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { getEmptyDescription, classNames, emptyBaseClasses, emptyImageClasses, emptyIllustrationPaths, emptyIllustrationViewBox, emptyDescriptionClasses, emptyActionsClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Empty.tsx
+var Empty = ({
+  preset = "default",
+  description,
+  showImage = true,
+  image,
+  extra,
+  className,
+  children,
+  ...props
+}) => {
+  const descText = useMemo(() => description ?? getEmptyDescription(preset), [description, preset]);
+  const wrapperClasses = useMemo(() => classNames(emptyBaseClasses, className), [className]);
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, ...props, children: [
+    showImage && /* @__PURE__ */ jsx("div", { className: emptyImageClasses, children: image !== void 0 ? image : /* @__PURE__ */ jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: emptyIllustrationViewBox,
+        className: "mx-auto h-24 w-24",
+        children: emptyIllustrationPaths.map((p, i) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: p.d,
+            fill: p.fill ?? "none",
+            stroke: p.stroke,
+            strokeWidth: p.strokeWidth,
+            opacity: p.opacity
+          },
+          i
+        ))
+      }
+    ) }),
+    descText && /* @__PURE__ */ jsx("div", { className: emptyDescriptionClasses, children: descText }),
+    extra && /* @__PURE__ */ jsx("div", { className: emptyActionsClasses, children: extra }),
+    children && /* @__PURE__ */ jsx("div", { children })
+  ] });
+};
+
+export { Empty };

package/dist/chunk-WNLUUD5N.mjs

@@ -0,0 +1,179 @@
+import { useRef, useId, useState, useEffect, useCallback } from 'react';
+import { injectShakeStyle, SHAKE_CLASS, getInputClasses, classNames, getInputAffixClasses, getInputWrapperClasses, getInputCountClasses, parseInputValue, getInputErrorClasses, getInputClearButtonClasses, getInputPasswordToggleClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Input.tsx
+var Input = ({
+  size = "md",
+  type = "text",
+  status = "default",
+  errorMessage,
+  _shakeTrigger,
+  prefix,
+  suffix,
+  value,
+  defaultValue,
+  placeholder = "",
+  disabled = false,
+  readonly = false,
+  required = false,
+  maxLength,
+  minLength,
+  name,
+  id,
+  autoComplete,
+  autoFocus = false,
+  clearable = false,
+  showPassword = false,
+  showCount = false,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onClear,
+  className,
+  style,
+  ...props
+}) => {
+  injectShakeStyle();
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const reactId = useId();
+  const errorMsgId = `tiger-input-error-${reactId}`;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  useEffect(() => {
+    if (status === "error" && wrapperRef.current) {
+      const el = wrapperRef.current;
+      el.classList.remove(SHAKE_CLASS);
+      void el.offsetWidth;
+      el.classList.add(SHAKE_CLASS);
+    }
+  }, [status, _shakeTrigger]);
+  const handleAnimationEnd = useCallback(() => {
+    wrapperRef.current?.classList.remove(SHAKE_CLASS);
+  }, []);
+  const isControlled = value !== void 0;
+  const inputValue = isControlled ? value : internalValue;
+  const currentValStr = String(inputValue);
+  const handleInput = (event) => {
+    if (!isControlled) {
+      setInternalValue(parseInputValue(event.currentTarget, type));
+    }
+    onInput?.(event);
+  };
+  const handleChange = (event) => {
+    if (!isControlled) {
+      setInternalValue(parseInputValue(event.currentTarget, type));
+    }
+    onChange?.(event);
+  };
+  const handleClear = () => {
+    if (!isControlled) {
+      setInternalValue("");
+    }
+    onClear?.();
+    inputRef.current?.focus();
+  };
+  const togglePasswordVisibility = () => {
+    setPasswordVisible((v) => !v);
+  };
+  const hasPrefix = !!prefix;
+  const hasSuffix = !!suffix || clearable || showPassword;
+  const activeError = status === "error" && !!errorMessage;
+  const showClear = clearable && !disabled && !readonly && currentValStr.length > 0;
+  const showPasswordToggle = showPassword && type === "password" && !disabled;
+  const effectiveType = showPassword && type === "password" ? passwordVisible ? "text" : "password" : type;
+  const inputClasses = getInputClasses({
+    size,
+    status,
+    hasPrefix,
+    hasSuffix
+  });
+  const renderSuffix = () => {
+    if (activeError) {
+      return /* @__PURE__ */ jsx("div", { id: errorMsgId, className: getInputErrorClasses(size), children: errorMessage });
+    }
+    if (showClear) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getInputClearButtonClasses(size),
+          onClick: handleClear,
+          "aria-label": "Clear input",
+          tabIndex: -1,
+          children: "\u2715"
+        }
+      );
+    }
+    if (showPasswordToggle) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getInputPasswordToggleClasses(size),
+          onClick: togglePasswordVisibility,
+          "aria-label": passwordVisible ? "Hide password" : "Show password",
+          tabIndex: -1,
+          children: passwordVisible ? "\u{1F648}" : "\u{1F441}"
+        }
+      );
+    }
+    if (suffix) {
+      return /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("suffix", size), children: suffix });
+    }
+    return null;
+  };
+  const wrapperNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: classNames(getInputWrapperClasses(), className),
+      style,
+      onAnimationEnd: handleAnimationEnd,
+      children: [
+        hasPrefix && /* @__PURE__ */ jsx("div", { className: getInputAffixClasses("prefix", size), children: prefix }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            ref: inputRef,
+            className: inputClasses,
+            type: effectiveType,
+            value: inputValue,
+            placeholder,
+            disabled,
+            readOnly: readonly,
+            required,
+            maxLength,
+            minLength,
+            name,
+            id,
+            autoComplete,
+            autoFocus,
+            ...status === "error" ? { "aria-invalid": true } : {},
+            ...activeError ? { "aria-describedby": errorMsgId } : {},
+            onInput: handleInput,
+            onChange: handleChange,
+            onFocus,
+            onBlur
+          }
+        ),
+        renderSuffix()
+      ]
+    }
+  );
+  if (showCount) {
+    const count = currentValStr.length;
+    const isOver = maxLength !== void 0 && count > maxLength;
+    const countText = maxLength !== void 0 ? `${count} / ${maxLength}` : `${count}`;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      wrapperNode,
+      /* @__PURE__ */ jsx("div", { className: getInputCountClasses(isOver), children: countText })
+    ] });
+  }
+  return wrapperNode;
+};
+
+export { Input };

package/dist/{chunk-VCOBBJLP.js → chunk-WVVXZKNI.js}

@@ -1,10 +1,10 @@
 'use strict';
 
+var chunkUKGQ7256_js = require('./chunk-UKGQ7256.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/Textarea.tsx
 var Textarea = react.forwardRef(
   ({
     size = "md",
@@ -29,9 +29,10 @@ var Textarea = react.forwardRef(
     ...props
   }, ref) => {
     const textareaRef = react.useRef(null);
-    const [internalValue, setInternalValue] = react.useState(defaultValue || "");
-    const isControlled = value !== void 0;
-    const currentValue = isControlled ? value : internalValue;
+    const [currentValue, setInternalValue, isControlled] = chunkUKGQ7256_js.useControlledState(
+      value,
+      defaultValue || ""
+    );
     const setRefs = (node) => {
       textareaRef.current = node;
       if (typeof ref === "function") ref(node);