@noya-app/noya-designsystem 0.1.51 → 0.1.52

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

@@ -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/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/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

@@ -15,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;
@@ -81,6 +82,7 @@ export function Toolbar<T extends string = string>({
 
 const activeButtonStyle = {
   backgroundColor: cssVars.colors.primaryPastel,
+  color: cssVars.colors.primary,
 };
 
 export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
@@ -100,7 +102,7 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
         }
 
         if (isSelectableMenuItem(item)) {
-          return (
+          const content = (
             <Button
               key={i}
               disabled={item.disabled}
@@ -116,6 +118,14 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
               {item.icon && renderIcon(item.icon)}
             </Button>
           );
+
+          return item.tooltip ? (
+            <Tooltip sideOffset={10} content={item.tooltip} key={i}>
+              {content}
+            </Tooltip>
+          ) : (
+            content
+          );
         }
 
         return (

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 /> */}