@noya-app/noya-designsystem 0.1.51 → 0.1.53

package/src/components/LabeledField.tsx

@@ -29,11 +29,13 @@ export const LabeledField = memo(function LabeledField({
   minWidth = 100,
   className,
   style,
+  labelStyle: labelStyleProp,
   ...props
 }: {
   children: React.ReactNode;
   label: React.ReactNode;
   labelPosition?: LabelPosition;
+  labelStyle?: React.CSSProperties;
   /** Used for both the `id` of the field and the `htmlFor` of the label, unless `id` and `htmlFor` are explicitly provided */
   fieldId?: string;
   className?: string;
@@ -79,8 +81,9 @@ export const LabeledField = memo(function LabeledField({
   const labelStyle = useMemo(
     () => ({
       minWidth: `calc(${labelWidth}px - ${indentLevel * 8}px)`,
+      ...labelStyleProp,
     }),
-    [labelWidth, indentLevel]
+    [labelWidth, indentLevel, labelStyleProp]
   );
 
   return (

package/src/components/List.tsx

@@ -17,7 +17,7 @@ import { ListView, ListViewItemInfo } from "./ListView";
 import { TreeView } from "./TreeView";
 
 const cssVarOverrides = {
-  "--n-icon-selected": cssVars.colors.primary,
+  "--n-icon-selected": cssVars.colors.selectedListItemText,
 };
 
 const emptyArray: string[] = [];
@@ -117,7 +117,7 @@ export const List = memoGeneric(
         variant="bare"
         className={cx(
           className,
-          isDropTargetActive && "bg-primary-pastel",
+          isDropTargetActive && "bg-selected-list-item-background",
           scrollable && "basis-0 min-h-0"
         )}
         containerRef={fileDropTargetRef}
@@ -174,6 +174,14 @@ export const List = memoGeneric(
                     selected={isSelected}
                     onOpenChange={onOpenChange}
                     variant="bare"
+                    style={{
+                      backgroundColor: isSelected
+                        ? cssVars.colors.selectedListItemBackground
+                        : "transparent",
+                      color: isSelected
+                        ? cssVars.colors.selectedListItemText
+                        : undefined,
+                    }}
                   />
                 ));
 
@@ -193,9 +201,6 @@ export const List = memoGeneric(
               aria-label={getName(item)}
               aria-selected={isSelected}
               className={cx("cursor-pointer rounded px-1", pyMap[size])}
-              backgroundColor={
-                isSelected ? cssVars.colors.primaryPastel : undefined
-              }
               testRelativeDropPosition={
                 testShowDropIndicatorId === id ? "inside" : undefined
               }
@@ -245,7 +250,7 @@ export const List = memoGeneric(
                     className={cx(
                       "overflow-hidden flex-none flex items-center justify-center",
                       thumbnailSize === "auto" && thumbnailSizeMap[size],
-                      isSelected && "text-primary",
+                      isSelected && "text-selected-list-item-text",
                       size === "small" ? "rounded-sm" : "rounded"
                     )}
                     tabIndex={-1}
@@ -274,7 +279,7 @@ export const List = memoGeneric(
                         <ViewComponent.RowTitle
                           className={cx(
                             fontStyleMap[size],
-                            isSelected && "text-primary"
+                            isSelected && "text-selected-list-item-text"
                           )}
                         >
                           {getName(item)}

package/src/components/ListView.tsx

@@ -232,7 +232,7 @@ const RowContainer = forwardRef<
             : "font-sans text-heading5 font-normal",
           !$isSectionHeader &&
             $selected &&
-            "text-white active:bg-primary-light",
+            "text-selected-list-item-text active:bg-selected-list-item-background",
           !$isSectionHeader && $disabled && "text-text-disabled",
           $clickable ? "cursor-pointer" : "cursor-default",
           $isSectionHeader && "bg-listview-raised-background",
@@ -254,7 +254,10 @@ const RowContainer = forwardRef<
           }),
           ...($selected &&
             !$isSectionHeader && {
-              backgroundColor: cssVars.colors[$colorScheme],
+              backgroundColor:
+                $colorScheme === "primary"
+                  ? cssVars.colors["selectedListItemBackground"]
+                  : cssVars.colors[$colorScheme],
             }),
           ...($selected &&
             !$isSectionHeader &&
@@ -279,7 +282,7 @@ const RowContainer = forwardRef<
               backgroundColor: $selected
                 ? $colorScheme === "secondary"
                   ? cssVars.colors.secondaryLight
-                  : cssVars.colors.primaryLight
+                  : cssVars.colors.selectedListItemBackground
                 : cssVars.colors.activeBackground,
             },
           }),
@@ -358,7 +361,7 @@ const ListViewDragIndicatorElement = forwardRef<
                 backgroundColor:
                   $colorScheme === "secondary"
                     ? cssVars.colors.secondary
-                    : cssVars.colors.primary,
+                    : cssVars.colors.selectedListItemBackground,
                 border: `2px solid white`,
                 boxShadow: "0 0 2px rgba(0,0,0,0.5)",
               }),

package/src/components/MediaThumbnail.tsx

@@ -1,9 +1,15 @@
-import { ImageIcon, SpeakerLoudIcon, VideoIcon } from "@noya-app/noya-icons";
+import {
+  FileIcon,
+  ImageIcon,
+  SpeakerLoudIcon,
+  VideoIcon,
+} from "@noya-app/noya-icons";
 import React, { memo, useMemo } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { CollectionItemSize } from "./Collection";
 import { IconName, Icons } from "./Icons";
+import { fileExtensions, fileNames } from "./catppuccin/fileIcons";
 
 type ColorScheme = "primary" | "secondary" | "icon" | "warning";
 
@@ -31,6 +37,8 @@ type MediaThumbnailProps = {
    */
   iconName?: IconName;
   size?: CollectionItemSize;
+
+  fileName?: string;
 };
 
 export const getThumbnailColors = (
@@ -39,8 +47,8 @@ export const getThumbnailColors = (
 ) => {
   if (selected) {
     return {
-      icon: cssVars.colors.primary,
-      background: cssVars.colors.primaryPastel,
+      icon: cssVars.colors.selectedListItemText,
+      background: cssVars.colors.selectedListItemIconBackground,
     };
   }
 
@@ -75,8 +83,9 @@ export const MediaThumbnail = memo(function MediaThumbnail({
   className,
   colorScheme = "icon",
   url,
-  iconName = "FileIcon",
+  iconName,
   size = "medium",
+  fileName,
 }: MediaThumbnailProps) {
   const { icon: iconColor, background: backgroundColor } = getThumbnailColors(
     colorScheme,
@@ -95,6 +104,7 @@ export const MediaThumbnail = memo(function MediaThumbnail({
     switch (contentType) {
       case "image":
         if (!url) return <ImageIcon color={iconColor} style={iconStyles} />;
+
         return (
           <img
             src={url}
@@ -103,18 +113,32 @@ export const MediaThumbnail = memo(function MediaThumbnail({
             tabIndex={-1}
           />
         );
-
       case "video":
         return <VideoIcon color={iconColor} style={iconStyles} />;
-
       case "audio":
         return <SpeakerLoudIcon color={iconColor} style={iconStyles} />;
-
       default:
-        const Icon = Icons[iconName];
-        return <Icon color={iconColor} style={iconStyles} />;
+        if (iconName) {
+          const Icon = Icons[iconName];
+          return <Icon color={iconColor} style={iconStyles} />;
+        }
+
+        if (fileName) {
+          const fileIcon = findFileIcon(fileName);
+          if (fileIcon) {
+            return (
+              <img
+                src={`https://api.iconify.design/catppuccin/${fileIcon}.svg?height=none&box=1`}
+                alt=""
+                className="w-4 h-4"
+              />
+            );
+          }
+        }
+
+        return <FileIcon color={iconColor} style={iconStyles} />;
     }
-  }, [contentType, url, iconColor, iconStyles, iconName]);
+  }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
 
   return (
     <div
@@ -137,3 +161,13 @@ const iconSizeMap: Record<CollectionItemSize, number | string> = {
   large: "max(15px, 20%)",
   xl: "max(15px, 20%)",
 };
+
+function findFileIcon(fileName: string) {
+  const fileIcon = fileNames[fileName];
+  if (fileIcon) return fileIcon;
+  const fileExtensionIndex = fileName.lastIndexOf(".");
+  if (fileExtensionIndex === -1) return undefined;
+  const fileExtension = fileName.slice(fileExtensionIndex + 1);
+  const fileExtensionIcon = fileExtensions[fileExtension];
+  return fileExtensionIcon;
+}

package/src/components/Popover.tsx

@@ -1,5 +1,9 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import React, { ComponentProps } from "react";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import { cx } from "../utils/classNames";
 import { IconButton } from "./IconButton";
 
@@ -33,7 +37,7 @@ interface Props
 }
 
 export const popoverStyle = {
-  base: "rounded font-[14px] bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
+  base: "rounded font-[14px] bg-popover-background shadow-popover max-h-[600px] overflow-y-auto text-text-muted z-[1000]",
   large: "w-[680px]",
   normal: "w-[240px]",
 };
@@ -56,11 +60,14 @@ export function Popover({
   onClickClose,
   className,
 }: Props) {
+  const portalScopeId = usePortalScopeId();
+
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
+          {...portalScopeProps(portalScopeId)}
           className={cx(
             popoverStyle.base,
             variant === "large" && popoverStyle.large,

package/src/components/SegmentedControl.tsx

@@ -80,7 +80,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
             ? "aria-checked:bg-primary aria-checked:text-white"
             : "aria-checked:bg-background aria-checked:text-text",
         "focus:z-interactable",
-        "aria-checked:shadow-[0_1px_1px_rgba(0,0,0,0.1)]",
+        "aria-checked:shadow-segment",
         "whitespace-pre",
         className
       )}

package/src/components/SelectMenu.tsx

@@ -15,6 +15,10 @@ import React, {
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import { getInsetEndStyles } from "../utils/inputs";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
@@ -148,6 +152,8 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   contentStyle: contentStyleProp,
   ...props
 }: Props<T>) {
+  const portalScopeId = usePortalScopeId();
+
   const selectedItem = items.find(
     (item): item is SelectableMenuItem<T> =>
       isSelectableMenuItem(item) && item.value === value
@@ -213,6 +219,7 @@ export const SelectMenu = memoGeneric(function SelectMenu<
       />
       <Select.Portal>
         <Select.Content
+          {...portalScopeProps(portalScopeId)}
           className={styles.contentStyle}
           position="popper"
           sideOffset={6}

package/src/components/SelectionToolbar.tsx

@@ -0,0 +1,76 @@
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "@noya-app/noya-designsystem";
+import { Rect } from "@noya-app/noya-geometry";
+import { useSize } from "@noya-app/react-utils";
+import * as PopperPrimitive from "@radix-ui/react-popper";
+import type { MeasurableElement } from "@radix-ui/utils";
+import React, { CSSProperties, memo, useMemo } from "react";
+
+// Create a Measurable from a Rect
+const createVirtualElement = (rect: Rect): MeasurableElement => ({
+  getBoundingClientRect: () => ({
+    width: rect.width,
+    height: rect.height,
+    x: rect.x,
+    y: rect.y,
+    top: rect.y,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height,
+    left: rect.x,
+    toJSON: () => null,
+  }),
+});
+
+type SelectionToolbarContainerProps = {
+  rect: Rect;
+  children: React.ReactNode;
+};
+
+export const SelectionToolbarContainer = memo(
+  function SelectionToolbarContainer({
+    rect,
+    children,
+  }: SelectionToolbarContainerProps) {
+    const portalScopeId = usePortalScopeId();
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const size = useSize(containerRef, "width");
+
+    // Create a virtual reference element from the rect
+    const virtualRef = useMemo(
+      () => ({
+        current: createVirtualElement(rect),
+      }),
+      [rect]
+    );
+
+    return (
+      <PopperPrimitive.Root>
+        <PopperPrimitive.Anchor virtualRef={virtualRef} />
+        <PopperPrimitive.Content
+          {...portalScopeProps(portalScopeId)}
+          side="top"
+          sideOffset={10}
+          align="center"
+          avoidCollisions
+          collisionPadding={10}
+          contentEditable={false}
+          style={{
+            zIndex: 1000,
+            opacity: size ? 1 : 0,
+            transition: "opacity 0.2s ease-in-out",
+            ["--n-input-background" as keyof CSSProperties]: "transparent",
+          }}
+        >
+          <div
+            ref={containerRef}
+            className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
+          >
+            {children}
+          </div>
+        </PopperPrimitive.Content>
+      </PopperPrimitive.Root>
+    );
+  }
+);

package/src/components/Switch.tsx

@@ -38,7 +38,7 @@ export const Switch = function Switch({
         onChange(newValue);
       }}
       className={cx(
-        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer ring-offset-background [webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
+        "all-unset w-8 h-[19px] bg-active-background rounded-full relative cursor-pointer ring-offset-background [-webkit-tap-highlight-color:rgba(0,0,0,0)] focus:ring-2 focus:ring-primary focus:ring-offset-[1px] outline-none data-[state=checked]:bg-primary transition-all",
         colorScheme === "secondary" && "data-[state=checked]:bg-secondary",
         "focus:z-interactable",
         className

package/src/components/Text.tsx

@@ -33,8 +33,8 @@ const elements: Record<Variant, keyof ReactHTML> = {
 };
 
 export const textStyles: Record<Variant, string> = {
-  title: "font-sans text-title font-bold sm:text-[36px]",
-  subtitle: "font-sans text-subtitle font-medium sm:text-[18px]",
+  title: "font-sans text-title font-bold",
+  subtitle: "font-sans text-subtitle font-medium",
   heading1: "font-sans text-heading1 font-semibold",
   heading2: "font-sans text-heading2 font-medium",
   heading3: "font-sans text-heading3 font-normal",

package/src/components/Toast.tsx

@@ -1,7 +1,7 @@
-import * as ToastPrimitive from '@radix-ui/react-toast';
-import React, { ReactNode } from 'react';
-import { IconButton } from './IconButton';
-import { textStyles } from './Text';
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import React, { ReactNode } from "react";
+import { IconButton } from "./IconButton";
+import { textStyles } from "./Text";
 
 export const Toast = ({
   title,
@@ -15,15 +15,21 @@ export const Toast = ({
 }) => {
   return (
     <ToastPrimitive.Root
-      className="px-2 py-2.5 grid grid-cols-[auto_max-content] gap-x-2.5 items-center rounded text-sm bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)] text-text-muted"
+      className="px-2 py-2.5 grid grid-cols-[auto_max-content] gap-x-2.5 items-center rounded text-sm bg-popover-background shadow-popover text-text-muted"
       {...props}
     >
       {title && (
-        <ToastPrimitive.Title className={`mb-[5px] ${textStyles.label} font-bold text-text`}>
+        <ToastPrimitive.Title
+          className={`mb-[5px] ${textStyles.label} font-bold text-text`}
+        >
           {title}
         </ToastPrimitive.Title>
       )}
-      <ToastPrimitive.Description className={`${textStyles.small} text-text-muted`}>{content}</ToastPrimitive.Description>
+      <ToastPrimitive.Description
+        className={`${textStyles.small} text-text-muted`}
+      >
+        {content}
+      </ToastPrimitive.Description>
       {children && (
         <ToastPrimitive.Action asChild altText="">
           {children}

package/src/components/Toolbar.tsx

@@ -3,7 +3,6 @@ import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React from "react";
 
 import { memoGeneric } from "@noya-app/react-utils";
-import { cssVars } from "../theme";
 import { BaseToolbar } from "./BaseToolbar";
 import { Button } from "./Button";
 import { DividerVertical } from "./Divider";
@@ -13,8 +12,78 @@ import {
   getKeyboardShortcutsForMenuItems,
   isSelectableMenuItem,
   MenuItem,
+  SelectableMenuItem,
+  SubMenuItem,
 } from "./internal/Menu";
 import { Spacer } from "./Spacer";
+import { Tooltip } from "./Tooltip";
+
+export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
+  T extends string,
+>({
+  item,
+  onSelectMenuItem,
+}: {
+  item: SubMenuItem<T>;
+  onSelectMenuItem?: (value: T) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={setOpen}
+      items={item.items}
+      onSelect={(value) => {
+        if (onSelectMenuItem && value) {
+          onSelectMenuItem(value);
+        }
+      }}
+    >
+      <Button disabled={item.disabled} active={item.checked || open}>
+        {item.title}
+        {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+        {item.icon && renderIcon(item.icon)}
+        <Spacer.Horizontal size={6} />
+        <DropdownChevronIcon />
+      </Button>
+    </DropdownMenu>
+  );
+});
+
+export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
+  T extends string,
+>({
+  item,
+  onSelectMenuItem,
+}: {
+  item: SelectableMenuItem<T>;
+  onSelectMenuItem?: (value: T) => void;
+}) {
+  const content = (
+    <Button
+      disabled={item.disabled}
+      active={item.checked}
+      onClick={() => {
+        if (onSelectMenuItem && item.value) {
+          onSelectMenuItem(item.value);
+        }
+      }}
+    >
+      {item.title}
+      {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+      {item.icon && renderIcon(item.icon)}
+    </Button>
+  );
+
+  return item.tooltip ? (
+    <Tooltip sideOffset={10} content={item.tooltip}>
+      {content}
+    </Tooltip>
+  ) : (
+    content
+  );
+});
 
 export interface ToolbarProps<T extends string = string> {
   children?: React.ReactNode;
@@ -79,10 +148,6 @@ export function Toolbar<T extends string = string>({
   );
 }
 
-const activeButtonStyle = {
-  backgroundColor: cssVars.colors.primaryPastel,
-};
-
 export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   items,
   onSelectMenuItem,
@@ -101,44 +166,20 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
 
         if (isSelectableMenuItem(item)) {
           return (
-            <Button
+            <ToolbarMenuButton
               key={i}
-              disabled={item.disabled}
-              style={item.checked ? activeButtonStyle : undefined}
-              onClick={() => {
-                if (onSelectMenuItem && item.value) {
-                  onSelectMenuItem(item.value);
-                }
-              }}
-            >
-              {item.title}
-              {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
-              {item.icon && renderIcon(item.icon)}
-            </Button>
+              item={item}
+              onSelectMenuItem={onSelectMenuItem}
+            />
           );
         }
 
         return (
-          <DropdownMenu
+          <ToolbarMenuDropdown
             key={i}
-            items={item.items}
-            onSelect={(value) => {
-              if (onSelectMenuItem && value) {
-                onSelectMenuItem(value);
-              }
-            }}
-          >
-            <Button
-              disabled={item.disabled}
-              style={item.checked ? activeButtonStyle : undefined}
-            >
-              {item.title}
-              {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
-              {item.icon && renderIcon(item.icon)}
-              <Spacer.Horizontal size={6} />
-              <DropdownChevronIcon />
-            </Button>
-          </DropdownMenu>
+            item={item}
+            onSelectMenuItem={onSelectMenuItem}
+          />
         );
       })}
     </>

package/src/components/Tooltip.tsx

@@ -1,5 +1,9 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import { textStyles } from "./Text";
 
 // const Arrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({
@@ -9,23 +13,28 @@ import { textStyles } from "./Text";
 interface Props {
   children: React.ReactNode;
   content: React.ReactNode;
+  sideOffset?: number;
 }
 
 export const Tooltip = React.memo(function Tooltip({
   children,
   content,
+  sideOffset = 2,
 }: Props) {
+  const portalScopeId = usePortalScopeId();
+
   return (
     <TooltipPrimitive.Provider>
       <TooltipPrimitive.Root>
         <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
           <TooltipPrimitive.Content
+            {...portalScopeProps(portalScopeId)}
             side="bottom"
             align="center"
-            sideOffset={2}
+            sideOffset={sideOffset}
             collisionPadding={8}
-            className={`${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-[0_2px_4px_rgba(0,0,0,0.2)_0_0_12px_rgba(0,0,0,0.1)] border border-solid border-divider-strong z-menu`}
+            className={`${textStyles.small} text-text rounded-[3px] py-small px-medium bg-popover-background shadow-popover border border-solid border-divider-strong z-menu`}
           >
             {content}
             {/* <Arrow /> */}