@expcat/tigercat-react 0.4.0 → 0.4.2

package/dist/{chunk-3577FW3I.mjs → chunk-PJ7NS7NX.mjs}

@@ -1,5 +1,5 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableHeaderClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
+import { useState, useEffect, useMemo, useCallback, Fragment } from 'react';
+import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableHeaderClasses, getExpandCellClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, expandedRowContentClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, icon16ViewBox, expandIconButtonClasses, getExpandIconRotationClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Table.tsx
@@ -64,12 +64,14 @@ function Table({
   stickyHeader = false,
   maxHeight,
   tableLayout = "auto",
+  expandable,
   onChange,
   onRowClick,
   onSelectionChange,
   onSortChange,
   onFilterChange,
   onPageChange,
+  onExpandedRowsChange,
   className,
   ...props
 }) {
@@ -122,6 +124,24 @@ function Table({
       setUncontrolledSelectedRowKeys(rowSelection?.selectedRowKeys ?? []);
     }
   }, [isSelectionControlled, rowSelection?.selectedRowKeys]);
+  const isExpandControlled = expandable?.expandedRowKeys !== void 0;
+  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = useState(expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []);
+  const expandedRowKeys = isExpandControlled ? expandable.expandedRowKeys : uncontrolledExpandedRowKeys;
+  const expandedRowKeySet = useMemo(
+    () => new Set(expandedRowKeys),
+    [expandedRowKeys]
+  );
+  const handleToggleExpand = useCallback(
+    (key) => {
+      const isExp = expandedRowKeySet.has(key);
+      const next = isExp ? expandedRowKeys.filter((k) => k !== key) : [...expandedRowKeys, key];
+      if (!isExpandControlled) {
+        setUncontrolledExpandedRowKeys(next);
+      }
+      onExpandedRowsChange?.(next);
+    },
+    [expandedRowKeys, expandedRowKeySet, isExpandControlled, onExpandedRowsChange]
+  );
   const [fixedOverrides, setFixedOverrides] = useState({});
   const displayColumns = useMemo(() => {
     return columns.map((column) => {
@@ -132,6 +152,12 @@ function Table({
       };
     });
   }, [columns, fixedOverrides]);
+  const totalColumnCount = useMemo(() => {
+    let count = displayColumns.length;
+    if (rowSelection && rowSelection.showCheckbox !== false) count++;
+    if (expandable) count++;
+    return count;
+  }, [displayColumns.length, rowSelection, expandable]);
   const columnByKey = useMemo(() => {
     const map = {};
     for (const column of displayColumns) {
@@ -343,6 +369,7 @@ function Table({
   }, [selectedRowKeys.length, allSelected]);
   const renderTableHeader = useCallback(() => {
     return /* @__PURE__ */ jsx("thead", { className: getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxs("tr", { children: [
+      expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsx("th", { className: getExpandCellClasses(size) }),
       rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsx("th", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
         "input",
         {
@@ -435,7 +462,8 @@ function Table({
           },
           column.key
         );
-      })
+      }),
+      expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsx("th", { className: getExpandCellClasses(size) })
     ] }) });
   }, [
     displayColumns,
@@ -450,86 +478,121 @@ function Table({
     handleSelectAll,
     columnLockable,
     toggleColumnLock,
-    fixedColumnsInfo
+    fixedColumnsInfo,
+    expandable
   ]);
   const renderTableBody = useCallback(() => {
     if (loading) {
       return null;
     }
     if (paginatedData.length === 0) {
-      return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-        "td",
-        {
-          colSpan: displayColumns.length + (rowSelection ? 1 : 0),
-          className: tableEmptyStateClasses,
-          children: /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: emptyText })
-        }
-      ) }) });
+      return /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: totalColumnCount, className: tableEmptyStateClasses, children: /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", children: emptyText }) }) }) });
     }
