@noya-app/noya-designsystem 0.1.62 → 0.1.64

package/src/components/Button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   CSSProperties,
   ForwardedRef,
@@ -12,29 +14,27 @@ import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 import type { MenuItemIcon } from "./internal/Menu";
 
-type ButtonVariant =
-  | "normal"
-  | "primary"
-  | "secondary"
-  | "secondaryBright"
-  | "thin"
-  | "floating"
-  | "none";
+type ButtonVariant = "normal" | "thin" | "floating" | "none" | "ghost";
 
 type ButtonSize = "small" | "normal" | "large" | "floating";
 
-const variantStyles: Record<ButtonVariant, string> = {
-  normal:
-    "bg-button-background text-button-text hover:bg-button-background-hover active:bg-button-background-active min-w-[31px]",
-  primary:
-    "bg-primary text-white hover:bg-primary-light active:bg-primary min-w-[31px]",
+type ButtonColorScheme = "primary" | "secondary";
+
+const colorSchemeStyles: Record<ButtonColorScheme | "default", string> = {
+  default:
+    "bg-button-background text-button-text hover:bg-button-background-hover active:bg-button-background-active",
+  primary: "bg-primary text-white hover:bg-primary-light active:bg-primary",
   secondary:
-    "bg-secondary text-white hover:bg-secondary-light active:bg-secondary min-w-[31px]",
-  secondaryBright: "bg-[#0ab557] text-white hover:opacity-80 active:opacity-90",
+    "bg-secondary text-white hover:bg-secondary-light active:bg-secondary",
+};
+
+const variantStyles: Record<ButtonVariant, string> = {
+  normal: "",
   floating:
     "bg-floating-button text-text shadow-[0_1px_2px_rgba(0,0,0,0.1)] hover:opacity-80 active:opacity-90",
   thin: "bg-transparent text-text hover:bg-input-background-light",
   none: "bg-transparent text-text hover:bg-input-background-light",
+  ghost: "bg-transparent text-text hover:bg-input-background-light",
 };
 
 const sizeStyles: Record<ButtonSize | "thin" | "none", string> = {
@@ -46,16 +46,21 @@ const sizeStyles: Record<ButtonSize | "thin" | "none", string> = {
   none: "py-0 px-0",
 };
 
-export interface ButtonRootProps {
+export interface ButtonProps
+  extends React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
   id?: string;
   className?: string;
   style?: CSSProperties;
   tabIndex?: number;
   icon?: MenuItemIcon;
   iconRight?: MenuItemIcon;
-  children: ReactNode;
+  children?: ReactNode;
   active?: boolean;
   disabled?: boolean;
+  colorScheme?: ButtonColorScheme;
   variant?: ButtonVariant;
   size?: ButtonSize;
   tooltip?: ReactNode;
@@ -81,6 +86,7 @@ export const Button = forwardRef(function Button(
     tooltip,
     active = false,
     disabled = false,
+    colorScheme: colorSchemeProp,
     variant = "normal",
     size = "normal",
     contentStyle,
@@ -88,15 +94,18 @@ export const Button = forwardRef(function Button(
     children,
     as: Component = "button",
     ...rest
-  }: ButtonRootProps,
+  }: ButtonProps,
   forwardedRef: ForwardedRef<HTMLButtonElement>
 ) {
+  const colorScheme = colorSchemeProp ?? "default";
+
   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",
+    "no-underline leading-[1] relative 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",
+    variant === "ghost" ? "border" : "border-0",
     disabled ? "opacity-25" : "",
     !className?.includes("flex") ? "flex-none" : "",
     active
-      ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover min-w-[31px]"
+      ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover"
       : variantStyles[variant],
     sizeStyles[
       variant === "thin"
@@ -106,7 +115,12 @@ export const Button = forwardRef(function Button(
           : variant === "none"
             ? "none"
             : size
-    ]
+    ],
+    variant === "normal" && (children ? "min-w-[31px]" : "min-w-[27px]"),
+    variant === "ghost"
+      ? "border-solid border-input-background hover:bg-input-background-light"
+      : colorSchemeStyles[colorScheme],
+    !children && (icon || iconRight) && !(icon && iconRight) && "w-[27px]"
   );
 
   const buttonClassName = useMemo(() => {

package/src/components/Chip.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
 import React, { forwardRef, memo } from "react";
 import { useHover } from "../hooks/useHover";

package/src/components/Collection.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRefGeneric } from "@noya-app/react-utils";
 import React from "react";
 import { Grid } from "../components/Grid";
@@ -35,6 +37,7 @@ export interface CollectionProps<T, M extends string = string> {
   items: T[];
   getId: (item: T) => string;
   getName: (item: T) => string;
+  getHref?: (item: T) => string;
   getExpanded?: (item: T) => boolean | undefined;
   getPlaceholder?: (item: T) => string;
   /**
@@ -90,7 +93,7 @@ export interface CollectionProps<T, M extends string = string> {
   viewType?: CollectionViewType;
   onClickItem?: (itemId: string) => void;
   onDoubleClickItem?: (itemId: string) => void;
-  renderEmptyState?: () => React.ReactElement;
+  renderEmptyState?: () => React.ReactElement<any>;
   /** @default false */
   sortable?: boolean;
   dragIndicatorStyle?: ListViewRowProps<M>["dragIndicatorStyle"];

package/src/components/ColorSwatch.tsx

@@ -1,9 +1,16 @@
+import { getContrastColorForBackground } from "@noya-app/noya-colorpicker";
+import { CheckIcon } from "@noya-app/noya-icons";
 import React, { forwardRef } from "react";
-import { cssVars } from "../theme";
 
-export type ColorSwatchSize = "xsmall" | "small" | "medium" | "large";
+export type ColorSwatchSize =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large";
 
-export const colorSwatchSizeMap = {
+export const colorSwatchSizeMap: Record<ColorSwatchSize, number> = {
+  xxsmall: 15,
   xsmall: 21,
   small: 27,
   medium: 36,
@@ -14,32 +21,45 @@ type ColorSwatchProps = {
   color: string;
   size?: ColorSwatchSize;
   checked?: boolean;
+  as?: React.ElementType;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const ColorSwatch = forwardRef(function ColorSwatch(
-  { color, size = "small", checked, style, ...props }: ColorSwatchProps,
+  {
+    color,
+    size = "small",
+    checked,
+    style,
+    as: Component = "button",
+    ...props
+  }: ColorSwatchProps,
   ref: React.ForwardedRef<HTMLButtonElement>
 ) {
   const sizePx = colorSwatchSizeMap[size];
+  const checkedColor = getContrastColorForBackground(color);
 
   return (
-    <button
-      {...props}
-      ref={ref}
-      style={{
-        background: color,
-        width: sizePx,
-        height: sizePx,
-        borderRadius: "4px",
-        outline: checked
-          ? `2px solid ${cssVars.colors.primary}`
-          : "1px solid rgba(0,0,0,0.1)",
-        outlineOffset: -1,
-        boxShadow: checked
-          ? `inset 0 0 0 2px ${cssVars.colors.background}`
-          : undefined,
-        ...style,
-      }}
-    />
+    <div className="relative" style={{ width: sizePx, height: sizePx }}>
+      <Component
+        {...props}
+        ref={ref}
+        style={{
+          display: "inline-block",
+          background: color,
+          width: sizePx,
+          height: sizePx,
+          borderRadius: "4px",
+          outline: "1px solid rgba(0,0,0,0.1)",
+          outlineOffset: -1,
+          ...style,
+        }}
+      />
+      {checked && (
+        <CheckIcon
+          color={checkedColor}
+          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        />
+      )}
+    </div>
   );
 });

package/src/components/ColorSwatchControl.tsx

@@ -1,4 +1,6 @@
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+"use client";
+
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import React, { useMemo } from "react";
 import { cx } from "../utils/classNames";
 import {
@@ -52,7 +54,7 @@ export function ColorSwatchControl(props: ColorSwatchControlProps) {
       {options.map((option) => {
         const item = (
           <ColorSwatch
-            key={option as string}
+            key={`${option as string}-color-swatch`}
             color={option as string}
             size={size}
             onFocus={onFocus}
@@ -67,7 +69,7 @@ export function ColorSwatchControl(props: ColorSwatchControlProps) {
           <ToggleGroupPrimitive.Item
             asChild
             value={option as string}
-            key={option as string}
+            key={`${option as string}-toggle-group-item`}
             disabled={readOnly}
           >
             {item}

package/src/components/Combobox.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, {

package/src/components/CommandPalette.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Dialog } from "@noya-app/noya-designsystem";
 import { AutoSizer } from "@noya-app/react-utils";
 import React, { memo } from "react";

package/src/components/ContextMenu.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import { memoGeneric } from "@noya-app/react-utils";
-import * as RadixContextMenu from "@radix-ui/react-context-menu";
+import { ContextMenu as RadixContextMenu } from "radix-ui";
 import React, { ReactNode, useCallback, useMemo } from "react";
 import {
   portalScopeProps,

package/src/components/Dialog.tsx

@@ -1,4 +1,6 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+"use client";
+
+import { Dialog as DialogPrimitive } from "radix-ui";
 import React, {
   ComponentProps,
   ForwardedRef,

package/src/components/DimensionInput.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { round } from "@noya-app/noya-utils";
 import * as React from "react";
 import { InputField } from "./InputField";
@@ -51,7 +53,7 @@ export const DimensionInput = React.memo(function DimensionInput({
   );
 
   return (
-    <LabeledField label={label} labelPosition="inset">
+    <LabeledField label={label} labelType="inset">
       <InputField.Root id={id} width={size}>
         <InputField.NumberInput
           value={value === undefined ? value : round(value, 2)}

package/src/components/Divider.tsx

@@ -12,7 +12,7 @@ interface DividerProps {
 
 export const Divider = memo(function Divider({
   variant = "normal",
-  overflow = 0,
+  overflow,
   className,
   style,
   ...props
@@ -29,8 +29,10 @@ export const Divider = memo(function Divider({
         className
       )}
       style={{
-        marginLeft: `-${overflow}px`,
-        marginRight: `-${overflow}px`,
+        ...(typeof overflow === "number" && {
+          marginLeft: `-${overflow}px`,
+          marginRight: `-${overflow}px`,
+        }),
         ...style,
       }}
       {...props}
@@ -40,7 +42,7 @@ export const Divider = memo(function Divider({
 
 export const DividerVertical = memo(function DividerVertical({
   variant = "normal",
-  overflow = 0,
+  overflow,
   className,
   style,
   ...props
@@ -57,8 +59,10 @@ export const DividerVertical = memo(function DividerVertical({
         className
       )}
       style={{
-        marginTop: `-${overflow}px`,
-        marginBottom: `-${overflow}px`,
+        ...(typeof overflow === "number" && {
+          marginTop: `-${overflow}px`,
+          marginBottom: `-${overflow}px`,
+        }),
         ...style,
       }}
       {...props}

package/src/components/DraggableMenuButton.tsx

@@ -1,5 +1,10 @@
+"use client";
+
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import { memoGeneric } from "@noya-app/react-utils";
+import {
+  memoGeneric,
+  useControlledOrUncontrolled,
+} from "@noya-app/react-utils";
 import React, { useCallback, useState } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
@@ -12,21 +17,33 @@ import { MenuItem } from "./internal/Menu";
 export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
   T extends string,
 >({
+  open: openProp,
+  onOpenChange: onOpenChangeProp,
   items,
   onSelect,
   onClick,
   isVisible = true,
   className,
   style,
+  ...rest
 }: {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
   items?: MenuItem<T>[];
   onSelect?: (value: T) => void;
   onClick?: () => void;
   isVisible?: boolean;
   className?: string;
   style?: React.CSSProperties;
-}) {
-  const [open, setOpen] = useState(false);
+} & Omit<
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  "onSelect"
+>) {
+  const [open, setOpen] = useControlledOrUncontrolled({
+    value: openProp,
+    onChange: onOpenChangeProp,
+    defaultValue: false,
+  });
   const [downPosition, setDownPosition] = useState<{
     x: number;
     y: number;
@@ -64,7 +81,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
 
       setDownPosition(null);
     },
-    [downPosition, open]
+    [downPosition, open, setOpen]
   );
 
   const handleOpenChange = useCallback(
@@ -76,6 +93,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
 
   return (
     <div
+      {...rest}
       className={cx(
         "cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ",
         className

package/src/components/Drawer.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useControlledOrUncontrolled } from "@noya-app/react-utils";
-import * as Dialog from "@radix-ui/react-dialog";
+import { Dialog } from "radix-ui";
 import * as React from "react";
 import { useImperativeHandle } from "react";
 import { cx } from "../utils/classNames";
@@ -14,6 +16,8 @@ export type DrawerProps = {
   className?: string;
   id?: string;
   style?: React.CSSProperties;
+  overlayClassName?: string;
+  overlayStyle?: React.CSSProperties;
   positioning?: "fixed" | "absolute";
   side?: "left" | "right";
   portalled?: boolean;
@@ -35,6 +39,8 @@ export const Drawer = React.memo(
       side = "left",
       portalled = true,
       portalContainer,
+      overlayClassName,
+      overlayStyle,
     }: DrawerProps,
     forwardedRef: React.ForwardedRef<SidebarRef>
   ) {
@@ -61,14 +67,16 @@ export const Drawer = React.memo(
         <Dialog.Overlay
           className={cx(
             "inset-0 bg-black/50",
-            positioning === "absolute" ? "absolute" : "fixed"
+            positioning === "absolute" ? "absolute" : "fixed",
+            overlayClassName
           )}
+          style={overlayStyle}
         />
         <Dialog.Content
           id={id}
           style={style}
           className={cx(
-            `top-0 bottom-0 z-50 overflow-y-auto bg-sidebar-background rounded-none max-h-none max-w-none sm:max-w-sm w-full border-divider-strong`,
+            `top-0 bottom-0 z-50 overflow-y-auto bg-sidebar-background rounded-none max-h-none max-w-none sm:!max-w-sm w-full border-divider-strong`,
             positioning === "absolute" ? "absolute" : "fixed",
             side === "left" ? "left-0 border-r" : "right-0 border-l",
             className

package/src/components/DropdownMenu.tsx

@@ -1,9 +1,16 @@
+"use client";
+
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
-import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+import {
+  forwardRefGeneric,
+  memoGeneric,
+  useControlledOrUncontrolled,
+} from "@noya-app/react-utils";
+import { DropdownMenu as RadixDropdownMenu } from "radix-ui";
 import React, {
   ComponentProps,
   ForwardedRef,
+  ReactNode,
   SyntheticEvent,
   useMemo,
 } from "react";
@@ -11,6 +18,7 @@ import {
   portalScopeProps,
   usePortalScopeId,
 } from "../contexts/PortalScopeContext";
+import Button, { ButtonProps } from "./Button";
 import { MenuProps } from "./ContextMenu";
 import { getKeyboardShortcutsForMenuItems, styles } from "./internal/Menu";
 import { MenuViewport } from "./internal/MenuViewport";
@@ -19,7 +27,13 @@ import { MenuViewport } from "./internal/MenuViewport";
  * Root
  * ------------------------------------------------------------------------- */
 
-export type DropdownRootProps<T extends string> = MenuProps<T> & {
+export type DropdownRootProps<T extends string> = Omit<
+  MenuProps<T>,
+  "children"
+> & {
+  children?: ReactNode | ((props: { open: boolean }) => ReactNode);
+  title?: ReactNode;
+  icon?: ButtonProps["icon"];
   open?: boolean;
   onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
   emptyState?: React.ReactNode;
@@ -50,7 +64,7 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     onSelect,
     shouldBindKeyboardShortcuts,
     onOpenChange,
-    open,
+    open: openProp,
     onCloseAutoFocus,
     side,
     sideOffset = 4,
@@ -59,8 +73,16 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     collisionPadding = 8,
     emptyState,
     contentStyle,
+    title,
+    icon,
   } = props;
 
+  const [open, setOpen] = useControlledOrUncontrolled({
+    value: openProp,
+    onChange: onOpenChange,
+    defaultValue: false,
+  });
+
   const portalScopeId = usePortalScopeId();
 
   const keymap = useMemo(
@@ -83,12 +105,18 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
   );
 
   return (
-    <RadixDropdownMenu.Root onOpenChange={onOpenChange} open={open}>
+    <RadixDropdownMenu.Root onOpenChange={setOpen} open={open}>
       <RadixDropdownMenu.Trigger
         ref={forwardedRef as ForwardedRef<any>}
         asChild
       >
-        {children}
+        {typeof children === "function"
+          ? children({ open })
+          : children || (
+              <Button icon={icon} active={open} iconRight="DropdownChevronIcon">
+                {title}
+              </Button>
+            )}
       </RadixDropdownMenu.Trigger>
       <RadixDropdownMenu.Portal>
         <RadixDropdownMenu.Content

package/src/components/EditableText.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cx, InputField } from "@noya-app/noya-designsystem";
 import React, {
   forwardRef,

package/src/components/FileUploadIndicator.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { formatByteSize } from "../utils/formatByteSize";
+import { ActivityIndicator } from "./ActivityIndicator";
+import { Divider } from "./Divider";
+import { MediaThumbnail } from "./MediaThumbnail";
+import { Progress } from "./Progress";
+import { Heading5, Small } from "./Text";
+import { Checkmark } from "./internal/Checkmark";
+
+type FileUploadIndicatorProps = {
+  name?: string;
+  percent?: number;
+  total?: number;
+  contentType?: string;
+};
+
+export function FileUploadIndicator({
+  name,
+  percent,
+  total,
+  contentType,
+}: FileUploadIndicatorProps) {
+  const done = percent === 1;
+  const value = typeof percent === "number" ? Math.round(percent) : 0;
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="w-12 h-12 bg-background rounded-md overflow-hidden">
+        <MediaThumbnail
+          size="medium"
+          fileName={name}
+          contentType={contentType}
+        />
+      </div>
+      <div className="flex flex-col flex-1 justify-center gap-1 min-w-0">
+        {name && (
+          <Small color="text" className="truncate leading-none">
+            {name}
+          </Small>
+        )}
+        {typeof total === "number" && typeof percent === "number" && (
+          <Small
+            color="textSubtle"
+            className="leading-none"
+            style={{ fontSize: "11px" }}
+          >
+            {formatByteSize(Math.round((percent / 100) * total))} /{" "}
+            {formatByteSize(total)}
+          </Small>
+        )}
+        {typeof value === "number" && (
+          <Progress
+            value={value}
+            style={{ marginTop: "3px", height: "3px" }}
+            className="rounded-sm"
+            colorScheme="secondary"
+          />
+        )}
+      </div>
+      <div className="flex items-center justify-center gap-2">
+        {typeof value === "number" && (
+          <Small
+            color="textSubtle"
+            style={{ lineHeight: "1", fontSize: "13px" }}
+            className="tabular-nums text-right w-10"
+          >
+            {value}%
+          </Small>
+        )}
+        {done ? (
+          <div className="w-[15px] h-[15px] bg-secondary rounded-full flex items-center justify-center text-white">
+            <Checkmark />
+          </div>
+        ) : (
+          <ActivityIndicator size={15} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function FileUploadList({
+  uploads,
+}: {
+  uploads: (FileUploadIndicatorProps & { id: string })[];
+}) {
+  return (
+    <>
+      <div className="flex items-center gap-2 py-2 px-4">
+        <Heading5>
+          Uploading {uploads.length} {uploads.length === 1 ? "asset" : "assets"}
+        </Heading5>
+      </div>
+      <Divider />
+      <div className="flex flex-col gap-3 max-h-[500px] overflow-y-auto overflow-x-hidden py-4 px-4">
+        {uploads.map((upload) => (
+          <FileUploadIndicator
+            key={upload.id}
+            name={upload?.name}
+            percent={upload?.percent}
+            total={upload?.total}
+            contentType={upload?.contentType}
+          />
+        ))}
+      </div>
+    </>
+  );
+}

package/src/components/FillPreviewBackground.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Sketch } from "@noya-app/noya-file-format";
 // import { useSketchImage } from 'noya-renderer';
 import * as React from "react";

package/src/components/FloatingWindow.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   cssVars,
   Divider,