@noya-app/noya-designsystem 0.1.47 → 0.1.49

package/src/components/MediaThumbnail.tsx

@@ -0,0 +1,117 @@
+import { ImageIcon, SpeakerLoudIcon, VideoIcon } from "@noya-app/noya-icons";
+import React, { memo, useMemo } from "react";
+import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
+import { IconName, Icons } from "./Icons";
+
+type ColorScheme = "primary" | "icon" | "warning";
+
+type AssetType = "image" | "video" | "audio";
+
+const getAssetType = (contentType?: string): AssetType | undefined => {
+  if (!contentType) return undefined;
+  if (contentType.startsWith("image/")) return "image";
+  if (contentType.startsWith("video/")) return "video";
+  if (contentType.startsWith("audio/")) return "audio";
+  return undefined;
+};
+
+type MediaThumbnailProps = {
+  contentType?: string;
+  url?: string;
+  selected?: boolean;
+  className?: string;
+  /** Color scheme for the thumbnail. Affects icon color and background.
+   * @default "icon"
+   */
+  colorScheme?: ColorScheme;
+  /**
+   * If provided, use this icon instead of the default one for the asset type
+   */
+  iconName?: IconName;
+};
+
+const getColors = (colorScheme: ColorScheme, selected: boolean) => {
+  if (selected) {
+    return {
+      icon: cssVars.colors.primary,
+      background: cssVars.colors.primaryPastel,
+    };
+  }
+
+  switch (colorScheme) {
+    case "primary":
+      return {
+        icon: cssVars.colors.primary,
+        background: cssVars.colors.listViewThumbnailBackground,
+      };
+    case "warning":
+      return {
+        icon: cssVars.colors.warning,
+        background: cssVars.colors.listViewThumbnailBackground,
+      };
+    case "icon":
+    default:
+      return {
+        icon: cssVars.colors.icon,
+        background: cssVars.colors.listViewThumbnailBackground,
+      };
+  }
+};
+
+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",
+}: MediaThumbnailProps) {
+  const { icon: iconColor, background: backgroundColor } = getColors(
+    colorScheme,
+    selected
+  );
+  const contentType = getAssetType(contentTypeProp);
+
+  const content = useMemo(() => {
+    switch (contentType) {
+      case "image":
+        if (!url) return <ImageIcon color={iconColor} style={iconStyles} />;
+        return (
+          <img
+            src={url}
+            alt=""
+            className="object-contain w-full h-full"
+            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} />;
+    }
+  }, [contentType, url, iconColor, iconName]);
+
+  return (
+    <div
+      className={cx(
+        "w-full h-full justify-center flex items-center aspect-square",
+        className
+      )}
+      style={{ backgroundColor }}
+    >
+      {content}
+    </div>
+  );
+});

package/src/components/Message.tsx

@@ -1,11 +1,11 @@
+import { MultiplayerUser } from "@noya-app/noya-multiplayer-react";
 import React, { forwardRef, memo, useMemo } from "react";
-import { Icons } from "./Icons";
-import { Avatar } from "./Avatar";
+import { cssVars, INPUT_HEIGHT } from "../theme";
 import { cx } from "../utils/classNames";
-import { Text } from "./Text";
-import { MultiplayerUser } from "@noya-app/noya-multiplayer-react";
 import { colorFromString } from "../utils/colorFromString";
