@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/{chunk-VHHEP5G7.js → chunk-3E76U2RG.js}

@@ -24,7 +24,8 @@ var CodeEditor = ({
   disabled = false,
   className,
   style,
-  onChange
+  onChange,
+  highlighter
 }) => {
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const textareaRef = React.useRef(null);
@@ -74,12 +75,24 @@ var CodeEditor = ({
     return cls ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls, children: token.value }, idx) : /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: token.value }, idx);
   };
   const renderLine = (line, lineIndex) => {
+    if (highlighter?.highlightLine) {
+      const html = highlighter.highlightLine(line, language, theme) || (line === "" ? "\n" : "");
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "min-h-[1.625rem]",
+          dangerouslySetInnerHTML: { __html: html }
+        },
+        lineIndex
+      );
+    }
     const tokens = tigercatCore.tokenizeLine(line, language);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-[1.625rem]", children: [
       tokens.map(renderToken),
       line === "" ? "\n" : null
     ] }, lineIndex);
   };
+  const blockHtml = highlighter && !highlighter.highlightLine && highlighter.highlightCode ? highlighter.highlightCode(code, language, theme) : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -90,7 +103,14 @@ var CodeEditor = ({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full", children: [
         lineNumbers && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.getLineNumberClasses(theme), "aria-hidden": "true", children: lineNums.map((n) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[1.625rem]", children: n }, n)) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 overflow-auto", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: lines.map(renderLine) }),
+          blockHtml !== null ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.classNames(tigercatCore.codeEditorHighlightClasses, wrapClass),
+              "aria-hidden": "true",
+              dangerouslySetInnerHTML: { __html: blockHtml }
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: lines.map(renderLine) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "textarea",
             {

package/dist/chunk-3HPDLIX3.mjs

@@ -0,0 +1,108 @@
+import { useRef, useEffect } from 'react';
+import { createRafRepeatActionController, classNames, getStepperButtonClasses, getStepperInputClasses, stepperBaseClasses, clampStepperValue, stepperIconViewBox, minusPathD, plusPathD } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Stepper.tsx
+var Stepper = ({
+  value = 0,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  disabled = false,
+  size = "md",
+  precision,
+  className,
+  onChange
+}) => {
+  const repeatControllerRef = useRef(createRafRepeatActionController());
+  const repeatValueRef = useRef(value);
+  const suppressNextClickRef = useRef(false);
+  useEffect(() => () => repeatControllerRef.current.stop(), []);
+  function setValue(v) {
+    const clamped = clampStepperValue(v, min, max, precision);
+    onChange?.(clamped);
+    return clamped;
+  }
+  function stepBy(direction, baseValue = value) {
+    return setValue(direction === "up" ? baseValue + step : baseValue - step);
+  }
+  function handleStepClick(direction) {
+    if (suppressNextClickRef.current) {
+      suppressNextClickRef.current = false;
+      return;
+    }
+    stepBy(direction);
+  }
+  function startStepRepeat(direction) {
+    return (event) => {
+      event.preventDefault();
+      if (disabled) return;
+      if (direction === "down" && value <= min) return;
+      if (direction === "up" && value >= max) return;
+      suppressNextClickRef.current = true;
+      repeatValueRef.current = value;
+      repeatControllerRef.current.start(() => {
+        const baseValue = repeatValueRef.current;
+        const nextValue = stepBy(direction, baseValue);
+        repeatValueRef.current = nextValue;
+        if (nextValue === baseValue) {
+          repeatControllerRef.current.stop();
+        }
+      });
+    };
+  }
+  function stopStepRepeat() {
+    repeatControllerRef.current.stop();
+  }
+  const atMin = value <= min;
+  const atMax = value >= max;
+  const icon = (d) => /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: stepperIconViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d, fillRule: "evenodd", clipRule: "evenodd" }) });
+  return /* @__PURE__ */ jsxs("div", { className: classNames(stepperBaseClasses, className), role: "group", "aria-label": "Stepper", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getStepperButtonClasses(size, disabled || atMin, "left"),
+        disabled: disabled || atMin,
+        "aria-label": "Decrease",
+        onPointerDown: startStepRepeat("down"),
+        onPointerUp: stopStepRepeat,
+        onPointerLeave: stopStepRepeat,
+        onPointerCancel: stopStepRepeat,
+        onClick: () => handleStepClick("down"),
+        children: icon(minusPathD)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: getStepperInputClasses(size),
+        value: precision !== void 0 ? value.toFixed(precision) : String(value),
+        disabled,
+        "aria-label": "Value",
+        onChange: (e) => {
+          const val = Number(e.target.value);
+          if (!Number.isNaN(val)) setValue(val);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getStepperButtonClasses(size, disabled || atMax, "right"),
+        disabled: disabled || atMax,
+        "aria-label": "Increase",
+        onPointerDown: startStepRepeat("up"),
+        onPointerUp: stopStepRepeat,
+        onPointerLeave: stopStepRepeat,
+        onPointerCancel: stopStepRepeat,
+        onClick: () => handleStepClick("up"),
+        children: icon(plusPathD)
+      }
+    )
+  ] });
+};
+
+export { Stepper };

