@expcat/tigercat-react 0.2.10 → 0.3.0

package/dist/chunk-73DMQ2SR.mjs

@@ -0,0 +1,206 @@
+import { Table } from './chunk-HGTF6A46.mjs';
+import { Pagination } from './chunk-NDOYQK2R.mjs';
+import { DropdownItem } from './chunk-IAF24RKI.mjs';
+import { Dropdown } from './chunk-YGOTPK2W.mjs';
+import { DropdownMenu } from './chunk-SIVJX7VU.mjs';
+import { Input } from './chunk-6ZTCBQJ7.mjs';
+import { Button } from './chunk-STEIWBMF.mjs';
+import { useState, useEffect, useMemo } from 'react';
+import { classNames } from '@expcat/tigercat-core';
+import { jsxs, jsx } from '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] = useState(toolbar?.defaultSearchValue ?? "");
+  const [internalFilters, setInternalFilters] = useState(
+    () => {
+      const initial = {};
+      toolbar?.filters?.forEach((filter) => {
+        if (filter.value === void 0) {
+          initial[filter.key] = filter.defaultValue ?? null;
+        }
+      });
+      return initial;
+    }
+  );
+  useEffect(() => {
+    if (toolbar?.searchValue !== void 0) {
+      setInternalSearch(toolbar.searchValue ?? "");
+    }
+  }, [toolbar?.searchValue]);
+  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 = 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 = useMemo(
+    () => 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__ */ jsxs("div", { className: "tiger-data-table-toolbar flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+        hasSearch ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+            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__ */ jsxs(Dropdown, { trigger: "click", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "sm",
+                variant: isActive ? "secondary" : "outline",
+                className: "whitespace-nowrap",
+                children: triggerLabel
+              }
+            ),
+            /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              clearable ? /* @__PURE__ */ jsx(DropdownItem, { onClick: () => handleFilterSelect(filter, null), children: clearLabel }) : null,
+              filter.options.map((option) => /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  onClick: () => handleFilterSelect(filter, option.value),
+                  children: option.label
+                },
+                String(option.value)
+              ))
+            ] })
+          ] }, filter.key);
+        }) : null
+      ] }),
+      hasBulkActions ? /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2 flex-wrap", children: [
+        selectedCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-sm text-[var(--tiger-text-muted,#6b7280)]", children: [
+          bulkLabel,
+          " ",
+          selectedCount,
+          " \u9879"
+        ] }) : null,
+        toolbar?.bulkActions?.map((action) => /* @__PURE__ */ jsx(
+          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__ */ jsxs("div", { className: wrapperClasses, "data-tiger-data-table-with-toolbar": true, children: [
+    renderToolbar(),
+    /* @__PURE__ */ jsx(Table, { ...tableProps, pagination: false, className: tableClassName }),
+    showPagination ? /* @__PURE__ */ jsx(Pagination, { ...pagination, onChange: onPageChange, onPageSizeChange }) : null
+  ] });
+};
+var DataTableWithToolbar_default = DataTableWithToolbar;
+
+export { DataTableWithToolbar, DataTableWithToolbar_default };

package/dist/chunk-FAZQT7YP.mjs

@@ -0,0 +1,255 @@
+import { Tabs, TabPane } from './chunk-C52ZCGYG.mjs';
+import { List } from './chunk-BAPR7UUR.mjs';
+import { Button } from './chunk-STEIWBMF.mjs';
+import { Loading } from './chunk-PUDU34R4.mjs';
+import { Text } from './chunk-6YDIBMCM.mjs';
+import { Card } from './chunk-VD3IK5XT.mjs';
+import { useMemo, useState, useEffect } from 'react';
+import { buildNotificationGroups, classNames, formatActivityTime } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var getGroupKey = (group, index) => {
+  return group.key ?? group.title ?? index;
+};
+var filterItems = (items, filter) => {
+  return items.filter((item) => {
+    const isRead = Boolean(item.read);
+    if (filter === "read") return isRead;
+    if (filter === "unread") return !isRead;
+    return true;
+  });
+};
+var NotificationCenter = ({
+  items = [],
+  groups,
+  groupBy,
+  groupOrder,
+  activeGroupKey,
+  defaultActiveGroupKey,
+  readFilter,
+  defaultReadFilter = "all",
+  loading = false,
+  loadingText = "\u52A0\u8F7D\u4E2D...",
+  emptyText = "\u6682\u65E0\u901A\u77E5",
+  title = "\u901A\u77E5\u4E2D\u5FC3",
+  allLabel = "\u5168\u90E8",
+  unreadLabel = "\u672A\u8BFB",
+  readLabel = "\u5DF2\u8BFB",
+  markAllReadText = "\u5168\u90E8\u6807\u8BB0\u5DF2\u8BFB",
+  markReadText = "\u6807\u8BB0\u5DF2\u8BFB",
+  markUnreadText = "\u6807\u8BB0\u672A\u8BFB",
+  manageReadState = false,
+  onGroupChange,
+  onReadFilterChange,
+  onMarkAllRead,
+  onItemClick,
+  onItemReadChange,
+  className,
+  ...props
+}) => {
+  const resolvedGroups = useMemo(
+    () => buildNotificationGroups(items, groups, groupBy, groupOrder),
+    [items, groups, groupBy, groupOrder]
+  );
+  const firstGroupKey = useMemo(() => {
+    return resolvedGroups.length > 0 ? getGroupKey(resolvedGroups[0], 0) : void 0;
+  }, [resolvedGroups]);
+  const [internalGroupKey, setInternalGroupKey] = useState(
+    defaultActiveGroupKey
+  );
+  const [internalReadFilter, setInternalReadFilter] = useState(defaultReadFilter);
+  const currentGroupKey = activeGroupKey ?? internalGroupKey ?? firstGroupKey;
+  const currentReadFilter = readFilter ?? internalReadFilter;
+  useEffect(() => {
+    if (activeGroupKey !== void 0) return;
+    if (resolvedGroups.length === 0) {
+      setInternalGroupKey(void 0);
+      return;
+    }
+    const keys = resolvedGroups.map((group, index) => getGroupKey(group, index));
+    if (!keys.some((key) => key === currentGroupKey)) {
+      setInternalGroupKey(keys[0]);
+    }
+  }, [activeGroupKey, currentGroupKey, resolvedGroups]);
+  const currentGroup = useMemo(() => {
+    if (resolvedGroups.length === 0) return void 0;
+    if (currentGroupKey === void 0) return resolvedGroups[0];
+    const index = resolvedGroups.findIndex(
+      (group, groupIndex) => getGroupKey(group, groupIndex) === currentGroupKey
+    );
+    return index >= 0 ? resolvedGroups[index] : resolvedGroups[0];
+  }, [currentGroupKey, resolvedGroups]);
+  currentGroup?.items ?? [];
+  const [readStateOverrides, setReadStateOverrides] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  useEffect(() => {
+    if (manageReadState) setReadStateOverrides(/* @__PURE__ */ new Map());
+  }, [items, manageReadState]);
+  const applyReadOverrides = (list) => {
+    if (!manageReadState || readStateOverrides.size === 0) return list;
+    return list.map((item) => {
+      const override = readStateOverrides.get(item.id);
+      return override !== void 0 ? { ...item, read: override } : item;
+    });
+  };
+  const effectiveGroups = useMemo(
+    () => resolvedGroups.map((group) => ({
+      ...group,
+      items: applyReadOverrides(group.items)
+    })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [resolvedGroups, readStateOverrides]
+  );
+  const effectiveCurrentGroup = useMemo(() => {
+    if (effectiveGroups.length === 0) return void 0;
+    if (currentGroupKey === void 0) return effectiveGroups[0];
+    const index = effectiveGroups.findIndex(
+      (group, groupIndex) => getGroupKey(group, groupIndex) === currentGroupKey
+    );
+    return index >= 0 ? effectiveGroups[index] : effectiveGroups[0];
+  }, [currentGroupKey, effectiveGroups]);
+  const effectiveCurrentGroupItems = effectiveCurrentGroup?.items ?? [];
+  const effectiveItems = useMemo(() => applyReadOverrides(items), [items, readStateOverrides]);
+  const hasUnread = effectiveCurrentGroupItems.some((item) => !item.read);
+  const totalUnread = useMemo(() => {
+    const allItems = effectiveGroups.flatMap((group) => group.items);
+    if (allItems.length === 0) return effectiveItems.filter((item) => !item.read).length;
+    return allItems.filter((item) => !item.read).length;
+  }, [effectiveGroups, effectiveItems]);
+  const wrapperClasses = useMemo(
+    () => classNames("tiger-notification-center", "w-full", "flex", "flex-col", className),
+    [className]
+  );
+  const handleGroupChange = (key) => {
+    if (activeGroupKey === void 0) {
+      setInternalGroupKey(key);
+    }
+    onGroupChange?.(key);
+  };
+  const handleReadFilterChange = (next) => {
+    if (readFilter === void 0) {
+      setInternalReadFilter(next);
+    }
+    onReadFilterChange?.(next);
+  };
+  const handleMarkAllRead = () => {
+    if (manageReadState) {
+      setReadStateOverrides((prev) => {
+        const next = new Map(prev);
+        effectiveCurrentGroupItems.forEach((item) => next.set(item.id, true));
+        return next;
+      });
+    }
+    onMarkAllRead?.(currentGroupKey, effectiveCurrentGroupItems);
+  };
+  const renderItem = (item, index) => {
+    const isRead = Boolean(item.read);
+    const timeText = item.time ? formatActivityTime(item.time) : "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(
+          "flex items-start gap-3 w-full py-0.5 transition-colors",
+          !isRead && "border-l-2 border-l-[var(--tiger-primary,#2563eb)] -ml-[2px] pl-[calc(0.75rem-2px)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+              /* @__PURE__ */ jsx(Text, { tag: "span", size: "sm", weight: isRead ? "normal" : "semibold", children: item.title }),
+              timeText ? /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--tiger-text-muted,#6b7280)] whitespace-nowrap flex-shrink-0", children: timeText }) : null
+            ] }),
+            item.description ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--tiger-text-muted,#6b7280)] line-clamp-2 leading-relaxed", children: item.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              onClick: (event) => {
+                event.stopPropagation();
+                if (manageReadState) {
+                  setReadStateOverrides((prev) => {
+                    const next = new Map(prev);
+                    next.set(item.id, !isRead);
+                    return next;
+                  });
+                }
+                onItemReadChange?.(item, !isRead);
+              },
+              children: isRead ? markUnreadText : markReadText
+            }
+          )
+        ]
+      }
+    );
+  };
+  const renderList = (listItems) => /* @__PURE__ */ jsx(
+    List,
+    {
+      dataSource: listItems,
+      split: true,
+      bordered: "divided",
+      hoverable: true,
+      emptyText,
+      onItemClick: (item, index) => onItemClick?.(item, index),
+      renderItem
+    }
+  );
+  const filterButtons = [
+    { key: "all", label: allLabel },
+    { key: "unread", label: unreadLabel },
+    { key: "read", label: readLabel }
+  ];
+  const content = loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12", children: /* @__PURE__ */ jsx(Loading, { text: loadingText }) }) : resolvedGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4", children: /* @__PURE__ */ jsx(Tabs, { type: "line", size: "small", activeKey: currentGroupKey, onChange: handleGroupChange, children: resolvedGroups.map((group, index) => {
+    const effectiveGroup = effectiveGroups.find(
+      (eg, ei) => getGroupKey(eg, ei) === getGroupKey(group, index)
+    );
+    const groupItems = effectiveGroup?.items ?? group.items;
+    const unreadCount = groupItems.filter((item) => !item.read).length;
+    const labelBase = group.title || String(group.key ?? index);
+    const label = unreadCount > 0 ? `${labelBase} (${unreadCount})` : labelBase;
+    return /* @__PURE__ */ jsx(
+      TabPane,
+      {
+        tabKey: getGroupKey(group, index),
+        label,
+        children: /* @__PURE__ */ jsx("div", { className: "max-h-[380px] overflow-y-auto", children: renderList(filterItems(groupItems, currentReadFilter)) })
+      },
+      String(getGroupKey(group, index))
+    );
+  }) }) }) : /* @__PURE__ */ jsx("div", { className: "-mx-4 -mb-4 max-h-[380px] overflow-y-auto", children: renderList(filterItems(effectiveItems, currentReadFilter)) });
+  return /* @__PURE__ */ jsx("div", { className: wrapperClasses, ...props, "data-tiger-notification-center": true, children: /* @__PURE__ */ jsx(
+    Card,
+    {
+      variant: "bordered",
+      className: "w-full",
+      header: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx(Text, { tag: "div", size: "base", weight: "bold", children: title }),
+            totalUnread > 0 ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold rounded-full bg-[var(--tiger-primary,#2563eb)] text-white", children: totalUnread }) : null
+          ] }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", disabled: !hasUnread, onClick: handleMarkAllRead, children: markAllReadText })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "inline-flex rounded-md border border-[var(--tiger-border,#e5e7eb)] overflow-hidden self-start", children: filterButtons.map((option) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: classNames(
+              "px-3 py-1 text-xs font-medium transition-colors",
+              "border-r border-[var(--tiger-border,#e5e7eb)] last:border-r-0",
+              currentReadFilter === option.key ? "bg-[var(--tiger-primary,#2563eb)] text-white" : "bg-[var(--tiger-surface,#ffffff)] text-[var(--tiger-text-muted,#6b7280)] hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+            ),
+            onClick: () => handleReadFilterChange(option.key),
+            children: option.label
+          },
+          option.key
+        )) })
+      ] }),
+      children: content
+    }
+  ) });
+};
+var NotificationCenter_default = NotificationCenter;
+
+export { NotificationCenter, NotificationCenter_default };

