@expcat/tigercat-react 0.4.0 → 0.4.3

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",

package/dist/{chunk-OESNOOOT.js → chunk-YWTZALG5.js}

@@ -7,18 +7,22 @@ var jsxRuntime = require('react/jsx-runtime');
 var Sidebar = ({
   className,
   width = "256px",
+  collapsedWidth = "64px",
   collapsed = false,
   style,
   children,
   ...props
 }) => {
-  const sidebarClasses = tigercatCore.classNames(tigercatCore.layoutSidebarClasses, className);
+  const sidebarClasses = tigercatCore.classNames(
+    tigercatCore.layoutSidebarClasses,
+    collapsed && tigercatCore.layoutSidebarCollapsedClasses,
+    className
+  );
   const sidebarStyle = {
     ...style,
-    width: collapsed ? "0px" : width,
-    minWidth: collapsed ? "0px" : width
+    ...tigercatCore.getSidebarStyle(collapsed, width, collapsedWidth)
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: sidebarClasses, style: sidebarStyle, ...props, children: !collapsed && children });
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: sidebarClasses, style: sidebarStyle, ...props, children });
 };
 
 exports.Sidebar = Sidebar;