@noya-app/noya-designsystem 0.1.51 → 0.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.51",
+  "version": "0.1.53",
   "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,12 +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.2",
+    "@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",
@@ -44,6 +44,8 @@
     "@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",
@@ -57,9 +59,10 @@
     "@types/react-dom": "*",
     "@types/react-virtualized": "^9.21.30",
     "@types/react-window": "^1.8.5",
-    "esbuild-plugin-tailwindcss": "^1.2.1",
-    "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,11 +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<
@@ -22,9 +24,11 @@ export const ActionMenu = memoGeneric(function ActionMenu<
   onSelect,
   selected,
   onOpenChange,
+  disabled,
   className,
   style,
   variant = "normal",
+  color,
 }: ActionMenuProps<TMenu>) {
   const internalStyle = useMemo(() => {
     return {
@@ -46,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-pastel text-primary hover:bg-primary-pastel-light min-w-[31px]"
+      : 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/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,90 @@
+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 (
+          <ToggleGroupPrimitive.Item
+            asChild
+            value={option as string}
+            key={option as string}
+            disabled={readOnly}
+          >
+            {item}
+          </ToggleGroupPrimitive.Item>
+        );
+      })}
+    </div>
+  );
+  return (
+    <ToggleGroupPrimitive.Root
+      type="single"
+      value={value as string}
+      onValueChange={onValueChange}
+      className="w-full"
+      disabled={readOnly}
+    >
+      {content}
+    </ToggleGroupPrimitive.Root>
+  );
+}

package/src/components/ContextMenu.tsx

@@ -2,13 +2,16 @@ import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import { memoGeneric } from "@noya-app/react-utils";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import React, { ReactNode, useCallback, useMemo } from "react";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import {
   MenuItem,
   getKeyboardShortcutsForMenuItems,
   styles,
 } from "./internal/Menu";
 import { MenuViewport } from "./internal/MenuViewport";
-
 export interface MenuItemProps<T extends string> {
   value?: T;
   children: ReactNode;
@@ -60,6 +63,8 @@ function ContextMenuRoot<T extends string>({
     [items, onSelect, shouldBindKeyboardShortcuts]
   );
 
+  const portalScopeId = usePortalScopeId();
+
   useKeyboardShortcuts(keymap);
 
   // We call preventDefault both to:
@@ -85,7 +90,10 @@ function ContextMenuRoot<T extends string>({
         {children}
       </RadixContextMenu.Trigger>
       <RadixContextMenu.Portal>
-        <RadixContextMenu.Content className={styles.contentStyle}>
+        <RadixContextMenu.Content
+          {...portalScopeProps(portalScopeId)}
+          className={styles.contentStyle}
+        >
           <MenuViewport
             items={items}
             Components={Components}

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/DraggableMenuButton.tsx

@@ -1,36 +1,11 @@
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
 import { memoGeneric } from "@noya-app/react-utils";
-import React, { forwardRef, useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
 
-const DotButton = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(
-      `cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background `,
-      className
-    )}
-    {...props}
-  />
-));
-
-const Trigger = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(`pointer-events-none h-[15px] `, className)}
-    {...props}
-  />
-));
-
 /**
  * A button that opens a menu when clicked, but also allows dragging the
  */
@@ -39,11 +14,17 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
 >({
   items,
   onSelect,
+  onClick,
   isVisible = true,
+  className,
+  style,
 }: {
   items?: MenuItem<T>[];
   onSelect?: (value: T) => void;
+  onClick?: () => void;
   isVisible?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
 }) {
   const [open, setOpen] = useState(false);
   const [downPosition, setDownPosition] = useState<{
@@ -94,12 +75,18 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
   );
 
   return (
-    <DotButton
+    <div
+      className={cx(
+        "cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ",
+        className
+      )}
+      style={style}
       onPointerDownCapture={handlePointerDownCapture}
       onPointerUp={handlePointerUp}
       onClick={(event) => {
         event.stopPropagation();
         event.preventDefault();
+        onClick?.();
       }}
     >
       {items && onSelect ? (
@@ -110,17 +97,17 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
           onSelect={onSelect}
           shouldBindKeyboardShortcuts={false}
         >
-          <Trigger>
+          <div className="pointer-events-none h-[15px]">
             <DragHandleDots2Icon
               color={isVisible || open ? cssVars.colors.icon : "transparent"}
             />
-          </Trigger>
+          </div>
         </DropdownMenu>
       ) : (
         <DragHandleDots2Icon
           color={isVisible || open ? cssVars.colors.icon : "transparent"}
         />
       )}
-    </DotButton>
+    </div>
   );
 });

package/src/components/DropdownMenu.tsx

@@ -7,6 +7,10 @@ import React, {
   SyntheticEvent,
   useMemo,
 } from "react";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import { MenuProps } from "./ContextMenu";
 import { getKeyboardShortcutsForMenuItems, styles } from "./internal/Menu";
 import { MenuViewport } from "./internal/MenuViewport";
@@ -57,6 +61,8 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     contentStyle,
   } = props;
 
+  const portalScopeId = usePortalScopeId();
+
   const keymap = useMemo(
     () =>
       shouldBindKeyboardShortcuts === false
@@ -86,6 +92,7 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
       </RadixDropdownMenu.Trigger>
       <RadixDropdownMenu.Portal>
         <RadixDropdownMenu.Content
+          {...portalScopeProps(portalScopeId)}
           className={styles.contentStyle}
           side={side}
           sideOffset={sideOffset}

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

@@ -154,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}
       >
@@ -232,7 +235,7 @@ export const Grid = memoGeneric(
                         <span
                           {...props}
                           className={cx(
-                            isSelected && "text-primary",
+                            isSelected && "text-selected-list-item-text",
                             "truncate select-none"
                           )}
                         />
@@ -240,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>
                   }
@@ -274,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",