@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-HGF2EL25.mjs → chunk-V5NIFF2F.mjs}

@@ -1,10 +1,9 @@
-import { useFloating, useClickOutside, useEscapeKey } from './chunk-WLIFEALE.mjs';
-import React, { useState, useRef, useCallback, useMemo } from 'react';
-import { getTransformOrigin, classNames, getPopconfirmContainerClasses, getPopconfirmTriggerClasses, getPopconfirmArrowClasses, getPopconfirmContentClasses, getPopconfirmTitleClasses, getPopconfirmDescriptionClasses, getPopconfirmIconClasses, getPopconfirmButtonsClasses, getPopconfirmCancelButtonClasses, getPopconfirmOkButtonClasses, mergeStyleValues, popconfirmIconStrokeWidth, popconfirmIconViewBox, getPopconfirmIconPath, popconfirmIconPathStrokeLinejoin, popconfirmIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import { usePopup } from './chunk-3PV2MDST.mjs';
+import React, { useRef, useMemo } from 'react';
+import { createFloatingIdFactory, classNames, getPopconfirmContainerClasses, getPopconfirmTriggerClasses, getPopconfirmArrowClasses, getPopconfirmContentClasses, getPopconfirmTitleClasses, getPopconfirmDescriptionClasses, getPopconfirmIconClasses, getPopconfirmButtonsClasses, getPopconfirmCancelButtonClasses, getPopconfirmOkButtonClasses, mergeStyleValues, popconfirmIconStrokeWidth, popconfirmIconViewBox, getPopconfirmIconPath, popconfirmIconPathStrokeLinejoin, popconfirmIconPathStrokeLinecap } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var popconfirmIdCounter = 0;
-var createPopconfirmId = () => `tiger-popconfirm-${++popconfirmIdCounter}`;
+var createPopconfirmId = createFloatingIdFactory("popconfirm");
 var PopconfirmIcon = ({ type }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -46,27 +45,29 @@ var Popconfirm = ({
   onCancel,
   ...divProps
 }) => {
-  const isControlled = visible !== void 0;
-  const [internalVisible, setInternalVisible] = useState(defaultVisible);
-  const currentVisible = isControlled ? visible : internalVisible;
-  const containerRef = useRef(null);
-  const triggerRef = useRef(null);
-  const floatingRef = useRef(null);
   const popconfirmIdRef = useRef(null);
-  if (!popconfirmIdRef.current) {
-    popconfirmIdRef.current = createPopconfirmId();
-  }
+  if (!popconfirmIdRef.current) popconfirmIdRef.current = createPopconfirmId();
   const popconfirmId = popconfirmIdRef.current;
   const titleId = `${popconfirmId}-title`;
   const descriptionId = `${popconfirmId}-description`;
   const describedBy = description || descriptionContent ? descriptionId : void 0;
-  const setVisible = (newVisible) => {
-    if (disabled && newVisible) return;
-    if (!isControlled) {
-      setInternalVisible(newVisible);
-    }
-    onVisibleChange?.(newVisible);
-  };
+  const {
+    currentVisible,
+    setVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    actualPlacement,
+    floatingStyles: baseFloatingStyles
+  } = usePopup({
+    visible,
+    defaultVisible,
+    disabled,
+    placement: initialPlacement,
+    offset,
+    multiTrigger: false,
+    onVisibleChange
+  });
   const handleConfirm = () => {
     onConfirm?.();
     setVisible(false);
@@ -79,51 +80,30 @@ var Popconfirm = ({
     if (disabled) return;
     setVisible(!currentVisible);
   };
-  const { x, y, placement } = useFloating({
-    referenceRef: triggerRef,
-    floatingRef,
-    enabled: currentVisible,
-    placement: initialPlacement,
-    offset
-  });
-  const handleOutsideClick = useCallback(() => setVisible(false), []);
-  const handleEscape = useCallback(() => setVisible(false), []);
-  useClickOutside({
-    enabled: currentVisible,
-    refs: [containerRef],
-    onOutsideClick: handleOutsideClick,
-    defer: true
-  });
-  useEscapeKey({
-    enabled: currentVisible,
-    onEscape: handleEscape
-  });
   const contentWrapperStyles = useMemo(
     () => ({
       position: "absolute",
-      left: x,
-      top: y,
-      transformOrigin: getTransformOrigin(placement)
+      left: baseFloatingStyles.left,
+      top: baseFloatingStyles.top,
+      transformOrigin: baseFloatingStyles.transformOrigin
     }),
-    [x, y, placement]
+    [baseFloatingStyles]
   );
   const containerClasses = useMemo(
     () => classNames(getPopconfirmContainerClasses(), className),
     [className]
   );
   const triggerClasses = useMemo(() => getPopconfirmTriggerClasses(disabled), [disabled]);
-  const contentWrapperClasses = useMemo(() => "absolute z-50", []);
-  const arrowClasses = useMemo(() => getPopconfirmArrowClasses(placement), [placement]);
-  const contentClasses = useMemo(() => getPopconfirmContentClasses(), []);
-  const titleClasses = useMemo(() => getPopconfirmTitleClasses(), []);
-  const descriptionClasses = useMemo(() => getPopconfirmDescriptionClasses(), []);
+  const contentWrapperClasses = "absolute z-50";
+  const arrowClasses = useMemo(() => getPopconfirmArrowClasses(actualPlacement), [actualPlacement]);
+  const contentClasses = getPopconfirmContentClasses();
+  const titleClasses = getPopconfirmTitleClasses();
+  const descriptionClasses = getPopconfirmDescriptionClasses();
   const iconClasses = useMemo(() => getPopconfirmIconClasses(icon), [icon]);
-  const buttonsClasses = useMemo(() => getPopconfirmButtonsClasses(), []);
-  const cancelButtonClasses = useMemo(() => getPopconfirmCancelButtonClasses(), []);
+  const buttonsClasses = getPopconfirmButtonsClasses();
+  const cancelButtonClasses = getPopconfirmCancelButtonClasses();
   const okButtonClasses = useMemo(() => getPopconfirmOkButtonClasses(okType), [okType]);
-  if (!children) {
-    return null;
-  }
+  if (!children) return null;
   const mergedStyle = mergeStyleValues(style);
   const triggerProps = {
     className: triggerClasses,

package/dist/{chunk-672SCJWZ.mjs → chunk-VCNZEQEB.mjs}

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { forwardRef, useRef, useState, useLayoutEffect, useMemo } from 'react';
 import { autoResizeTextarea, classNames, getInputClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -35,24 +35,24 @@ var Textarea = forwardRef(
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
     };
-    useEffect(() => {
+    useLayoutEffect(() => {
       if (!autoResize || !textareaRef.current) return;
       autoResizeTextarea(textareaRef.current, { minRows, maxRows });
     }, [autoResize, currentValue, minRows, maxRows]);
-    const textareaClasses = classNames(
-      "block",
-      getInputClasses(size),
-      autoResize ? "resize-none" : "resize-y",
-      className
+    const textareaClasses = useMemo(
+      () => classNames(
+        "block",
+        getInputClasses({ size }),
+        autoResize ? "resize-none" : "resize-y",
+        className
+      ),
+      [size, autoResize, className]
     );
     const handleInput = (event) => {
       if (!isControlled) {
         setInternalValue(event.currentTarget.value);
       }
       onInput?.(event);
-      if (autoResize) {
-        autoResizeTextarea(event.currentTarget, { minRows, maxRows });
-      }
     };
     const handleChange = (event) => {
       onChange?.(event);

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 };