@expcat/tigercat-react 0.2.27 → 0.3.69

package/dist/{chunk-67WZRMD6.js → chunk-SM7RDJFB.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var chunkKQZ4F7FZ_js = require('./chunk-KQZ4F7FZ.js');
+var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
 var chunk3QFHVAZT_js = require('./chunk-3QFHVAZT.js');
 var chunk6PBNFLM7_js = require('./chunk-6PBNFLM7.js');
 var chunkAX5XRD2Q_js = require('./chunk-AX5XRD2Q.js');
 var chunkM375I56K_js = require('./chunk-M375I56K.js');
 var chunkE5GD3H7L_js = require('./chunk-E5GD3H7L.js');
-var chunkDUWAV47E_js = require('./chunk-DUWAV47E.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -54,6 +54,9 @@ var AreaChart = ({
   legendMarkerSize = 10,
   legendGap = 8,
   showTooltip = true,
+  gradient = false,
+  animated = false,
+  pointHollow = false,
   tooltipFormatter,
   legendFormatter,
   title,
@@ -68,15 +71,15 @@ var AreaChart = ({
 }) => {
   const [hoveredPointInfo, setHoveredPointInfo] = react.useState(null);
   const [tooltipPosition, setTooltipPosition] = react.useState({ x: 0, y: 0 });
+  const gradientPrefix = react.useMemo(() => tigercatCore.getAreaGradientPrefix(), []);
   const innerRect = react.useMemo(
     () => tigercatCore.getChartInnerRect(width, height, padding),
     [width, height, padding]
   );
-  const resolvedSeries = react.useMemo(() => {
-    if (series && series.length > 0) return series;
-    if (data && data.length > 0) return [{ data }];
-    return [];
-  }, [series, data]);
+  const resolvedSeries = react.useMemo(
+    () => tigercatCore.resolveSeriesData(series, data),
+    [series, data]
+  );
   const {
     activeIndex,
     handleMouseEnter: handleSeriesHoverEnter,
@@ -123,7 +126,7 @@ var AreaChart = ({
       return tigercatCore.createLinearScale(extent, [0, innerRect.width]);
     } else {
       const categories = [...new Set(xValues.map(String))];
-      return tigercatCore.createPointScale(categories, [0, innerRect.width], { padding: 0.1 });
+      return tigercatCore.createPointScale(categories, [0, innerRect.width], { padding: 0 });
     }
   }, [xScaleProp, isXNumeric, xValues, innerRect.width]);
   const resolvedYScale = react.useMemo(() => {
@@ -132,12 +135,9 @@ var AreaChart = ({
     return tigercatCore.createLinearScale(extent, [innerRect.height, 0]);
   }, [yScaleProp, yValues, includeZero, innerRect.height]);
   const baseline = react.useMemo(() => resolvedYScale.map(0), [resolvedYScale]);
-  const resolvedShowXAxis = showAxis && showXAxis;
-  const resolvedShowYAxis = showAxis && showYAxis;
-  const palette = react.useMemo(
-    () => colors && colors.length > 0 ? colors : [...tigercatCore.DEFAULT_CHART_COLORS],
-    [colors]
-  );
+  const shouldShowXAxis = showAxis && showXAxis;
+  const shouldShowYAxis = showAxis && showYAxis;
+  const palette = react.useMemo(() => tigercatCore.resolveChartPalette(colors), [colors]);
   const seriesData = react.useMemo(() => {
     const stackedData = stacked ? tigercatCore.stackSeriesData(resolvedSeries.map((s) => s.data)) : null;
     return resolvedSeries.map((s, seriesIndex) => {
@@ -192,7 +192,8 @@ var AreaChart = ({
         strokeDasharray: s.strokeDasharray,
         showPoints: s.showPoints ?? showPoints,
         pointSize: s.pointSize ?? pointSize,
-        pointColor: s.pointColor ?? color
+        pointColor: s.pointColor ?? color,
+        pointHollow: s.pointHollow ?? pointHollow
       };
     });
   }, [
@@ -209,33 +210,28 @@ var AreaChart = ({
     fillOpacity,
     strokeWidth,
     showPoints,
-    pointSize
+    pointSize,
+    pointHollow
   ]);
   const legendItems = react.useMemo(
-    () => resolvedSeries.map((s, index) => ({
-      index,
-      label: legendFormatter ? legendFormatter(s, index) : s.name ?? `Series ${index + 1}`,
-      color: s.color ?? palette[index % palette.length],
-      active: activeIndex === null || activeIndex === index
-    })),
+    () => tigercatCore.buildChartLegendItems({
+      data: resolvedSeries,
+      palette,
+      activeIndex,
+      getLabel: (s, i) => legendFormatter ? legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+      getColor: (s, i) => s.color ?? palette[i % palette.length]
+    }),
     [resolvedSeries, legendFormatter, palette, activeIndex]
   );
-  const formatTooltip = react.useCallback(
-    (datum, seriesIndex, _pointIndex, s) => {
-      if (tooltipFormatter) return tooltipFormatter(datum, seriesIndex, _pointIndex, s);
-      const seriesName = s?.name ?? `Series ${seriesIndex + 1}`;
-      const label = datum.label ?? String(datum.x);
-      return `${seriesName} \xB7 ${label}: ${datum.y}`;
-    },
-    [tooltipFormatter]
+  const tooltipContent = react.useMemo(
+    () => tigercatCore.resolveMultiSeriesTooltipContent(
+      hoveredPointInfo,
+      resolvedSeries,
+      tooltipFormatter,
+      tigercatCore.defaultSeriesXYTooltipFormatter
+    ),
+    [hoveredPointInfo, resolvedSeries, tooltipFormatter]
   );
-  const tooltipContent = react.useMemo(() => {
-    if (!hoveredPointInfo) return "";
-    const { seriesIndex, pointIndex } = hoveredPointInfo;
-    const s = resolvedSeries[seriesIndex];
-    const datum = s?.data[pointIndex];
-    return datum ? formatTooltip(datum, seriesIndex, pointIndex, s) : "";
-  }, [hoveredPointInfo, resolvedSeries, formatTooltip]);
   const handlePointMouseEnter = react.useCallback(
     (seriesIndex, pointIndex, event) => {
       setHoveredPointInfo({ seriesIndex, pointIndex });
@@ -278,6 +274,32 @@ var AreaChart = ({
       desc,
       className: tigercatCore.classNames(className),
       children: [
+        (gradient || animated) && /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+              .tiger-area-animated {
+                animation: tiger-area-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
+              }
+              @keyframes tiger-area-draw {
+                from { stroke-dashoffset: 1; }
+                to { stroke-dashoffset: 0; }
+              }
+            ` }),
+          gradient && reversedSeriesData.map((sd) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "linearGradient",
+            {
+              id: `${gradientPrefix}-${sd.seriesIndex}`,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: sd.fillColor, stopOpacity: sd.fillOpacity }),
+                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: sd.fillColor, stopOpacity: 0.02 })
+              ]
+            },
+            `area-grad-${sd.seriesIndex}`
+          ))
+        ] }),
         showGrid && /* @__PURE__ */ jsxRuntime.jsx(
           chunk3QFHVAZT_js.ChartGrid,
           {
@@ -292,7 +314,7 @@ var AreaChart = ({
             strokeWidth: gridStrokeWidth
           }
         ),
-        resolvedShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
+        shouldShowXAxis && /* @__PURE__ */ jsxRuntime.jsx(
           chunkE5GD3H7L_js.ChartAxis,
           {
             scale: resolvedXScale,
@@ -304,7 +326,7 @@ var AreaChart = ({
             label: xAxisLabel
           }
         ),
-        resolvedShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
+        shouldShowYAxis && /* @__PURE__ */ jsxRuntime.jsx(
           chunkE5GD3H7L_js.ChartAxis,
           {
             scale: resolvedYScale,
@@ -322,7 +344,11 @@ var AreaChart = ({
             name: sd.series.name,
             type: "area",
             opacity: sd.opacity,
-            className: tigercatCore.classNames(sd.series.className, (hoverable || selectable) && "cursor-pointer"),
+            className: tigercatCore.classNames(
+              sd.series.className,
+              (hoverable || selectable) && "cursor-pointer",
+              "outline-none"
+            ),
             onMouseEnter: (e) => handleSeriesHoverEnter(sd.seriesIndex, e),
             onMouseLeave: handleSeriesHoverLeave,
             onClick: () => handleSeriesSelect(sd.seriesIndex),
@@ -333,10 +359,10 @@ var AreaChart = ({
                 "path",
                 {
                   d: sd.areaPath,
-                  fill: sd.fillColor,
-                  fillOpacity: sd.fillOpacity,
+                  fill: gradient ? `url(#${gradientPrefix}-${sd.seriesIndex})` : sd.fillColor,
+                  fillOpacity: gradient ? 1 : sd.fillOpacity,
                   stroke: "none",
-                  className: "transition-opacity duration-150",
+                  className: "transition-opacity duration-300",
                   "data-area-series": sd.seriesIndex
                 }
               ),
@@ -347,35 +373,49 @@ var AreaChart = ({
                   fill: "none",
                   stroke: sd.color,
                   strokeWidth: sd.strokeWidth,
-                  strokeDasharray: sd.strokeDasharray,
+                  strokeDasharray: animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
+                  strokeDashoffset: animated ? "1" : void 0,
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
-                  className: "transition-opacity duration-150"
+                  pathLength: animated ? 1 : void 0,
+                  className: tigercatCore.classNames(
+                    "transition-opacity duration-200",
+                    animated && "tiger-area-animated"
+                  )
                 }
-              ),
-              sd.showPoints && sd.points.map((point) => /* @__PURE__ */ jsxRuntime.jsx(
-                "circle",
-                {
-                  cx: point.x,
-                  cy: point.y,
-                  r: sd.pointSize,
-                  fill: sd.pointColor,
-                  className: "transition-all duration-150",
-                  "data-point-index": point.pointIndex,
-                  onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
-                  onMouseMove: handlePointMouseMove,
-                  onMouseLeave: handlePointMouseLeave,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handlePointClick(sd.seriesIndex, point.pointIndex);
-                  }
-                },
-                `point-${sd.seriesIndex}-${point.pointIndex}`
-              ))
+              )
             ]
           },
           `series-${sd.seriesIndex}`
-        ))
+        )),
+        seriesData.map(
+          (sd) => sd.showPoints && /* @__PURE__ */ jsxRuntime.jsx("g", { opacity: sd.opacity, children: sd.points.map((point) => {
+            const isHovered = hoveredPointInfo?.seriesIndex === sd.seriesIndex && hoveredPointInfo?.pointIndex === point.pointIndex;
+            const hoverSize = sd.pointSize + 2;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx: point.x,
+                cy: point.y,
+                r: isHovered ? hoverSize : sd.pointSize,
+                fill: sd.pointHollow ? "white" : sd.pointColor,
+                stroke: sd.pointHollow ? sd.pointColor : "none",
+                strokeWidth: sd.pointHollow ? 2 : 0,
+                className: "transition-all duration-200 ease-out",
+                style: isHovered ? { filter: `drop-shadow(0 0 4px ${sd.color})` } : void 0,
+                "data-point-index": point.pointIndex,
+                onMouseEnter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
+                onMouseMove: handlePointMouseMove,
+                onMouseLeave: handlePointMouseLeave,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handlePointClick(sd.seriesIndex, point.pointIndex);
+                }
+              },
+              `point-${sd.seriesIndex}-${point.pointIndex}`
+            );
+          }) }, `points-${sd.seriesIndex}`)
+        )
       ]
     }
   );