+    const ExpandToggle = ({ rowKey: rk, expandableRow, expanded }) => expandableRow ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: classNames(expandIconButtonClasses, getExpandIconRotationClasses(expanded)),
+        "aria-label": expanded ? "Collapse row" : "Expand row",
+        onClick: (e) => {
+          e.stopPropagation();
+          handleToggleExpand(rk);
+        },
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: icon16ViewBox,
+            fill: "currentColor",
+            className: "w-4 h-4",
+            children: /* @__PURE__ */ jsx("path", { d: "M6 3l6 5-6 5V3z" })
+          }
+        )
+      }
+    ) : null;
     return /* @__PURE__ */ jsx("tbody", { children: paginatedData.map((record, index) => {
       const key = pageRowKeys[index];
       const isSelected = selectedRowKeySet.has(key);
+      const isExpanded = expandedRowKeySet.has(key);
+      const isExpandableRow = expandable ? expandable.rowExpandable?.(record) ?? true : false;
       const rowClass = typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName;
-      return /* @__PURE__ */ jsxs(
-        "tr",
-        {
-          className: classNames(
-            getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
-            fixedColumnsInfo.hasFixedColumns && "group"
-          ),
-          onClick: () => handleRowClick(record, index),
-          children: [
-            rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: rowSelection?.type === "radio" ? "radio" : "checkbox",
-                className: rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
-                checked: isSelected,
-                disabled: rowSelection?.getCheckboxProps?.(record)?.disabled,
-                onChange: (e) => handleSelectRow(key, e.target.checked),
-                onClick: (e) => e.stopPropagation()
-              }
-            ) }),
-            displayColumns.map((column) => {
-              const dataKey = column.dataKey || column.key;
-              const cellValue = record[dataKey];
-              const isFixedLeft = column.fixed === "left";
-              const isFixedRight = column.fixed === "right";
-              const fixedStyle = isFixedLeft ? {
-                position: "sticky",
-                left: `${fixedColumnsInfo.leftOffsets[column.key] || 0}px`,
-                zIndex: 10
-              } : isFixedRight ? {
-                position: "sticky",
-                right: `${fixedColumnsInfo.rightOffsets[column.key] || 0}px`,
-                zIndex: 10
-              } : void 0;
-              const widthStyle = column.width ? {
-                width: typeof column.width === "number" ? `${column.width}px` : column.width
-              } : void 0;
-              const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
-              const stickyBgClass = striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
-              const stickyCellClass = isFixedLeft || isFixedRight ? classNames(
-                stickyBgClass,
-                hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
-              ) : void 0;
-              return /* @__PURE__ */ jsx(
-                "td",
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: classNames(
+              getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
+              fixedColumnsInfo.hasFixedColumns && "group"
+            ),
+            onClick: () => handleRowClick(record, index),
+            children: [
+              expandable && expandable.expandIconPosition !== "end" && /* @__PURE__ */ jsx("td", { className: getExpandCellClasses(size), children: /* @__PURE__ */ jsx(
+                ExpandToggle,
                 {
-                  className: classNames(
-                    getTableCellClasses(size, column.align || "left", column.className),
-                    stickyCellClass
-                  ),
-                  style,
-                  children: column.render ? column.render(record, index) : cellValue
-                },
-                column.key
-              );
-            })
-          ]
-        },
-        key
-      );
+                  rowKey: key,
+                  expandableRow: isExpandableRow,
+                  expanded: isExpanded
+                }
+              ) }),
+              rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: rowSelection?.type === "radio" ? "radio" : "checkbox",
+                  className: rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
+                  checked: isSelected,
+                  disabled: rowSelection?.getCheckboxProps?.(record)?.disabled,
+                  onChange: (e) => handleSelectRow(key, e.target.checked),
+                  onClick: (e) => e.stopPropagation()
+                }
+              ) }),
+              displayColumns.map((column) => {
+                const dataKey = column.dataKey || column.key;
+                const cellValue = record[dataKey];
+                const isFixedLeft = column.fixed === "left";
+                const isFixedRight = column.fixed === "right";
+                const fixedStyle = isFixedLeft ? {
+                  position: "sticky",
+                  left: `${fixedColumnsInfo.leftOffsets[column.key] || 0}px`,
+                  zIndex: 10
+                } : isFixedRight ? {
+                  position: "sticky",
+                  right: `${fixedColumnsInfo.rightOffsets[column.key] || 0}px`,
+                  zIndex: 10
+                } : void 0;
+                const widthStyle = column.width ? {
+                  width: typeof column.width === "number" ? `${column.width}px` : column.width
+                } : void 0;
+                const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
+                const stickyBgClass = striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
+                const stickyCellClass = isFixedLeft || isFixedRight ? classNames(
+                  stickyBgClass,
+                  hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+                ) : void 0;
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: classNames(
+                      getTableCellClasses(size, column.align || "left", column.className),
+                      stickyCellClass
+                    ),
+                    style,
+                    children: column.render ? column.render(record, index) : cellValue
+                  },
+                  column.key
+                );
+              }),
+              expandable && expandable.expandIconPosition === "end" && /* @__PURE__ */ jsx("td", { className: getExpandCellClasses(size), children: /* @__PURE__ */ jsx(
+                ExpandToggle,
+                {
+                  rowKey: key,
+                  expandableRow: isExpandableRow,
+                  expanded: isExpanded
+                }
+              ) })
+            ]
+          }
+        ),
+        expandable && isExpanded && isExpandableRow && /* @__PURE__ */ jsx("tr", { className: expandedRowContentClasses, children: /* @__PURE__ */ jsx("td", { colSpan: totalColumnCount, children: expandable.expandedRowRender(record, index) }) })
+      ] }, key);
     }) });
   }, [
     loading,
@@ -545,7 +608,11 @@ function Table({
     size,
     handleRowClick,
     handleSelectRow,
-    fixedColumnsInfo
+    fixedColumnsInfo,
+    expandable,
+    expandedRowKeySet,
+    handleToggleExpand,
+    totalColumnCount
   ]);
   const renderPagination = useCallback(() => {
     if (pagination === false || !paginationInfo) {

package/dist/{chunk-IRH2ZVD3.js → chunk-Q7GUWWG5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkZTVATZB6_js = require('./chunk-ZTVATZB6.js');
+var chunk6OVVMHZJ_js = require('./chunk-6OVVMHZJ.js');
 var chunkTDRINUMH_js = require('./chunk-TDRINUMH.js');
 var chunk3GW3UAKB_js = require('./chunk-3GW3UAKB.js');
 var chunkOYCMGKQ7_js = require('./chunk-OYCMGKQ7.js');
@@ -187,7 +187,7 @@ var DataTableWithToolbar = ({
   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(chunkZTVATZB6_js.Table, { ...tableProps, pagination: false, className: tableClassName }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunk6OVVMHZJ_js.Table, { ...tableProps, pagination: false, className: tableClassName }),
     showPagination ? /* @__PURE__ */ jsxRuntime.jsx(chunk3GW3UAKB_js.Pagination, { ...pagination, onChange: onPageChange, onPageSizeChange }) : null
   ] });
 };

package/dist/chunk-RCNTRSUA.mjs

@@ -0,0 +1,271 @@
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { clampValue, formatPrecision, stepValue, isAtMin, isAtMax, classNames, getInputNumberWrapperClasses, getInputNumberStatusClasses, getInputNumberSizeClasses, getInputNumberFocusRingColor, getInputNumberInputClasses, getInputNumberSideButtonClasses, inputNumberMinusIconPathD, inputNumberPlusIconPathD, inputNumberControlsRightClasses, getInputNumberStepButtonClasses, inputNumberUpIconPathD, inputNumberDownIconPathD } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/InputNumber.tsx
+var InputNumber = ({
+  value: controlledValue,
+  defaultValue,
+  size = "md",
+  status = "default",
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  precision,
+  disabled = false,
+  readonly = false,
+  placeholder,
+  name,
+  id,
+  keyboard = true,
+  controls = true,
+  controlsPosition = "right",
+  formatter,
+  parser,
+  autoFocus = false,
+  onChange,
+  onFocus,
+  onBlur,
+  className
+}) => {
+  const isControlled = controlledValue !== void 0;
+  const inputRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const [internalValue, setInternalValue] = useState(
+    defaultValue ?? controlledValue ?? null
+  );
+  const [displayValue, setDisplayValue] = useState("");
+  const currentValue = isControlled ? controlledValue ?? null : internalValue;
+  const toDisplayValue = useCallback(
+    (val) => {
+      if (val === null || val === void 0) return "";
+      if (formatter) return formatter(val);
+      if (precision !== void 0) return val.toFixed(precision);
+      return String(val);
+    },
+    [formatter, precision]
+  );
+  const parseValue = useCallback(
+    (str) => {
+      if (str === "" || str === "-") return null;
+      if (parser) return parser(str);
+      const num = Number(str);
+      return Number.isNaN(num) ? null : num;
+    },
+    [parser]
+  );
+  useEffect(() => {
+    if (!focused) {
+      setDisplayValue(toDisplayValue(currentValue));
+    }
+  }, [currentValue, focused, toDisplayValue]);
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
+  const commitValue = useCallback(
+    (val) => {
+      let finalVal = val;
+      if (finalVal !== null) {
+        finalVal = clampValue(finalVal, min, max);
+        if (precision !== void 0) {
+          finalVal = formatPrecision(finalVal, precision);
+        }
+      }
+      if (!isControlled) {
+        setInternalValue(finalVal);
+      }
+      onChange?.(finalVal);
+      setDisplayValue(toDisplayValue(finalVal));
+    },
+    [min, max, precision, isControlled, onChange, toDisplayValue]
+  );
+  const handleStep = useCallback(
+    (direction) => {
+      if (disabled || readonly) return;
+      const next = stepValue(currentValue, step, direction, min, max, precision);
+      commitValue(next);
+    },
+    [currentValue, step, min, max, precision, disabled, readonly, commitValue]
+  );
+  const handleInput = useCallback((e) => {
+    setDisplayValue(e.target.value);
+  }, []);
+  const handleBlur = useCallback(
+    (e) => {
+      setFocused(false);
+      const parsed = parseValue(displayValue);
+      commitValue(parsed);
+      onBlur?.(e);
+    },
+    [displayValue, parseValue, commitValue, onBlur]
+  );
+  const handleFocus = useCallback(
+    (e) => {
+      setFocused(true);
+      if (formatter && currentValue !== null) {
+        setDisplayValue(String(currentValue));
+      }
+      onFocus?.(e);
+    },
+    [formatter, currentValue, onFocus]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!keyboard || disabled || readonly) return;
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        handleStep("up");
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        handleStep("down");
+      } else if (e.key === "Enter") {
+        const parsed = parseValue(displayValue);
+        commitValue(parsed);
+      }
+    },
+    [keyboard, disabled, readonly, handleStep, parseValue, displayValue, commitValue]
+  );
+  const atMin = isAtMin(currentValue, min);
+  const atMax = isAtMax(currentValue, max);
+  const wrapperClasses = useMemo(
+    () => classNames(
+      getInputNumberWrapperClasses(disabled),
+      getInputNumberStatusClasses(status),
+      getInputNumberSizeClasses(size),
+      focused && `ring-2 ${getInputNumberFocusRingColor(status)}`,
+      className
+    ),
+    [disabled, status, size, focused, className]
+  );
+  const inputClasses = useMemo(
+    () => getInputNumberInputClasses(
+      size,
+      controls && controlsPosition === "right",
+      controls && controlsPosition === "both"
+    ),
+    [size, controls, controlsPosition]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
+    controls && controlsPosition === "both" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": "Decrease",
+        className: getInputNumberSideButtonClasses("left", disabled || atMin),
+        disabled: disabled || atMin,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => handleStep("down"),
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            className: "w-4 h-4",
+            children: /* @__PURE__ */ jsx("path", { d: inputNumberMinusIconPathD })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        inputMode: "decimal",
+        role: "spinbutton",
+        "aria-valuemin": min === -Infinity ? void 0 : min,
+        "aria-valuemax": max === Infinity ? void 0 : max,
+        "aria-valuenow": currentValue ?? void 0,
+        className: inputClasses,
+        value: displayValue,
+        placeholder,
+        disabled,
+        readOnly: readonly,
+        name,
+        id,
+        onChange: handleInput,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown
+      }
+    ),
+    controls && controlsPosition === "both" && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": "Increase",
+        className: getInputNumberSideButtonClasses("right", disabled || atMax),
+        disabled: disabled || atMax,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => handleStep("up"),
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            className: "w-4 h-4",
+            children: /* @__PURE__ */ jsx("path", { d: inputNumberPlusIconPathD })
+          }
+        )
+      }
+    ),
+    controls && controlsPosition === "right" && /* @__PURE__ */ jsxs("div", { className: inputNumberControlsRightClasses, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": "Increase",
+          className: getInputNumberStepButtonClasses("up", disabled || atMax),
+          disabled: disabled || atMax,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => handleStep("up"),
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: "w-3 h-3",
+              children: /* @__PURE__ */ jsx("path", { d: inputNumberUpIconPathD })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": "Decrease",
+          className: getInputNumberStepButtonClasses("down", disabled || atMin),
+          disabled: disabled || atMin,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => handleStep("down"),
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: "w-3 h-3",
+              children: /* @__PURE__ */ jsx("path", { d: inputNumberDownIconPathD })
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+
+export { InputNumber };

package/dist/chunk-SHT4TU3T.mjs

@@ -0,0 +1,26 @@
+import { classNames, layoutSidebarClasses, layoutSidebarCollapsedClasses, getSidebarStyle } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Sidebar.tsx
+var Sidebar = ({
+  className,
+  width = "256px",
+  collapsedWidth = "64px",
+  collapsed = false,
+  style,
+  children,
+  ...props
+}) => {
+  const sidebarClasses = classNames(
+    layoutSidebarClasses,
+    collapsed && layoutSidebarCollapsedClasses,
+    className
+  );
+  const sidebarStyle = {
+    ...style,
+    ...getSidebarStyle(collapsed, width, collapsedWidth)
+  };
+  return /* @__PURE__ */ jsx("aside", { className: sidebarClasses, style: sidebarStyle, ...props, children });
+};
+
+export { Sidebar };

package/dist/{chunk-OUAZM7NY.mjs → chunk-SMC2RV3V.mjs}

@@ -2,7 +2,7 @@ import { MenuItemGroup } from './chunk-OFBK35TK.mjs';
 import { MenuItem } from './chunk-D5KYIQWB.mjs';
 import { useMenuContext } from './chunk-ZIUOENTL.mjs';
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { isKeyOpen, classNames, getSubMenuTitleClasses, submenuContentHorizontalClasses, submenuContentPopupClasses, submenuContentInlineClasses, submenuContentVerticalClasses, focusFirstChildItem, moveFocusInMenu, focusMenuEdge, getMenuItemIndent, menuItemIconClasses, getSubMenuExpandIconClasses } from '@expcat/tigercat-core';
+import { isKeyOpen, classNames, getSubMenuTitleClasses, submenuContentHorizontalClasses, submenuContentHorizontalNestedClasses, submenuContentPopupClasses, submenuContentInlineClasses, submenuContentVerticalClasses, focusFirstChildItem, moveFocusInMenu, focusMenuEdge, getMenuItemIndent, getSubmenuPopupZIndex, menuItemIconClasses, getSubMenuExpandIconClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var ExpandIcon = ({ expanded }) => /* @__PURE__ */ jsx(
@@ -33,9 +33,9 @@ var SubMenu = ({
   const [isHovered, setIsHovered] = useState(false);
   const [isOpenByKeyboard, setIsOpenByKeyboard] = useState(false);
   const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
-  const isPopup = !!menuContext && menuContext.mode === "vertical" && effectiveCollapsed;
+  const isPopup = !!menuContext && (menuContext.mode === "horizontal" || menuContext.mode === "vertical" && effectiveCollapsed);
   const isOpen = !!menuContext && isKeyOpen(itemKey, menuContext.openKeys);
-  const isExpanded = menuContext?.mode === "horizontal" || isPopup ? isHovered || isOpenByKeyboard : isOpen;
+  const isExpanded = isPopup ? isHovered || isOpenByKeyboard : isOpen;
   const isInlineOrVertical = menuContext?.mode !== "horizontal" && !isPopup;
   const [hasRenderedInline, setHasRenderedInline] = useState(
     () => isInlineOrVertical ? isExpanded : false
@@ -50,11 +50,13 @@ var SubMenu = ({
   }, [menuContext, disabled, className]);
   const contentClasses = useMemo(() => {
     if (!menuContext) return "";
-    if (menuContext.mode === "horizontal") return submenuContentHorizontalClasses;
+    if (menuContext.mode === "horizontal") {
+      return level === 0 ? submenuContentHorizontalClasses : submenuContentHorizontalNestedClasses;
+    }
     if (isPopup) return submenuContentPopupClasses;
     if (menuContext.mode === "inline") return submenuContentInlineClasses;
     return submenuContentVerticalClasses;
-  }, [menuContext, isPopup]);
+  }, [menuContext, isPopup, level]);
   const handleTitleClick = useCallback(() => {
     if (!menuContext || disabled) return;
     if (menuContext.mode === "horizontal") return;
@@ -179,19 +181,19 @@ var SubMenu = ({
         return React.cloneElement(
           child,
           {
-            level: nextLevel,
-            collapsed: isPopup ? false : void 0
+            level: nextLevel
           }
         );
       }
       return child;
     });
-    if (menuContext.mode === "horizontal" || isPopup) {
+    const popupZIndex = isPopup ? getSubmenuPopupZIndex(level) : {};
+    if (isPopup) {
       return /* @__PURE__ */ jsx(
         "ul",
         {
           className: contentClasses,
-          style: { display: isExpanded ? "block" : "none" },
+          style: { display: isExpanded ? "block" : "none", ...popupZIndex },
           role: "menu",
           "aria-hidden": isExpanded ? void 0 : "true",
           children: enhancedChildren
@@ -216,7 +218,7 @@ var SubMenu = ({
   return /* @__PURE__ */ jsxs(
     "li",
     {
-      className: menuContext.mode === "horizontal" || isPopup ? "relative" : "",
+      className: isPopup ? "relative" : "",
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       role: "none",