@expcat/tigercat-react 0.3.0 → 0.3.69

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

package/dist/{chunk-BAPR7UUR.mjs → chunk-TGPQ4KET.mjs}

@@ -1,9 +1,8 @@
-import { Select } from './chunk-NMDNLB3C.mjs';
-import { Button } from './chunk-STEIWBMF.mjs';
 import { useState, useMemo } from 'react';
-import { getSpinnerSVG, paginateData, calculatePagination, classNames, getListClasses, listSizeClasses, listGridContainerClasses, getGridColumnClasses, listWrapperClasses, listLoadingOverlayClasses, getListHeaderFooterClasses, listEmptyStateClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationPageIndicatorClasses, getLoadingOverlaySpinnerClasses, getListItemClasses, listItemAvatarClasses, listItemTitleClasses, listItemDescriptionClasses, listItemContentClasses, listItemMetaClasses, listItemExtraClasses } from '@expcat/tigercat-core';
+import { getSpinnerSVG, paginateData, calculatePagination, classNames, getListClasses, listSizeClasses, listGridContainerClasses, getGridColumnClasses, listWrapperClasses, listLoadingOverlayClasses, getListHeaderFooterClasses, listEmptyStateClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getLoadingOverlaySpinnerClasses, getListItemClasses, listItemAvatarClasses, listItemTitleClasses, listItemDescriptionClasses, listItemContentClasses, listItemMetaClasses, listItemExtraClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+// src/components/List.tsx
 var spinnerSvg = getSpinnerSVG("spinner");
 var LoadingSpinner = () => /* @__PURE__ */ jsx(
   "svg",
@@ -198,34 +197,24 @@ var List = ({
       paginationConfig.showTotal !== false && /* @__PURE__ */ jsx("div", { className: getSimplePaginationTotalClasses(), children: paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} items` }),
       /* @__PURE__ */ jsxs("div", { className: getSimplePaginationControlsClasses(), children: [
         paginationConfig.showSizeChanger !== false && /* @__PURE__ */ jsx(
-          Select,
+          "select",
           {
-            size: "sm",
+            className: getSimplePaginationSelectClasses(),
             value: currentPageSize,
-            onChange: (value) => {
-              if (value == null) return;
-              const nextSize = typeof value === "number" ? value : Number(value);
-              if (!Number.isFinite(nextSize)) return;
-              handlePageSizeChange(nextSize);
-            },
-            options: (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map((size2) => ({
-              label: `${size2} / page`,
-              value: size2
-            }))
+            onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+            children: (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map((size2) => /* @__PURE__ */ jsxs("option", { value: size2, children: [
+              size2,
+              " / page"
+            ] }, size2))
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: getSimplePaginationButtonsWrapperClasses(), children: [
           /* @__PURE__ */ jsx(
-            Button,
+            "button",
             {
-              size: "sm",
-              variant: "outline",
+              className: getSimplePaginationButtonClasses(!hasPrev),
               disabled: !hasPrev,
               onClick: () => handlePageChange(currentPage - 1),
-              className: classNames(
-                !hasPrev && "cursor-not-allowed",
-                hasPrev && "hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-              ),
               children: "Previous"
             }
           ),
@@ -236,16 +225,11 @@ var List = ({
             totalPages
           ] }),
           /* @__PURE__ */ jsx(
-            Button,
+            "button",
             {
-              size: "sm",
-              variant: "outline",
+              className: getSimplePaginationButtonClasses(!hasNext),
               disabled: !hasNext,
               onClick: () => handlePageChange(currentPage + 1),
-              className: classNames(
-                !hasNext && "cursor-not-allowed",
-                hasNext && "hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-              ),
               children: "Next"
             }
           )

package/dist/{chunk-3XKBDV2Q.mjs → chunk-TUA5PDRX.mjs}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { classNames, iconWrapperClasses, SVG_DEFAULT_STROKE, SVG_DEFAULT_FILL, SVG_DEFAULT_VIEWBOX_24, SVG_DEFAULT_XMLNS, iconSvgBaseClasses, iconSizeClasses } from '@expcat/tigercat-core';
+import { classNames, iconWrapperClasses, iconSvgDefaultStrokeLinejoin, iconSvgDefaultStrokeLinecap, iconSvgDefaultStrokeWidth, SVG_DEFAULT_STROKE, SVG_DEFAULT_FILL, SVG_DEFAULT_VIEWBOX_24, SVG_DEFAULT_XMLNS, iconSvgBaseClasses, iconSizeClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Icon.tsx
@@ -7,14 +7,13 @@ var Icon = ({
   size = "md",
   color = "currentColor",
   className,
+  style,
   children,
   ...props
 }) => {
-  const iconStyle = { ...props.style, color };
   const iconClasses = classNames(iconWrapperClasses, className);
-  const ariaLabel = props["aria-label"];
-  const ariaLabelledBy = props["aria-labelledby"];
-  const isDecorative = ariaLabel == null && ariaLabelledBy == null && props.role == null;
+  const iconStyle = { ...style, color };
+  const isDecorative = props["aria-label"] == null && props["aria-labelledby"] == null && props.role == null;
   const processedChildren = React.Children.map(children, (child) => {
     if (!React.isValidElement(child) || child.type !== "svg") {
       return child;
@@ -27,9 +26,9 @@ var Icon = ({
       viewBox: svgProps.viewBox ?? SVG_DEFAULT_VIEWBOX_24,
       fill: svgProps.fill ?? SVG_DEFAULT_FILL,
       stroke: svgProps.stroke ?? SVG_DEFAULT_STROKE,
-      strokeWidth: svgProps.strokeWidth ?? 2,
-      strokeLinecap: svgProps.strokeLinecap ?? "round",
-      strokeLinejoin: svgProps.strokeLinejoin ?? "round"
+      strokeWidth: svgProps.strokeWidth ?? iconSvgDefaultStrokeWidth,
+      strokeLinecap: svgProps.strokeLinecap ?? iconSvgDefaultStrokeLinecap,
+      strokeLinejoin: svgProps.strokeLinejoin ?? iconSvgDefaultStrokeLinejoin
     });
   });
   return /* @__PURE__ */ jsx(

package/dist/{chunk-CES6LGQ7.mjs → chunk-UE234MW4.mjs}

@@ -1,5 +1,5 @@
-import { useState, useRef, useEffect } from 'react';
-import { parseTime, to12HourFormat, getTimePickerLabels, getTimePeriodLabels, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, classNames, timePickerInputWrapperClasses, timePickerClearButtonClasses, TimePickerCloseIconPath, ClockIconPath, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, timePickerBaseClasses, isTimeInRange, formatTime, getCurrentTime, icon20ViewBox } from '@expcat/tigercat-core';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { parseTime, getTimePickerLabels, getTimePeriodLabels, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, classNames, timePickerInputWrapperClasses, timePickerClearButtonClasses, TimePickerCloseIconPath, ClockIconPath, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, timePickerBaseClasses, to12HourFormat, isTimeInRange, formatTime, getCurrentTime, icon20ViewBox } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/TimePicker.tsx
@@ -78,31 +78,37 @@ var TimePicker = (allProps) => {
   const [selectedMinutes, setSelectedMinutes] = useState(parsedTime?.minutes ?? 0);
   const [selectedSeconds, setSelectedSeconds] = useState(parsedTime?.seconds ?? 0);
   const [selectedPeriod, setSelectedPeriod] = useState("AM");
-  useEffect(() => {
+  const syncFromActiveValue = () => {
     const parsed = parseTime(activeValue);
-    if (parsed) {
-      setSelectedHours(parsed.hours);
-      setSelectedMinutes(parsed.minutes);
-      setSelectedSeconds(parsed.seconds);
-      if (format === "12") {
-        const { period } = to12HourFormat(parsed.hours);
-        setSelectedPeriod(period);
-      }
+    if (!parsed) return;
+    setSelectedHours(parsed.hours);
+    setSelectedMinutes(parsed.minutes);
+    setSelectedSeconds(parsed.seconds);
+    if (format === "12") {
+      const { period } = to12HourFormat(parsed.hours);
+      setSelectedPeriod(period);
     }
+  };
+  useEffect(() => {
+    syncFromActiveValue();
   }, [activeValue, format, activePart, isRangeMode]);
-  const labels = getTimePickerLabels(locale, labelsOverrides);
+  const labels = useMemo(
+    () => getTimePickerLabels(locale, labelsOverrides),
+    [locale, labelsOverrides]
+  );
   const placeholder = allProps.placeholder ?? (isRangeMode ? labels.selectTimeRange : labels.selectTime);
-  const periodLabels = getTimePeriodLabels(locale);
-  const singleDisplayValue = parsedTime ? formatTimeDisplayWithLocale(
-    parsedTime.hours,
-    parsedTime.minutes,
-    parsedTime.seconds,
-    format,
-    showSeconds,
-    locale
-  ) : "";
+  const periodLabels = useMemo(() => getTimePeriodLabels(locale), [locale]);
   const displayValue = (() => {
-    if (!isRangeMode) return singleDisplayValue;
+    if (!isRangeMode) {
+      return parsedTime ? formatTimeDisplayWithLocale(
+        parsedTime.hours,
+        parsedTime.minutes,
+        parsedTime.seconds,
+        format,
+        showSeconds,
+        locale
+      ) : "";
+    }
     const toDisplay = (timeStr) => {
       const parsed = parseTime(timeStr);
       if (!parsed) return "";
@@ -125,9 +131,9 @@ var TimePicker = (allProps) => {
     if (!isRangeMode) return currentSingleValue !== null;
     return currentRangeValue[0] !== null || currentRangeValue[1] !== null;
   })();
-  const hoursList = generateHours(hourStep, format);
-  const minutesList = generateMinutes(minuteStep);
-  const secondsList = generateSeconds(secondStep);
+  const hoursList = useMemo(() => generateHours(hourStep, format), [hourStep, format]);
+  const minutesList = useMemo(() => generateMinutes(minuteStep), [minuteStep]);
+  const secondsList = useMemo(() => generateSeconds(secondStep), [secondStep]);
   const togglePanel = () => {
     if (!disabled && !readonly) {
       if (isOpen) {
@@ -135,15 +141,7 @@ var TimePicker = (allProps) => {
         return;
       }
       setIsOpen(true);
-      if (parsedTime) {
-        setSelectedHours(parsedTime.hours);
-        setSelectedMinutes(parsedTime.minutes);
-        setSelectedSeconds(parsedTime.seconds);
-        if (format === "12") {
-          const { period } = to12HourFormat(parsedTime.hours);
-          setSelectedPeriod(period);
-        }
-      }
+      syncFromActiveValue();
     }
   };
   const closePanel = () => {
@@ -428,7 +426,6 @@ var TimePicker = (allProps) => {
             /* @__PURE__ */ jsxs("div", { className: timePickerColumnClasses, children: [
               /* @__PURE__ */ jsx("div", { className: timePickerColumnHeaderClasses, children: labels.hour }),
               /* @__PURE__ */ jsx("div", { className: timePickerColumnListClasses, children: hoursList.map((hour) => {
-                const displayHour = format === "12" ? hour : hour;
                 const hours24 = format === "12" ? to24HourFormat(hour, selectedPeriod) : hour;
                 const isSelected = selectedHours === hours24;
                 const isDisabled = isHourDisabled(hour);
@@ -441,13 +438,13 @@ var TimePicker = (allProps) => {
                     onClick: () => selectHour(hour),
                     "data-tiger-timepicker-unit": "hour",
                     "aria-label": getTimePickerOptionAriaLabel(
-                      displayHour,
+                      hour,
                       "hour",
                       locale,
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: displayHour.toString().padStart(2, "0")
+                    children: hour.toString().padStart(2, "0")
                   },
                   hour
                 );

package/dist/{chunk-U4ZVEPYD.js → chunk-URM7QDHH.js}

@@ -21,7 +21,7 @@ var Checkbox = ({
   const [internalChecked, setInternalChecked] = react.useState(defaultChecked);
   const isControlled = controlledChecked !== void 0;
   const effectiveSize = propSize || groupContext?.size || "md";
-  const effectiveDisabled = propDisabled !== void 0 ? propDisabled : groupContext?.disabled || false;
+  const effectiveDisabled = propDisabled || groupContext?.disabled || false;
   const checked = groupContext && value !== void 0 ? groupContext.value.includes(value) : isControlled ? controlledChecked : internalChecked;
   const checkboxRef = react.useRef(null);
   react.useEffect(() => {
@@ -42,28 +42,24 @@ var Checkbox = ({
     }
   };
   const checkboxClasses = tigercatCore.getCheckboxClasses(effectiveSize, effectiveDisabled);
+  const inputProps = {
+    ref: checkboxRef,
+    type: "checkbox",
+    checked,
+    disabled: effectiveDisabled,
+    value: typeof value === "boolean" ? String(value) : value,
+    onChange: handleChange,
+    ...props
+  };
+  if (!children) {
+    return /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, className: tigercatCore.classNames(checkboxClasses, className) });
+  }
   const labelClasses = tigercatCore.classNames(
     tigercatCore.getCheckboxLabelClasses(effectiveSize, effectiveDisabled),
     className
   );
-  const checkboxElement = /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      ref: checkboxRef,
-      type: "checkbox",
-      className: checkboxClasses,
-      checked,
-      disabled: effectiveDisabled,
-      value: typeof value === "boolean" ? String(value) : value,
-      onChange: handleChange,
-      ...props
-    }
-  );
-  if (!children) {
-    return checkboxElement;
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClasses, children: [
-    checkboxElement,
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, className: checkboxClasses }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children })
   ] });
 };

package/dist/chunk-UZ7SBFQV.mjs

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { getDividerClasses, getDividerStyle } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Divider.tsx
+var Divider = ({
+  orientation = "horizontal",
+  lineStyle = "solid",
+  spacing = "md",
+  color,
+  thickness,
+  className,
+  ...props
+}) => {
+  const classes = useMemo(() => {
+    const base = getDividerClasses(orientation, lineStyle, spacing);
+    return className ? `${base} ${className}` : base;
+  }, [orientation, lineStyle, spacing, className]);
+  const style = useMemo(
+    () => getDividerStyle(orientation, color, thickness),
+    [color, thickness, orientation]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: classes,
+      style,
+      role: "separator",
+      "aria-orientation": orientation
+    }
+  );
+};
+
+export { Divider };

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