@noya-app/noya-designsystem 0.1.67 → 0.1.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,12 +23,12 @@
     "@base-ui-components/react": "1.0.0-beta.4",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.29",
-    "@noya-app/noya-utils": "0.1.8",
-    "@noya-app/noya-geometry": "0.1.15",
+    "@noya-app/noya-colorpicker": "0.1.30",
+    "@noya-app/noya-utils": "0.1.9",
+    "@noya-app/noya-geometry": "0.1.16",
     "@noya-app/noya-icons": "0.1.14",
     "@noya-app/noya-keymap": "0.1.4",
-    "@noya-app/noya-tailwind-config": "0.1.7",
+    "@noya-app/noya-tailwind-config": "0.1.8",
     "radix-ui": "1.4.2",
     "@radix-ui/react-compose-refs": "^1.0.0",
     "@radix-ui/primitive": "^1.0.1",

package/src/components/BaseToolbar.tsx

@@ -82,18 +82,21 @@ export function BaseToolbar({
           <Spacer.Horizontal size={10} />
         </>
       )}
-      <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"
-        }
-      >
-        <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
-          {children}
+      {children && (
+        <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"
+          }
+        >
+          <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
+            {children}
+          </div>
         </div>
-      </div>
+      )}
       <Spacer.Horizontal />
       <Spacer.Horizontal size={10} />
       <div className="n-flex n-gap-toolbar-separator">{right}</div>
+      <Spacer.Horizontal size={10} />
     </BaseToolbarContainer>
   );
 }

package/src/components/Collection.tsx