package/dist/{chunk-DGBYGBLR.js → chunk-SOC74QA2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
+var chunkMWH6FCSE_js = require('./chunk-MWH6FCSE.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -9,8 +9,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
-var popconfirmIdCounter = 0;
-var createPopconfirmId = () => `tiger-popconfirm-${++popconfirmIdCounter}`;
+var createPopconfirmId = tigercatCore.createFloatingIdFactory("popconfirm");
 var PopconfirmIcon = ({ type }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -52,27 +51,29 @@ var Popconfirm = ({
   onCancel,
   ...divProps
 }) => {
-  const isControlled = visible !== void 0;
-  const [internalVisible, setInternalVisible] = React.useState(defaultVisible);
-  const currentVisible = isControlled ? visible : internalVisible;
-  const containerRef = React.useRef(null);
-  const triggerRef = React.useRef(null);
-  const floatingRef = React.useRef(null);
   const popconfirmIdRef = React.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
+  } = chunkMWH6FCSE_js.usePopup({
+    visible,
+    defaultVisible,
+    disabled,
+    placement: initialPlacement,
+    offset,
+    multiTrigger: false,
+    onVisibleChange
+  });
   const handleConfirm = () => {
     onConfirm?.();
     setVisible(false);
@@ -85,51 +86,30 @@ var Popconfirm = ({
     if (disabled) return;
     setVisible(!currentVisible);
   };
-  const { x, y, placement } = chunkZYPEO2KY_js.useFloating({
-    referenceRef: triggerRef,
-    floatingRef,
-    enabled: currentVisible,
-    placement: initialPlacement,
-    offset
-  });
-  const handleOutsideClick = React.useCallback(() => setVisible(false), []);
-  const handleEscape = React.useCallback(() => setVisible(false), []);
-  chunkZYPEO2KY_js.useClickOutside({
-    enabled: currentVisible,
-    refs: [containerRef],
-    onOutsideClick: handleOutsideClick,
-    defer: true
-  });
-  chunkZYPEO2KY_js.useEscapeKey({
-    enabled: currentVisible,
-    onEscape: handleEscape
-  });
   const contentWrapperStyles = React.useMemo(
     () => ({
       position: "absolute",
-      left: x,
-      top: y,
-      transformOrigin: tigercatCore.getTransformOrigin(placement)
+      left: baseFloatingStyles.left,
+      top: baseFloatingStyles.top,
+      transformOrigin: baseFloatingStyles.transformOrigin
     }),
-    [x, y, placement]
+    [baseFloatingStyles]
   );
   const containerClasses = React.useMemo(
     () => tigercatCore.classNames(tigercatCore.getPopconfirmContainerClasses(), className),
     [className]
   );
   const triggerClasses = React.useMemo(() => tigercatCore.getPopconfirmTriggerClasses(disabled), [disabled]);
-  const contentWrapperClasses = React.useMemo(() => "absolute z-50", []);
-  const arrowClasses = React.useMemo(() => tigercatCore.getPopconfirmArrowClasses(placement), [placement]);
-  const contentClasses = React.useMemo(() => tigercatCore.getPopconfirmContentClasses(), []);
-  const titleClasses = React.useMemo(() => tigercatCore.getPopconfirmTitleClasses(), []);
-  const descriptionClasses = React.useMemo(() => tigercatCore.getPopconfirmDescriptionClasses(), []);
+  const contentWrapperClasses = "absolute z-50";
+  const arrowClasses = React.useMemo(() => tigercatCore.getPopconfirmArrowClasses(actualPlacement), [actualPlacement]);
+  const contentClasses = tigercatCore.getPopconfirmContentClasses();
+  const titleClasses = tigercatCore.getPopconfirmTitleClasses();
+  const descriptionClasses = tigercatCore.getPopconfirmDescriptionClasses();
   const iconClasses = React.useMemo(() => tigercatCore.getPopconfirmIconClasses(icon), [icon]);
-  const buttonsClasses = React.useMemo(() => tigercatCore.getPopconfirmButtonsClasses(), []);
-  const cancelButtonClasses = React.useMemo(() => tigercatCore.getPopconfirmCancelButtonClasses(), []);
+  const buttonsClasses = tigercatCore.getPopconfirmButtonsClasses();
+  const cancelButtonClasses = tigercatCore.getPopconfirmCancelButtonClasses();
   const okButtonClasses = React.useMemo(() => tigercatCore.getPopconfirmOkButtonClasses(okType), [okType]);
-  if (!children) {
-    return null;
-  }
+  if (!children) return null;
   const mergedStyle = tigercatCore.mergeStyleValues(style);
   const triggerProps = {
     className: triggerClasses,

package/dist/{chunk-KOLLAGRK.mjs → chunk-SQ7OL2X5.mjs}

@@ -17,8 +17,8 @@ var BreadcrumbItem = ({
 }) => {
   const breadcrumbContext = useBreadcrumbContext();
   const itemClasses = useMemo(
-    () => getBreadcrumbItemClasses(current, className),
-    [current, className]
+    () => getBreadcrumbItemClasses(className),
+    [className]
   );
   const linkClasses = useMemo(() => getBreadcrumbLinkClasses(current), [current]);
   const separatorClasses = useMemo(() => getBreadcrumbSeparatorClasses(), []);
@@ -51,7 +51,6 @@ var BreadcrumbItem = ({
       href,
       target,
       rel: computedRel,
-      "aria-current": current ? "page" : void 0,
       onClick: handleClick,
       children: contentElements
     }

package/dist/{chunk-VO4WDK4K.js → chunk-SSQOCZ6O.js}

@@ -23,12 +23,11 @@ var Card = ({
     !cover && tigercatCore.cardSizeClasses[size],
     className
   );
-  const bodyClasses = tigercatCore.classNames(tigercatCore.cardBodyClasses, sectionSizeClass);
   const getSectionClasses = (baseClasses) => tigercatCore.classNames(baseClasses, sectionSizeClass);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cardClasses, ...props, children: [
     cover && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.cardCoverWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: cover, alt: coverAlt, className: tigercatCore.cardCoverClasses }) }),
     header != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getSectionClasses(tigercatCore.cardHeaderClasses), children: header }),
-    children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: bodyClasses, children }),
+    children != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: sectionSizeClass, children }),
     footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getSectionClasses(tigercatCore.cardFooterClasses), children: footer }),
     actions != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: getSectionClasses(tigercatCore.classNames(tigercatCore.cardActionsClasses, tigercatCore.cardFooterClasses)), children: actions })
   ] });

