@expcat/tigercat-react 2.1.1 → 2.1.2

package/dist/{chunk-CQOLQAB5.mjs → chunk-2XZHYYZ2.mjs}

@@ -1,6 +1,6 @@
 import {
   Select
-} from "./chunk-KVCI2346.mjs";
+} from "./chunk-S2V3HGLZ.mjs";
 import {
   Radio
 } from "./chunk-IIWUQK2P.mjs";

package/dist/{chunk-KL6YJIZ3.mjs → chunk-3GPGSNOQ.mjs}

@@ -2,6 +2,9 @@ import {
   renderOverlayPortal,
   useAnchoredOverlay
 } from "./chunk-HKAZXG74.mjs";
+import {
+  useTigerConfig
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/ColorPicker.tsx
 import { useState, useMemo, useRef, useEffect } from "react";
@@ -17,7 +20,10 @@ import {
   formatColorString,
   parseColorInput,
   parseColorParts,
-  classNames
+  classNames,
+  mergeTigerLocale,
+  getColorPickerLabels,
+  formatColorPickerSelectPreset
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 function rgbFromValue(value) {
@@ -37,8 +43,19 @@ var ColorPicker = ({
   format = "hex",
   presets,
   className,
+  locale,
+  labels: labelsOverride,
   onChange
 }) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getColorPickerLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
   const [isOpen, setIsOpen] = useState(false);
   const [alpha, setAlpha] = useState(() => explicitAlphaFromValue(value) ?? 1);
   const containerRef = useRef(null);
@@ -114,6 +131,9 @@ var ColorPicker = ({
       handlePresetClick(color);
     }
   }
+  function handleClear() {
+    onChange?.("");
+  }
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(colorPickerBaseClasses, className), children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -122,7 +142,9 @@ var ColorPicker = ({
         className: getColorPickerTriggerClasses(size, disabled),
         style: { backgroundColor: swatchColor },
         role: "button",
-        "aria-label": "Pick color",
+        "data-tiger-colorpicker-trigger": "",
+        "aria-label": labels.trigger,
+        title: labels.trigger,
         "aria-haspopup": "dialog",
         "aria-expanded": isOpen,
         "aria-disabled": disabled || void 0,
@@ -139,9 +161,25 @@ var ColorPicker = ({
           className: classNames(colorPickerPanelClasses, overlay.floatingClasses),
           style: overlay.floatingStyles,
           "data-positioned": overlay.positioned,
+          "data-tiger-colorpicker-panel": "",
+          role: "dialog",
+          "aria-label": labels.panelTitle,
           children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--tiger-text,#111827)]", children: labels.panelTitle }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-xs text-[var(--tiger-primary,#2563eb)] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-primary,#2563eb)]",
+                  "data-tiger-colorpicker-clear": "",
+                  onClick: handleClear,
+                  children: labels.clear
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hue" }),
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: labels.hue }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -150,13 +188,13 @@ var ColorPicker = ({
                   max: 360,
                   value: hsv.h,
                   className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": "Hue",
+                  "aria-label": labels.hue,
                   onChange: handleHueChange
                 }
               )
             ] }),
             showAlpha && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Alpha" }),
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: labels.alpha }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -165,7 +203,7 @@ var ColorPicker = ({
                   max: 100,
                   value: Math.round(alpha * 100),
                   className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": "Alpha",
+                  "aria-label": labels.alpha,
                   onChange: handleAlphaChange
                 }
               )
@@ -178,7 +216,7 @@ var ColorPicker = ({
                   type: "text",
                   className: colorPickerInputClasses,
                   value: inputValue,
-                  "aria-label": "Color value",
+                  "aria-label": labels.value,
                   onChange: handleInputChange
                 }
               )
@@ -189,7 +227,7 @@ var ColorPicker = ({
                 {
                   className: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
                   style: { backgroundColor: swatchColor },
-                  "aria-label": "Color preview"
+                  "aria-label": labels.preview
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: displayValue })
@@ -201,7 +239,7 @@ var ColorPicker = ({
                 style: { backgroundColor: color },
                 role: "button",
                 tabIndex: 0,
-                "aria-label": `Select ${color}`,
+                "aria-label": formatColorPickerSelectPreset(labels.selectPreset, color),
                 onClick: () => handlePresetClick(color),
                 onKeyDown: (e) => handlePresetKeyDown(e, color)
               },

package/dist/{chunk-MXXAJSRS.mjs → chunk-6RMBUZZE.mjs}

@@ -10,7 +10,7 @@ import { useCallback, useMemo, useRef } from "react";
 import {
   applyMarkdownToolbarAction,
   classNames,
-  defaultMarkdownToolbar,
+  createDefaultMarkdownToolbar,
   findMarkdownHotkeyMatch,
   getMarkdownBodyClasses,
   getMarkdownContainerClasses,
@@ -62,9 +62,17 @@ var MarkdownEditor = ({
   const textareaRef = useRef(null);
   const [currentValue, commitValue] = useControlledState(value, defaultValue, onChange);
   const [currentMode, commitMode] = useControlledState(mode, defaultMode, onModeChange);
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getMarkdownEditorLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
   const toolbarItems = useMemo(
-    () => toolbar === false ? [] : toolbar ?? defaultMarkdownToolbar,
-    [toolbar]
+    () => toolbar === false ? [] : toolbar ?? createDefaultMarkdownToolbar(labels),
+    [toolbar, labels]
   );
   const previewHtml = useMemo(
     () => renderMarkdownToHtml(currentValue, renderer),
@@ -74,14 +82,6 @@ var MarkdownEditor = ({
     const parsedHeight = parseMarkdownHeight(height);
     return { ...parsedHeight ? { height: parsedHeight } : {}, ...style };
   }, [height, style]);
-  const mergedLocale = useMemo(
-    () => mergeTigerLocale(config.locale, locale),
-    [config.locale, locale]
-  );
-  const labels = useMemo(
-    () => getMarkdownEditorLabels(mergedLocale, labelsOverride),
-    [mergedLocale, labelsOverride]
-  );
   const modeLabels = {
     edit: labels.editModeLabel,
     split: labels.splitModeLabel,

package/dist/{chunk-ASLRAZZN.mjs → chunk-NXJMVH26.mjs}

@@ -15,7 +15,7 @@ import {
   richTextToolbarClasses,
   richTextToolbarSeparatorClasses,
   richTextPlaceholderClasses,
-  defaultToolbar,
+  createDefaultRichTextToolbar,
   isInlineFormat,
   findHotkeyMatch,
   isContentEmpty,
@@ -48,7 +48,6 @@ var RichTextEditor = ({
   const [currentContent, setContent] = useControlledState(value, defaultValue, onChange);
   const isControlled = value !== void 0;
   const [activeFormats, setActiveFormats] = useState(/* @__PURE__ */ new Set());
-  const toolbarItems = toolbar ?? defaultToolbar;
   const empty = isContentEmpty(currentContent);
   const mergedLocale = useMemo(
     () => mergeTigerLocale(config.locale, locale),
@@ -58,6 +57,10 @@ var RichTextEditor = ({
     () => getRichTextEditorLabels(mergedLocale, labelsOverride),
     [mergedLocale, labelsOverride]
   );
+  const toolbarItems = useMemo(
+    () => toolbar ?? createDefaultRichTextToolbar(labels),
+    [toolbar, labels]
+  );
   useEffect(() => {
     if (!editorRef.current) return;
     const factory = engine ?? builtinRichTextEngine;

package/dist/{chunk-KVCI2346.mjs → chunk-S2V3HGLZ.mjs}

@@ -63,7 +63,7 @@ function useSelectState(props) {
     options = [],
     size = "md",
     disabled = false,
-    placeholder = "Select an option",
+    placeholder,
     searchable = false,
     searchValue,
     defaultSearchValue = "",
@@ -95,6 +95,7 @@ function useSelectState(props) {
     () => getSelectLabels(mergedLocale, labelsOverride),
     [mergedLocale, labelsOverride]
   );
+  const resolvedPlaceholder = resolveLocaleText(labels.placeholder, placeholder);
   const divProps = {};
   for (const [k, v] of Object.entries(props)) {
     if (!SELECT_KEYS.has(k)) divProps[k] = v;
@@ -132,7 +133,7 @@ function useSelectState(props) {
   const displayText = useMemo(() => {
     if (isMultiple) {
       const values = Array.isArray(value) ? value : [];
-      if (values.length === 0) return placeholder;
+      if (values.length === 0) return resolvedPlaceholder;
       const labels2 = [...allOptions, ...createdOptions].filter((opt) => values.includes(opt.value)).map((opt) => opt.label);
       if (maxTagCount !== void 0 && labels2.length > maxTagCount) {
         const visible = labels2.slice(0, maxTagCount);
@@ -140,9 +141,9 @@ function useSelectState(props) {
       }
       return labels2.join(", ");
     }
-    if (value === void 0 || value === null || value === "") return placeholder;
-    return [...allOptions, ...createdOptions].find((opt) => opt.value === value)?.label ?? placeholder;
-  }, [isMultiple, value, allOptions, createdOptions, placeholder, maxTagCount]);
+    if (value === void 0 || value === null || value === "") return resolvedPlaceholder;
+    return [...allOptions, ...createdOptions].find((opt) => opt.value === value)?.label ?? resolvedPlaceholder;
+  }, [isMultiple, value, allOptions, createdOptions, resolvedPlaceholder, maxTagCount]);
   const showClearButton = useMemo(
     () => clearable && !disabled && value !== void 0 && value !== null && value !== "" && (!Array.isArray(value) || value.length > 0),
     [clearable, disabled, value]
@@ -434,10 +435,10 @@ function useSelectState(props) {
     virtual,
     listHeight,
     disabled,
-    placeholder,
+    placeholder: resolvedPlaceholder,
     searchable,
     clearable,
-    emptyText: resolveLocaleText("No options found", emptyText, mergedLocale?.common?.emptyText),
+    emptyText: resolveLocaleText(labels.emptyText, emptyText),
     createOptionText,
     className,
     divProps,

package/dist/{chunk-QXSUG7SN.mjs → chunk-YH7FKFRM.mjs}

@@ -1,9 +1,9 @@
 import {
   Table
-} from "./chunk-CQOLQAB5.mjs";
+} from "./chunk-2XZHYYZ2.mjs";
 import {
   Select
-} from "./chunk-KVCI2346.mjs";
+} from "./chunk-S2V3HGLZ.mjs";
 import {
   Popover
 } from "./chunk-FNK2VWPP.mjs";

package/dist/components/ColorPicker.d.mts

@@ -1,11 +1,13 @@
 import React__default from 'react';
-import { ColorPickerProps as ColorPickerProps$1 } from '@expcat/tigercat-core';
+import { ColorPickerProps as ColorPickerProps$1, TigerLocale, TigerLocaleColorPicker } from '@expcat/tigercat-core';
 
 interface ColorPickerProps extends ColorPickerProps$1 {
     /** Controlled color value (hex) */
     value?: string;
     /** Called when color changes */
     onChange?: (value: string) => void;
+    locale?: Partial<TigerLocale>;
+    labels?: Partial<TigerLocaleColorPicker>;
 }
 declare const ColorPicker: React__default.FC<ColorPickerProps>;
 

package/dist/components/ColorPicker.mjs

@@ -1,7 +1,9 @@
 import {
   ColorPicker
-} from "../chunk-KL6YJIZ3.mjs";
+} from "../chunk-3GPGSNOQ.mjs";
 import "../chunk-HKAZXG74.mjs";
+import "../chunk-YSIXURBW.mjs";
+import "../chunk-TGXBCKOU.mjs";
 export {
   ColorPicker
 };

package/dist/components/DataTableWithToolbar.mjs

@@ -1,9 +1,9 @@
 import {
   DataTableWithToolbar,
   DataTableWithToolbar_default
-} from "../chunk-QXSUG7SN.mjs";
-import "../chunk-CQOLQAB5.mjs";
-import "../chunk-KVCI2346.mjs";
+} from "../chunk-YH7FKFRM.mjs";
+import "../chunk-2XZHYYZ2.mjs";
+import "../chunk-S2V3HGLZ.mjs";
 import "../chunk-IIWUQK2P.mjs";
 import "../chunk-AKNWUI7K.mjs";
 import "../chunk-FNK2VWPP.mjs";

package/dist/components/MarkdownEditor.mjs

@@ -1,7 +1,7 @@
 import {
   MarkdownEditor,
   MarkdownEditor_default
-} from "../chunk-MXXAJSRS.mjs";
+} from "../chunk-6RMBUZZE.mjs";
 import "../chunk-MEFARVQI.mjs";
 import "../chunk-YSIXURBW.mjs";
 import "../chunk-TGXBCKOU.mjs";

package/dist/components/RichTextEditor.mjs

@@ -1,7 +1,7 @@
 import {
   RichTextEditor,
   RichTextEditor_default
-} from "../chunk-ASLRAZZN.mjs";
+} from "../chunk-NXJMVH26.mjs";
 import "../chunk-MEFARVQI.mjs";
 import "../chunk-YSIXURBW.mjs";
 import "../chunk-TGXBCKOU.mjs";

package/dist/components/Select.mjs

@@ -1,6 +1,6 @@
 import {
   Select
-} from "../chunk-KVCI2346.mjs";
+} from "../chunk-S2V3HGLZ.mjs";
 import "../chunk-HKAZXG74.mjs";
 import "../chunk-YSIXURBW.mjs";
 import "../chunk-TGXBCKOU.mjs";

package/dist/components/Table.mjs

@@ -1,7 +1,7 @@
 import {
   Table
-} from "../chunk-CQOLQAB5.mjs";
-import "../chunk-KVCI2346.mjs";
+} from "../chunk-2XZHYYZ2.mjs";
+import "../chunk-S2V3HGLZ.mjs";
 import "../chunk-IIWUQK2P.mjs";
 import "../chunk-AKNWUI7K.mjs";
 import "../chunk-M6ZPTGBV.mjs";

package/dist/index.d.mts

@@ -166,6 +166,6 @@ import 'react';
  * React components for Tigercat UI library
  */
 
-declare const version = "2.1.1";
+declare const version = "2.1.2";
 
 export { version };

package/dist/index.mjs

@@ -19,6 +19,7 @@ export {
   DEFAULT_CHART_LABELS,
   DEFAULT_CHAT_WINDOW_LABELS,
   DEFAULT_CODE_LABELS,
+  DEFAULT_COLOR_PICKER_LABELS,
   DEFAULT_COMMENT_THREAD_LABELS,
   DEFAULT_CRON_EDITOR_LABELS,
   DEFAULT_DATA_EXPORT_LABELS,
@@ -162,6 +163,7 @@ export {
   ZH_CN_CHART_LABELS,
   ZH_CN_CHAT_WINDOW_LABELS,
   ZH_CN_CODE_LABELS,
+  ZH_CN_COLOR_PICKER_LABELS,
   ZH_CN_COMMENT_THREAD_LABELS,
   ZH_CN_CRON_EDITOR_LABELS,
   ZH_CN_DATA_EXPORT_LABELS,
@@ -504,6 +506,8 @@ export {
   createColumnDragData,
   createCountdownPayload,
   createDefaultDragSnapshot,
+  createDefaultMarkdownToolbar,
+  createDefaultRichTextToolbar,
   createDefaultTransform,
   createDocumentDragSession,
   createDragState,
@@ -744,6 +748,7 @@ export {
   formatBadgeContent,
   formatBytes,
   formatChatTime,
+  formatColorPickerSelectPreset,
   formatColorString,
   formatCommentTime,
   formatCountdown,
@@ -892,6 +897,7 @@ export {
   getCollapseIconClasses,
   getCollapsePanelClasses,
   getCollapsePanelHeaderClasses,
+  getColorPickerLabels,
   getColorPickerTriggerClasses,
   getColorSwatchButtonClasses,
   getColorSwatchCheckClasses,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expcat/tigercat-react",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "React components for Tigercat UI library",
   "license": "MIT",
   "author": "Yizhe Wang",
@@ -897,7 +897,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@expcat/tigercat-core": "2.1.1"
+    "@expcat/tigercat-core": "2.1.2"
   },
   "devDependencies": {
     "@types/node": "^26.1.1",