@@ -82,6 +82,10 @@ export interface CollectionProps<T, M extends string = string> {
   scrollable?: boolean;
   itemStyle?: CSSProperties;
   itemClassName?: string;
+  /** Optional per-item style */
+  getItemStyle?: (item: T, selected: boolean) => CSSProperties | undefined;
+  /** Optional per-item className */
+  getItemClassName?: (item: T, selected: boolean) => string | undefined;
   itemRoleDescription?: string;
   /** Position of the detail content. Defaults to 'end'. */
   detailPosition?: "end" | "below";
@@ -89,6 +93,11 @@ export interface CollectionProps<T, M extends string = string> {
   size?: CollectionItemSize;
   /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
   thumbnailSize?: CollectionThumbnailSize;
+  /**
+   * Position of the disclosure chevron for expandable lists.
+   * @default 'start'
+   */
+  chevronPosition?: "start" | "end";
   /** For testing: Override the hover state with a specific item ID */
   testHoveredId?: string;
   /** For testing: Override the renaming state with a specific item ID */

package/src/components/Dialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Dialog as DialogPrimitive } from "radix-ui";
+import { Dialog as DialogPrimitive, VisuallyHidden } from "radix-ui";
 import React, {
   ComponentProps,
   ForwardedRef,
@@ -121,6 +121,7 @@ export const Dialog = forwardRef(function Dialog(
         onOpenAutoFocus={onOpenAutoFocus}
         style={style}
         className={className}
+        aria-describedby={typeof description === "string" ? description : ""}
         {...(closeOnInteractOutside === false && {
           onPointerDownOutside: (event) => event.preventDefault(),
           onInteractOutside: (event) => event.preventDefault(),
@@ -145,6 +146,11 @@ export const Dialog = forwardRef(function Dialog(
             <Spacer.Vertical size={description ? 10 : 20} />
           </>
         )}
+        {!title && (
+          <VisuallyHidden.Root>
+            <StyledTitle>Dialog</StyledTitle>
+          </VisuallyHidden.Root>
+        )}
         {description && (
           <>
             <StyledDescription>{description}</StyledDescription>

package/src/components/InputField.tsx

@@ -552,8 +552,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 = useMemo(
     (): InputFieldContextValue => ({

package/src/components/List.tsx

@@ -88,6 +88,9 @@ export const List = memoGeneric(
       sharedDragProps,
       virtualized,
       renameSelectsBeforeDot,
+      chevronPosition = "start",
+      getItemStyle,
+      getItemClassName,
     } = props;
 
     const [internalHoveredId, setHoveredId] = useState<string>();
@@ -249,6 +252,9 @@ export const List = memoGeneric(
               </div>
             );
           }
+          const perItemStyle = getItemStyle?.(item, isSelected);
+          const perItemClassName = getItemClassName?.(item, isSelected);
+
           return (
             <ViewComponent.Row
               as={typeof href === "string" ? LinkComponent : undefined}
@@ -260,13 +266,18 @@ export const List = memoGeneric(
               aria-roledescription={itemRoleDescription}
               aria-label={getName(item)}
               aria-selected={isSelected}
-              className={itemClassName}
+              className={cx(itemClassName, perItemClassName)}
               testRelativeDropPosition={
                 testShowDropIndicatorId === id ? "inside" : undefined
               }
-              chevronClassName={cx(expandable && "n-relative n-left-2")}
+              chevronClassName={cx(
+                expandable && chevronPosition !== "end" && "n-relative n-left-2"
+              )}
               chevronAs={href ? "div" : undefined}
-              style={itemStyle}
+              {...(expandable ? { chevronPosition } : {})}
+              style={
+                perItemStyle ? { ...itemStyle, ...perItemStyle } : itemStyle
+              }
               hovered={isHovered}
               selected={isSelected}
               expanded={expanded}

package/src/components/Stepper.tsx

@@ -3,8 +3,9 @@
 import { clamp } from "@noya-app/noya-utils";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
 import { useLabel } from "../hooks/useLabel";
+import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
-import { Button } from "./Button";
+import { IconButton } from "./IconButton";
 import { InputField } from "./InputField";
 
 type ColorScheme = "primary" | "secondary";
@@ -65,12 +66,39 @@ export const Stepper = memo(function Stepper({
       onFocus={onFocus}
       onBlur={onBlur}
     >
-      <Button
-        icon="MinusIcon"
-        disabled={readOnly}
-        onClick={() => handleValueChange(value - step)}
-      />
-      <InputField.Root className="n-flex-1">
+      <InputField.Root
+        className="n-flex-1"
+        startWidth={17}
+        startClassName="-n-ml-[3px]"
+        endWidth={17}
+        endClassName="-n-mr-[3px]"
+        start={
+          <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={
+          <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,
+            }}
+          />
+        }
+      >
         <InputField.NumberInput
           value={value}
           onChange={handleValueChange}
@@ -78,11 +106,6 @@ export const Stepper = memo(function Stepper({
           readOnly={readOnly}
         />
       </InputField.Root>
-      <Button
-        icon="PlusIcon"
-        disabled={readOnly}
-        onClick={() => handleValueChange(value + step)}
-      />
     </div>
   );
 });

package/src/components/TreeView.tsx

@@ -21,6 +21,7 @@ type TreeRowBaseProps = {
   expanded?: boolean;
   chevronClassName?: string;
   chevronAs?: React.ElementType;
+  chevronPosition?: "start" | "end";
   onClickChevron?: ({ altKey }: { altKey: boolean }) => void;
   onDoubleClick?: () => void;
 };
@@ -35,6 +36,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
     onClickChevron,
     chevronClassName,
     chevronAs,
+    chevronPosition = "start",
     children,
     ...rest
   }: TreeViewRowProps<MenuItemType>,
@@ -55,7 +57,7 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
 
   return (
     <ListView.Row ref={forwardedRef} {...rest}>
-      {expandable && (
+      {expandable && chevronPosition !== "end" && (
         <>
           {expanded === undefined ? (
             <Spacer.Horizontal size={19} />
@@ -78,6 +80,30 @@ const TreeRow = forwardRefGeneric(function TreeRow<MenuItemType extends string>(
         </>
       )}
       {children}
+      {expandable && chevronPosition === "end" && (
+        <>
+          <Spacer.Horizontal size={6} />
+          {expanded === undefined ? (
+            <>
+              <Spacer.Horizontal size={19} />
+              {/* Right-side padding for end chevron */}
+              <Spacer.Horizontal size={8} />
+            </>
+          ) : (
+            <>
+              <IconButton
+                as={chevronAs}
+                className={chevronClassName}
+                iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}
+                onClick={handleClickChevron}
+                selected={rest.selected}
+              />
+              {/* Right-side padding for end chevron */}
+              <Spacer.Horizontal size={8} />
+            </>
+          )}
+        </>
+      )}
     </ListView.Row>
   );
 });

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -33,9 +33,7 @@ export const ConnectedUsersMenuLayout = ({
 }: ConnectedUsersMenuLayoutProps) => {
   return (
     <div className="n-flex n-gap-1.5">
-      <AvatarStack size={INPUT_HEIGHT} className="n-mr-1">
-        {renderUsers()}
-      </AvatarStack>
+      <AvatarStack size={INPUT_HEIGHT}>{renderUsers()}</AvatarStack>
       {launchAIAssistant && (
         <Tooltip content="AI Assistant">
           <Button

package/src/components/workspace/VerticalTabMenu.tsx

@@ -31,7 +31,7 @@ export const VerticalTabMenu = memoGeneric(function VerticalTabMenu<
 
   return (
     <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={style}
     >
       <ToolbarMenu

package/src/index.css

@@ -272,7 +272,7 @@
 }
 
 /* Direct child pre blocks */
-.n-prose > pre {
+.n-prose pre {
   background-color: var(--n-indigo-25);
   border-width: 1px;
   border-style: solid;
@@ -281,7 +281,7 @@
 }
 
 /* Code inside pre */
-.n-prose > pre > code {
+.n-prose pre > code {
   font-size: 12.8px;
 }