@noya-app/noya-designsystem 0.1.63 → 0.1.64

package/src/components/Button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, {
   CSSProperties,
   ForwardedRef,
@@ -12,7 +14,7 @@ import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 import type { MenuItemIcon } from "./internal/Menu";
 
-type ButtonVariant = "normal" | "thin" | "floating" | "none";
+type ButtonVariant = "normal" | "thin" | "floating" | "none" | "ghost";
 
 type ButtonSize = "small" | "normal" | "large" | "floating";
 
@@ -32,6 +34,7 @@ const variantStyles: Record<ButtonVariant, string> = {
     "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> = {
@@ -97,7 +100,8 @@ export const Button = forwardRef(function Button(
   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
@@ -113,7 +117,9 @@ export const Button = forwardRef(function Button(
             : size
     ],
     variant === "normal" && (children ? "min-w-[31px]" : "min-w-[27px]"),
-    colorSchemeStyles[colorScheme],
+    variant === "ghost"
+      ? "border-solid border-input-background hover:bg-input-background-light"
+      : colorSchemeStyles[colorScheme],
     !children && (icon || iconRight) && !(icon && iconRight) && "w-[27px]"
   );
 

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";

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,3 +1,5 @@
+"use client";
+
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
 import {
   memoGeneric,

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,10 +1,12 @@
+"use client";
+
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import {
   forwardRefGeneric,
   memoGeneric,
   useControlledOrUncontrolled,
 } from "@noya-app/react-utils";
-import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as RadixDropdownMenu } from "radix-ui";
 import React, {
   ComponentProps,
   ForwardedRef,

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,

package/src/components/GradientPicker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Alpha,
   ColorModel,

package/src/components/Grid.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   forwardRefGeneric,
   memoGeneric,
@@ -70,6 +72,7 @@ export const Grid = memoGeneric(
       items,
       getId,
       getName,
+      getHref,
       //   expandable,
       //   getExpanded,
       getRenamable,
@@ -84,7 +87,7 @@ export const Grid = memoGeneric(
       onSelectionChange,
       selectedIds = emptyArray,
       //   itemRoleDescription = "clickable item",
-      //   detailPosition = "end",
+      detailPosition = "below",
       size = "medium",
       testHoveredId,
       testRenamingId,
@@ -169,6 +172,7 @@ export const Grid = memoGeneric(
           <GridView.Section>
             {items.map((item) => {
               const id = getId(item);
+              const href = getHref?.(item);
               const isDropdownOpen = dropdownOpenId === id;
               const isHovered =
                 testHoveredId === id ||
@@ -206,9 +210,18 @@ export const Grid = memoGeneric(
                       />
                     ));
 
+              const subtitle = (
+                <span
+                  className={cx(isSelected && "text-selected-list-item-text")}
+                >
+                  {renderDetail?.(item, isSelected)}
+                </span>
+              );
+
               return (
                 <GridView.Item<M>
                   key={id}
+                  href={href}
                   id={id}
                   role="option"
                   aria-selected={isSelected}
@@ -219,44 +232,40 @@ export const Grid = memoGeneric(
                     setHoveredId(isHovering ? id : undefined);
                   }}
                   title={
-                    <EditableText
-                      tabIndex={isRenaming ? undefined : -1}
-                      value={getName(item)}
-                      focused={isRenaming}
-                      testFocused={isTestingRenaming}
-                      readOnly={!itemIsRenamable || !onRename}
-                      onSubmit={(value) => {
-                        onRename?.(item, value);
-                        setRenamingId(undefined);
-                      }}
-                      onBlur={() => {
-                        setRenamingId(undefined);
-                      }}
-                      // max height ensures preview text and input are one line
-                      textClassName="bg-listview-editing-background max-h-input-height"
-                    >
-                      {(props) => (
-                        <span
-                          {...props}
-                          className={cx(
-                            isSelected
-                              ? "text-selected-list-item-text"
-                              : "text-text",
-                            "truncate select-none"
-                          )}
-                        />
-                      )}
-                    </EditableText>
-                  }
-                  subtitle={
-                    <span
-                      className={cx(
-                        isSelected && "text-selected-list-item-text"
-                      )}
-                    >
-                      {renderDetail?.(item, isSelected)}
-                    </span>
+                    <div className="flex items-center gap-2 flex-row">
+                      <EditableText
+                        className={cx(detailPosition === "end" && "flex-1")}
+                        tabIndex={isRenaming ? undefined : -1}
+                        value={getName(item)}
+                        focused={isRenaming}
+                        testFocused={isTestingRenaming}
+                        readOnly={!itemIsRenamable || !onRename}
+                        onSubmit={(value) => {
+                          onRename?.(item, value);
+                          setRenamingId(undefined);
+                        }}
+                        onBlur={() => {
+                          setRenamingId(undefined);
+                        }}
+                        // max height ensures preview text and input are one line
+                        textClassName="bg-listview-editing-background max-h-input-height"
+                      >
+                        {(props) => (
+                          <span
+                            {...props}
+                            className={cx(
+                              isSelected
+                                ? "text-selected-list-item-text"
+                                : "text-text",
+                              "truncate select-none"
+                            )}
+                          />
+                        )}
+                      </EditableText>
+                      {detailPosition === "end" && subtitle}
+                    </div>
                   }
+                  subtitle={detailPosition === "below" && subtitle}
                   loading={false}
                   selected={isSelected}
                   onClick={() => {