-import { cssVars } from "../theme";
+import { Avatar } from "./Avatar";
+import { Logo } from "./NoyaLogo";
+import { Text } from "./Text";
 
 export type MessageProps = {
   role: "user" | "assistant" | "system" | "data";
@@ -17,7 +17,7 @@ export type MessageProps = {
 
 export const Message = memo(
   forwardRef(function Message(
-    { role, children, user, avatarSize = 27 }: MessageProps,
+    { role, children, user, avatarSize = INPUT_HEIGHT }: MessageProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) {
     const randomId = crypto.randomUUID();
@@ -42,9 +42,9 @@ export const Message = memo(
           <Avatar
             name="Assistant"
             size={avatarSize}
-            backgroundColor={cssVars.colors.inputBackground}
+            backgroundColor={cssVars.colors.primaryPastel}
           >
-            <Icons.PersonIcon fontSize={22} color={cssVars.colors.text} />
+            <Logo style={{ width: 15 }} fill={cssVars.colors.primary} />
           </Avatar>
         ) : (
           <Avatar

package/src/components/NoyaLogo.tsx

@@ -0,0 +1,41 @@
+import { cssVars } from "@noya-app/noya-designsystem";
+import React, { forwardRef } from "react";
+
+export const Logo = forwardRef(function Logo(
+  props: React.ComponentProps<"svg">,
+  ref: React.Ref<SVGSVGElement>
+) {
+  const fill = props.fill || cssVars.colors.logoFill;
+
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 24 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className="w-6 aspect-[24/26]"
+    >
+      <path
+        d="M6.5 3H2V12H5V6H6.5C7.32843 6 8 6.67157 8 7.5V12H11V7.5C11 5.01472 8.98528 3 6.5 3Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.5 12C19.9853 12 22 9.98528 22 7.5C22 5.01472 19.9853 3 17.5 3C15.0147 3 13 5.01472 13 7.5C13 9.98528 15.0147 12 17.5 12ZM17.5 9C18.3284 9 19 8.32843 19 7.5C19 6.67157 18.3284 6 17.5 6C16.6716 6 16 6.67157 16 7.5C16 8.32843 16.6716 9 17.5 9Z"
+        fill={fill}
+      />
+      <path
+        d="M5 14H2V18.5C2 20.9853 4.01472 23 6.5 23H8V26H11V17H8V20H6.5C5.67157 20 5 19.3284 5 18.5V14Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.5 23C15.0147 23 13 20.9853 13 18.5C13 16.0147 15.0147 14 17.5 14C19.9853 14 22 16.0147 22 18.5V23H17.5ZM17.5 20C18.3284 20 19 19.3284 19 18.5C19 17.6716 18.3284 17 17.5 17C16.6716 17 16 17.6716 16 18.5C16 19.3284 16.6716 20 17.5 20Z"
+        fill={fill}
+      />
+    </svg>
+  );
+});

package/src/components/SearchCompletionMenu.tsx

@@ -1,16 +1,3 @@
-import {
-  ComboboxMenu,
-  Divider,
-  IScoredItem,
-  InputField,
-  ListView,
-  SelectableMenuItem,
-  Small,
-  cssVars,
-  fuzzyFilter,
-  getNextIndex,
-  isSelectableMenuItem,
-} from "@noya-app/noya-designsystem";
 import { getCurrentPlatform, handleKeyboardEvent } from "@noya-app/noya-keymap";
 import React, {
   forwardRef,
@@ -21,6 +8,21 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { cssVars } from "../theme";
+import { getNextIndex } from "../utils/combobox";
+import { fuzzyFilter, IScoredItem } from "../utils/fuzzyScorer";
+import { ComboboxMenu } from "./ComboboxMenu";
+import { Divider } from "./Divider";
+import { InputField } from "./InputField";
+import {
+  CHECKBOX_INDENT_WIDTH,
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
+  isSelectableMenuItem,
+  SelectableMenuItem,
+} from "./internal/Menu";
+import { ListView } from "./ListView";
+import { Small } from "./Text";
 
 export interface ISearchCompletionMenu {
   focus: () => void;
@@ -33,17 +35,21 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
     onClose,
     items,
     width = 200,
+    testSelectedIndex,
+    testSearch,
   }: {
     onSelect: (item: SelectableMenuItem<string>) => void;
     onHover?: (item: SelectableMenuItem<string>) => void;
     onClose: () => void;
     items: SelectableMenuItem<string>[];
     width?: number;
+    testSelectedIndex?: number;
+    testSearch?: string;
   },
   forwardedRef: React.ForwardedRef<ISearchCompletionMenu>
 ) {
   const [state, setState] = useState({
-    search: "",
+    search: testSearch ?? "",
     index: 0,
   });
 
@@ -51,6 +57,8 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
 
   const listRef = React.useRef<ListView.VirtualizedList>(null);
 
+  const hasCheckedItems = items.some((item) => item.checked);
+
   useEffect(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
@@ -157,7 +165,12 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
             outline: "none",
             boxShadow: "none",
             backgroundColor: cssVars.colors.inputBackground,
-            padding: "4px 12px",
+            paddingTop: "4px",
+            paddingBottom: "4px",
+            paddingLeft: hasCheckedItems
+              ? `${CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + 12 + CHECKBOX_INDENT_WIDTH}px`
+              : "12px",
+            paddingRight: "12px",
           }}
           onChange={setSearch}
           onKeyDown={handleKeyDown}
@@ -169,13 +182,14 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
           ref={listRef}
           listSize={listSize}
           items={results}
-          selectedIndex={index}
+          selectedIndex={testSelectedIndex ?? index}
           onSelectItem={(item) => {
             if (isSelectableMenuItem(item)) {
               selectAndClose(item);
             }
           }}
           onHoverIndex={setIndex}
+          indented={hasCheckedItems}
         />
       ) : (
         <div

package/src/components/SegmentedControl.tsx

@@ -141,7 +141,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         value={value}
         onValueChange={handleValueChange}
         className={cx(
-          `flex items-stretch flex-auto appearance-none relative outline-none min-h-[27px] rounded bg-input-background py-[2px] px-[2px]`,
+          `flex items-stretch flex-auto appearance-none relative outline-none min-h-input-height rounded bg-input-background py-[2px] px-[2px]`,
           className
         )}
         style={style}

package/src/components/SelectMenu.tsx

@@ -15,6 +15,7 @@ import React, {
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
+import { getInsetEndStyles } from "../utils/inputs";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
 import {
@@ -24,7 +25,7 @@ import {
   styles,
 } from "./internal/Menu";
 import { MenuComponents, MenuViewport } from "./internal/MenuViewport";
-import { InsetLabel } from "./Label";
+import { Label } from "./Label";
 
 type Props<T extends string> = {
   id?: string;
@@ -57,6 +58,8 @@ const scrollButtonStyles = `
   hover:text-text
 `;
 
+const insetEndStyles = getInsetEndStyles();
+
 interface SelectMenuTriggerProps {
   id?: string;
   style?: React.CSSProperties;
@@ -93,7 +96,7 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
         id={id}
         style={style}
         className={cx(
-          className ?? "flex w-full gap-1.5",
+          className ?? "flex w-full",
           "flex-1 focus:z-interactable relative",
           isOpen && "ring-2 ring-primary"
         )}
@@ -101,22 +104,21 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
       >
         {icon && <span className="pr-1.5">{renderIcon(icon)}</span>}
         {label && labelPosition === "inset" && (
-          <InsetLabel className="pr-4" htmlFor={id}>
-            {label}
-          </InsetLabel>
+          <div className={insetEndStyles}>
+            <Label className="pr-4 !text-text-disabled" htmlFor={id}>
+              {label}
+            </Label>
+          </div>
         )}
         <span className="flex-1 flex">
           <Select.Value placeholder={placeholder} />
         </span>
-
-        <span className="px-0.5">
-          <DropdownChevronIcon
-            className={cx(
-              "transition-transform duration-100",
-              isOpen ? "rotate-180" : "rotate-0"
-            )}
-          />
-        </span>
+        <DropdownChevronIcon
+          className={cx(
+            "transition-transform duration-100 ml-1.5",
+            isOpen ? "rotate-180" : "rotate-0"
+          )}
+        />
       </Button>
     </Select.SelectTrigger>
   );
@@ -143,7 +145,7 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   onFocus,
   onBlur,
   onOpenChange,
-  contentStyle,
+  contentStyle: contentStyleProp,
   ...props
 }: Props<T>) {
   const selectedItem = items.find(
@@ -181,6 +183,15 @@ export const SelectMenu = memoGeneric(function SelectMenu<
     [icon, id, style, className, disabled, value, selectedItem]
   );
 
+  const contentStyle = useMemo(() => {
+    return {
+      width: "var(--radix-select-trigger-width)",
+      minWidth: "max-content",
+      maxHeight: "500px",
+      ...contentStyleProp,
+    };
+  }, [contentStyleProp]);
+
   const content = (
     <Select.Root
       value={value}
@@ -206,12 +217,8 @@ export const SelectMenu = memoGeneric(function SelectMenu<
           position="popper"
           sideOffset={6}
           collisionPadding={8}
-          align="end"
-          style={{
-            width: "var(--radix-select-trigger-width)",
-            maxHeight: "500px",
-            ...contentStyle,
-          }}
+          align="center"
+          style={contentStyle}
         >
           <Select.ScrollUpButton className={scrollButtonStyles}>
             <ChevronUpIcon

package/src/components/Slider.tsx

@@ -2,7 +2,8 @@ import * as RadixSlider from "@radix-ui/react-slider";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
-import { InsetLabel } from "./Label";
+import { getInsetEndStyles } from "../utils/inputs";
+import { Label } from "./Label";
 
 type ColorScheme = "primary" | "secondary";
 
@@ -28,6 +29,8 @@ const thumbStyle = {
   width: THUMB_WIDTH,
 };
 
+const insetEndStyles = getInsetEndStyles();
+
 export const Slider = memo(function Slider({
   style,
   className,
@@ -95,7 +98,7 @@ export const Slider = memo(function Slider({
       value={arrayValue}
       onValueChange={handleValueChange}
       className={cx(
-        "flex relative items-center select-none touch-none h-[27px] rounded overflow-hidden flex-grow max-h-[27px]",
+        "flex relative items-center select-none touch-none h-input-height rounded overflow-hidden flex-grow max-h-input-height",
         className
       )}
       style={style}
@@ -105,7 +108,11 @@ export const Slider = memo(function Slider({
     >
       <RadixSlider.Track className="flex-grow h-full rounded overflow-hidden bg-input-background">
         {label && labelPosition === "inset" && (
-          <InsetLabel htmlFor={id}>{label}</InsetLabel>
+          <div className={insetEndStyles}>
+            <Label htmlFor={id} className="!text-text-disabled">
+              {label}
+            </Label>
+          </div>
         )}
         <div
           style={trackFillStyle}
@@ -117,14 +124,16 @@ export const Slider = memo(function Slider({
         />
       </RadixSlider.Track>
       {label && labelPosition === "inset" && colorScheme !== undefined && (
-        <InsetLabel className="text-white overflow-hidden" style={labelStyle}>
-          {label}
-        </InsetLabel>
+        <div className={insetEndStyles}>
+          <Label className="text-white overflow-hidden" style={labelStyle}>
+            {label}
+          </Label>
+        </div>
       )}
       <RadixSlider.Thumb
         style={thumbStyle}
         className={cx(
-          "block h-[27px] rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
+          "block h-input-height rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
           colorScheme === undefined && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"