@expcat/tigercat-react 0.3.0 → 0.3.69

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

@@ -37,24 +37,24 @@ var Textarea = react.forwardRef(
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     };
-    react.useEffect(() => {
+    react.useLayoutEffect(() => {
       if (!autoResize || !textareaRef.current) return;
       tigercatCore.autoResizeTextarea(textareaRef.current, { minRows, maxRows });
     }, [autoResize, currentValue, minRows, maxRows]);
-    const textareaClasses = tigercatCore.classNames(
-      "block",
-      tigercatCore.getInputClasses(size),
-      autoResize ? "resize-none" : "resize-y",
-      className
+    const textareaClasses = react.useMemo(
+      () => tigercatCore.classNames(
+        "block",
+        tigercatCore.getInputClasses({ size }),
+        autoResize ? "resize-none" : "resize-y",
+        className
+      ),
+      [size, autoResize, className]
     );
     const handleInput = (event) => {
       if (!isControlled) {
         setInternalValue(event.currentTarget.value);
       }
       onInput?.(event);
-      if (autoResize) {
-        tigercatCore.autoResizeTextarea(event.currentTarget, { minRows, maxRows });
-      }
     };
     const handleChange = (event) => {
       onChange?.(event);

package/dist/{chunk-2TS6X5RA.js → chunk-VCULFIZ5.js}

@@ -37,14 +37,14 @@ var Tag = ({
   ...props
 }) => {
   const [isVisible, setIsVisible] = react.useState(true);
-  const tagClasses = tigercatCore.classNames(
-    tigercatCore.tagBaseClasses,
-    tigercatCore.getTagVariantClasses(variant),
-    tigercatCore.tagSizeClasses[size],
-    className
+  const tagClasses = react.useMemo(
+    () => tigercatCore.classNames(tigercatCore.tagBaseClasses, tigercatCore.getTagVariantClasses(variant), tigercatCore.tagSizeClasses[size], className),
+    [variant, size, className]
   );
-  const scheme = tigercatCore.defaultTagThemeColors[variant];
-  const closeButtonClasses = tigercatCore.classNames(tigercatCore.tagCloseButtonBaseClasses, scheme.closeBgHover, scheme.text);
+  const closeButtonClasses = react.useMemo(() => {
+    const scheme = tigercatCore.defaultTagThemeColors[variant];
+    return tigercatCore.classNames(tigercatCore.tagCloseButtonBaseClasses, scheme.closeBgHover, scheme.text);
+  }, [variant]);
   const handleClose = (event) => {
     event.stopPropagation();
     onClose?.(event);

package/dist/{chunk-N32MAX4A.js → chunk-W4TFISRK.js}

@@ -21,6 +21,11 @@ var PieChart = ({
   colors,
   showLabels = false,
   labelFormatter,
+  labelPosition = "inside",
+  borderWidth = 2,
+  borderColor = "#ffffff",
+  hoverOffset = 8,
+  shadow = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -79,8 +84,9 @@ var PieChart = ({
   );
   const resolvedOuterRadius = react.useMemo(() => {
     if (typeof outerRadius === "number") return Math.max(0, outerRadius);
-    return Math.max(0, Math.min(innerRect.width, innerRect.height) / 2);
-  }, [outerRadius, innerRect.width, innerRect.height]);
+    const maxR = Math.min(innerRect.width, innerRect.height) / 2;
+    return labelPosition === "outside" ? maxR * 0.72 : maxR;
+  }, [outerRadius, innerRect.width, innerRect.height, labelPosition]);
   const resolvedInnerRadius = react.useMemo(
     () => Math.min(Math.max(0, innerRadius ?? 0), resolvedOuterRadius),
     [innerRadius, resolvedOuterRadius]
@@ -93,38 +99,31 @@ var PieChart = ({
     }),
     [data, startAngle, endAngle, padAngle]
   );
-  const palette = react.useMemo(
-    () => colors && colors.length > 0 ? colors : [...tigercatCore.DEFAULT_CHART_COLORS],
-    [colors]
-  );
+  const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
   const cx = innerRect.width / 2;
   const cy = innerRect.height / 2;
   const labelRadius = resolvedInnerRadius + (resolvedOuterRadius - resolvedInnerRadius) / 2;
   const total = react.useMemo(() => data.reduce((sum, d) => sum + d.value, 0), [data]);
   const formatLabel = labelFormatter ?? ((value, datum) => datum.label ?? `${value}`);
   const legendItems = react.useMemo(
-    () => arcs.map((arc) => ({
-      index: arc.index,
-      label: legendFormatter ? legendFormatter(arc.data, arc.index) : arc.data.label ?? `${arc.index + 1}`,
-      color: arc.data.color ?? palette[arc.index % palette.length],
-      active: activeIndex === null || activeIndex === arc.index
-    })),
+    () => tigercatCore.buildChartLegendItems({
+      data: arcs.map((a) => a.data),
+      palette,
+      activeIndex,
+      getLabel: (d, i) => legendFormatter ? legendFormatter(d, i) : d.label ?? `${i + 1}`,
+      getColor: (d, i) => d.color ?? palette[i % palette.length]
+    }),
     [arcs, legendFormatter, palette, activeIndex]
   );
-  const formatTooltip = react.useCallback(
-    (datum, index) => {
-      if (tooltipFormatter) return tooltipFormatter(datum, index);
+  const tooltipContent = react.useMemo(
+    () => tigercatCore.resolveChartTooltipContent(resolvedHoveredIndex, data, tooltipFormatter, (datum, index) => {
       const label = datum.label ?? `Slice ${index + 1}`;
       const percentage = total > 0 ? (datum.value / total * 100).toFixed(1) : "0";
       return `${label}: ${datum.value} (${percentage}%)`;
-    },
-    [tooltipFormatter, total]
+    }),
+    [resolvedHoveredIndex, data, tooltipFormatter, total]
   );
-  const tooltipContent = react.useMemo(() => {
-    if (resolvedHoveredIndex === null) return "";
-    const datum = data[resolvedHoveredIndex];
-    return datum ? formatTooltip(datum, resolvedHoveredIndex) : "";
-  }, [resolvedHoveredIndex, data, formatTooltip]);
+  const interactive = hoverable || selectable;
   const chart = /* @__PURE__ */ jsxRuntime.jsxs(
     chunkDUWAV47E_js.ChartCanvas,
     {
@@ -145,20 +144,28 @@ var PieChart = ({
             startAngle: arc.startAngle,
             endAngle: arc.endAngle
           });
+          const isEmphasized = activeIndex === arc.index;
           const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex, {
             activeOpacity,
             inactiveOpacity
           });
+          const { dx, dy } = interactive && isEmphasized && hoverOffset > 0 ? tigercatCore.computePieHoverOffset(arc.startAngle, arc.endAngle, hoverOffset) : { dx: 0, dy: 0 };
           return /* @__PURE__ */ jsxRuntime.jsx(
             "path",
             {
               d: path,
               fill: color,
               opacity,
-              className: tigercatCore.classNames(
-                "transition-opacity duration-150",
-                (hoverable || selectable) && "cursor-pointer"
-              ),
+              stroke: borderColor,
+              strokeWidth: borderWidth,
+              strokeLinejoin: "round",
+              className: tigercatCore.classNames(interactive && "cursor-pointer"),
+              style: {
+                transform: isEmphasized ? `translate(${dx}px, ${dy}px) scale(1.04)` : `translate(${dx}px, ${dy}px)`,
+                transformOrigin: `${cx}px ${cy}px`,
+                transition: "transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease-out, filter 0.3s ease-out",
+                filter: shadow ? isEmphasized ? tigercatCore.PIE_EMPHASIS_SHADOW : tigercatCore.PIE_BASE_SHADOW : void 0
+              },
               tabIndex: selectable ? 0 : void 0,
               "data-pie-slice": "true",
               "data-index": arc.index,
@@ -171,7 +178,42 @@ var PieChart = ({
             `slice-${arc.index}`
           );
         }) }),
-        showLabels && arcs.map((arc) => {
+        showLabels && labelPosition === "outside" && arcs.map((arc) => {
+          const color = arc.data.color ?? palette[arc.index % palette.length];
+          const line = tigercatCore.computePieLabelLine(
+            cx,
+            cy,
+            resolvedOuterRadius,
+            arc.startAngle,
+            arc.endAngle
+          );
+          const pct = total > 0 ? (arc.value / total * 100).toFixed(1) : "0";
+          const labelText = labelFormatter ? labelFormatter(arc.value, arc.data, arc.index) : `${arc.data.label ?? arc.value} ${pct}%`;
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "polyline",
+              {
+                points: `${line.anchor.x},${line.anchor.y} ${line.elbow.x},${line.elbow.y} ${line.label.x},${line.label.y}`,
+                fill: "none",
+                stroke: color,
+                strokeWidth: 1,
+                opacity: 0.5
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                x: line.label.x,
+                y: line.label.y,
+                textAnchor: line.textAnchor,
+                dominantBaseline: "middle",
+                className: "fill-[color:var(--tiger-text-secondary,#6b7280)] text-xs",
+                children: labelText
+              }
+            )
+          ] }, `label-group-${arc.index}`);
+        }),
+        showLabels && labelPosition !== "outside" && arcs.map((arc) => {
           const angle = (arc.startAngle + arc.endAngle) / 2;
           const { x, y } = tigercatCore.polarToCartesian(cx, cy, labelRadius, angle);
           const label = formatLabel(arc.value, arc.data, arc.index);
@@ -215,7 +257,7 @@ var PieChart = ({
         position: legendPosition,
         markerSize: legendMarkerSize,
         gap: legendGap,
-        interactive: hoverable || selectable,
+        interactive,
         onItemClick: handleLegendClick,
         onItemHover: handleLegendHover,
         onItemLeave: handleLegendLeave

package/dist/{chunk-4MMT4EJJ.mjs → chunk-WAIXKROS.mjs}

@@ -1,5 +1,5 @@
-import { useState, useCallback, useEffect, useMemo } from 'react';
-import { getScrollTop, scrollToTop, classNames, backTopButtonClasses, backTopContainerClasses, backTopVisibleClasses, backTopHiddenClasses, backTopIconPath } from '@expcat/tigercat-core';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { scrollToTop, classNames, backTopButtonClasses, backTopContainerClasses, backTopVisibleClasses, backTopHiddenClasses, getScrollTop, backTopIconPath } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/BackTop.tsx
@@ -27,34 +27,29 @@ var BackTop = ({
   ...props
 }) => {
   const [visible, setVisible] = useState(false);
-  const handleScroll = useCallback(() => {
-    const targetElement = target();
-    if (!targetElement) return;
-    const scrollTop = getScrollTop(targetElement);
-    setVisible(scrollTop >= visibilityHeight);
+  useEffect(() => {
+    const el = target();
+    if (!el) return;
+    const onScroll = () => {
+      setVisible(getScrollTop(el) >= visibilityHeight);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    onScroll();
+    return () => {
+      el.removeEventListener("scroll", onScroll);
+    };
   }, [target, visibilityHeight]);
   const handleClick = useCallback(
     (event) => {
-      const targetElement = target();
-      if (targetElement) {
-        scrollToTop(targetElement, duration);
-      }
+      const el = target();
+      if (el) scrollToTop(el, duration);
       onClick?.(event);
     },
     [target, duration, onClick]
   );
-  useEffect(() => {
-    const targetElement = target();
-    if (!targetElement) return;
-    targetElement.addEventListener("scroll", handleScroll, { passive: true });
-    handleScroll();
-    return () => {
-      targetElement.removeEventListener("scroll", handleScroll);
-    };
-  }, [target, handleScroll]);
   const buttonClasses = useMemo(() => {
-    const targetElement = target();
-    const positionClasses = !targetElement || targetElement === window ? backTopButtonClasses : backTopContainerClasses;
+    const el = target();
+    const positionClasses = !el || el === window ? backTopButtonClasses : backTopContainerClasses;
     return classNames(
       positionClasses,
       visible ? backTopVisibleClasses : backTopHiddenClasses,

package/dist/{chunk-YGOTPK2W.mjs → chunk-WGRYO5HX.mjs}

@@ -1,7 +1,7 @@
 import { DropdownMenu } from './chunk-SIVJX7VU.mjs';
 import { useClickOutside, useEscapeKey, useFloating } from './chunk-WLIFEALE.mjs';
-import React, { createContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { classNames, getDropdownContainerClasses, getDropdownTriggerClasses, getTransformOrigin } from '@expcat/tigercat-core';
+import React, { createContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { injectDropdownStyles, classNames, getDropdownContainerClasses, getDropdownTriggerClasses, DROPDOWN_ENTER_CLASS, getTransformOrigin, getDropdownChevronClasses, DROPDOWN_CHEVRON_PATH } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DropdownContext = createContext(null);
@@ -13,11 +13,11 @@ var Dropdown = ({
   visible: controlledVisible,
   defaultVisible = false,
   closeOnClick = true,
+  showArrow = true,
   className,
   style,
   onVisibleChange,
   children,
-  onKeyDown,
   ...divProps
 }) => {
   const [internalVisible, setInternalVisible] = useState(defaultVisible);
@@ -26,6 +26,9 @@ var Dropdown = ({
   const triggerRef = useRef(null);
   const floatingRef = useRef(null);
   const hoverTimerRef = useRef(null);
+  useEffect(() => {
+    injectDropdownStyles();
+  }, []);
   const setVisible = useCallback(
     (newVisible) => {
       if (disabled && newVisible) return;
@@ -86,13 +89,12 @@ var Dropdown = ({
       }
     };
   }, []);
-  const containerClasses = classNames(
-    getDropdownContainerClasses(),
-    "tiger-dropdown-container",
-    className
+  const containerClasses = useMemo(
+    () => classNames(getDropdownContainerClasses(), "tiger-dropdown-container", className),
+    [className]
   );
-  const triggerClasses = getDropdownTriggerClasses(disabled);
-  const menuWrapperClasses = "absolute z-50";
+  const triggerClasses = useMemo(() => getDropdownTriggerClasses(disabled), [disabled]);
+  const menuWrapperClasses = classNames("absolute z-50", DROPDOWN_ENTER_CLASS);
   const menuWrapperStyles = useMemo(
     () => ({
       position: "absolute",
@@ -102,10 +104,10 @@ var Dropdown = ({
     }),
     [x, y, placement]
   );
-  const contextValue = {
-    closeOnClick,
-    handleItemClick
-  };
+  const contextValue = useMemo(
+    () => ({ closeOnClick, handleItemClick }),
+    [closeOnClick, handleItemClick]
+  );
   const childrenArray = React.Children.toArray(children);
   let triggerElement = null;
   let menuElement = null;
@@ -122,19 +124,29 @@ var Dropdown = ({
       triggerElement = child;
     }
   });
-  const handleContainerKeyDown = (event) => {
-    onKeyDown?.(event);
-  };
+  const chevronNode = showArrow ? /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getDropdownChevronClasses(visible),
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: DROPDOWN_CHEVRON_PATH })
+    }
+  ) : null;
   return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
       ref: containerRef,
       className: containerClasses,
       style,
-      onKeyDown: handleContainerKeyDown,
       ...divProps,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             ref: triggerRef,
@@ -144,7 +156,10 @@ var Dropdown = ({
             onMouseLeave: handleMouseLeave,
             "aria-haspopup": "menu",
             "aria-expanded": visible,
-            children: triggerElement
+            children: [
+              triggerElement,
+              chevronNode
+            ]
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/{chunk-ZPWDDAFE.js → chunk-XID6T65A.js}

@@ -30,6 +30,7 @@ var Anchor = ({
   const inkRef = react.useRef(null);
   const isScrollingRef = react.useRef(false);
   const animationFrameRef = react.useRef(null);
+  const scrollTimeoutRef = react.useRef(null);
   const getContainerRef = react.useRef(getContainer);
   getContainerRef.current = getContainer;
   const scrollOffset = react.useMemo(() => targetOffset ?? offsetTop, [targetOffset, offsetTop]);
@@ -57,19 +58,20 @@ var Anchor = ({
       isScrollingRef.current = true;
       setActiveLink(href);
       scrollTo(href);
-      setTimeout(() => {
+      if (scrollTimeoutRef.current !== null) clearTimeout(scrollTimeoutRef.current);
+      scrollTimeoutRef.current = setTimeout(() => {
         isScrollingRef.current = false;
+        scrollTimeoutRef.current = null;
       }, 500);
     },
     [onClick, scrollTo]
   );
-  const scrollHandlerRef = react.useRef(null);
-  const boundContainerRef = react.useRef(null);
   react.useEffect(() => {
+    let container = null;
+    let handleScroll = null;
     const timeoutId = setTimeout(() => {
-      const container = getContainerRef.current();
-      boundContainerRef.current = container;
-      const handleScroll = () => {
+      container = getContainerRef.current();
+      handleScroll = () => {
         if (isScrollingRef.current) return;
         if (animationFrameRef.current !== null) {
           cancelAnimationFrame(animationFrameRef.current);
@@ -87,18 +89,20 @@ var Anchor = ({
           });
         });
       };
-      scrollHandlerRef.current = handleScroll;
       container.addEventListener("scroll", handleScroll, { passive: true });
       handleScroll();
     }, 0);
     return () => {
       clearTimeout(timeoutId);
-      if (boundContainerRef.current && scrollHandlerRef.current) {
-        boundContainerRef.current.removeEventListener("scroll", scrollHandlerRef.current);
+      if (container && handleScroll) {
+        container.removeEventListener("scroll", handleScroll);
       }
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
       }
+      if (scrollTimeoutRef.current !== null) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
     };
   }, [links, bounds, scrollOffset, getCurrentAnchor, onChange]);
   react.useEffect(() => {
@@ -128,10 +132,7 @@ var Anchor = ({
   const inkContainerClasses = react.useMemo(() => tigercatCore.getAnchorInkContainerClasses(direction), [direction]);
   const inkActiveClasses = react.useMemo(() => tigercatCore.getAnchorInkActiveClasses(direction), [direction]);
   const linkListClasses = react.useMemo(() => tigercatCore.getAnchorLinkListClasses(direction), [direction]);
-  const showInk = react.useMemo(() => {
-    if (!affix) return true;
-    return showInkInFixed;
-  }, [affix, showInkInFixed]);
+  const showInk = react.useMemo(() => !affix || showInkInFixed, [affix, showInkInFixed]);
   const wrapperStyle = react.useMemo(() => {
     const baseStyle = {};
     if (affix && offsetTop > 0) {

package/dist/chunk-XJ7U2W7S.mjs

@@ -0,0 +1,27 @@
+import { getSpaceStyle, getSpaceClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Space.tsx
+var Space = ({
+  direction = "horizontal",
+  size = "md",
+  align = "start",
+  wrap = false,
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const gapStyle = getSpaceStyle(size);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: getSpaceClasses({ direction, size, align, wrap }, className),
+      style: gapStyle ? { ...gapStyle, ...style } : style,
+      children
+    }
+  );
+};
+
+export { Space };

package/dist/{chunk-ZN2BZCTI.js → chunk-XKDWDANG.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkCIL2AC3F_js = require('./chunk-CIL2AC3F.js');
-var chunkR7MS42PL_js = require('./chunk-R7MS42PL.js');
-var chunkA3DJSVTE_js = require('./chunk-A3DJSVTE.js');
-var chunkTZ26HQAW_js = require('./chunk-TZ26HQAW.js');
+var chunkOYCMGKQ7_js = require('./chunk-OYCMGKQ7.js');
+var chunkVCOBBJLP_js = require('./chunk-VCOBBJLP.js');
+var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var chunkCI2WHAT2_js = require('./chunk-CI2WHAT2.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -104,7 +104,7 @@ var ChatWindow = ({
           role: "listitem",
           children: [
             showAvatar && message.user ? /* @__PURE__ */ jsxRuntime.jsx(
-              chunkTZ26HQAW_js.Avatar,
+              chunkCI2WHAT2_js.Avatar,
               {
                 size: "sm",
                 src: message.user.avatar,
@@ -159,7 +159,7 @@ var ChatWindow = ({
     statusText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-1.5 border-t border-[var(--tiger-border,#e5e7eb)] text-xs italic text-[var(--tiger-text-muted,#6b7280)]", children: statusText }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-3 px-4 py-3 border-t border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] rounded-b-lg", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: inputType === "input" ? /* @__PURE__ */ jsxRuntime.jsx(
-        chunkCIL2AC3F_js.Input,
+        chunkOYCMGKQ7_js.Input,
         {
           value: inputValue,
           placeholder,
@@ -170,7 +170,7 @@ var ChatWindow = ({
           onKeyDown: handleKeyDown
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx(
-        chunkR7MS42PL_js.Textarea,
+        chunkVCOBBJLP_js.Textarea,
         {
           value: inputValue,
           placeholder,
@@ -182,7 +182,7 @@ var ChatWindow = ({
           onKeyDown: handleKeyDown
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(chunkA3DJSVTE_js.Button, { disabled: !canSend, onClick: handleSend, "aria-label": sendAriaLabel ?? sendText, children: sendText })
+      /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_js.Button, { disabled: !canSend, onClick: handleSend, "aria-label": sendAriaLabel ?? sendText, children: sendText })
     ] })
   ] });
 };

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

@@ -16,20 +16,22 @@ var Row = ({
   style,
   ...divProps
 }) => {
-  const { rowStyle } = tigercatCore.getGutterStyles(gutter);
-  const rowClasses = tigercatCore.classNames(
-    "flex",
-    "w-full",
-    wrap && "flex-wrap",
-    tigercatCore.getAlignClasses(align),
-    tigercatCore.getJustifyClasses(justify),
-    className
+  const rowClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      "flex",
+      "w-full",
+      wrap && "flex-wrap",
+      tigercatCore.getAlignClasses(align),
+      tigercatCore.getJustifyClasses(justify),
+      className
+    ),
+    [wrap, align, justify, className]
   );
-  const mergedStyle = {
-    ...rowStyle,
-    ...style
-  };
-  const contextValue = { gutter };
+  const mergedStyle = react.useMemo(
+    () => ({ ...tigercatCore.getGutterStyles(gutter).rowStyle, ...style }),
+    [gutter, style]
+  );
+  const contextValue = react.useMemo(() => ({ gutter }), [gutter]);
   return /* @__PURE__ */ jsxRuntime.jsx(RowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: rowClasses, style: mergedStyle, ...divProps, children }) });
 };
 

package/dist/{chunk-6YKZAWNX.js → chunk-XWNVBCJA.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkHDDBBZQH_js = require('./chunk-HDDBBZQH.js');
-var chunkOZLGNWET_js = require('./chunk-OZLGNWET.js');
-var chunkA3DJSVTE_js = require('./chunk-A3DJSVTE.js');
-var chunk6MGEGOYJ_js = require('./chunk-6MGEGOYJ.js');
-var chunkYYGTJKP5_js = require('./chunk-YYGTJKP5.js');
-var chunkVO4WDK4K_js = require('./chunk-VO4WDK4K.js');
+var chunkYV6Y7C43_js = require('./chunk-YV6Y7C43.js');
+var chunkQ57BYUUW_js = require('./chunk-Q57BYUUW.js');
+var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var chunk2GKTVAAB_js = require('./chunk-2GKTVAAB.js');
+var chunkI5TCE5E7_js = require('./chunk-I5TCE5E7.js');
+var chunkSSQOCZ6O_js = require('./chunk-SSQOCZ6O.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(chunkYYGTJKP5_js.Text, { tag: "span", size: "sm", weight: isRead ? "normal" : "semibold", children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_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(
-            chunkA3DJSVTE_js.Button,
+            chunkF24IF2QL_js.Button,
             {
               size: "sm",
               variant: "ghost",
@@ -187,7 +187,7 @@ var NotificationCenter = ({
     );
   };
   const renderList = (listItems) => /* @__PURE__ */ jsxRuntime.jsx(
-    chunkOZLGNWET_js.List,
+    chunkQ57BYUUW_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(chunk6MGEGOYJ_js.Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(chunkHDDBBZQH_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(chunkYV6Y7C43_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(
-      chunkHDDBBZQH_js.TabPane,
+      chunkYV6Y7C43_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(
-    chunkVO4WDK4K_js.Card,
+    chunkSSQOCZ6O_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(chunkYYGTJKP5_js.Text, { tag: "div", size: "base", weight: "bold", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkI5TCE5E7_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(chunkA3DJSVTE_js.Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
+          /* @__PURE__ */ jsxRuntime.jsx(chunkF24IF2QL_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",