@noya-app/noya-designsystem 0.1.49 → 0.1.51

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

@@ -0,0 +1,71 @@
+import { cssVars } from "../../theme";
+
+import { ChatBubbleWithDotsIcon } from "@noya-app/noya-icons";
+import React from "react";
+import { INPUT_HEIGHT } from "../../theme";
+import { colorFromString } from "../../utils/colorFromString";
+import { Avatar, AvatarProps, AvatarStack } from "../Avatar";
+import Button from "../Button";
+import { Spacer } from "../Spacer";
+import { Small } from "../Text";
+import { Tooltip } from "../Tooltip";
+
+export const UserAvatar = ({ userId, name, image }: AvatarProps) => (
+  <Tooltip
+    key={userId}
+    content={
+      <div className="flex flex-col">
+        <Small>{name}</Small>
+      </div>
+    }
+  >
+    <Avatar size={INPUT_HEIGHT} userId={userId} name={name} image={image} />
+  </Tooltip>
+);
+
+type ConnectedUsersMenuLayoutProps = {
+  renderUsers: () => React.ReactNode;
+  currentUserId?: string;
+  launchAIAssistant?: () => void;
+  isAssistantOpen?: boolean;
+};
+
+export const ConnectedUsersMenuLayout = ({
+  renderUsers,
+  currentUserId,
+  launchAIAssistant,
+  isAssistantOpen,
+}: ConnectedUsersMenuLayoutProps) => {
+  return (
+    <div className="flex gap-1.5">
+      <AvatarStack size={INPUT_HEIGHT}>{renderUsers()}</AvatarStack>
+
+      {/* AI Assistant Avatar */}
+      {launchAIAssistant && (
+        <Tooltip
+          content={
+            <div className="flex flex-col">
+              <Small>AI Assistant</Small>
+            </div>
+          }
+        >
+          <Button
+            variant={isAssistantOpen ? "secondary" : undefined}
+            onClick={launchAIAssistant}
+            style={{
+              backgroundColor: isAssistantOpen
+                ? colorFromString(currentUserId ?? "")
+                : undefined,
+            }}
+          >
+            AI
+            <Spacer.Horizontal size={8} />
+            <ChatBubbleWithDotsIcon
+              color={isAssistantOpen ? undefined : cssVars.colors.icon}
+            />
+          </Button>
+        </Tooltip>
+      )}
+    </div>
+  );
+};

package/src/components/file-explorer/FileExplorerLayout.tsx

@@ -0,0 +1,81 @@
+import {
+  Banner,
+  BannerProps,
+  IconButton,
+  Section,
+  SectionProps,
+} from "@noya-app/noya-designsystem";
+import { forwardRefGeneric } from "@noya-app/react-utils";
+import React from "react";
+import { cx } from "../../utils/classNames";
+import {
+  Collection,
+  CollectionItemSize,
+  CollectionProps,
+  CollectionRef,
+} from "../Collection";
+
+export const FileExplorerLayout = ({
+  children,
+  className,
+  ...props
+}: SectionProps) => (
+  <Section className={cx(className, "px-3 flex-1")} {...props}>
+    {children}
+  </Section>
+);
+
+export const FileExplorerUploadButton = ({
+  showUploadButton,
+  onUpload,
+  children,
+}: {
+  showUploadButton?: boolean;
+  onUpload?: () => void;
+  children?: React.ReactNode;
+}) => (
+  <div className="flex items-center gap-2">
+    {showUploadButton && (
+      <IconButton
+        iconName="UploadIcon"
+        onClick={onUpload}
+        aria-label="Upload media"
+        tooltip="Upload media"
+      />
+    )}
+    {children}
+  </div>
+);
+
+export const FileExplorerCollection = forwardRefGeneric(
+  function FileExplorerCollection<T, M extends string = string>(
+    { ...props }: CollectionProps<T, M>,
+    ref: React.ForwardedRef<CollectionRef>
+  ) {
+    return <Collection<T, M> ref={ref} className="-mx-3 flex-1" {...props} />;
+  }
+);
+
+export const FileExplorerDetail = ({
+  selected,
+  size,
+  children,
+}: {
+  selected: boolean;
+  children: React.ReactNode;
+  size?: CollectionItemSize;
+}) => (
+  <span
+    className={cx(
+      size === "small" ? "text-list-small" : "text-sm",
+      selected ? "text-primary" : "text-text-muted"
+    )}
+  >
+    {children}
+  </span>
+);
+
+export const FileExplorerEmptyState = ({
+  label = "No files",
+  ...props
+}: BannerProps) => <Banner label={label} className="mx-3" {...props} />;

