@expcat/tigercat-react 0.4.0 → 0.4.3

package/dist/{chunk-PWZB45Z7.js → chunk-JQK354YN.js}

@@ -39,9 +39,9 @@ var SubMenu = ({
   const [isHovered, setIsHovered] = React.useState(false);
   const [isOpenByKeyboard, setIsOpenByKeyboard] = React.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 && tigercatCore.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] = React.useState(
     () => isInlineOrVertical ? isExpanded : false
@@ -56,11 +56,13 @@ var SubMenu = ({
   }, [menuContext, disabled, className]);
   const contentClasses = React.useMemo(() => {
     if (!menuContext) return "";
-    if (menuContext.mode === "horizontal") return tigercatCore.submenuContentHorizontalClasses;
+    if (menuContext.mode === "horizontal") {
+      return level === 0 ? tigercatCore.submenuContentHorizontalClasses : tigercatCore.submenuContentHorizontalNestedClasses;
+    }
     if (isPopup) return tigercatCore.submenuContentPopupClasses;
     if (menuContext.mode === "inline") return tigercatCore.submenuContentInlineClasses;
     return tigercatCore.submenuContentVerticalClasses;
-  }, [menuContext, isPopup]);
+  }, [menuContext, isPopup, level]);
   const handleTitleClick = React.useCallback(() => {
     if (!menuContext || disabled) return;
     if (menuContext.mode === "horizontal") return;
@@ -185,19 +187,19 @@ var SubMenu = ({
         return React__default.default.cloneElement(
           child,
           {
-            level: nextLevel,
-            collapsed: isPopup ? false : void 0
+            level: nextLevel
           }
         );
       }
       return child;
     });
-    if (menuContext.mode === "horizontal" || isPopup) {
+    const popupZIndex = isPopup ? tigercatCore.getSubmenuPopupZIndex(level) : {};
+    if (isPopup) {
       return /* @__PURE__ */ jsxRuntime.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
@@ -222,7 +224,7 @@ var SubMenu = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "li",
     {
-      className: menuContext.mode === "horizontal" || isPopup ? "relative" : "",
+      className: isPopup ? "relative" : "",
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       role: "none",

package/dist/{chunk-3577FW3I.mjs → chunk-KBTFBEPE.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 React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getExpandIconCellClasses, getTableHeaderClasses, getCheckboxCellClasses, classNames, getTableHeaderCellClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, getExpandedRowClasses, getExpandedRowContentClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getTableWrapperClasses, tableBaseClasses, tableLoadingOverlayClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getExpandIconClasses, expandChevronIcon16PathD, getLoadingOverlaySpinnerClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Table.tsx
@@ -22,6 +22,20 @@ var SortIcon = ({ direction }) => {
 var LockIcon = ({ locked }) => {
   return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: icon24ViewBox, fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: locked ? lockClosedIcon24PathD : lockOpenIcon24PathD }) });
 };
+var ExpandIcon = ({ expanded }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: icon16ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: expandChevronIcon16PathD })
+    }
+  );
+};
 var LoadingSpinner = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -59,6 +73,7 @@ function Table({
     showTotal: true
   },
   rowSelection,
+  expandable,
   rowKey = "id",
   rowClassName,
   stickyHeader = false,
@@ -70,6 +85,7 @@ function Table({
   onSortChange,
   onFilterChange,
   onPageChange,
+  onExpandChange,
   className,
   ...props
 }) {
@@ -79,6 +95,7 @@ function Table({
   const isCurrentPageControlled = paginationConfig?.current !== void 0;
   const isPageSizeControlled = paginationConfig?.pageSize !== void 0;
   const isSelectionControlled = rowSelection?.selectedRowKeys !== void 0 && Array.isArray(rowSelection.selectedRowKeys);
+  const isExpandControlled = expandable?.expandedRowKeys !== void 0 && Array.isArray(expandable.expandedRowKeys);
   const [uncontrolledSortState, setUncontrolledSortState] = useState(
     defaultSort ?? { key: null, direction: null }
   );
@@ -92,11 +109,13 @@ function Table({
     () => paginationConfig?.defaultPageSize ?? paginationConfig?.pageSize ?? 10
   );
   const [uncontrolledSelectedRowKeys, setUncontrolledSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? rowSelection?.selectedRowKeys ?? []);
+  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = useState(expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []);
   const sortState = isSortControlled ? sort : uncontrolledSortState;
   const filterState = isFiltersControlled ? filters : uncontrolledFilterState;
   const currentPage = isCurrentPageControlled ? paginationConfig.current : uncontrolledCurrentPage;
   const currentPageSize = isPageSizeControlled ? paginationConfig.pageSize : uncontrolledCurrentPageSize;
   const selectedRowKeys = isSelectionControlled ? rowSelection.selectedRowKeys : uncontrolledSelectedRowKeys;
+  const expandedRowKeys = isExpandControlled ? expandable.expandedRowKeys : uncontrolledExpandedRowKeys;
   useEffect(() => {
     if (isSortControlled && sort) {
       setUncontrolledSortState(sort);
@@ -122,6 +141,11 @@ function Table({
       setUncontrolledSelectedRowKeys(rowSelection?.selectedRowKeys ?? []);
     }
   }, [isSelectionControlled, rowSelection?.selectedRowKeys]);
+  useEffect(() => {
+    if (isExpandControlled) {
+      setUncontrolledExpandedRowKeys(expandable?.expandedRowKeys ?? []);
+    }
+  }, [isExpandControlled, expandable?.expandedRowKeys]);
   const [fixedOverrides, setFixedOverrides] = useState({});
   const displayColumns = useMemo(() => {
     return columns.map((column) => {
@@ -132,6 +156,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) {
@@ -179,6 +209,10 @@ function Table({
     () => new Set(selectedRowKeys),
     [selectedRowKeys]
   );
+  const expandedRowKeySet = useMemo(
+    () => new Set(expandedRowKeys),
+    [expandedRowKeys]
+  );
   const paginationInfo = useMemo(() => {
     if (pagination === false) {
       return null;
@@ -290,11 +324,29 @@ function Table({
     },
     [sortState, filterState, onPageChange, onChange]
   );
+  const handleToggleExpand = useCallback(
+    (key, record) => {
+      const isExpanded = expandedRowKeySet.has(key);
+      const newKeys = isExpanded ? expandedRowKeys.filter((k) => k !== key) : [...expandedRowKeys, key];
+      if (!isExpandControlled) {
+        setUncontrolledExpandedRowKeys(newKeys);
+      }
+      onExpandChange?.(newKeys, record, !isExpanded);
+    },
+    [expandedRowKeySet, expandedRowKeys, isExpandControlled, onExpandChange]
+  );
   const handleRowClick = useCallback(
     (record, index) => {
       onRowClick?.(record, index);
+      if (expandable?.expandRowByClick) {
+        const key = getRowKey(record, rowKey, index);
+        const isExpandableRow = expandable?.rowExpandable ? expandable.rowExpandable(record) : true;
+        if (isExpandableRow) {
+          handleToggleExpand(key, record);
+        }
+      }
     },
-    [onRowClick]
+    [onRowClick, expandable, rowKey, handleToggleExpand]
   );
   const handleSelectRow = useCallback(
     (key, checked) => {
@@ -342,7 +394,10 @@ function Table({
     return selectedRowKeys.length > 0 && !allSelected;
   }, [selectedRowKeys.length, allSelected]);
   const renderTableHeader = useCallback(() => {
+    const expandHeaderTh = expandable ? /* @__PURE__ */ jsx("th", { className: getExpandIconCellClasses(size), "aria-label": "Expand" }) : null;
+    const expandAtStart = expandable?.expandIconPosition !== "end";
     return /* @__PURE__ */ jsx("thead", { className: getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxs("tr", { children: [
+      expandAtStart && expandHeaderTh,
       rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsx("th", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
         "input",
         {
@@ -435,7 +490,8 @@ function Table({
           },
           column.key
         );
-      })
+      }),
+      !expandAtStart && expandHeaderTh
     ] }) });
   }, [
     displayColumns,
@@ -443,6 +499,7 @@ function Table({
     stickyHeader,
     sortState,
     rowSelection,
+    expandable,
     allSelected,
     someSelected,
     handleSort,
@@ -457,20 +514,30 @@ function Table({
       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 }) }) }) });
     }
     return /* @__PURE__ */ jsx("tbody", { children: paginatedData.map((record, index) => {
       const key = pageRowKeys[index];
       const isSelected = selectedRowKeySet.has(key);
+      const isExpanded = expandedRowKeySet.has(key);
+      const isRowExpandable = expandable ? expandable.rowExpandable ? expandable.rowExpandable(record) : true : false;
       const rowClass = typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName;
-      return /* @__PURE__ */ jsxs(
+      const expandToggleCell = expandable ? /* @__PURE__ */ jsx("td", { className: getExpandIconCellClasses(size), children: isRowExpandable && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex items-center justify-center",
+          "aria-label": isExpanded ? "Collapse row" : "Expand row",
+          "aria-expanded": isExpanded,
+          onClick: (e) => {
+            e.stopPropagation();
+            handleToggleExpand(key, record);
+          },
+          children: /* @__PURE__ */ jsx(ExpandIcon, { expanded: isExpanded })
+        }
+      ) }) : null;
+      const expandAtStart = expandable?.expandIconPosition !== "end";
+      const rowNode = /* @__PURE__ */ jsxs(
         "tr",
         {
           className: classNames(
@@ -479,6 +546,7 @@ function Table({
           ),
           onClick: () => handleRowClick(record, index),
           children: [
+            expandAtStart && expandToggleCell,
             rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx("td", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx(
               "input",
               {
@@ -525,26 +593,39 @@ function Table({
                 },
                 column.key
               );
-            })
+            }),
+            !expandAtStart && expandToggleCell
           ]
         },
         key
       );
+      if (expandable && isExpanded && isRowExpandable) {
+        const expandedContent = expandable.expandedRowRender ? expandable.expandedRowRender(record, index) : null;
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          rowNode,
+          /* @__PURE__ */ jsx("tr", { className: getExpandedRowClasses(), children: /* @__PURE__ */ jsx("td", { colSpan: totalColumnCount, className: getExpandedRowContentClasses(size), children: expandedContent }) }, `${key}-expanded`)
+        ] }, key);
+      }
+      return rowNode;
     }) });
   }, [
     loading,
     paginatedData,
     displayColumns,
     rowSelection,
+    expandable,
     emptyText,
     pageRowKeys,
     selectedRowKeySet,
+    expandedRowKeySet,
+    totalColumnCount,
     rowClassName,
     hoverable,
     striped,
     size,
     handleRowClick,
     handleSelectRow,
+    handleToggleExpand,
     fixedColumnsInfo
   ]);
   const renderPagination = useCallback(() => {

package/dist/{chunk-ZGQOYCQT.mjs → chunk-LLHUBM6E.mjs}

@@ -1,4 +1,4 @@
-import { Table } from './chunk-3577FW3I.mjs';
+import { Table } from './chunk-KBTFBEPE.mjs';
 import { Select } from './chunk-MDZDPGRK.mjs';
 import { Pagination } from './chunk-NZLOLMT2.mjs';
 import { Input } from './chunk-RPTLVIBF.mjs';

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

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

package/dist/chunk-PEGJ2KHC.js

@@ -0,0 +1,273 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('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 = react.useRef(null);
+  const [focused, setFocused] = react.useState(false);
+  const [internalValue, setInternalValue] = react.useState(
+    defaultValue ?? controlledValue ?? null
+  );
+  const [displayValue, setDisplayValue] = react.useState("");
+  const currentValue = isControlled ? controlledValue ?? null : internalValue;
+  const toDisplayValue = react.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 = react.useCallback(
+    (str) => {
+      if (str === "" || str === "-") return null;
+      if (parser) return parser(str);
+      const num = Number(str);
+      return Number.isNaN(num) ? null : num;
+    },
+    [parser]
+  );
+  react.useEffect(() => {
+    if (!focused) {
+      setDisplayValue(toDisplayValue(currentValue));
+    }
+  }, [currentValue, focused, toDisplayValue]);
+  react.useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
+  const commitValue = react.useCallback(
+    (val) => {
+      let finalVal = val;
+      if (finalVal !== null) {
+        finalVal = tigercatCore.clampValue(finalVal, min, max);
+        if (precision !== void 0) {
+          finalVal = tigercatCore.formatPrecision(finalVal, precision);
+        }
+      }
+      if (!isControlled) {
+        setInternalValue(finalVal);
+      }
+      onChange?.(finalVal);
+      setDisplayValue(toDisplayValue(finalVal));
+    },
+    [min, max, precision, isControlled, onChange, toDisplayValue]
+  );
+  const handleStep = react.useCallback(
+    (direction) => {
+      if (disabled || readonly) return;
+      const next = tigercatCore.stepValue(currentValue, step, direction, min, max, precision);
+      commitValue(next);
+    },
+    [currentValue, step, min, max, precision, disabled, readonly, commitValue]
+  );
+  const handleInput = react.useCallback((e) => {
+    setDisplayValue(e.target.value);
+  }, []);
+  const handleBlur = react.useCallback(
+    (e) => {
+      setFocused(false);
+      const parsed = parseValue(displayValue);
+      commitValue(parsed);
+      onBlur?.(e);
+    },
+    [displayValue, parseValue, commitValue, onBlur]
+  );
+  const handleFocus = react.useCallback(
+    (e) => {
+      setFocused(true);
+      if (formatter && currentValue !== null) {
+        setDisplayValue(String(currentValue));
+      }
+      onFocus?.(e);
+    },
+    [formatter, currentValue, onFocus]
+  );
+  const handleKeyDown = react.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 = tigercatCore.isAtMin(currentValue, min);
+  const atMax = tigercatCore.isAtMax(currentValue, max);
+  const wrapperClasses = react.useMemo(
+    () => tigercatCore.classNames(
+      tigercatCore.getInputNumberWrapperClasses(disabled),
+      tigercatCore.getInputNumberStatusClasses(status),
+      tigercatCore.getInputNumberSizeClasses(size),
+      focused && `ring-2 ${tigercatCore.getInputNumberFocusRingColor(status)}`,
+      className
+    ),
+    [disabled, status, size, focused, className]
+  );
+  const inputClasses = react.useMemo(
+    () => tigercatCore.getInputNumberInputClasses(
+      size,
+      controls && controlsPosition === "right",
+      controls && controlsPosition === "both"
+    ),
+    [size, controls, controlsPosition]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, children: [
+    controls && controlsPosition === "both" && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": "Decrease",
+        className: tigercatCore.getInputNumberSideButtonClasses("left", disabled || atMin),
+        disabled: disabled || atMin,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => handleStep("down"),
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: tigercatCore.inputNumberMinusIconPathD })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": "Increase",
+        className: tigercatCore.getInputNumberSideButtonClasses("right", disabled || atMax),
+        disabled: disabled || atMax,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => handleStep("up"),
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: tigercatCore.inputNumberPlusIconPathD })
+          }
+        )
+      }
+    ),
+    controls && controlsPosition === "right" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.inputNumberControlsRightClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": "Increase",
+          className: tigercatCore.getInputNumberStepButtonClasses("up", disabled || atMax),
+          disabled: disabled || atMax,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => handleStep("up"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: "w-3 h-3",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.inputNumberUpIconPathD })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          "aria-label": "Decrease",
+          className: tigercatCore.getInputNumberStepButtonClasses("down", disabled || atMin),
+          disabled: disabled || atMin,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => handleStep("down"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              className: "w-3 h-3",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: tigercatCore.inputNumberDownIconPathD })
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+
+exports.InputNumber = InputNumber;