package/dist/{chunk-KV4LLPAY.mjs → chunk-SW4I4X6E.mjs}

@@ -97,15 +97,13 @@ var Drawer = ({
     locale?.common?.closeText
   );
   useEffect(() => {
-    if (!visible) return;
-    previousActiveElementRef.current = captureActiveElement();
-    const timer = window.setTimeout(() => {
-      focusFirst([closeButtonRef.current, dialogRef.current]);
-    }, 0);
-    return () => window.clearTimeout(timer);
-  }, [visible]);
-  useEffect(() => {
-    if (visible) return;
+    if (visible) {
+      previousActiveElementRef.current = captureActiveElement();
+      const timer = window.setTimeout(() => {
+        focusFirst([closeButtonRef.current, dialogRef.current]);
+      }, 0);
+      return () => window.clearTimeout(timer);
+    }
     restoreFocus(previousActiveElementRef.current);
   }, [visible]);
   const handleKeyDown = useCallback((event) => {
@@ -119,7 +117,7 @@ var Drawer = ({
     }
   }, []);
   const containerClasses = classNames(
-    getDrawerContainerClasses(zIndex),
+    getDrawerContainerClasses(),
     !visible && "pointer-events-none"
   );
   const maskClasses = getDrawerMaskClasses(visible);

package/dist/{chunk-GQMYCYZ4.js → chunk-TDRINUMH.js}

@@ -5,17 +5,6 @@ var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Select.tsx
-var flattenSelectOptions = (options) => {
-  const all = [];
-  for (const item of options) {
-    if (tigercatCore.isOptionGroup(item)) {
-      all.push(...item.options);
-    } else {
-      all.push(item);
-    }
-  }
-  return all;
-};
 var isMultipleSelect = (props) => props.multiple === true;
 var Select = (props) => {
   const {
@@ -30,9 +19,25 @@ var Select = (props) => {
     onSearch,
     className
   } = props;
-  const divProps = (({ value: _value, onChange: _onChange, multiple: _multiple, ...rest }) => rest)(
-    props
-  );
+  const SELECT_KEYS = /* @__PURE__ */ new Set([
+    "options",
+    "size",
+    "disabled",
+    "placeholder",
+    "searchable",
+    "clearable",
+    "noOptionsText",
+    "noDataText",
+    "onSearch",
+    "className",
+    "value",
+    "onChange",
+    "multiple"
+  ]);
+  const divProps = {};
+  for (const [k, v] of Object.entries(props)) {
+    if (!SELECT_KEYS.has(k)) divProps[k] = v;
+  }
   const instanceId = react.useId();
   const listboxId = `tiger-select-listbox-${instanceId}`;
   const [isOpen, setIsOpen] = react.useState(false);
@@ -46,26 +51,24 @@ var Select = (props) => {
     [options, searchable, searchQuery]
   );
   const flatFilteredOptions = react.useMemo(
-    () => flattenSelectOptions(filteredOptions),
+    () => tigercatCore.flattenSelectOptions(filteredOptions),
     [filteredOptions]
   );
-  const allOptions = react.useMemo(() => flattenSelectOptions(options), [options]);
-  const displayText = (() => {
+  const allOptions = react.useMemo(() => tigercatCore.flattenSelectOptions(options), [options]);
+  const displayText = react.useMemo(() => {
     if (isMultipleSelect(props)) {
       const value2 = props.value ?? [];
-      if (value2.length === 0) {
-        return placeholder;
-      }
-      const selectedOptions = allOptions.filter((opt) => value2.includes(opt.value));
-      return selectedOptions.map((opt) => opt.label).join(", ");
+      if (value2.length === 0) return placeholder;
+      return allOptions.filter((opt) => value2.includes(opt.value)).map((opt) => opt.label).join(", ");
     }
     const value = props.value;
-    if (value === void 0 || value === null || value === "") {
-      return placeholder;
-    }
+    if (value === void 0 || value === null || value === "") return placeholder;
     return allOptions.find((opt) => opt.value === value)?.label ?? placeholder;
-  })();
-  const showClearButton = clearable && !disabled && props.value !== void 0 && props.value !== null && props.value !== "" && (!Array.isArray(props.value) || props.value.length > 0);
+  }, [props.multiple, props.value, allOptions, placeholder]);
+  const showClearButton = react.useMemo(
+    () => clearable && !disabled && props.value !== void 0 && props.value !== null && props.value !== "" && (!Array.isArray(props.value) || props.value.length > 0),
+    [clearable, disabled, props.value]
+  );
   const isSelected = (option) => {
     if (isMultipleSelect(props)) {
       return (props.value ?? []).includes(option.value);
@@ -397,7 +400,7 @@ var Select = (props) => {
     });
   };
   const containerClasses = tigercatCore.classNames(tigercatCore.selectBaseClasses, className);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClasses, ...divProps, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...divProps, className: containerClasses, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {

package/dist/{chunk-DIZNY6N4.mjs → chunk-TGKNEMD4.mjs}

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { classNames, tagBaseClasses, getTagVariantClasses, tagSizeClasses, defaultTagThemeColors, tagCloseButtonBaseClasses, icon24StrokeWidth, icon24ViewBox, tagCloseIconPath, icon24PathStrokeLinejoin, icon24PathStrokeLinecap } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -35,14 +35,14 @@ var Tag = ({
   ...props
 }) => {
   const [isVisible, setIsVisible] = useState(true);
-  const tagClasses = classNames(
-    tagBaseClasses,
-    getTagVariantClasses(variant),
-    tagSizeClasses[size],
-    className
+  const tagClasses = useMemo(
+    () => classNames(tagBaseClasses, getTagVariantClasses(variant), tagSizeClasses[size], className),
+    [variant, size, className]
   );
-  const scheme = defaultTagThemeColors[variant];
-  const closeButtonClasses = classNames(tagCloseButtonBaseClasses, scheme.closeBgHover, scheme.text);
+  const closeButtonClasses = useMemo(() => {
+    const scheme = defaultTagThemeColors[variant];
+    return classNames(tagCloseButtonBaseClasses, scheme.closeBgHover, scheme.text);
+  }, [variant]);
   const handleClose = (event) => {
     event.stopPropagation();
     onClose?.(event);