package/dist/{chunk-QHG7KJH6.js → chunk-3RRYDYVB.js}

@@ -128,20 +128,15 @@ var Cascader = (props) => {
   );
   const handleTriggerKeyDown = react.useCallback(
     (e) => {
-      switch (e.key) {
-        case "Enter":
-        case " ":
-          e.preventDefault();
-          toggleOpen();
-          break;
-        case "Escape":
-          e.preventDefault();
-          setIsOpen(false);
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          if (!isOpen) setIsOpen(true);
-          break;
+      const action = tigercatCore.getPickerTriggerKeyAction(e.key, isOpen);
+      if (action === "none") return;
+      e.preventDefault();
+      if (action === "toggle") {
+        toggleOpen();
+      } else if (action === "open") {
+        setIsOpen(true);
+      } else if (action === "close") {
+        setIsOpen(false);
       }
     },
     [toggleOpen, isOpen]
@@ -156,10 +151,7 @@ var Cascader = (props) => {
         type: "button",
         className: triggerClasses,
         disabled,
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-controls": isOpen ? listboxId : void 0,
+        ...tigercatCore.getPickerComboboxAria({ expanded: isOpen, listboxId }),
         onClick: toggleOpen,
         onKeyDown: handleTriggerKeyDown,
         children: [
@@ -229,16 +221,17 @@ var Cascader = (props) => {
           ),
           isSearchMode ? (
             // Search results
-            searchResults.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.cascaderEmptyStateClasses, children: notFoundText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 overflow-auto", role: "listbox", id: listboxId, children: searchResults.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            searchResults.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.cascaderEmptyStateClasses, children: notFoundText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 overflow-auto", ...tigercatCore.getPickerListboxAria({ id: listboxId }), children: searchResults.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: tigercatCore.classNames(
                   tigercatCore.cascaderSearchResultClasses,
                   item.disabled && "opacity-50 cursor-not-allowed"
                 ),
-                role: "option",
-                "aria-selected": value?.join(",") === item.valuePath.join(","),
-                "aria-disabled": item.disabled,
+                ...tigercatCore.getPickerOptionAria({
+                  selected: value?.join(",") === item.valuePath.join(","),
+                  disabled: item.disabled
+                }),
                 onClick: () => handleSearchResultClick(item.valuePath, item.disabled),
                 children: item.label
               },
@@ -250,8 +243,10 @@ var Cascader = (props) => {
               "div",
               {
                 className: tigercatCore.cascaderColumnClasses,
-                role: "listbox",
-                id: colIndex === 0 ? listboxId : void 0,
+                ...tigercatCore.getPickerListboxAria({
+                  id: colIndex === 0 ? listboxId : void 0,
+                  label: `Level ${colIndex + 1}`
+                }),
                 "aria-label": `Level ${colIndex + 1}`,
                 children: col.options.map((option) => {
                   const isSelected = col.selectedValue === option.value;
@@ -260,9 +255,10 @@ var Cascader = (props) => {
                     "div",
                     {
                       className: tigercatCore.getCascaderOptionClasses(isSelected, !!option.disabled, size),
-                      role: "option",
-                      "aria-selected": isSelected,
-                      "aria-disabled": option.disabled,
+                      ...tigercatCore.getPickerOptionAria({
+                        selected: isSelected,
+                        disabled: !!option.disabled
+                      }),
                       onClick: () => handleOptionClick(option, colIndex),
                       onMouseEnter: () => handleOptionHover(option, colIndex),
                       children: [

package/dist/{chunk-3GW3UAKB.js → chunk-466OSPRM.js}

@@ -22,6 +22,7 @@ var Pagination = ({
   disabled = false,
   hideOnSinglePage = false,
   showLessItems = false,
+  quickJumperValidation,
   className,
   style,
   onChange,
@@ -30,18 +31,44 @@ var Pagination = ({
   ...props
 }) => {
   const { "aria-label": ariaLabelProp, ...navProps } = props;
-  const labels = react.useMemo(() => tigercatCore.getPaginationLabels(locale), [locale]);
+  const immediateLocale = react.useMemo(() => tigercatCore.getImmediateTigerLocale(locale), [locale]);
+  const [loadedLocale, setLoadedLocale] = react.useState(
+    immediateLocale
+  );
+  react.useEffect(() => {
+    let active = true;
+    setLoadedLocale(immediateLocale);
+    if (tigercatCore.isLazyTigerLocale(locale)) {
+      tigercatCore.resolveTigerLocale(locale).then((nextLocale) => {
+        if (active) setLoadedLocale(nextLocale);
+      }).catch(() => {
+        if (active) setLoadedLocale(immediateLocale);
+      });
+    }
+    return () => {
+      active = false;
+    };
+  }, [locale, immediateLocale]);
+  const resolvedLocale = tigercatCore.isLazyTigerLocale(locale) ? loadedLocale : immediateLocale;
+  const labels = react.useMemo(() => tigercatCore.getPaginationLabels(resolvedLocale), [resolvedLocale]);
   const [internalCurrent, setInternalCurrent] = react.useState(defaultCurrent);
   const [internalPageSize, setInternalPageSize] = react.useState(defaultPageSize);
   const [quickJumperValue, setQuickJumperValue] = react.useState("");
+  const quickJumperValidationSchedulerRef = react.useRef(null);
+  if (quickJumperValidationSchedulerRef.current === null) {
+    quickJumperValidationSchedulerRef.current = tigercatCore.createPaginationIdleValidationScheduler(quickJumperValidation);
+  }
+  react.useEffect(() => {
+    quickJumperValidationSchedulerRef.current = tigercatCore.createPaginationIdleValidationScheduler(quickJumperValidation);
+    return () => {
+      quickJumperValidationSchedulerRef.current?.cancel();
+    };
+  }, [quickJumperValidation]);
   const currentPage = controlledCurrent !== void 0 ? controlledCurrent : internalCurrent;
   const currentPageSize = controlledPageSize !== void 0 ? controlledPageSize : internalPageSize;
   const totalPages = tigercatCore.getTotalPages(total, currentPageSize);
   const validatedCurrentPage = tigercatCore.validateCurrentPage(currentPage, totalPages);
   const pageRange = tigercatCore.getPageRange(validatedCurrentPage, currentPageSize, total);
-  if (hideOnSinglePage && totalPages <= 1) {
-    return null;
-  }
   const handlePageChange = react.useCallback(
     (page) => {
       if (disabled) return;
@@ -84,12 +111,22 @@ var Pagination = ({
     ]
   );
   const handleQuickJumperSubmit = react.useCallback(() => {
-    const page = parseInt(quickJumperValue, 10);
-    if (!isNaN(page)) {
+    quickJumperValidationSchedulerRef.current?.cancel();
+    const page = tigercatCore.getPaginationJumperPage(quickJumperValue, totalPages);
+    if (page !== null) {
       handlePageChange(page);
     }
     setQuickJumperValue("");
-  }, [quickJumperValue, handlePageChange]);
+  }, [quickJumperValue, totalPages, handlePageChange]);
+  const handleQuickJumperChange = react.useCallback(
+    (value) => {
+      setQuickJumperValue(value);
+      quickJumperValidationSchedulerRef.current?.schedule(() => {
+        setQuickJumperValue(tigercatCore.getValidatedPaginationJumperValue(value, totalPages));
+      });
+    },
+    [totalPages]
+  );
   const handleQuickJumperKeyPress = react.useCallback(
     (event) => {
       if (event.key === "Enter") {
@@ -222,7 +259,7 @@ var Pagination = ({
           className: tigercatCore.classNames(tigercatCore.getQuickJumperInputClasses(size), "mx-2"),
           disabled,
           value: quickJumperValue,
-          onChange: (e) => setQuickJumperValue(e.target.value),
+          onChange: (e) => handleQuickJumperChange(e.target.value),
           onKeyDown: handleQuickJumperKeyPress,
           min: 1,
           max: totalPages,
@@ -235,6 +272,9 @@ var Pagination = ({
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: sizeText, children: labels.pageText }, "jumper-label-end")
     );
   }
+  if (hideOnSinglePage && totalPages <= 1) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
     {

package/dist/{chunk-RUROWRB5.mjs → chunk-4G74P6YD.mjs}

@@ -1,5 +1,5 @@
 import { useState, useRef, useMemo, useEffect } from 'react';
-import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterButtonClasses, datePickerFooterClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
+import { parseDate, formatDate, getCalendarDays, getDatePickerLocaleCode, getShortDayNames, getDatePickerLabels, getDatePickerInputClasses, getDatePickerIconButtonClasses, classNames, datePickerInputWrapperClasses, datePickerClearButtonClasses, CloseIconPath, CalendarIconPath, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, ChevronLeftIconPath, formatMonthYear, datePickerMonthYearClasses, ChevronRightIconPath, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterButtonClasses, datePickerFooterClasses, datePickerBaseClasses, isDateInRange, icon20ViewBox } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/DatePicker.tsx
@@ -109,7 +109,8 @@ var DatePicker = (props) => {
     () => getCalendarDays(viewingYear, viewingMonth),
     [viewingYear, viewingMonth]
   );
-  const dayNames = useMemo(() => getShortDayNames(props.locale), [props.locale]);
+  const localeCode = useMemo(() => getDatePickerLocaleCode(props.locale), [props.locale]);
+  const dayNames = useMemo(() => getShortDayNames(localeCode), [localeCode]);
   const labels = useMemo(
     () => getDatePickerLabels(props.locale, props.labels),
     [props.locale, props.labels]
@@ -419,7 +420,7 @@ var DatePicker = (props) => {
                 children: /* @__PURE__ */ jsx(Icon, { path: ChevronLeftIconPath, className: "w-5 h-5" })
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: datePickerMonthYearClasses, children: formatMonthYear(viewingYear, viewingMonth, props.locale) }),
+            /* @__PURE__ */ jsx("div", { className: datePickerMonthYearClasses, children: formatMonthYear(viewingYear, viewingMonth, localeCode) }),
             /* @__PURE__ */ jsx(
               "button",
               {

package/dist/{chunk-AY5Z3NIW.js → chunk-4LIDROT4.js}

@@ -18,9 +18,10 @@ var DefaultIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: tigercatCore.backTopIconPath })
   }
 );
+var getDefaultTarget = () => window;
 var BackTop = ({
   visibilityHeight = 400,
-  target = () => window,
+  target = getDefaultTarget,
   duration = 450,
   onClick,
   children,
@@ -32,13 +33,16 @@ var BackTop = ({
   react.useEffect(() => {
     const el = target();
     if (!el) return;
-    const onScroll = () => {
-      setVisible(tigercatCore.getScrollTop(el) >= visibilityHeight);
-    };
-    el.addEventListener("scroll", onScroll, { passive: true });
-    onScroll();
+    const visibilityController = tigercatCore.createBackTopVisibilityController({
+      target: el,
+      getVisibilityHeight: () => visibilityHeight,
+      onChange: setVisible
+    });
+    el.addEventListener("scroll", visibilityController.schedule, { passive: true });
+    visibilityController.update();
     return () => {
-      el.removeEventListener("scroll", onScroll);
+      el.removeEventListener("scroll", visibilityController.schedule);
+      visibilityController.cancel();
     };
   }, [target, visibilityHeight]);
   const handleClick = react.useCallback(

package/dist/chunk-4R5YXNU4.mjs

@@ -0,0 +1,42 @@
+import React, { createContext, useMemo } from 'react';
+import { getAvatarGroupItemClasses, getVisibleGroupItems, getAvatarGroupClasses, getAvatarGroupOverflowText, getAvatarGroupOverflowLabel, getAvatarGroupOverflowClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/AvatarGroup.tsx
+var AvatarGroupContext = createContext(null);
+var AvatarGroup = ({
+  max,
+  size,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({ size, itemClass: getAvatarGroupItemClasses() }),
+    [size]
+  );
+  const childArray = React.Children.toArray(children);
+  const { visibleItems, overflowCount } = getVisibleGroupItems(childArray, max);
+  return /* @__PURE__ */ jsx(AvatarGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: getAvatarGroupClasses(className),
+      role: "group",
+      "aria-label": "Avatar group",
+      ...props,
+      children: [
+        visibleItems,
+        overflowCount > 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: getAvatarGroupOverflowClasses(size ?? "md"),
+            "aria-label": getAvatarGroupOverflowLabel(overflowCount),
+            children: getAvatarGroupOverflowText(overflowCount)
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export { AvatarGroup, AvatarGroupContext };

package/dist/{chunk-VVO4V4IK.js → chunk-4TEILQSN.js}

@@ -15,7 +15,7 @@ var Switch = ({
   tabIndex,
   ...props
 }) => {
-  const switchClasses = tigercatCore.classNames(tigercatCore.getSwitchClasses(size, checked, disabled), className);
+  const switchClasses = tigercatCore.getSwitchClasses(size, checked, disabled, className);
   const thumbClasses = tigercatCore.getSwitchThumbClasses(size, checked);
   const toggle = () => {
     if (disabled) return;

package/dist/{chunk-MQ5ZP5RW.mjs → chunk-4V2HSSQN.mjs}

@@ -1,4 +1,5 @@
-import { usePopup } from './chunk-AMOH5AMN.mjs';
+import { usePopup } from './chunk-WFIQIBLC.mjs';
+import { renderBodyPortal } from './chunk-XTSG362L.mjs';
 import { useRef, useMemo } from 'react';
 import { createFloatingIdFactory, classNames, getTooltipContainerClasses, getTooltipTriggerClasses, getTooltipContentClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -41,7 +42,9 @@ var Tooltip = ({
         children
       }
     ),
-    currentVisible && /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: content }) })
+    currentVisible && renderBodyPortal(
+      /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsx("div", { id: tooltipId, role: "tooltip", className: contentClasses, children: content }) })
+    )
   ] });
 };
 

package/dist/{chunk-D6BHFGTN.js → chunk-4YVXF45R.js}

@@ -111,7 +111,8 @@ var DatePicker = (props) => {
     () => tigercatCore.getCalendarDays(viewingYear, viewingMonth),
     [viewingYear, viewingMonth]
   );
-  const dayNames = react.useMemo(() => tigercatCore.getShortDayNames(props.locale), [props.locale]);
+  const localeCode = react.useMemo(() => tigercatCore.getDatePickerLocaleCode(props.locale), [props.locale]);
+  const dayNames = react.useMemo(() => tigercatCore.getShortDayNames(localeCode), [localeCode]);
   const labels = react.useMemo(
     () => tigercatCore.getDatePickerLabels(props.locale, props.labels),
     [props.locale, props.labels]
@@ -421,7 +422,7 @@ var DatePicker = (props) => {
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: tigercatCore.ChevronLeftIconPath, className: "w-5 h-5" })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.datePickerMonthYearClasses, children: tigercatCore.formatMonthYear(viewingYear, viewingMonth, props.locale) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.datePickerMonthYearClasses, children: tigercatCore.formatMonthYear(viewingYear, viewingMonth, localeCode) }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {

package/dist/{chunk-HSHVLIEL.mjs → chunk-564WBQ77.mjs}

@@ -1,12 +1,12 @@
 import { Timeline } from './chunk-JVTAKNRO.mjs';
 import { Link } from './chunk-XZVQ3PJS.mjs';
-import { Loading } from './chunk-AVUXDQYO.mjs';
+import { Loading } from './chunk-Z5B7VNEG.mjs';
 import { Tag } from './chunk-TGKNEMD4.mjs';
 import { Text } from './chunk-HLS4CHWX.mjs';
 import { Card } from './chunk-P6E3DILH.mjs';
 import { Avatar } from './chunk-FE7PEZTI.mjs';
 import { useMemo } from 'react';
-import { buildActivityGroups, classNames, toActivityTimelineItems, formatActivityTime } from '@expcat/tigercat-core';
+import { buildActivityGroups, classNames, toActivityTimelineItems, formatActivityTime, activityItemClasses, activityItemLayoutClasses, activityItemBodyClasses, activityItemHeaderClasses, activityItemTitleGroupClasses, activityItemDescriptionClasses, activityItemActionsClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var renderAction = (item, action, index) => {
@@ -61,28 +61,28 @@ var ActivityFeed = ({
     const actionNodes = item.actions?.map(
       (action, actionIndex) => renderAction(item, action, actionIndex)
     );
-    return /* @__PURE__ */ jsx("div", { className: "tiger-activity-item", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3 items-start", children: [
+    return /* @__PURE__ */ jsx("div", { className: activityItemClasses, children: /* @__PURE__ */ jsxs("div", { className: activityItemLayoutClasses, children: [
       showAvatar && item.user ? /* @__PURE__ */ jsx(Avatar, { size: "sm", src: item.user.avatar, text: item.user.name, className: "shrink-0" }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: activityItemBodyClasses, children: [
+        /* @__PURE__ */ jsxs("div", { className: activityItemHeaderClasses, children: [
+          /* @__PURE__ */ jsxs("div", { className: activityItemTitleGroupClasses, children: [
             titleText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", weight: "medium", className: "truncate", children: titleText }) : null,
             item.status ? /* @__PURE__ */ jsx(Tag, { variant: item.status.variant ?? "default", size: "sm", className: "shrink-0", children: item.status.label }) : null
           ] }),
           timeText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "xs", color: "muted", className: "shrink-0 whitespace-nowrap", children: timeText }) : null
         ] }),
-        descriptionText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", className: "mb-2 break-words", children: descriptionText }) : null,
-        actionNodes?.length ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: actionNodes }) : null
+        descriptionText ? /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", className: activityItemDescriptionClasses, children: descriptionText }) : null,
+        actionNodes?.length ? /* @__PURE__ */ jsx("div", { className: activityItemActionsClasses, children: actionNodes }) : null
       ] })
     ] }) });
   };
   if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-activity-feed": true, children: /* @__PURE__ */ jsx(Card, { variant: "bordered", size: "sm", className: "tiger-activity-feed-loading", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Loading, { text: loadingText }) }) }) });
+    return /* @__PURE__ */ jsx("div", { className: wrapperClasses, role: "feed", "aria-label": "\u52A8\u6001", "aria-busy": true, ...props, "data-tiger-activity-feed": true, children: /* @__PURE__ */ jsx(Card, { variant: "bordered", size: "sm", className: "tiger-activity-feed-loading", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ jsx(Loading, { text: loadingText }) }) }) });
   }
   if (resolvedGroups.length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-activity-feed": true, children: /* @__PURE__ */ jsx(Card, { variant: "bordered", size: "sm", className: "tiger-activity-feed-empty", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", children: emptyText }) }) }) });
+    return /* @__PURE__ */ jsx("div", { className: wrapperClasses, role: "feed", "aria-label": "\u52A8\u6001", ...props, "data-tiger-activity-feed": true, children: /* @__PURE__ */ jsx(Card, { variant: "bordered", size: "sm", className: "tiger-activity-feed-empty", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(Text, { tag: "div", size: "sm", color: "muted", children: emptyText }) }) }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-activity-feed": true, children: resolvedGroups.map((group, groupIndex) => {
+  return /* @__PURE__ */ jsx("div", { className: wrapperClasses, role: "feed", "aria-label": "\u52A8\u6001", ...props, "data-tiger-activity-feed": true, children: resolvedGroups.map((group, groupIndex) => {
     const headerNode = renderGroupHeader?.(group);
     const groupTitle = group.title;
     const timelineItems = toActivityTimelineItems(group.items);