@noya-app/noya-designsystem 0.1.50 → 0.1.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.50",
+  "version": "0.1.52",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -14,7 +14,7 @@
     "./index.css": "./dist/index.css"
   },
   "scripts": {
-    "build:css": "tailwindcss -i ./src/index.css -o ./dist/index.css",
+    "build:css": "tailwindcss -i ./src/index.css -o ./dist/index.css --postcss",
     "build": "tsup",
     "dev": "npm run build -- --watch",
     "lint": "eslint . --max-warnings 0"
@@ -22,11 +22,12 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.19",
+    "@noya-app/noya-colorpicker": "0.1.20",
     "@noya-app/noya-utils": "0.1.5",
-    "@noya-app/noya-geometry": "0.1.10",
-    "@noya-app/noya-icons": "0.1.7",
+    "@noya-app/noya-geometry": "0.1.11",
+    "@noya-app/noya-icons": "0.1.8",
     "@noya-app/noya-keymap": "0.1.3",
+    "@noya-app/noya-tailwind-config": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",
@@ -43,23 +44,25 @@
     "@radix-ui/react-tooltip": "^1.0.2",
     "@radix-ui/react-utils": "^0.0.5",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-popper": "1.2.3",
+    "@radix-ui/utils": "0.0.3",
     "immer": "9.0.5",
     "kiwi.js": "^1.1.3",
     "react-resizable-panels": "2.0.22",
     "react-window": "^1.8.8",
-    "vscode-fuzzy-scorer": "^0.0.4"
+    "vscode-fuzzy-scorer": "^0.0.4",
+    "react-virtualized": "9.22.6"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@types/react-virtualized": "^9.21.21",
+    "@types/react-virtualized": "^9.21.30",
     "@types/react-window": "^1.8.5",
-    "esbuild-plugin-react-virtualized": "1.0.4",
-    "esbuild-plugin-tailwindcss": "^1.2.1",
-    "react-virtualized": "9.22.5",
-    "tailwind-merge": "^2.5.4",
-    "tailwindcss": "^3.4.14"
+    "tailwindcss": "^3.4.17",
+    "postcss": "^8.5.3",
+    "autoprefixer": "^10.4.21",
+    "postcss-nested": "^7.0.2"
   },
   "peerDependencies": {
     "react": "*",

package/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require("tailwindcss"),
+    require("autoprefixer"),
+    require("postcss-nested"),
+  ],
+};

package/src/components/ActionMenu.tsx

@@ -8,10 +8,13 @@ import { MenuItem } from "./internal/Menu";
 type ActionMenuProps<TMenu extends string> = {
   menuItems: MenuItem<TMenu>[];
   onSelect: (action: TMenu) => void;
-  selected: boolean;
-  onOpenChange: (open: boolean) => void;
+  selected?: boolean;
+  disabled?: boolean;
+  onOpenChange?: (open: boolean) => void;
   className?: string;
   style?: React.CSSProperties;
+  variant?: "normal" | "bare";
+  color?: string;
 };
 
 export const ActionMenu = memoGeneric(function ActionMenu<
@@ -21,18 +24,21 @@ export const ActionMenu = memoGeneric(function ActionMenu<
   onSelect,
   selected,
   onOpenChange,
+  disabled,
   className,
   style,
+  variant = "normal",
+  color,
 }: ActionMenuProps<TMenu>) {
   const internalStyle = useMemo(() => {
     return {
       backgroundColor: selected
         ? cssVars.colors.primaryPastel
         : cssVars.colors.inputBackground,
-      padding: "4px",
+      padding: variant === "bare" ? 0 : 4,
       ...style,
     };
-  }, [selected, style]);
+  }, [selected, style, variant]);
 
   return (
     <DropdownMenu
@@ -44,7 +50,8 @@ export const ActionMenu = memoGeneric(function ActionMenu<
         style={internalStyle}
         className={className}
         iconName="DotsVerticalIcon"
-        color={selected ? cssVars.colors.primary : undefined}
+        color={color ?? (selected ? cssVars.colors.primary : "currentColor")}
+        disabled={disabled}
       />
     </DropdownMenu>
   );

package/src/components/Banner.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { Small } from "./Text";
@@ -9,7 +9,7 @@ const bannerStyles = {
 };
 
 export type BannerProps = {
-  label?: string;
+  label?: ReactNode;
   className?: string;
   style?: CSSProperties;
 };

package/src/components/BaseToolbar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cssVars } from "../theme";
+import { cssVarNames, cssVars } from "../theme";
 import { Divider, DividerVertical } from "./Divider";
 import { Spacer } from "./Spacer";
 