package/src/components/internal/Menu.tsx

@@ -1,7 +1,7 @@
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
 import React, { memo, ReactNode } from "react";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
-import { cx } from "../../utils/classNames";
+import { cx, mergeConflictingClassNames } from "../../utils/classNames";
 import { IScoredItem } from "../../utils/fuzzyScorer";
 import withSeparatorElements from "../../utils/withSeparatorElements";
 import { IconName } from "../Icons";
@@ -270,12 +270,17 @@ export const SectionHeader = memo(function SectionHeader({
   return (
     <span
       id={id}
-      className={cx(
-        variant === "label"
-          ? `text-label ${textStyles.label} !font-bold text-text-disabled`
-          : "font-sans text-heading5 font-normal",
-        "bg-listview-raised-background flex items-center py-1.5 px-3",
-        isFirst && "-mt-1"
+      className={mergeConflictingClassNames(
+        [
+          variant === "label"
+            ? `text-label ${textStyles.label} font-bold text-text-disabled`
+            : "font-sans text-heading5 font-normal",
+          "bg-listview-raised-background flex items-center py-1.5 px-3",
+          isFirst && "-mt-1",
+        ],
+        {
+          categories: ["font"],
+        }
       )}
     >
       {indented && (

package/src/components/internal/TextInput.tsx

@@ -126,6 +126,8 @@ type SubmittableProps = Props & {
   onSubmit: (value: string) => void;
   allowSubmittingWithSameValue?: boolean;
   submitAutomaticallyAfterDelay?: number;
+  /** @default true */
+  submitOnBlur?: boolean;
 };
 
 const SubmittableTextInput = forwardRef(function SubmittableTextInput(
@@ -138,6 +140,7 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
     onFocusCapture,
     allowSubmittingWithSameValue = false,
     submitAutomaticallyAfterDelay,
+    submitOnBlur = true,
     ...rest
   }: SubmittableProps,
   forwardedRef: ForwardedRef<HTMLInputElement>
@@ -218,9 +221,11 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
 
       onFocusChange?.(false);
 
-      handleSubmit();
+      if (submitOnBlur) {
+        handleSubmit();
+      }
     },
-    [onBlur, onFocusChange, handleSubmit]
+    [onBlur, onFocusChange, handleSubmit, submitOnBlur]
   );
 
   const handleFocusCapture = useCallback(

package/src/components/pipeline/PipelineResultLayout.tsx

@@ -0,0 +1,32 @@
+import { Link1Icon } from "@noya-app/noya-icons";
+import React from "react";
+import { DividerVertical } from "../Divider";
+import { Small } from "../Text";
+
+export const PipelineResultLink = ({ url }: { url: string }) => {
+  return (
+    <div className="flex flex-col gap-0.5">
+      {/* <Label position="start">{name}</Label> */}
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="flex text-primary hover:opacity-80 border border-divider rounded-md"
+      >
+        <div className="flex gap-1 items-center p-2">
+          <Link1Icon className="w-[15px] h-[15px] flex-shrink-0" />
+        </div>
+        <DividerVertical />
+        <Small className="truncate p-2 flex-1">{url}</Small>
+      </a>
+    </div>
+  );
+};
+
+export const PipelineResultLayout = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <div className="flex flex-col gap-2">{children}</div>;
+};

package/src/index.css

@@ -3,125 +3,132 @@
 @tailwind utilities;
 
 :root {
-  --logo-fill: rgb(150, 152, 172);
-  --logo-highlight: rgb(150, 152, 172);
-  --background: rgb(255, 255, 255);
-  --text: rgb(38, 48, 83);
-  --text-muted: rgb(107, 113, 136);
-  --text-subtle: rgb(117, 121, 129);
-  --text-disabled: rgb(150, 152, 172);
-  --text-decorative-light: rgb(168, 185, 212);
-  --divider-subtle: rgba(30, 50, 100, 0.04);
-  --divider: rgba(30, 50, 100, 0.07);
-  --divider-strong: rgba(30, 50, 100, 0.09);
-  --primary: rgb(103, 70, 255);
-  --primary-light: rgb(147, 86, 255);
-  --primary-pastel: rgba(234, 230, 255);
-  --secondary: rgb(0, 151, 117);
-  --secondary-light: rgb(0, 160, 129);
-  --secondary-pastel: rgb(205, 238, 231);
-  --secondary-bright: #0ab557;
-  --input-background-light: rgb(243, 245, 249);
-  --code-background: rgb(250, 250, 250);
-  --code-background-dark: #435080;
-  --selected-background: rgb(242, 245, 250);
-  --breadcrumb-text: rgb(107, 113, 136);
-  --breadcrumb-text-hover: rgb(117, 121, 129);
-  --breadcrumb-icon: rgb(129, 131, 165);
-  --canvas-background: rgb(249, 249, 249);
-  --canvas-grid: rgba(0, 0, 0, 0.05);
-  --sidebar-background: rgb(255, 255, 255);
-  --sidebar-background-transparent: rgba(255, 255, 255, 0.85);
-  --popover-background: rgb(252, 252, 252);
-  --popover-divider: transparent;
-  --listview-raised-background: rgba(0, 0, 0, 0.03);
-  --listview-editing-background: #fff;
-  --input-background: rgb(240, 242, 246);
-  --list-view-hover-background: rgb(244, 246, 250);
-  --list-view-thumbnail-background: var(--input-background);
-  --slider-thumb-background: white;
-  --slider-border: #9698ac;
-  --mask: rgb(12, 193, 67);
-  --transparent-checker: rgba(255, 255, 255, 0.8);
-  --scrollbar: rgba(199, 199, 199, 0.8);
-  --placeholder-dots: rgba(0, 0, 0, 0.3);
-  --drag-outline: rgb(103, 70, 255);
-  --active-background: rgba(0, 0, 0, 0.1);
-  --thumbnail-background: #f0efff;
-  --thumbnail-shadow: #d3ceed66;
-  --inline-code-text: rgb(103, 70, 255);
-  --inline-code-background: rgb(240, 242, 246);
-  --text-link: rgb(103, 70, 255);
-  --text-link-focused: rgb(147, 86, 255);
-  --inset-top: 46px;
-  --sidebar-width: 260px;
-  --toolbar-height: 46px;
-  --toolbar-separator: 8px;
-  --inspector-h-separator: 8px;
-  --inspector-v-separator: 10px;
-  --dialog-padding: 16px;
-  --input-height: 27px;
-  --icon: rgb(129, 131, 165);
-  --icon-selected: rgb(220, 220, 220);
-  --warning: rgb(251, 211, 0);
-  --segmented-control-item: rgb(139, 139, 139);
-  --dot: rgba(0, 0, 0, 0.25);
-  --row-highlight: #3390ff10;
-  --table-row-background: var(--background);
-  --interactable-z-index: 2;
-  --label-z-index: 3;
-  --menu-z-index: 5000;
-  --chip-primary-bg: rgba(238, 229, 255, 0.2);
-  --chip-secondary-bg: rgba(205, 238, 231, 0.2);
-  --chip-error-bg: rgba(255, 219, 219, 0.2);
-  --chip-default-bg: rgba(0, 0, 0, 0.1);
-  --chip-primary-shadow: rgb(238, 229, 255);
-  --chip-secondary-shadow: rgb(205, 238, 231);
-  --chip-error-shadow: rgb(255, 219, 219);
-  --chip-default-shadow: rgb(0, 0, 0);
-  --floating-button: rgb(248, 248, 250);
-  --block-border: rgb(184, 201, 218);
-  --block-highlight: rgb(255, 165, 0);
+  --n-logo-fill: rgb(150, 152, 172);
+  --n-logo-highlight: rgb(150, 152, 172);
+  --n-background: rgb(255, 255, 255);
+  --n-text: rgb(38, 48, 83);
+  --n-text-muted: rgb(107, 113, 136);
+  --n-text-subtle: rgb(117, 121, 129);
+  --n-text-disabled: rgb(150, 152, 172);
+  --n-text-decorative-light: rgb(168, 185, 212);
+  --n-divider-subtle: rgba(30, 50, 100, 0.04);
+  --n-divider: rgba(30, 50, 100, 0.07);
+  --n-divider-strong: rgba(30, 50, 100, 0.09);
+  --n-primary: rgb(103, 70, 255);
+  --n-primary-light: rgb(147, 86, 255);
+  --n-primary-pastel: rgba(234, 230, 255);
+  --n-secondary: rgb(0, 151, 117);
+  --n-secondary-light: rgb(0, 160, 129);
+  --n-secondary-pastel: rgb(205, 238, 231);
+  --n-secondary-bright: #0ab557;
+  --n-input-background-light: rgb(243, 245, 249);
+  --n-code-background: rgb(250, 250, 250);
+  --n-code-background-dark: #435080;
+  --n-selected-background: rgb(242, 245, 250);
+  --n-breadcrumb-text: rgb(107, 113, 136);
+  --n-breadcrumb-text-hover: rgb(117, 121, 129);
+  --n-breadcrumb-icon: rgb(129, 131, 165);
+  --n-canvas-background: rgb(249, 249, 249);
+  --n-canvas-grid: rgba(0, 0, 0, 0.05);
+  --n-sidebar-background: rgb(255, 255, 255);
+  --n-sidebar-background-transparent: rgba(255, 255, 255, 0.85);
+  --n-popover-background: rgb(252, 252, 252);
+  --n-popover-divider: transparent;
+  --n-listview-raised-background: rgba(0, 0, 0, 0.03);
+  --n-listview-editing-background: #fff;
+  --n-input-background: rgb(240, 242, 246);
+  --n-list-view-hover-background: rgb(244, 246, 250);
+  --n-list-view-thumbnail-background: var(--n-input-background);
+  --n-slider-thumb-background: white;
+  --n-slider-border: #9698ac;
+  --n-mask: rgb(12, 193, 67);
+  --n-transparent-checker: rgba(255, 255, 255, 0.8);
+  --n-scrollbar: rgba(199, 199, 199, 0.8);
+  --n-placeholder-dots: rgba(0, 0, 0, 0.3);
+  --n-drag-outline: rgb(103, 70, 255);
+  --n-active-background: rgba(0, 0, 0, 0.1);
+  --n-thumbnail-background: #f0efff;
+  --n-thumbnail-shadow: #d3ceed66;
+  --n-inline-code-text: rgb(103, 70, 255);
+  --n-inline-code-background: rgb(240, 242, 246);
+  --n-text-link: rgb(103, 70, 255);
+  --n-text-link-focused: rgb(147, 86, 255);
+  --n-inset-top: 46px;
+  --n-sidebar-width: 260px;
+  --n-toolbar-height: 46px;
+  --n-toolbar-separator: 8px;
+  --n-inspector-h-separator: 8px;
+  --n-inspector-v-separator: 10px;
+  --n-dialog-padding: 16px;
+  --n-input-height: 27px;
+  --n-icon: rgb(129, 131, 165);
+  --n-icon-selected: rgb(220, 220, 220);
+  --n-warning: rgb(251, 211, 0);
+  --n-segmented-control-item: rgb(139, 139, 139);
+  --n-dot: rgba(0, 0, 0, 0.25);
+  --n-row-highlight: #3390ff10;
+  --n-table-row-background: var(--n-background);
+  --n-interactable-z-index: 2;
+  --n-label-z-index: 3;
+  --n-menu-z-index: 5000;
+  --n-chip-primary-bg: rgba(238, 229, 255, 0.2);
+  --n-chip-secondary-bg: rgba(205, 238, 231, 0.2);
+  --n-chip-error-bg: rgba(255, 219, 219, 0.2);
+  --n-chip-default-bg: rgba(0, 0, 0, 0.1);
+  --n-chip-primary-shadow: rgb(238, 229, 255);
+  --n-chip-secondary-shadow: rgb(205, 238, 231);
+  --n-chip-error-shadow: rgb(255, 219, 219);
+  --n-chip-default-shadow: rgb(0, 0, 0);
+  --n-floating-button: rgb(248, 248, 250);
+  --n-block-border: rgb(184, 201, 218);
+  --n-block-highlight: rgb(255, 165, 0);
+  --n-visual-editor-line-placeholder-content: "Write or press / for commands";
 }
 
 [data-theme="dark"] {
-  --background: #111111;
-  --logo-fill: rgb(248, 248, 250);
-  --logo-highlight: rgb(248, 248, 250);
-  --text: rgb(248, 248, 250);
-  --text-muted: rgb(180, 179, 182);
-  --text-subtle: rgb(180, 179, 182);
-  --text-disabled: rgb(115, 114, 126);
-  --divider-subtle: rgba(255, 255, 255, 0.04);
-  --divider: rgba(255, 255, 255, 0.08);
-  --divider-strong: rgba(0, 0, 0, 1);
-  --primary: rgb(119, 66, 255);
-  --primary-light: rgb(134, 86, 255);
-  --secondary-bright: #36fe91;
-  --input-background: rgba(181, 178, 255, 0.08);
-  --input-background-light: rgba(181, 178, 255, 0.1);
-  --code-background: rgb(20, 19, 23);
-  --canvas-background: rgb(20, 19, 23);
-  --canvas-grid: rgba(0, 0, 0, 0.1);
-  --sidebar-background: rgb(34, 33, 39);
-  --sidebar-background-transparent: rgba(34, 33, 39, 0.95);
-  --popover-background: rgb(34, 33, 39);
-  --popover-divider: rgba(255, 255, 255, 0.08);
-  --listview-raised-background: rgba(181, 178, 255, 0.1);
-  --listview-editing-background: #000;
-  --list-view-hover-background: var(--input-background-light);
-  --list-view-thumbnail-background: var(--input-background);
-  --slider-thumb-background: var(--input-background-light);
-  --slider-border: var(--divider);
-  --mask: rgb(102, 187, 106);
-  --transparent-checker: rgba(255, 255, 255, 0.3);
-  --scrollbar: rgba(199, 199, 199, 0.2);
-  --placeholder-dots: rgba(255, 255, 255, 0.3);
-  --drag-outline: white;
-  --active-background: rgba(181, 178, 255, 0.08);
-  --thumbnail-background: #1f1d33;
-  --thumbnail-shadow: #1f1d3366;
-  --dot: rgba(255, 255, 255, 0.15);
-  --table-row-background: var(--sidebar-background);
-  --floating-button: #333333;
+  --n-background: #111111;
+  --n-logo-fill: rgb(248, 248, 250);
+  --n-logo-highlight: rgb(248, 248, 250);
+  --n-text: rgb(248, 248, 250);
+  --n-text-muted: rgb(180, 179, 182);
+  --n-text-subtle: rgb(180, 179, 182);
+  --n-text-disabled: rgb(115, 114, 126);
+  --n-divider-subtle: rgba(255, 255, 255, 0.04);
+  --n-divider: rgba(255, 255, 255, 0.08);
+  --n-divider-strong: rgba(0, 0, 0, 1);
+  --n-primary: rgb(119, 66, 255);
+  --n-primary-light: rgb(134, 86, 255);
+  --n-secondary-bright: #36fe91;
+  --n-input-background: rgba(181, 178, 255, 0.08);
+  --n-input-background-light: rgba(181, 178, 255, 0.1);
+  --n-code-background: rgb(20, 19, 23);
+  --n-canvas-background: rgb(20, 19, 23);
+  --n-canvas-grid: rgba(0, 0, 0, 0.1);
+  --n-sidebar-background: rgb(34, 33, 39);
+  --n-sidebar-background-transparent: rgba(34, 33, 39, 0.95);
+  --n-popover-background: rgb(34, 33, 39);
+  --n-popover-divider: rgba(255, 255, 255, 0.08);
+  --n-listview-raised-background: rgba(181, 178, 255, 0.1);
+  --n-listview-editing-background: #000;
+  --n-list-view-hover-background: var(--n-input-background-light);
+  --n-list-view-thumbnail-background: var(--n-input-background);
+  --n-slider-thumb-background: var(--n-input-background-light);
+  --n-slider-border: var(--n-divider);
+  --n-mask: rgb(102, 187, 106);
+  --n-transparent-checker: rgba(255, 255, 255, 0.3);
+  --n-scrollbar: rgba(199, 199, 199, 0.2);
+  --n-placeholder-dots: rgba(255, 255, 255, 0.3);
+  --n-drag-outline: white;
+  --n-active-background: rgba(181, 178, 255, 0.08);
+  --n-thumbnail-background: #1f1d33;
+  --n-thumbnail-shadow: #1f1d3366;
+  --n-dot: rgba(255, 255, 255, 0.15);
+  --n-table-row-background: var(--n-sidebar-background);
+  --n-floating-button: #333333;
+}
+
+.visual-editor-line-placeholder::after {
+  content: var(--n-visual-editor-line-placeholder-content);
+  color: var(--n-text-disabled);
+  pointer-events: none;
 }

package/src/index.tsx

@@ -1,8 +1,10 @@
 // Components
 export * from "./components/ActionMenu";
 export * from "./components/ActivityIndicator";
+export * from "./components/ai-assistant/AIAssistantLayout";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
+export * from "./components/Banner";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Checkbox";
@@ -11,6 +13,7 @@ export * from "./components/Collection";
 export * from "./components/Combobox";
 export * from "./components/ComboboxMenu";
 export * from "./components/CommandPalette";
+export * from "./components/connected-users-menu/ConnectedUsersMenuLayout";
 export * from "./components/ContextMenu";
 export * from "./components/Dialog";
 export * from "./components/Divider";
@@ -19,6 +22,7 @@ export * from "./components/Drawer";
 export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
 export * from "./components/Fade";
+export * from "./components/file-explorer/FileExplorerLayout";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
@@ -44,10 +48,12 @@ export * from "./components/ListView";
 export * from "./components/MediaThumbnail";
 export * from "./components/Message";
 export * from "./components/NoyaLogo";
+export * from "./components/pipeline/PipelineResultLayout";
 export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/ScrollArea";
 export * from "./components/SearchCompletionMenu";
+export * from "./components/Section";
 export * from "./components/SegmentedControl";
 export * from "./components/SelectMenu";
 export * from "./components/Slider";
@@ -85,6 +91,7 @@ export * from "./utils/getGradientBackground";
 export * from "./utils/colorFromString";
 export * from "./utils/combobox";
 export * from "./utils/fuzzyScorer";
+export * from "./utils/moveTreeItem";
 export * from "./utils/selection";
 export * from "./utils/sketchColor";
 export * from "./utils/sketchPattern";

package/src/theme/index.ts

@@ -1,4 +1,4 @@
-import tailwindConfig from "../../tailwind.config";
+import tailwindConfig from "@noya-app/noya-tailwind-config";
 import { convertKebabToCamelCase } from "./themeUtils";
 
 export type Theme = (typeof tailwindConfig.theme)["extend"];

package/src/utils/classNames.ts

@@ -1,18 +1,43 @@
-import tailwindConfig from "../../tailwind.config";
+import tailwindConfig from "@noya-app/noya-tailwind-config";
 
 type ClassNameItem = string | number | BigInt | boolean | null | undefined;
-type Category = "text" | "flex";
+type Category = "text" | "color" | "font" | "flex";
 type Options = {
   categories?: Category[];
 };
 
+const colorKeys = Object.keys(tailwindConfig.theme.extend.colors).map(
+  (key) => `text-${key}`
+);
+const colorKeysSet = new Set(colorKeys);
 const textKeys = Object.keys(tailwindConfig.theme.extend.fontSize).map(
   (key) => `text-${key}`
 );
 const textKeysSet = new Set(textKeys);
+const fontKeys = [
+  "thin",
+  "extralight",
+  "light",
+  "normal",
+  "medium",
+  "semibold",
+  "bold",
+  "extra-bold",
+  "black",
+].map((key) => `font-${key}`);
+const fontKeysSet = new Set(fontKeys);
+const flexKeysSet = new Set([
+  "flex-auto",
+  "flex-none",
+  "flex-[0_0_auto]",
+  "flex-1",
+]);
+
 const keyMap: Record<Category, Set<string>> = {
   text: textKeysSet,
-  flex: new Set(["flex-auto", "flex-none", "flex-[0_0_auto]", "flex-1"]),
+  flex: flexKeysSet,
+  color: colorKeysSet,
+  font: fontKeysSet,
 };
 
 export function cx(...args: ClassNameItem[]): string {

package/src/utils/combobox.ts

@@ -168,12 +168,12 @@ export class ComboboxState<T extends string> {
 
   moveSelection(direction: "up" | "down") {
     const filteredItems = this.getFilteredItems();
-    this.selectedIndex = getNextIndex(
-      filteredItems,
-      this.selectedIndex,
-      direction === "down" ? "next" : "previous",
-      (item) => isNonSelectableMenuItem(item)
-    );
+    this.selectedIndex = getNextIndex({
+      items: filteredItems,
+      currentIndex: this.selectedIndex,
+      direction: direction === "down" ? "next" : "previous",
+      isDisabled: (item) => isNonSelectableMenuItem(item),
+    });
     this.notifyChange();
   }
 
@@ -257,7 +257,7 @@ export class ComboboxState<T extends string> {
   }
 }
 
-function filterWithGroupedSections<T extends string>(
+export function filterWithGroupedSections<T extends string>(
   items: MenuItem<T>[],
   query: string
 ): ScoredMenuItem<T>[] {
@@ -341,12 +341,17 @@ function filterWithGroupedSections<T extends string>(
   return result;
 }
 
-export function getNextIndex<T>(
-  items: T[],
-  currentIndex: number,
-  direction: "next" | "previous",
-  isDisabled: (item: T) => boolean
-): number {
+export function getNextIndex<T>({
+  items,
+  currentIndex,
+  direction,
+  isDisabled,
+}: {
+  items: T[];
+  currentIndex: number;
+  direction: "next" | "previous";
+  isDisabled: (item: T) => boolean;
+}): number {
   // Make sure the current index is within bounds
   currentIndex =
     currentIndex < 0