package/dist/{chunk-HRYBEBZC.js → chunk-GJKT2B56.js}

@@ -89,6 +89,7 @@ function Table({
   rowClassName,
   stickyHeader = false,
   maxHeight,
+  tableLayout = "auto",
   onChange,
   onRowClick,
   onSelectionChange,
@@ -657,7 +658,10 @@ function Table({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "table",
             {
-              className: tigercatCore.tableBaseClasses,
+              className: tigercatCore.classNames(
+                tigercatCore.tableBaseClasses,
+                tableLayout === "fixed" ? "table-fixed" : "table-auto"
+              ),
               ...props,
               style: fixedColumnsInfo.hasFixedColumns && fixedColumnsInfo.minTableWidth ? {
                 ...props.style,

package/dist/{chunk-VXHBQTZS.js → chunk-GY6D4XS3.js}

@@ -98,6 +98,18 @@ var Pagination = ({
     },
     [handleQuickJumperSubmit]
   );
+  const normalizedPageSizeOptions = react.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 = tigercatCore.getPaginationContainerClasses(align, className);
   const elements = [];
   if (showTotal) {
@@ -233,11 +245,7 @@ var Pagination = ({
           value: currentPageSize,
           onChange: (e) => handlePageSizeChange(parseInt(e.target.value, 10)),
           "aria-label": labels.itemsPerPageText,
-          children: pageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: sizeOption, children: [
-            sizeOption,
-            " ",
-            labels.itemsPerPageText
-          ] }, sizeOption))
+          children: normalizedPageSizeOptions.map((sizeOption) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: sizeOption.value, children: sizeOption.label }, sizeOption.value))
         },
         "size-changer"
       )

package/dist/chunk-GZPMLPRW.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var chunkQ2GPRAF4_js = require('./chunk-Q2GPRAF4.js');
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var CollapsePanel = ({
+  panelKey,
+  header,
+  disabled = false,
+  showArrow = true,
+  className,
+  style,
+  extra,
+  children
+}) => {
+  const collapseContext = chunkQ2GPRAF4_js.useCollapseContext();
+  if (!collapseContext) {
+    throw new Error("CollapsePanel must be used within a Collapse component");
+  }
+  const isActive = react.useMemo(() => {
+    return tigercatCore.isPanelActive(panelKey, collapseContext.activeKeys);
+  }, [panelKey, collapseContext.activeKeys]);
+  const panelClasses = react.useMemo(() => {
+    return tigercatCore.classNames(tigercatCore.getCollapsePanelClasses(collapseContext.ghost, className));
+  }, [collapseContext.ghost, className]);
+  const headerClasses = react.useMemo(() => {
+    return tigercatCore.getCollapsePanelHeaderClasses(isActive, disabled);
+  }, [isActive, disabled]);
+  const iconClasses = react.useMemo(() => {
+    return tigercatCore.getCollapseIconClasses(isActive, collapseContext.expandIconPosition);
+  }, [isActive, collapseContext.expandIconPosition]);
+  const handleClick = react.useCallback(() => {
+    if (!disabled) {
+      collapseContext.handlePanelClick(panelKey);
+    }
+  }, [disabled, collapseContext, panelKey]);
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      if (disabled) {
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        collapseContext.handlePanelClick(panelKey);
+      }
+    },
+    [disabled, collapseContext, panelKey]
+  );
+  const arrowIcon = /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: iconClasses,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M6 12L10 8L6 4",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelClasses, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: headerClasses,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-expanded": isActive,
+        "aria-disabled": disabled,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: [
+          showArrow && collapseContext.expandIconPosition === "start" && arrowIcon,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.collapseHeaderTextClasses, children: header }),
+          extra && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: extra }),
+          showArrow && collapseContext.expandIconPosition === "end" && arrowIcon
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: tigercatCore.collapsePanelContentWrapperClasses,
+        style: {
+          maxHeight: isActive ? "none" : "0",
+          opacity: isActive ? "1" : "0"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.collapsePanelContentBaseClasses, children })
+      }
+    )
+  ] });
+};
+var CollapsePanel_default = CollapsePanel;
+
+exports.CollapsePanel = CollapsePanel;
+exports.CollapsePanel_default = CollapsePanel_default;

