@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/chunk-V4JIZN3E.mjs

@@ -0,0 +1,156 @@
+import { useControlledState } from './chunk-UQMPEMY7.mjs';
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { isContentEmpty, builtinRichTextEngine, defaultToolbar, findHotkeyMatch, classNames, getRichTextContainerClasses, getEditorAreaClasses, parseHeight, richTextToolbarClasses, isToolbarSeparator, richTextToolbarSeparatorClasses, getToolbarButtonClasses, isInlineFormat, richTextPlaceholderClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RichTextEditor = ({
+  value,
+  defaultValue = "",
+  placeholder,
+  mode: _mode = "html",
+  toolbar,
+  height = 300,
+  readOnly = false,
+  disabled = false,
+  onChange,
+  className,
+  engine,
+  ...restProps
+}) => {
+  const editorRef = useRef(null);
+  const engineRef = useRef(null);
+  const [currentContent, setInternalValue, isControlled] = useControlledState(value, defaultValue);
+  const [activeFormats, setActiveFormats] = useState(/* @__PURE__ */ new Set());
+  const toolbarItems = toolbar ?? defaultToolbar;
+  const empty = isContentEmpty(currentContent);
+  const onChangeRef = useRef(onChange);
+  const setInternalValueRef = useRef(setInternalValue);
+  const isControlledRef = useRef(isControlled);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+    setInternalValueRef.current = setInternalValue;
+    isControlledRef.current = isControlled;
+  }, [onChange, setInternalValue, isControlled]);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const factory = engine ?? builtinRichTextEngine;
+    const instance = factory.create({
+      element: editorRef.current,
+      initialValue: isControlled ? value : defaultValue,
+      readOnly,
+      disabled,
+      placeholder,
+      toolbar: toolbarItems,
+      notifyChange(html) {
+        if (!isControlledRef.current) setInternalValueRef.current(html);
+        onChangeRef.current?.(html);
+      },
+      notifyActiveFormats(next) {
+        setActiveFormats(next);
+      }
+    });
+    engineRef.current = instance;
+    return () => {
+      instance.destroy();
+      engineRef.current = null;
+    };
+  }, [engine]);
+  useEffect(() => {
+    if (isControlled && engineRef.current && value !== void 0) {
+      engineRef.current.setValue(value);
+    }
+  }, [value, isControlled]);
+  useEffect(() => {
+    engineRef.current?.setReadOnly(readOnly, disabled);
+  }, [readOnly, disabled]);
+  const execButtonAction = useCallback(
+    (btn) => {
+      if (readOnly || disabled) return;
+      if (btn.action && editorRef.current) {
+        btn.action(editorRef.current);
+        return;
+      }
+      engineRef.current?.exec(btn.name);
+    },
+    [readOnly, disabled]
+  );
+  const handleKeydown = useCallback(
+    (e) => {
+      const match = findHotkeyMatch(toolbarItems, e.nativeEvent);
+      if (match) {
+        e.preventDefault();
+        execButtonAction(match);
+      }
+    },
+    [toolbarItems, execButtonAction]
+  );
+  const containerClasses = useMemo(
+    () => classNames(getRichTextContainerClasses(disabled, className)),
+    [disabled, className]
+  );
+  const editorAreaClasses = useMemo(() => getEditorAreaClasses(readOnly), [readOnly]);
+  const containerStyle = useMemo(() => {
+    const ht = parseHeight(height);
+    if (!ht) return void 0;
+    return { height: ht };
+  }, [height]);
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, style: containerStyle, ...restProps, children: [
+    /* @__PURE__ */ jsx("div", { className: richTextToolbarClasses, role: "toolbar", "aria-label": "Text formatting", children: toolbarItems.map((item, idx) => {
+      if (isToolbarSeparator(item)) {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: richTextToolbarSeparatorClasses,
+            role: "separator",
+            "aria-orientation": "vertical"
+          },
+          `sep-${idx}`
+        );
+      }
+      const btn = item;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getToolbarButtonClasses(activeFormats.has(btn.name)),
+          title: btn.tooltip ?? btn.label,
+          "aria-label": btn.label,
+          "aria-pressed": isInlineFormat(btn.name) ? activeFormats.has(btn.name) : void 0,
+          disabled: disabled || readOnly,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => execButtonAction(btn),
+          children: btn.icon ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: btn.icon } }) : btn.label
+        },
+        btn.name
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: editorRef,
+          className: editorAreaClasses,
+          role: "textbox",
+          "aria-multiline": true,
+          "aria-readonly": readOnly || void 0,
+          "aria-disabled": disabled || void 0,
+          "aria-placeholder": placeholder,
+          "data-placeholder": placeholder,
+          onKeyDown: handleKeydown,
+          suppressContentEditableWarning: true
+        }
+      ),
+      empty && placeholder && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${richTextPlaceholderClasses} absolute top-0 left-0 p-4 pointer-events-none text-sm`,
+          "aria-hidden": true,
+          children: placeholder
+        }
+      )
+    ] })
+  ] });
+};
+var RichTextEditor_default = RichTextEditor;
+
+export { RichTextEditor, RichTextEditor_default };

package/dist/{chunk-R3QWJ7GT.mjs → chunk-V5557VIB.mjs}

@@ -1,9 +1,9 @@
-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 { useChartInteraction } from './chunk-6QML6T3Y.mjs';
+import { ChartLegend } from './chunk-UBP7HZSU.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
 import { useMemo } from 'react';
-import { getChartInnerRect, resolveChartPalette, computeFunnelSegments, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { getChartInnerRect, resolveChartPalette, computeFunnelSegments, getFunnelGradientPrefix, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var FunnelChart = ({
@@ -15,6 +15,7 @@ var FunnelChart = ({
   gap = 2,
   pinch = false,
   colors,
+  gradient = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -80,6 +81,7 @@ var FunnelChart = ({
     [data, innerRect.width, innerRect.height, gap, pinch, palette]
   );
   const total = useMemo(() => data.reduce((s, d) => s + d.value, 0), [data]);
+  const gradientPrefix = useMemo(() => getFunnelGradientPrefix(), []);
   const legendItems = useMemo(
     () => buildChartLegendItems({
       data,
@@ -109,6 +111,21 @@ var FunnelChart = ({
       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,
@@ -118,7 +135,7 @@ var FunnelChart = ({
             "path",
             {
               d: seg.path,
-              fill: seg.color,
+              fill: gradient ? `url(#${gradientPrefix}-${seg.index})` : seg.color,
               opacity,
               className: classNames(interactive && "cursor-pointer"),
               style: { transition: "opacity 0.2s ease-out" },

package/dist/{chunk-NG3GA5LF.js → chunk-VBBOH5HA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkH3JAEEEE_js = require('./chunk-H3JAEEEE.js');
+var chunkMOSVX52I_js = require('./chunk-MOSVX52I.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var Kanban = ({
@@ -10,7 +10,7 @@ var Kanban = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkH3JAEEEE_js.TaskBoard,
+    chunkMOSVX52I_js.TaskBoard,
     {
       showCardCount,
       allowAddCard,

package/dist/chunk-VBZE77VM.mjs

@@ -0,0 +1,65 @@
+import React, { useContext, useState, useEffect, useMemo } from 'react';
+import { isLazyTigerLocale, getImmediateTigerLocale, resolveTigerLocale, mergeTigerLocale, ThemeManager } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ConfigProvider.tsx
+var TigerConfigContext = React.createContext({});
+var ConfigProvider = ({
+  locale,
+  theme,
+  colorScheme,
+  children
+}) => {
+  const parent = useContext(TigerConfigContext);
+  const isLazy = isLazyTigerLocale(locale);
+  const immediateLocale = isLazy ? void 0 : getImmediateTigerLocale(locale);
+  const [resolvedLocale, setResolvedLocale] = useState(
+    immediateLocale
+  );
+  const [localeLoading, setLocaleLoading] = useState(isLazy);
+  useEffect(() => {
+    if (!isLazyTigerLocale(locale)) {
+      setResolvedLocale(getImmediateTigerLocale(locale));
+      setLocaleLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLocaleLoading(true);
+    resolveTigerLocale(locale).then(
+      (result) => {
+        if (!cancelled) {
+          setResolvedLocale(result);
+          setLocaleLoading(false);
+        }
+      },
+      () => {
+        if (!cancelled) {
+          setLocaleLoading(false);
+        }
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [locale]);
+  const value = useMemo(() => {
+    return {
+      locale: mergeTigerLocale(parent.locale, resolvedLocale),
+      localeLoading: localeLoading || parent.localeLoading,
+      theme: theme ?? parent.theme,
+      colorScheme: colorScheme ?? parent.colorScheme
+    };
+  }, [parent.locale, resolvedLocale, localeLoading, parent.localeLoading, theme, parent.theme, colorScheme, parent.colorScheme]);
+  useEffect(() => {
+    if (value.theme) ThemeManager.setTheme(value.theme);
+  }, [value.theme]);
+  useEffect(() => {
+    if (value.colorScheme) ThemeManager.setColorScheme(value.colorScheme);
+  }, [value.colorScheme]);
+  return /* @__PURE__ */ jsx(TigerConfigContext.Provider, { value, children });
+};
+function useTigerConfig() {
+  return useContext(TigerConfigContext);
+}
+
+export { ConfigProvider, useTigerConfig };

package/dist/{chunk-XLVEI7GS.js → chunk-VE3SYUMH.js}

@@ -21,14 +21,15 @@ var Row = ({
       "flex",
       "w-full",
       wrap && "flex-wrap",
+      tigercatCore.getRowGutterClasses(gutter),
       tigercatCore.getAlignClasses(align),
       tigercatCore.getJustifyClasses(justify),
       className
     ),
-    [wrap, align, justify, className]
+    [gutter, wrap, align, justify, className]
   );
   const mergedStyle = react.useMemo(
-    () => ({ ...tigercatCore.getGutterStyles(gutter).rowStyle, ...style }),
+    () => ({ ...tigercatCore.getRowGutterStyleVars(gutter), ...style }),
     [gutter, style]
   );
   const contextValue = react.useMemo(() => ({ gutter }), [gutter]);

package/dist/{chunk-SWF7GJYT.mjs → chunk-VHW7NWXM.mjs}

@@ -1,7 +1,7 @@
-import { Tabs, TabPane } from './chunk-6744DTEB.mjs';
-import { List } from './chunk-VAQDUVBP.mjs';
-import { Button } from './chunk-3KMKMAE3.mjs';
-import { Loading } from './chunk-AVUXDQYO.mjs';
+import { Tabs, TabPane } from './chunk-JSUDEK2D.mjs';
+import { List } from './chunk-LY2OTQ4E.mjs';
+import { Button } from './chunk-GKJNQUTW.mjs';
+import { Loading } from './chunk-Z5B7VNEG.mjs';
 import { Text } from './chunk-HLS4CHWX.mjs';
 import { Card } from './chunk-P6E3DILH.mjs';
 import { useMemo, useState, useEffect } from 'react';
@@ -71,7 +71,7 @@ var NotificationCenter = ({
       setInternalGroupKey(keys[0]);
     }
   }, [activeGroupKey, currentGroupKey, resolvedGroups]);
-  const currentGroup = useMemo(() => {
+  useMemo(() => {
     if (resolvedGroups.length === 0) return void 0;
     if (currentGroupKey === void 0) return resolvedGroups[0];
     const index = resolvedGroups.findIndex(
@@ -79,7 +79,6 @@ var NotificationCenter = ({
     );
     return index >= 0 ? resolvedGroups[index] : resolvedGroups[0];
   }, [currentGroupKey, resolvedGroups]);
-  currentGroup?.items ?? [];
   const [readStateOverrides, setReadStateOverrides] = useState(
     () => /* @__PURE__ */ new Map()
   );
@@ -108,9 +107,15 @@ var NotificationCenter = ({
     );
     return index >= 0 ? effectiveGroups[index] : effectiveGroups[0];
   }, [currentGroupKey, effectiveGroups]);
-  const effectiveCurrentGroupItems = effectiveCurrentGroup?.items ?? [];
+  const effectiveCurrentGroupItems = useMemo(
+    () => effectiveCurrentGroup?.items ?? [],
+    [effectiveCurrentGroup]
+  );
   const effectiveItems = useMemo(() => applyReadOverrides(items), [items, readStateOverrides]);
-  const hasUnread = effectiveCurrentGroupItems.some((item) => !item.read);
+  const hasUnread = useMemo(
+    () => effectiveCurrentGroupItems.some((item) => !item.read),
+    [effectiveCurrentGroupItems]
+  );
   const totalUnread = useMemo(() => {
     const allItems = effectiveGroups.flatMap((group) => group.items);
     if (allItems.length === 0) return effectiveItems.filter((item) => !item.read).length;
@@ -120,6 +125,32 @@ var NotificationCenter = ({
     () => classNames("tiger-notification-center", "w-full", "flex", "flex-col", className),
     [className]
   );
+  const filterButtons = useMemo(
+    () => [
+      { key: "all", label: allLabel },
+      { key: "unread", label: unreadLabel },
+      { key: "read", label: readLabel }
+    ],
+    [allLabel, unreadLabel, readLabel]
+  );
+  const groupTabData = useMemo(
+    () => resolvedGroups.map((group, index) => {
+      const effectiveGroup = effectiveGroups.find(
+        (eg, ei) => getGroupKey(eg, ei) === getGroupKey(group, index)
+      );
+      const groupItems = effectiveGroup?.items ?? group.items;
+      const unreadCount = groupItems.filter((item) => !item.read).length;
+      const labelBase = group.title || String(group.key ?? index);
+      const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
+      const filteredItems = filterItems(groupItems, currentReadFilter);
+      return { key: getGroupKey(group, index), label, filteredItems };
+    }),
+    [resolvedGroups, effectiveGroups, currentReadFilter]
+  );
+  const filteredFlatItems = useMemo(
+    () => filterItems(effectiveItems, currentReadFilter),
+    [effectiveItems, currentReadFilter]
+  );
   const handleGroupChange = (key) => {
     if (activeGroupKey === void 0) {
       setInternalGroupKey(key);
@@ -195,59 +226,55 @@ var NotificationCenter = ({
       renderItem
     }
   );
-  const filterButtons = [
-    { key: "all", label: allLabel },
-    { key: "unread", label: unreadLabel },
-    { key: "read", label: readLabel }
-  ];
-  const content = loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsx(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)
-    );
-    const groupItems = effectiveGroup?.items ?? group.items;
-    const unreadCount = groupItems.filter((item) => !item.read).length;
-    const labelBase = group.title || String(group.key ?? index);
-    const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
-    return /* @__PURE__ */ jsx(
-      TabPane,
-      {
-        tabKey: getGroupKey(group, index),
-        label,
-        children: /* @__PURE__ */ jsx("div", { className: "max-h-[380px] overflow-y-auto", children: renderList(filterItems(groupItems, currentReadFilter)) })
-      },
-      String(getGroupKey(group, index))
-    );
-  }) }) }) : /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto", children: renderList(filterItems(effectiveItems, currentReadFilter)) });
-  return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-notification-center": true, children: /* @__PURE__ */ jsx(
-    Card,
+  const content = loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsx(Tabs, { type: "line", size: "small", activeKey: currentGroupKey, onChange: handleGroupChange, children: groupTabData.map((tab) => /* @__PURE__ */ jsx(
+    TabPane,
+    {
+      tabKey: tab.key,
+      label: tab.label,
+      children: /* @__PURE__ */ jsx("div", { className: "max-h-[380px] overflow-y-auto", children: renderList(tab.filteredItems) })
+    },
+    String(tab.key)
+  )) }) }) : /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto", children: renderList(filteredFlatItems) });
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      variant: "bordered",
-      className: "w-full",
-      header: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ jsx(Text, { tag: "div", size: "base", weight: "bold", children: title }),
-            totalUnread > 0 ? /* @__PURE__ */ 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
+      className: wrapperClasses,
+      role: props.role ?? "region",
+      "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? void 0 : title),
+      ...props,
+      "data-tiger-notification-center": true,
+      children: /* @__PURE__ */ jsx(
+        Card,
+        {
+          variant: "bordered",
+          className: "w-full",
+          header: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ jsx(Text, { tag: "div", size: "base", weight: "bold", children: title }),
+                totalUnread > 0 ? /* @__PURE__ */ 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__ */ jsx(Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-[var(--tiger-radius-sm,0.375rem)] border border-[var(--tiger-border,#e5e7eb)] overflow-hidden self-start", children: filterButtons.map((option) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: classNames(
+                  "px-3 py-1 text-xs font-medium transition-colors",
+                  "border-r border-[var(--tiger-border,#e5e7eb)] last:border-r-0",
+                  currentReadFilter === option.key ? "bg-[var(--tiger-primary,#2563eb)] text-white" : "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text-muted,#6b7280)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+                ),
+                onClick: () => handleReadFilterChange(option.key),
+                children: option.label
+              },
+              option.key
+            )) })
           ] }),
-          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-md border border-[var(--tiger-border,#e5e7eb)] overflow-hidden self-start", children: filterButtons.map((option) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: classNames(
-              "px-3 py-1 text-xs font-medium transition-colors",
-              "border-r border-[var(--tiger-border,#e5e7eb)] last:border-r-0",
-              currentReadFilter === option.key ? "bg-[var(--tiger-primary,#2563eb)] text-white" : "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text-muted,#6b7280)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-            ),
-            onClick: () => handleReadFilterChange(option.key),
-            children: option.label
-          },
-          option.key
-        )) })
-      ] }),
-      children: content
+          children: content
+        }
+      )
     }
-  ) });
+  );
 };
 var NotificationCenter_default = NotificationCenter;