@noya-app/noya-designsystem 0.1.68 → 0.1.69

package/dist/index.mjs

@@ -5060,8 +5060,8 @@ function InputFieldRoot({
     },
     [onFocusChange]
   );
-  const startWidth = measuredStartSize?.width ?? startWidthProp;
-  const endWidth = measuredEndSize?.width ?? endWidthProp;
+  const startWidth = startWidthProp ?? measuredStartSize?.width;
+  const endWidth = endWidthProp ?? measuredEndSize?.width;
   const contextValue = useMemo8(
     () => ({
       startWidth,
@@ -9758,6 +9758,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   onClickChevron,
   chevronClassName,
   chevronAs,
+  chevronPosition = "start",
   children,
   ...rest
 }, forwardedRef) {
@@ -9771,7 +9772,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
     },
     [stableOnClickChevron]
   );
-  return /* @__PURE__ */ React59.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React59.createElement(React59.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React59.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && chevronPosition !== "end" && /* @__PURE__ */ React59.createElement(React59.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React59.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -9780,7 +9781,16 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React59.createElement(React59.Fragment, null, renderIcon(icon), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React59.createElement(React59.Fragment, null, renderIcon(icon), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 19 }), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 8 })) : /* @__PURE__ */ React59.createElement(React59.Fragment, null, /* @__PURE__ */ React59.createElement(
+    IconButton,
+    {
+      as: chevronAs,
+      className: chevronClassName,
+      iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
+      onClick: handleClickChevron,
+      selected: rest.selected
+    }
+  ), /* @__PURE__ */ React59.createElement(Spacer.Horizontal, { size: 8 }))));
 });
 var TreeView;
 ((TreeView2) => {
@@ -9843,7 +9853,10 @@ var List = memoGeneric(
       sortableId,
       sharedDragProps,
       virtualized,
-      renameSelectsBeforeDot
+      renameSelectsBeforeDot,
+      chevronPosition = "start",
+      getItemStyle,
+      getItemClassName
     } = props;
     const [internalHoveredId, setHoveredId] = useState25();
     const [internalRenamingId, setRenamingId] = useState25();
@@ -9973,6 +9986,8 @@ var List = memoGeneric(
               below
             );
           }
+          const perItemStyle = getItemStyle?.(item, isSelected);
+          const perItemClassName = getItemClassName?.(item, isSelected);
           return /* @__PURE__ */ React60.createElement(
             ViewComponent.Row,
             {
@@ -9985,11 +10000,14 @@ var List = memoGeneric(
               "aria-roledescription": itemRoleDescription,
               "aria-label": getName(item),
               "aria-selected": isSelected,
-              className: itemClassName,
+              className: cx(itemClassName, perItemClassName),
               testRelativeDropPosition: testShowDropIndicatorId === id ? "inside" : void 0,
-              chevronClassName: cx(expandable && "n-relative n-left-2"),
+              chevronClassName: cx(
+                expandable && chevronPosition !== "end" && "n-relative n-left-2"
+              ),
               chevronAs: href ? "div" : void 0,
-              style: itemStyle,
+              ...expandable ? { chevronPosition } : {},
+              style: perItemStyle ? { ...itemStyle, ...perItemStyle } : itemStyle,
               hovered: isHovered,
               selected: isSelected,
               expanded,
@@ -16686,29 +16704,51 @@ var Stepper = memo34(function Stepper2({
       onBlur
     },
     /* @__PURE__ */ React99.createElement(
-      Button,
-      {
-        icon: "MinusIcon",
-        disabled: readOnly,
-        onClick: () => handleValueChange(value - step)
-      }
-    ),
-    /* @__PURE__ */ React99.createElement(InputField2.Root, { className: "n-flex-1" }, /* @__PURE__ */ React99.createElement(
-      InputField2.NumberInput,
-      {
-        value,
-        onChange: handleValueChange,
-        onNudge: (amount) => handleValueChange(value + amount),
-        readOnly
-      }
-    )),
-    /* @__PURE__ */ React99.createElement(
-      Button,
+      InputField2.Root,
       {
-        icon: "PlusIcon",
-        disabled: readOnly,
-        onClick: () => handleValueChange(value + step)
-      }
+        className: "n-flex-1",
+        startWidth: 17,
+        startClassName: "-n-ml-[3px]",
+        endWidth: 17,
+        endClassName: "-n-mr-[3px]",
+        start: /* @__PURE__ */ React99.createElement(
+          IconButton,
+          {
+            iconName: "MinusIcon",
+            disabled: readOnly,
+            onClick: () => handleValueChange(value - step),
+            className: "n-w-[21px] n-h-[21px]",
+            style: {
+              outline: `1px solid ${cssVars.colors.dividerStrong}`,
+              outlineOffset: "-1px",
+              background: cssVars.colors.background
+            }
+          }
+        ),
+        end: /* @__PURE__ */ React99.createElement(
+          IconButton,
+          {
+            iconName: "PlusIcon",
+            disabled: readOnly,
+            onClick: () => handleValueChange(value + step),
+            className: "n-w-[21px] n-h-[21px]",
+            style: {
+              outline: `1px solid ${cssVars.colors.dividerStrong}`,
+              outlineOffset: "-1px",
+              background: cssVars.colors.background
+            }
+          }
+        )
+      },
+      /* @__PURE__ */ React99.createElement(
+        InputField2.NumberInput,
+        {
+          value,
+          onChange: handleValueChange,
+          onNudge: (amount) => handleValueChange(value + amount),
+          readOnly
+        }
+      )
     )
   );
 });
@@ -17205,7 +17245,7 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   return /* @__PURE__ */ React105.createElement(
     "div",
     {
-      className: "n-w-[47px] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3",
+      className: "n-w-[calc(var(--n-toolbar-height)+1px)] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3",
       style: style2
     },
     /* @__PURE__ */ React105.createElement(