@expcat/tigercat-react 0.2.10 → 0.3.0

package/dist/chunk-JOHKSMJM.mjs

@@ -0,0 +1,266 @@
+import React, { forwardRef, useState, useRef, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
+import { classNames, getCarouselContainerClasses, carouselTrackFadeClasses, carouselTrackScrollClasses, getScrollTransform, carouselSlideBaseClasses, getCarouselDotsClasses, clampSlideIndex, getNextSlideIndex, getPrevSlideIndex, isPrevDisabled, isNextDisabled, getCarouselArrowClasses, carouselPrevArrowPath, carouselNextArrowPath, getCarouselDotClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/Carousel.tsx
+var Carousel = forwardRef(
+  ({
+    autoplay = false,
+    autoplaySpeed = 3e3,
+    dots = true,
+    dotPosition = "bottom",
+    effect = "scroll",
+    arrows = false,
+    infinite = true,
+    speed = 500,
+    initialSlide = 0,
+    pauseOnHover = true,
+    pauseOnFocus = true,
+    className,
+    style,
+    onChange,
+    onBeforeChange,
+    children
+  }, ref) => {
+    const [currentIndex, setCurrentIndex] = useState(initialSlide);
+    const [isPaused, setIsPaused] = useState(false);
+    const autoplayTimerRef = useRef(null);
+    const slides = useMemo(() => {
+      return React.Children.toArray(children).filter((child) => React.isValidElement(child));
+    }, [children]);
+    const slideCount = slides.length;
+    const containerClasses = useMemo(
+      () => classNames(getCarouselContainerClasses(className)),
+      [className]
+    );
+    const trackClasses = useMemo(() => {
+      if (effect === "fade") {
+        return carouselTrackFadeClasses;
+      }
+      return carouselTrackScrollClasses;
+    }, [effect]);
+    const trackStyle = useMemo(() => {
+      if (effect === "scroll") {
+        return {
+          transform: getScrollTransform(currentIndex),
+          transitionDuration: `${speed}ms`
+        };
+      }
+      return {};
+    }, [effect, currentIndex, speed]);
+    const getSlideClasses = useCallback(
+      (index) => {
+        const isActive = index === currentIndex;
+        if (effect === "fade") {
+          const positionClass = index === 0 ? "relative" : "absolute inset-0";
+          return classNames(
+            positionClass,
+            "w-full transition-opacity ease-in-out",
+            isActive ? "opacity-100 z-10" : "opacity-0 z-0"
+          );
+        }
+        return carouselSlideBaseClasses;
+      },
+      [effect, currentIndex]
+    );
+    const getSlideStyle = useCallback(() => {
+      return {
+        transitionDuration: `${speed}ms`
+      };
+    }, [speed]);
+    const dotsClasses = useMemo(() => {
+      return getCarouselDotsClasses(dotPosition);
+    }, [dotPosition]);
+    const goTo = useCallback(
+      (index) => {
+        const clampedIndex = clampSlideIndex(index, slideCount);
+        if (clampedIndex === currentIndex) return;
+        onBeforeChange?.(currentIndex, clampedIndex);
+        const prevIndex = currentIndex;
+        setCurrentIndex(clampedIndex);
+        onChange?.(clampedIndex, prevIndex);
+      },
+      [currentIndex, slideCount, onBeforeChange, onChange]
+    );
+    const next = useCallback(() => {
+      const nextIdx = getNextSlideIndex(currentIndex, slideCount, infinite);
+      if (nextIdx !== currentIndex) {
+        goTo(nextIdx);
+      }
+    }, [currentIndex, slideCount, infinite, goTo]);
+    const prev = useCallback(() => {
+      const prevIdx = getPrevSlideIndex(currentIndex, slideCount, infinite);
+      if (prevIdx !== currentIndex) {
+        goTo(prevIdx);
+      }
+    }, [currentIndex, slideCount, infinite, goTo]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        next,
+        prev,
+        goTo
+      }),
+      [next, prev, goTo]
+    );
+    useEffect(() => {
+      if (autoplay && !isPaused) {
+        if (autoplayTimerRef.current) {
+          clearInterval(autoplayTimerRef.current);
+        }
+        autoplayTimerRef.current = setInterval(() => {
+          setCurrentIndex((prevIndex) => {
+            const nextIdx = getNextSlideIndex(prevIndex, slideCount, infinite);
+            if (nextIdx !== prevIndex) {
+              onBeforeChange?.(prevIndex, nextIdx);
+              onChange?.(nextIdx, prevIndex);
+            }
+            return nextIdx;
+          });
+        }, autoplaySpeed);
+      }
+      return () => {
+        if (autoplayTimerRef.current) {
+          clearInterval(autoplayTimerRef.current);
+          autoplayTimerRef.current = null;
+        }
+      };
+    }, [autoplay, autoplaySpeed, isPaused, slideCount, infinite, onChange, onBeforeChange]);
+    const handleMouseEnter = useCallback(() => {
+      if (pauseOnHover && autoplay) {
+        setIsPaused(true);
+      }
+    }, [pauseOnHover, autoplay]);
+    const handleMouseLeave = useCallback(() => {
+      if (pauseOnHover && autoplay) {
+        setIsPaused(false);
+      }
+    }, [pauseOnHover, autoplay]);
+    const handleFocus = useCallback(() => {
+      if (pauseOnFocus && autoplay) {
+        setIsPaused(true);
+      }
+    }, [pauseOnFocus, autoplay]);
+    const handleBlur = useCallback(() => {
+      if (pauseOnFocus && autoplay) {
+        setIsPaused(false);
+      }
+    }, [pauseOnFocus, autoplay]);
+    const isPrevArrowDisabled = useMemo(
+      () => isPrevDisabled(currentIndex, slideCount, infinite),
+      [currentIndex, slideCount, infinite]
+    );
+    const isNextArrowDisabled = useMemo(
+      () => isNextDisabled(currentIndex, slideCount, infinite),
+      [currentIndex, slideCount, infinite]
+    );
+    const renderArrows = () => {
+      if (!arrows) return null;
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getCarouselArrowClasses("prev", isPrevArrowDisabled),
+            onClick: prev,
+            disabled: isPrevArrowDisabled,
+            "aria-label": "Previous slide",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "w-6 h-6",
+                children: /* @__PURE__ */ jsx("path", { d: carouselPrevArrowPath })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: getCarouselArrowClasses("next", isNextArrowDisabled),
+            onClick: next,
+            disabled: isNextArrowDisabled,
+            "aria-label": "Next slide",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "w-6 h-6",
+                children: /* @__PURE__ */ jsx("path", { d: carouselNextArrowPath })
+              }
+            )
+          }
+        )
+      ] });
+    };
+    const renderDots = () => {
+      if (!dots || slideCount <= 1) return null;
+      return /* @__PURE__ */ jsx("div", { className: dotsClasses, role: "tablist", "aria-label": "Carousel navigation", children: slides.map((_, index) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getCarouselDotClasses(index === currentIndex),
+          onClick: () => goTo(index),
+          "aria-label": `Go to slide ${index + 1}`,
+          "aria-current": index === currentIndex ? "true" : "false"
+        },
+        index
+      )) });
+    };
+    const renderSlides = () => {
+      const slideElements = slides.map((slide, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: getSlideClasses(index),
+          style: effect === "fade" ? getSlideStyle() : void 0,
+          role: "group",
+          "aria-roledescription": "slide",
+          "aria-label": `Slide ${index + 1} of ${slideCount}`,
+          "aria-hidden": index !== currentIndex,
+          children: slide
+        },
+        index
+      ));
+      if (effect === "fade") {
+        return /* @__PURE__ */ jsx("div", { className: classNames(trackClasses, "h-full"), children: slideElements });
+      }
+      return /* @__PURE__ */ jsx("div", { className: trackClasses, style: trackStyle, children: slideElements });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: containerClasses,
+        style,
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": "Image carousel",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        children: [
+          renderSlides(),
+          renderArrows(),
+          renderDots()
+        ]
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+export { Carousel };

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

