@noya-app/noya-designsystem 0.1.67 → 0.1.69

package/dist/index.js

@@ -4413,6 +4413,7 @@ var Dialog = (0, import_react23.forwardRef)(function Dialog2({
       onOpenAutoFocus,
       style: style2,
       className,
+      "aria-describedby": typeof description === "string" ? description : "",
       ...closeOnInteractOutside === false && {
         onPointerDownOutside: (event) => event.preventDefault(),
         onInteractOutside: (event) => event.preventDefault()
@@ -4431,6 +4432,7 @@ var Dialog = (0, import_react23.forwardRef)(function Dialog2({
       }
     )),
     title && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(StyledTitle, null, title), /* @__PURE__ */ import_react23.default.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
+    !title && /* @__PURE__ */ import_react23.default.createElement(import_radix_ui3.VisuallyHidden.Root, null, /* @__PURE__ */ import_react23.default.createElement(StyledTitle, null, "Dialog")),
     description && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(StyledDescription, null, description), /* @__PURE__ */ import_react23.default.createElement(Spacer.Vertical, { size: 20 })),
     children
   ));
@@ -5246,8 +5248,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 = (0, import_react29.useMemo)(
     () => ({
       startWidth,
@@ -9874,6 +9876,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   onClickChevron,
   chevronClassName,
   chevronAs,
+  chevronPosition = "start",
   children,
   ...rest
 }, forwardedRef) {
@@ -9887,7 +9890,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
     },
     [stableOnClickChevron]
   );
-  return /* @__PURE__ */ import_react65.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react65.default.createElement(
+  return /* @__PURE__ */ import_react65.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && chevronPosition !== "end" && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react65.default.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -9896,7 +9899,16 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 10 })), children);
+  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 19 }), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 8 })) : /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
+    IconButton,
+    {
+      as: chevronAs,
+      className: chevronClassName,
+      iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
+      onClick: handleClickChevron,
+      selected: rest.selected
+    }
+  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 8 }))));
 });
 var TreeView;
 ((TreeView2) => {
@@ -9959,7 +9971,10 @@ var List = memoGeneric(
       sortableId,
       sharedDragProps,
       virtualized,
-      renameSelectsBeforeDot
+      renameSelectsBeforeDot,
+      chevronPosition = "start",
+      getItemStyle,
+      getItemClassName
     } = props;
     const [internalHoveredId, setHoveredId] = (0, import_react66.useState)();
     const [internalRenamingId, setRenamingId] = (0, import_react66.useState)();
@@ -10089,6 +10104,8 @@ var List = memoGeneric(
               below
             );
           }
+          const perItemStyle = getItemStyle?.(item, isSelected);
+          const perItemClassName = getItemClassName?.(item, isSelected);
           return /* @__PURE__ */ import_react66.default.createElement(
             ViewComponent.Row,
             {
@@ -10101,11 +10118,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,
@@ -11611,7 +11631,7 @@ var ConnectedUsersMenuLayout = ({
   launchAIAssistant,
   isAssistantOpen
 }) => {
-  return /* @__PURE__ */ import_react75.default.createElement("div", { className: "n-flex n-gap-1.5" }, /* @__PURE__ */ import_react75.default.createElement(AvatarStack, { size: INPUT_HEIGHT, className: "n-mr-1" }, renderUsers()), launchAIAssistant && /* @__PURE__ */ import_react75.default.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ import_react75.default.createElement(
+  return /* @__PURE__ */ import_react75.default.createElement("div", { className: "n-flex n-gap-1.5" }, /* @__PURE__ */ import_react75.default.createElement(AvatarStack, { size: INPUT_HEIGHT }, renderUsers()), launchAIAssistant && /* @__PURE__ */ import_react75.default.createElement(Tooltip, { content: "AI Assistant" }, /* @__PURE__ */ import_react75.default.createElement(
     Button,
     {
       active: isAssistantOpen,
@@ -15182,7 +15202,7 @@ function BaseToolbar({
     logo && /* @__PURE__ */ import_react87.default.createElement(import_react87.default.Fragment, null, logo, /* @__PURE__ */ import_react87.default.createElement(DividerVertical, null)),
     /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, { size: 10 }),
     left && /* @__PURE__ */ import_react87.default.createElement(import_react87.default.Fragment, null, /* @__PURE__ */ import_react87.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, left), /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, { size: 10 })),
-    /* @__PURE__ */ import_react87.default.createElement(
+    children && /* @__PURE__ */ import_react87.default.createElement(
       "div",
       {
         className: "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @2xl/toolbar:n-absolute n-inset-0"
@@ -15191,7 +15211,8 @@ function BaseToolbar({
     ),
     /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, null),
     /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, { size: 10 }),
-    /* @__PURE__ */ import_react87.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right)
+    /* @__PURE__ */ import_react87.default.createElement("div", { className: "n-flex n-gap-toolbar-separator" }, right),
+    /* @__PURE__ */ import_react87.default.createElement(Spacer.Horizontal, { size: 10 })
   );
 }
 
@@ -16750,29 +16771,51 @@ var Stepper = (0, import_react100.memo)(function Stepper2({
       onBlur
     },
     /* @__PURE__ */ import_react100.default.createElement(
-      Button,
-      {
-        icon: "MinusIcon",
-        disabled: readOnly,
-        onClick: () => handleValueChange(value - step)
-      }
-    ),
-    /* @__PURE__ */ import_react100.default.createElement(InputField2.Root, { className: "n-flex-1" }, /* @__PURE__ */ import_react100.default.createElement(
-      InputField2.NumberInput,
-      {
-        value,
-        onChange: handleValueChange,
-        onNudge: (amount) => handleValueChange(value + amount),
-        readOnly
-      }
-    )),
-    /* @__PURE__ */ import_react100.default.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__ */ import_react100.default.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__ */ import_react100.default.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__ */ import_react100.default.createElement(
+        InputField2.NumberInput,
+        {
+          value,
+          onChange: handleValueChange,
+          onNudge: (amount) => handleValueChange(value + amount),
+          readOnly
+        }
+      )
     )
   );
 });
@@ -17260,7 +17303,7 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   return /* @__PURE__ */ import_react104.default.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__ */ import_react104.default.createElement(