package/dist/{chunk-7JQ7LURS.mjs → chunk-H36CWHUP.mjs}

@@ -1,6 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import { classNames, breadcrumbContainerClasses } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Breadcrumb.tsx
 var BreadcrumbContext = createContext(null);
@@ -11,15 +11,20 @@ var Breadcrumb = ({
   separator = "/",
   className,
   style,
+  extra,
   children,
   ...props
 }) => {
+  const hasExtra = Boolean(extra);
   const containerClasses = React.useMemo(
-    () => classNames(breadcrumbContainerClasses, className),
-    [className]
+    () => classNames(breadcrumbContainerClasses, hasExtra && "w-full", className),
+    [className, hasExtra]
   );
   const contextValue = React.useMemo(() => ({ separator }), [separator]);
-  return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap gap-2", children }) }) });
+  return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: [
+    /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap gap-2", children }),
+    hasExtra && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: extra })
+  ] }) });
 };
 
 export { Breadcrumb, useBreadcrumbContext };

package/dist/{chunk-5XKYWZZZ.mjs → chunk-HGTF6A46.mjs}

@@ -87,6 +87,7 @@ function Table({
   rowClassName,
   stickyHeader = false,
   maxHeight,
+  tableLayout = "auto",
   onChange,
   onRowClick,
   onSelectionChange,
@@ -655,7 +656,10 @@ function Table({
           /* @__PURE__ */ jsxs(
             "table",
             {
-              className: tableBaseClasses,
+              className: classNames(
+                tableBaseClasses,
+                tableLayout === "fixed" ? "table-fixed" : "table-auto"
+              ),
               ...props,
               style: fixedColumnsInfo.hasFixedColumns && fixedColumnsInfo.minTableWidth ? {
                 ...props.style,