@@ -11,6 +11,10 @@ export interface BaseToolbarProps {
   showDivider?: boolean;
 }
 
+const toolbarStyle = {
+  [cssVarNames.colors.inputBackground]: "transparent",
+};
+
 export function BaseToolbar({
   children,
   left,
@@ -19,7 +23,7 @@ export function BaseToolbar({
   showDivider = true,
 }: BaseToolbarProps) {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col" style={toolbarStyle}>
       <div
         className="flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar"
         style={{

package/src/components/Breadcrumbs.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from "react";
 
 import React from "react";
+import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { Text, TextProps } from "./Text";
 
@@ -10,7 +11,7 @@ type BreadcrumbTextProps = Omit<
 >;
 
 export const BreadcrumbText = forwardRef(function BreadcrumbText(
-  { children, className, ...props }: BreadcrumbTextProps,
+  { children, className, onClick, ...props }: BreadcrumbTextProps,
   ref: React.ForwardedRef<HTMLSpanElement>
 ) {
   return (
@@ -18,12 +19,41 @@ export const BreadcrumbText = forwardRef(function BreadcrumbText(
       {...props}
       variant="small"
       className={cx(
-        "hover:text-breadcrumb-text-hover hover:cursor-pointer hover:whitespace-pre hover:select-none whitespace-pre leading-[15px] select-none",
+        "whitespace-pre leading-[15px] select-none",
+        onClick &&
+          "hover:text-breadcrumb-text-hover hover:cursor-pointer hover:whitespace-pre hover:select-none",
         className
       )}
       ref={ref}
+      onClick={onClick}
     >
       {children}
     </Text>
   );
 });
+
+const slashStyle = {
+  margin: "0 3px",
+};
+
+export const BreadcrumbSlash = () => {
+  return (
+    <svg
+      width="7"
+      height="17"
+      viewBox="0 0 7 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      opacity={0.5}
+      style={slashStyle}
+    >
+      <path
+        d="M1 16L6 1"
+        stroke={cssVars.colors.breadcrumbIcon}
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/components/Button.tsx

@@ -4,8 +4,9 @@ import React, {
   forwardRef,
   ReactNode,
   useCallback,
+  useMemo,
 } from "react";
-import { cx } from "../utils/classNames";
+import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import { Tooltip } from "./Tooltip";
 
 type ButtonVariant =
@@ -61,6 +62,7 @@ export interface ButtonRootProps {
   href?: string;
   target?: string;
   rel?: string;
+  download?: string;
 }
 
 export const Button = forwardRef(function Button(
@@ -82,28 +84,37 @@ export const Button = forwardRef(function Button(
   }: ButtonRootProps,
   forwardedRef: ForwardedRef<HTMLButtonElement>
 ) {
+  const baseClassName = cx(
+    "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all",
+    disabled ? "opacity-25" : "",
+    !className?.includes("flex") ? "flex-none" : "",
+    active
+      ? "bg-primary text-white hover:bg-primary-light active:bg-primary"
+      : variantStyles[variant],
+    sizeStyles[
+      variant === "thin"
+        ? "thin"
+        : variant === "floating" && size !== "small"
+          ? "floating"
+          : variant === "none"
+            ? "none"
+            : size
+    ]
+  );
+
+  const buttonClassName = useMemo(() => {
+    return className
+      ? mergeConflictingClassNames([baseClassName, className], {
+          categories: ["position"],
+        })
+      : baseClassName;
+  }, [className, baseClassName]);
+
   const buttonElement = (
     <Component
       ref={forwardedRef}
       id={id}
-      className={cx(
-        "no-underline leading-[1] relative border-0 outline-none select-none text-left rounded flex items-center justify-center [&>*]:pointer-events-none [-webkit-app-region:no-drag] focus:ring-2 focus:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all",
-        disabled ? "opacity-25" : "",
-        !className?.includes("flex") ? "flex-none" : "",
-        active
-          ? "bg-primary text-white hover:bg-primary-light active:bg-primary"
-          : variantStyles[variant],
-        sizeStyles[
-          variant === "thin"
-            ? "thin"
-            : variant === "floating" && size !== "small"
-              ? "floating"
-              : variant === "none"
-                ? "none"
-                : size
-        ],
-        className
-      )}
+      className={buttonClassName}
       style={style}
       tabIndex={tabIndex}
       disabled={disabled}

package/src/components/Chip.tsx

@@ -83,6 +83,7 @@ export interface ChipProps {
   style?: React.CSSProperties;
   tabIndex?: number;
   role?: string;
+  disabled?: boolean;
 }
 
 export const Chip = memo(
@@ -103,6 +104,7 @@ export const Chip = memo(
       onAdd,
       onHoverDeleteChange,
       className,
+      disabled,
       ...rest
     }: ChipProps,
     forwardedRef: React.ForwardedRef<HTMLSpanElement>
@@ -128,6 +130,7 @@ export const Chip = memo(
       monospace && "font-mono",
       variantClasses,
       isInteractive && "cursor-pointer hover:opacity-85",
+      disabled && "opacity-50",
       className
     );
 

package/src/components/Collection.tsx

@@ -1,6 +1,6 @@
+import { forwardRefGeneric } from "@noya-app/react-utils";
 import React from "react";
-import { forwardRefGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
-import { Grid, GridViewSize } from "../components/Grid";
+import { Grid } from "../components/Grid";
 import { MenuItem } from "../components/internal/Menu";
 import {
   ListView,
@@ -20,6 +20,7 @@ export type CollectionRef = {
 export type CollectionThumbnailProps<T> = {
   item: T;
   selected: boolean;
+  size?: CollectionItemSize;
 };
 
 export type CollectionRenderActionProps<T> = {
@@ -51,6 +52,7 @@ export interface CollectionProps<T, M extends string = string> {
   renderThumbnail?: ({
     item,
     selected,
+    size,
   }: CollectionThumbnailProps<T>) => React.ReactNode;
   renderAction?:
     | "menu"
@@ -66,7 +68,7 @@ export interface CollectionProps<T, M extends string = string> {
   /** Position of the detail content. Defaults to 'end'. */
   detailPosition?: "end" | "below";
   /** Size of the list items. Defaults to 'medium'. */
-  size?: GridViewSize;
+  size?: CollectionItemSize;
   /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
   thumbnailSize?: CollectionThumbnailSize;
   /** For testing: Override the hover state with a specific item ID */
@@ -105,3 +107,10 @@ export const Collection = forwardRefGeneric(function Collection<
     <List ref={ref} {...rest} />
   );
 });
+export type CollectionItemSize =
+  | "xxs"
+  | "xs"
+  | "small"
+  | "medium"
+  | "large"
+  | "xl";

package/src/components/ColorSwatch.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from "react";
+
+export type ColorSwatchSize = "xsmall" | "small" | "medium" | "large";
+
+export const colorSwatchSizeMap = {
+  xsmall: 21,
+  small: 27,
+  medium: 36,
+  large: 48,
+};
+
+type ColorSwatchProps = {
+  color: string;
+  size?: ColorSwatchSize;
+  checked?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const ColorSwatch = forwardRef(function ColorSwatch(
+  { color, size = "small", checked, style, ...props }: ColorSwatchProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const sizePx = colorSwatchSizeMap[size];
+
+  return (
+    <button
+      {...props}
+      ref={ref}
+      style={{
+        background: color,
+        width: sizePx,
+        height: sizePx,
+        borderRadius: "4px",
+        outline: checked
+          ? "2px solid rgba(0,0,0,0.2)"
+          : "1px solid rgba(0,0,0,0.1)",
+        outlineOffset: -1,
+        boxShadow: checked ? `inset 0 0 0 2px rgba(0,0,0,0.2)` : undefined,
+        ...style,
+      }}
+    />
+  );
+});

package/src/components/ColorSwatchControl.tsx

@@ -0,0 +1,92 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import React, { useMemo } from "react";
+import { cx } from "../utils/classNames";
+import {
+  ColorSwatch,
+  ColorSwatchSize,
+  colorSwatchSizeMap,
+} from "./ColorSwatch";
+
+export type TokenValue = string | { ref: string };
+
+type ColorSwatchControlProps = {
+  options: TokenValue[];
+  value?: TokenValue;
+  /** @default "small" */
+  size?: ColorSwatchSize;
+  readOnly?: boolean;
+  onValueChange?: (value: TokenValue) => void;
+  onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+  onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+  className?: string;
+  id?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+};
+
+export function ColorSwatchControl(props: ColorSwatchControlProps) {
+  const {
+    options,
+    size = "small",
+    readOnly,
+    value,
+    onValueChange,
+    onFocus,
+    onBlur,
+    disabled,
+    className,
+    id,
+    style,
+  } = props;
+  const styles = useMemo(() => {
+    return {
+      display: "grid",
+      gridTemplateColumns: `repeat(auto-fill, minmax(${colorSwatchSizeMap[size]}px, 1fr))`,
+      gap: "6px",
+      ...style,
+    };
+  }, [size, style]);
+
+  const content = (
+    <div className={className} id={id} style={styles}>
+      {options.map((option) => {
+        const item = (
+          <ColorSwatch
+            key={option as string}
+            color={option as string}
+            size={size}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            disabled={disabled}
+            // TODO: decide on "checked" visual treatment
+            className={cx(readOnly ? "cursor-default" : "cursor-pointer")}
+            checked={value === option}
+          />
+        );
+        return readOnly ? (
+          item
+        ) : (
+          <ToggleGroupPrimitive.Item
+            asChild
+            value={option as string}
+            key={option as string}
+          >
+            {item}
+          </ToggleGroupPrimitive.Item>
+        );
+      })}
+    </div>
+  );
+  return readOnly ? (
+    content
+  ) : (
+    <ToggleGroupPrimitive.Root
+      type="single"
+      value={value as string}
+      onValueChange={onValueChange}
+      className="w-full"
+    >
+      {content}
+    </ToggleGroupPrimitive.Root>
+  );
+}

package/src/components/ComboboxMenu.tsx

@@ -25,6 +25,8 @@ interface ComboboxMenuProps<T extends string> {
   listSize: Size;
   style?: React.CSSProperties;
   indented?: boolean;
+  /** @default right */
+  iconPosition?: "left" | "right";
 }
 
 export const ComboboxMenu = memoGeneric(
@@ -37,6 +39,7 @@ export const ComboboxMenu = memoGeneric(
       listSize,
       style,
       indented,
+      iconPosition = "right",
     }: ComboboxMenuProps<T>,
     forwardedRef: ForwardedRef<IVirtualizedList>
   ) {
@@ -100,6 +103,12 @@ export const ComboboxMenu = memoGeneric(
                     size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET}
                   />
                 ) : null}
+                {iconPosition === "left" && item.icon && (
+                  <>
+                    {renderIcon(item.icon)}
+                    <Spacer.Horizontal size={8} />
+                  </>
+                )}
                 {tokens.map((token, j) => (
                   <span
                     key={`${item.value}-token-${j}`}
@@ -112,7 +121,7 @@ export const ComboboxMenu = memoGeneric(
                   </span>
                 ))}
               </div>
-              {(item.shortcut || item.icon) && (
+              {(item.shortcut || (item.icon && iconPosition === "right")) && (
                 <>
                   {item.shortcut ? (
                     <KeyboardShortcut shortcut={item.shortcut} />

package/src/components/Dialog.tsx

@@ -35,7 +35,7 @@ const StyledContent = forwardRef<
       w-[90vw] max-w-[450px] max-h-[85vh] p-dialog-padding rounded-[2px] 
       font-sans text-heading5 font-normal leading-[19px] text-text-muted 
       bg-popover-background pointer-events-all z-[1000] focus:outline-none 
-      shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]
+      shadow-dialog-shadow
       flex flex-col
     `,
         className

package/src/components/FillInputField.tsx

@@ -11,7 +11,7 @@ const FillButton = forwardRef<
   <button
     ref={ref}
     className={cx(
-      `outline-none p-0 w-[50px] h-input-height rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--n-divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--n-sidebar-background),0_0_0_3px_var(--n-primary)] `,
+      `outline-none p-0 w-[50px] h-input-height rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--n-divider)_inset] bg-transparent relative focus:shadow-active-input `,
       className
     )}
     {...props}

package/src/components/Grid.tsx

@@ -1,23 +1,25 @@
-import { useFileDropTarget } from "@noya-app/react-utils";
-import React, { useImperativeHandle, useRef, useState } from "react";
 import {
   forwardRefGeneric,
   memoGeneric,
-} from "../../../noya-react-utils/src/utils/reactGenerics";
+  useFileDropTarget,
+} from "@noya-app/react-utils";
+import React, { useImperativeHandle, useRef, useState } from "react";
 import { cx } from "../utils/classNames";
 import { updateSelection } from "../utils/selection";
 import { ActionMenu } from "./ActionMenu";
-import { CollectionProps, CollectionRef } from "./Collection";
+import {
+  CollectionItemSize,
+  CollectionProps,
+  CollectionRef,
+} from "./Collection";
 import { EditableText } from "./EditableText";
 import { GridView } from "./GridView";
 import { ListView } from "./ListView";
 
-export type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
-
-export const getGridSize = (size: GridViewSize) => {
+export const getGridSize = (size: CollectionItemSize) => {
   // Define size ranges that allow items to grow/shrink within bounds
   const sizes: Record<
-    Exclude<GridViewSize, number>,
+    Exclude<CollectionItemSize, number>,
     {
       minColumnWidth: string;
       gap: number;
@@ -152,7 +154,10 @@ export const Grid = memoGeneric(
         scrollable={items.length > 0 && scrollable}
         contentClassName={cx(items.length === 0 && "flex flex-1")}
         gap={gap}
-        className={cx(isDropTargetActive && "bg-primary-pastel", className)}
+        className={cx(
+          isDropTargetActive && "bg-selected-list-item-background",
+          className
+        )}
         {...dropTargetProps}
         ref={fileDropTargetRef}
       >
@@ -173,6 +178,7 @@ export const Grid = memoGeneric(
               const thumbnail = renderThumbnail?.({
                 item,
                 selected: isSelected,
+                size,
               });
               const onOpenChange = (open: boolean) => {
                 setDropdownOpenId(open ? id : undefined);
@@ -229,7 +235,7 @@ export const Grid = memoGeneric(
                         <span
                           {...props}
                           className={cx(
-                            isSelected && "text-primary",
+                            isSelected && "text-selected-list-item-text",
                             "truncate select-none"
                           )}
                         />
@@ -237,7 +243,11 @@ export const Grid = memoGeneric(
                     </EditableText>
                   }
                   subtitle={
-                    <span className={cx(isSelected && "text-primary")}>
+                    <span
+                      className={cx(
+                        isSelected && "text-selected-list-item-text"
+                      )}
+                    >
                       {renderDetail?.(item, isSelected)}
                     </span>
                   }
@@ -271,7 +281,7 @@ export const Grid = memoGeneric(
                     <div
                       className={cx(
                         "rounded overflow-hidden flex-none flex w-full",
-                        isSelected && "text-primary"
+                        isSelected && "text-selected-list-item-text"
                       )}
                       tabIndex={-1}
                     >

package/src/components/GridView.tsx

@@ -166,7 +166,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         "flex flex-col relative rounded p-2 -m-2 text-text",
         "cursor-pointer",
         "active:opacity-70",
-        selected && "bg-primary-pastel",
+        selected && "bg-selected-list-item-background",
         hovered && "bg-list-view-hover-background",
         disabled && "opacity-50",
         showInsideDropIndicator && "ring-2 ring-primary ring-inset",