@@ -1,4 +1,4 @@
-import { useBreadcrumbContext } from './chunk-7JQ7LURS.mjs';
+import { useBreadcrumbContext } from './chunk-H36CWHUP.mjs';
 import { useMemo, useCallback } from 'react';
 import { getBreadcrumbItemClasses, getBreadcrumbLinkClasses, getBreadcrumbSeparatorClasses, getSeparatorContent } from '@expcat/tigercat-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-P273E6XE.js → chunk-MQTHGPHF.js}

@@ -53,23 +53,33 @@ var FormItem = ({
     }
     return width;
   }, [labelWidth, formContext?.labelWidth]);
+  const hasRequiredRule = React.useCallback((maybeRules) => {
+    if (!maybeRules) {
+      return false;
+    }
+    const rules2 = Array.isArray(maybeRules) ? maybeRules : [maybeRules];
+    return rules2.some((rule) => {
+      if (!rule || typeof rule !== "object") {
+        return false;
+      }
+      return !!rule.required;
+    });
+  }, []);
   const showRequiredAsterisk = React.useMemo(() => {
     if (required !== void 0) {
       return required;
     }
     if (rules) {
-      const ruleArray = Array.isArray(rules) ? rules : [rules];
-      return ruleArray.some((rule) => rule.required);
+      return hasRequiredRule(rules);
     }
     if (name && formContext?.rules) {
       const fieldRules = formContext.rules[name];
       if (fieldRules) {
-        const ruleArray = Array.isArray(fieldRules) ? fieldRules : [fieldRules];
-        return ruleArray.some((rule) => rule.required);
+        return hasRequiredRule(fieldRules);
       }
     }
     return false;
-  }, [required, rules, name, formContext?.rules]);
+  }, [required, rules, name, formContext?.rules, hasRequiredRule]);
   const isRequired = React.useMemo(
     () => showRequiredAsterisk && (formContext?.showRequiredAsterisk ?? true),
     [showRequiredAsterisk, formContext?.showRequiredAsterisk]
@@ -154,22 +164,24 @@ var FormItem = ({
   ]);
   const formItemClasses = React.useMemo(
     () => tigercatCore.classNames(
-      "tiger-form-item",
-      `tiger-form-item--${actualSize}`,
-      `tiger-form-item--label-${labelPosition}`,
-      hasError && "tiger-form-item--error",
-      formContext?.disabled && "tiger-form-item--disabled",
+      tigercatCore.getFormItemClasses({
+        size: actualSize,
+        labelPosition,
+        hasError,
+        disabled: formContext?.disabled
+      }),
       className
     ),
     [actualSize, labelPosition, hasError, formContext?.disabled, className]
   );
   const labelClasses = React.useMemo(
-    () => tigercatCore.classNames(
-      "tiger-form-item__label",
-      `tiger-form-item__label--${labelAlign}`,
-      isRequired && "tiger-form-item__label--required"
-    ),
-    [labelAlign, isRequired]
+    () => tigercatCore.getFormItemLabelClasses({
+      size: actualSize,
+      labelAlign,
+      labelPosition,
+      isRequired
+    }),
+    [actualSize, labelAlign, labelPosition, isRequired]
   );
   const labelStyles = React.useMemo(() => {
     if (labelPosition === "top") {
@@ -178,9 +190,13 @@ var FormItem = ({
     return actualLabelWidth ? { width: actualLabelWidth } : {};
   }, [labelPosition, actualLabelWidth]);
   const errorClasses = React.useMemo(
-    () => tigercatCore.classNames("tiger-form-item__error", hasError && "tiger-form-item__error--show"),
-    [hasError]
+    () => tigercatCore.classNames(tigercatCore.getFormItemErrorClasses(actualSize), hasError && "tiger-form-item__error--show"),
+    [actualSize, hasError]
   );
+  const contentClasses = React.useMemo(() => tigercatCore.getFormItemContentClasses(labelPosition), [labelPosition]);
+  const fieldClasses = React.useMemo(() => tigercatCore.getFormItemFieldClasses(), []);
+  const asteriskClasses = React.useMemo(() => tigercatCore.getFormItemAsteriskClasses(), []);
+  const asteriskStyle = React.useMemo(() => tigercatCore.getFormItemAsteriskStyle(), []);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: formItemClasses, children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
@@ -190,16 +206,16 @@ var FormItem = ({
         style: labelStyles,
         htmlFor: isClonableChild ? effectiveFieldId : void 0,
         children: [
-          isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tiger-form-item__asterisk", children: "*" }),
+          isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: asteriskClasses, style: asteriskStyle, children: "*" }),
           label
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiger-form-item__content", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: contentClasses, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "tiger-form-item__field",
+          className: fieldClasses,
           role: "group",
           "aria-labelledby": label ? labelId : void 0,
           "aria-describedby": describedById,

package/dist/{chunk-IS7YOBR7.mjs → chunk-NDOYQK2R.mjs}

@@ -96,6 +96,18 @@ var Pagination = ({
     },
     [handleQuickJumperSubmit]
   );
+  const normalizedPageSizeOptions = useMemo(() => {
+    return pageSizeOptions.map((option) => {
+      if (typeof option === "number") {
+        return {
+          value: option,
+          label: `${option} ${labels.itemsPerPageText}`
+        };
+      }
+      const label = option.label ?? `${option.value} ${labels.itemsPerPageText}`;
+      return { value: option.value, label };
+    });
+  }, [pageSizeOptions, labels.itemsPerPageText]);
   const containerClasses = getPaginationContainerClasses(align, className);
   const elements = [];
   if (showTotal) {
@@ -231,11 +243,7 @@ var Pagination = ({
           value: currentPageSize,
           onChange: (e) => handlePageSizeChange(parseInt(e.target.value, 10)),
           "aria-label": labels.itemsPerPageText,
-          children: pageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsxs("option", { value: sizeOption, children: [
-            sizeOption,
-            " ",
-            labels.itemsPerPageText
-          ] }, sizeOption))
+          children: normalizedPageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsx("option", { value: sizeOption.value, children: sizeOption.label }, sizeOption.value))
         },
         "size-changer"
       )

package/dist/chunk-OVWCTDAL.js

@@ -0,0 +1,209 @@
+'use strict';
+
+var chunkGJKT2B56_js = require('./chunk-GJKT2B56.js');
+var chunkGY6D4XS3_js = require('./chunk-GY6D4XS3.js');
+var chunkPBJ2J2B3_js = require('./chunk-PBJ2J2B3.js');
+var chunk4TWHENPT_js = require('./chunk-4TWHENPT.js');
+var chunkEQWQXURG_js = require('./chunk-EQWQXURG.js');
+var chunkCIL2AC3F_js = require('./chunk-CIL2AC3F.js');
+var chunkA3DJSVTE_js = require('./chunk-A3DJSVTE.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var resolveFilterLabel = (filter, value) => {
+  const option = filter.options.find((item) => item.value === value);
+  if (option) return `${filter.label}: ${option.label}`;
+  if (value !== null && value !== void 0 && value !== "") {
+    return `${filter.label}: ${String(value)}`;
+  }
+  return filter.placeholder ?? filter.label;
+};
+var DataTableWithToolbar = ({
+  toolbar,
+  onSearchChange,
+  onSearch,
+  onFiltersChange,
+  onBulkAction,
+  pagination = false,
+  onPageChange,
+  onPageSizeChange,
+  className,
+  tableClassName,
+  ...tableProps
+}) => {
+  const [internalSearch, setInternalSearch] = react.useState(toolbar?.defaultSearchValue ?? "");
+  const [internalFilters, setInternalFilters] = react.useState(
+    () => {
+      const initial = {};
+      toolbar?.filters?.forEach((filter) => {
+        if (filter.value === void 0) {
+          initial[filter.key] = filter.defaultValue ?? null;
+        }
+      });
+      return initial;
+    }
+  );
+  react.useEffect(() => {
+    if (toolbar?.searchValue !== void 0) {
+      setInternalSearch(toolbar.searchValue ?? "");
+    }
+  }, [toolbar?.searchValue]);
+  react.useEffect(() => {
+    const filters = toolbar?.filters;
+    if (!filters) return;
+    setInternalFilters((prev) => {
+      const next = { ...prev };
+      filters.forEach((filter) => {
+        if (filter.value === void 0 && !(filter.key in next)) {
+          next[filter.key] = filter.defaultValue ?? null;
+        }
+      });
+      return next;
+    });
+  }, [toolbar?.filters]);
+  const searchValue = toolbar?.searchValue !== void 0 ? toolbar.searchValue : internalSearch;
+  const resolvedFilters = react.useMemo(() => {
+    const next = {};
+    toolbar?.filters?.forEach((filter) => {
+      next[filter.key] = filter.value !== void 0 ? filter.value : internalFilters[filter.key] ?? filter.defaultValue ?? null;
+    });
+    return next;
+  }, [toolbar?.filters, internalFilters]);
+  const hasSearch = Boolean(
+    toolbar && (toolbar.searchPlaceholder || toolbar.searchValue !== void 0 || toolbar.defaultSearchValue !== void 0 || toolbar.showSearchButton || toolbar.onSearchChange || toolbar.onSearch || onSearchChange || onSearch)
+  );
+  const hasFilters = Boolean(toolbar?.filters && toolbar.filters.length > 0);
+  const hasBulkActions = Boolean(toolbar?.bulkActions && toolbar.bulkActions.length > 0);
+  const selectedKeys = toolbar?.selectedKeys ?? tableProps.rowSelection?.selectedRowKeys ?? [];
+  const selectedCount = toolbar?.selectedCount ?? selectedKeys.length;
+  const bulkLabel = toolbar?.bulkActionsLabel ?? "\u5DF2\u9009\u62E9";
+  const wrapperClasses = react.useMemo(
+    () => tigercatCore.classNames("tiger-data-table-with-toolbar flex flex-col gap-3", className),
+    [className]
+  );
+  const handleSearchChange = (value) => {
+    if (toolbar?.searchValue === void 0) {
+      setInternalSearch(value);
+    }
+    onSearchChange?.(value);
+    toolbar?.onSearchChange?.(value);
+  };
+  const handleSearchSubmit = () => {
+    onSearch?.(searchValue ?? "");
+    toolbar?.onSearch?.(searchValue ?? "");
+  };
+  const handleFilterSelect = (filter, value) => {
+    const nextFilters = {
+      ...resolvedFilters,
+      [filter.key]: value
+    };
+    if (filter.value === void 0) {
+      setInternalFilters((prev) => ({
+        ...prev,
+        [filter.key]: value
+      }));
+    }
+    onFiltersChange?.(nextFilters);
+    toolbar?.onFiltersChange?.(nextFilters);
+  };
+  const handleBulkAction = (action) => {
+    const keys = selectedKeys ?? [];
+    action.onClick?.(keys);
+    onBulkAction?.(action, keys);
+    toolbar?.onBulkAction?.(action, keys);
+  };
+  const renderToolbar = () => {
+    if (!hasSearch && !hasFilters && !hasBulkActions) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+        hasSearch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunkCIL2AC3F_js.Input,
+            {
+              type: "search",
+              size: "sm",
+              value: searchValue,
+              placeholder: toolbar?.searchPlaceholder ?? "\u641C\u7D22",
+              onChange: (event) => handleSearchChange(String(event.currentTarget.value)),
+              onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                  handleSearchSubmit();
+                }
+              }
+            }
+          ),
+          toolbar?.showSearchButton ?? true ? /* @__PURE__ */ jsxRuntime.jsx(
+            chunkA3DJSVTE_js.Button,
+            {
+              size: "sm",
+              variant: "primary",
+              className: "whitespace-nowrap",
+              onClick: handleSearchSubmit,
+              disabled: !onSearch && !toolbar?.onSearch,
+              children: toolbar?.searchButtonText ?? "\u641C\u7D22"
+            }
+          ) : null
+        ] }) : null,
+        hasFilters ? toolbar?.filters?.map((filter) => {
+          const currentValue = resolvedFilters[filter.key];
+          const triggerLabel = resolveFilterLabel(filter, currentValue);
+          const clearable = filter.clearable !== false;
+          const clearLabel = filter.clearLabel ?? "\u5168\u90E8";
+          const isActive = currentValue !== null && currentValue !== void 0 && currentValue !== "";
+          return /* @__PURE__ */ jsxRuntime.jsxs(chunk4TWHENPT_js.Dropdown, { trigger: "click", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkA3DJSVTE_js.Button,
+              {
+                size: "sm",
+                variant: isActive ? "secondary" : "outline",
+                className: "whitespace-nowrap",
+                children: triggerLabel
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(chunkEQWQXURG_js.DropdownMenu, { children: [
+              clearable ? /* @__PURE__ */ jsxRuntime.jsx(chunkPBJ2J2B3_js.DropdownItem, { onClick: () => handleFilterSelect(filter, null), children: clearLabel }) : null,
+              filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+                chunkPBJ2J2B3_js.DropdownItem,
+                {
+                  onClick: () => handleFilterSelect(filter, option.value),
+                  children: option.label
+                },
+                String(option.value)
+              ))
+            ] })
+          ] }, filter.key);
+        }) : null
+      ] }),
+      hasBulkActions ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-2 flex-wrap", children: [
+        selectedCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-[var(--tiger-text-muted,#6b7280)]", children: [
+          bulkLabel,
+          " ",
+          selectedCount,
+          " \u9879"
+        ] }) : null,
+        toolbar?.bulkActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
+          chunkA3DJSVTE_js.Button,
+          {
+            size: "sm",
+            variant: action.variant ?? "outline",
+            disabled: action.disabled || selectedCount === 0,
+            onClick: () => handleBulkAction(action),
+            children: action.label
+          },
+          action.key
+        ))
+      ] }) : null
+    ] });
+  };
+  const showPagination = pagination && typeof pagination === "object";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, "data-tiger-data-table-with-toolbar": true, children: [
+    renderToolbar(),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkGJKT2B56_js.Table, { ...tableProps, pagination: false, className: tableClassName }),
+    showPagination ? /* @__PURE__ */ jsxRuntime.jsx(chunkGY6D4XS3_js.Pagination, { ...pagination, onChange: onPageChange, onPageSizeChange }) : null
+  ] });
+};
+var DataTableWithToolbar_default = DataTableWithToolbar;
+
+exports.DataTableWithToolbar = DataTableWithToolbar;
+exports.DataTableWithToolbar_default = DataTableWithToolbar_default;

package/dist/{chunk-2DOPHSZP.js → chunk-OWUGXP6K.js}

@@ -17,15 +17,20 @@ var Breadcrumb = ({
   separator = "/",
   className,
   style,
+  extra,
   children,
   ...props
 }) => {
+  const hasExtra = Boolean(extra);
   const containerClasses = React__default.default.useMemo(
-    () => tigercatCore.classNames(tigercatCore.breadcrumbContainerClasses, className),
-    [className]
+    () => tigercatCore.classNames(tigercatCore.breadcrumbContainerClasses, hasExtra && "w-full", className),
+    [className, hasExtra]
   );
   const contextValue = React__default.default.useMemo(() => ({ separator }), [separator]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center flex-wrap gap-2", children }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center flex-wrap gap-2", children }),
+    hasExtra && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: extra })
+  ] }) });
 };
 
 exports.Breadcrumb = Breadcrumb;