@noya-app/noya-designsystem 0.1.50 → 0.1.52

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

@@ -8,13 +8,16 @@ import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
 import { ActionMenu } from "./ActionMenu";
-import { CollectionProps, CollectionRef } from "./Collection";
-import { GridViewSize } from "./Grid";
+import {
+  CollectionItemSize,
+  CollectionProps,
+  CollectionRef,
+} from "./Collection";
 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[] = [];
@@ -114,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}
@@ -149,6 +152,7 @@ export const List = memoGeneric(
           const thumbnail = renderThumbnail?.({
             item,
             selected: isSelected,
+            size,
           });
           const onOpenChange = (open: boolean) => {
             setDropdownOpenId(open ? id : undefined);
@@ -169,6 +173,15 @@ export const List = memoGeneric(
                     onSelect={(action) => handleMenuAction(action, item)}
                     selected={isSelected}
                     onOpenChange={onOpenChange}
+                    variant="bare"
+                    style={{
+                      backgroundColor: isSelected
+                        ? cssVars.colors.selectedListItemBackground
+                        : "transparent",
+                      color: isSelected
+                        ? cssVars.colors.selectedListItemText
+                        : undefined,
+                    }}
                   />
                 ));
 
@@ -188,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
               }
@@ -238,9 +248,10 @@ export const List = memoGeneric(
                 {thumbnail && (
                   <div
                     className={cx(
-                      "rounded overflow-hidden flex-none flex items-center justify-center",
+                      "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}
                   >
@@ -268,7 +279,7 @@ export const List = memoGeneric(
                         <ViewComponent.RowTitle
                           className={cx(
                             fontStyleMap[size],
-                            isSelected && "text-primary"
+                            isSelected && "text-selected-list-item-text"
                           )}
                         >
                           {getName(item)}
@@ -316,37 +327,37 @@ const DetailContainer = memo(function DetailContainer({
   );
 });
 
-const pyMap: Record<GridViewSize, string> = {
-  xxs: "py-1",
-  xs: "py-1",
-  small: "py-1",
+const pyMap: Record<CollectionItemSize, string> = {
+  xxs: "py-0.5",
+  xs: "py-0.5",
+  small: "py-0.5",
   medium: "py-1",
   large: "py-2",
   xl: "py-3",
 };
 
-const thumbnailSizeMap: Record<GridViewSize, string> = {
-  xxs: "w-4 h-4",
-  xs: "w-4 h-4",
-  small: "w-6 h-6",
+const thumbnailSizeMap: Record<CollectionItemSize, string> = {
+  xxs: "w-5 h-5",
+  xs: "w-5 h-5",
+  small: "w-5 h-5",
   medium: "w-8 h-8",
   large: "w-16 h-16",
   xl: "w-24 h-24",
 };
 
-const rowGapMap: Record<GridViewSize, string> = {
-  xxs: "gap-3",
-  xs: "gap-3",
-  small: "gap-3",
+const rowGapMap: Record<CollectionItemSize, string> = {
+  xxs: "gap-2",
+  xs: "gap-2",
+  small: "gap-2",
   medium: "gap-3",
   large: "gap-3",
   xl: "gap-4",
 };
 
-const fontStyleMap: Record<GridViewSize, string> = {
-  xxs: "font-medium",
-  xs: "font-medium",
-  small: "font-medium",
+const fontStyleMap: Record<CollectionItemSize, string> = {
+  xxs: "font-medium text-list-small",
+  xs: "font-medium text-list-small",
+  small: "font-medium text-list-small",
   medium: "font-medium",
   large: "font-medium",
   xl: "font-medium text-heading4 text-text",

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,8 +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";
 
@@ -29,6 +36,9 @@ type MediaThumbnailProps = {
    * If provided, use this icon instead of the default one for the asset type
    */
   iconName?: IconName;
+  size?: CollectionItemSize;
+
+  fileName?: string;
 };
 
 export const getThumbnailColors = (
@@ -37,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,
     };
   }
 
@@ -67,29 +77,34 @@ export const getThumbnailColors = (
   }
 };
 
-const iconStyles = {
-  width: "max(15px, 20%)",
-  height: "max(15px, 20%)",
-};
-
 export const MediaThumbnail = memo(function MediaThumbnail({
   contentType: contentTypeProp,
   selected = false,
   className,
   colorScheme = "icon",
   url,
-  iconName = "FileIcon",
+  iconName,
+  size = "medium",
+  fileName,
 }: MediaThumbnailProps) {
   const { icon: iconColor, background: backgroundColor } = getThumbnailColors(
     colorScheme,
     selected
   );
   const contentType = getAssetType(contentTypeProp);
+  const iconStyles = useMemo(
+    () => ({
+      width: iconSizeMap[size],
+      height: iconSizeMap[size],
+    }),
+    [size]
+  );
 
   const content = useMemo(() => {
     switch (contentType) {
       case "image":
         if (!url) return <ImageIcon color={iconColor} style={iconStyles} />;
+
         return (
           <img
             src={url}
@@ -98,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, iconName]);
+  }, [contentType, url, iconColor, iconStyles, iconName, fileName]);
 
   return (
     <div
@@ -123,3 +152,22 @@ export const MediaThumbnail = memo(function MediaThumbnail({
     </div>
   );
 });
+
+const iconSizeMap: Record<CollectionItemSize, number | string> = {
+  xxs: 12,
+  xs: 12,
+  small: 12,
+  medium: "max(15px, 20%)",
+  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

@@ -33,7 +33,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]",
 };

package/src/components/SearchCompletionMenu.tsx

@@ -119,21 +119,21 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
       handleKeyboardEvent(event.nativeEvent, getCurrentPlatform(navigator), {
         ArrowUp: () => {
-          const nextIndex = getNextIndex(
-            results,
-            index,
-            "previous",
-            (item) => item.disabled ?? false
-          );
+          const nextIndex = getNextIndex({
+            items: results,
+            currentIndex: index,
+            direction: "previous",
+            isDisabled: (item) => item.disabled ?? false,
+          });
           setIndex(nextIndex);
         },
         ArrowDown: () => {
-          const nextIndex = getNextIndex(
-            results,
-            index,
-            "next",
-            (item) => item.disabled ?? false
-          );
+          const nextIndex = getNextIndex({
+            items: results,
+            currentIndex: index,
+            direction: "next",
+            isDisabled: (item) => item.disabled ?? false,
+          });
           setIndex(nextIndex);
         },
         Tab: () => selectAndClose(results[index]!),

package/src/components/SegmentedControl.tsx

@@ -1,3 +1,4 @@
+import { memoGeneric } from "@noya-app/react-utils";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import React, {
   createContext,
@@ -7,7 +8,6 @@ import React, {
   useContext,
   useMemo,
 } from "react";
-import { memoGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 import { renderIcon } from "./Icons";
@@ -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/SelectionToolbar.tsx

@@ -0,0 +1,70 @@
+import { MenuItem, ToolbarMenu } from "@noya-app/noya-designsystem";
+import { Rect } from "@noya-app/noya-geometry";
+import { memoGeneric, useSize } from "@noya-app/react-utils";
+import * as PopperPrimitive from "@radix-ui/react-popper";
+import type { MeasurableElement } from "@radix-ui/utils";
+import React, { CSSProperties, 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 SelectionToolbarProps<T extends string> = {
+  rect: Rect;
+  menuItems: MenuItem<T>[];
+  onSelectMenuItem: (item: T) => void;
+};
+
+export const SelectionToolbar = memoGeneric(function SelectionToolbar<
+  T extends string,
+>({ rect, menuItems, onSelectMenuItem }: SelectionToolbarProps<T>) {
+  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
+        side="top"
+        sideOffset={10}
+        align="center"
+        avoidCollisions
+        collisionPadding={10}
+        data-editor-overlay
+        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"
+        >
+          <ToolbarMenu items={menuItems} onSelectMenuItem={onSelectMenuItem} />
+        </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

@@ -2,8 +2,11 @@ import { DropdownChevronIcon } from "@noya-app/noya-icons";
 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";
 import { DropdownMenu } from "./DropdownMenu";
 import { renderIcon } from "./Icons";
 import {
@@ -12,6 +15,7 @@ import {
   MenuItem,
 } from "./internal/Menu";
 import { Spacer } from "./Spacer";
+import { Tooltip } from "./Tooltip";
 
 export interface ToolbarProps<T extends string = string> {
   children?: React.ReactNode;
@@ -76,7 +80,12 @@ export function Toolbar<T extends string = string>({
   );
 }
 
-export function ToolbarMenu<T extends string>({
+const activeButtonStyle = {
+  backgroundColor: cssVars.colors.primaryPastel,
+  color: cssVars.colors.primary,
+};
+
+export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   items,
   onSelectMenuItem,
 }: {
@@ -86,14 +95,18 @@ export function ToolbarMenu<T extends string>({
   return (
     <>
       {items.map((item, i) => {
-        if (item.type === "separator") return null;
         if (item.type === "sectionHeader") return null;
 
+        if (item.type === "separator") {
+          return <DividerVertical key={i} overflow={4} />;
+        }
+
         if (isSelectableMenuItem(item)) {
-          return (
+          const content = (
             <Button
               key={i}
               disabled={item.disabled}
+              style={item.checked ? activeButtonStyle : undefined}
               onClick={() => {
                 if (onSelectMenuItem && item.value) {
                   onSelectMenuItem(item.value);
@@ -101,14 +114,18 @@ export function ToolbarMenu<T extends string>({
               }}
             >
               {item.title}
-              {item.icon && (
-                <>
-                  <Spacer.Horizontal inline size={6} />
-                  {renderIcon(item.icon)}
-                </>
-              )}
+              {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+              {item.icon && renderIcon(item.icon)}
             </Button>
           );
+
+          return item.tooltip ? (
+            <Tooltip sideOffset={10} content={item.tooltip} key={i}>
+              {content}
+            </Tooltip>
+          ) : (
+            content
+          );
         }
 
         return (
@@ -121,8 +138,13 @@ export function ToolbarMenu<T extends string>({
               }
             }}
           >
-            <Button disabled={item.disabled}>
+            <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>
@@ -131,4 +153,4 @@ export function ToolbarMenu<T extends string>({
       })}
     </>
   );
-}
+});

package/src/components/Tooltip.tsx

@@ -9,11 +9,13 @@ 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) {
   return (
     <TooltipPrimitive.Provider>
@@ -23,9 +25,9 @@ export const Tooltip = React.memo(function Tooltip({
           <TooltipPrimitive.Content
             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 /> */}