@noya-app/noya-designsystem 0.1.63 → 0.1.65

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, {
@@ -464,8 +466,8 @@ export const Combobox = memoGeneric(
               >
                 <DropdownChevronIcon
                   className={cx(
-                    "transition-transform duration-100",
-                    shouldShowMenu ? "rotate-180" : "rotate-0"
+                    "n-transition-transform n-duration-100",
+                    shouldShowMenu ? "n-rotate-180" : "n-rotate-0"
                   )}
                 />
               </InputField.Button>
@@ -486,8 +488,8 @@ export const Combobox = memoGeneric(
           return (
             <div
               className={cx(
-                "flex-col",
-                shouldShowMenu && !readOnly ? "flex" : "hidden"
+                "n-flex-col",
+                shouldShowMenu && !readOnly ? "n-flex" : "n-hidden"
               )}
             >
               {filteredItems.length > 0 && !loading ? (
@@ -504,8 +506,8 @@ export const Combobox = memoGeneric(
                   indented={hasCheckedItems}
                 />
               ) : (
-                <div className="flex flex-col h-[50px] p-5 items-center justify-center">
-                  <Small className="text-text-disabled">
+                <div className="n-flex n-flex-col n-h-[50px] n-p-5 n-items-center n-justify-center">
+                  <Small className="n-text-text-disabled">
                     {loading ? "Loading..." : "No results"}
                   </Small>
                 </div>

package/src/components/ComboboxMenu.tsx

@@ -6,8 +6,6 @@ import { cx } from "../utils/classNames";
 
 import { fuzzyTokenize } from "../utils/fuzzyScorer";
 import { renderIcon } from "./Icons";
-import { IVirtualizedList, ListView } from "./ListView";
-import { Spacer } from "./Spacer";
 import {
   CHECKBOX_INDENT_WIDTH,
   CHECKBOX_RIGHT_INSET,
@@ -16,6 +14,9 @@ import {
   ScoredMenuItem,
   styles,
 } from "./internal/Menu";
+import { IVirtualizedList } from "./IVirtualizedList";
+import { ListView } from "./ListView";
+import { Spacer } from "./Spacer";
 
 interface ComboboxMenuProps<T extends string> {
   items: ScoredMenuItem<T>[];
@@ -92,7 +93,7 @@ export const ComboboxMenu = memoGeneric(
                 }
               }}
             >
-              <div className="flex flex-1 min-w-0 items-center">
+              <div className="n-flex n-flex-1 n-min-w-0 n-items-center">
                 {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
                 {item.checked ? (
                   <div {...styles.itemIndicator}>
@@ -113,8 +114,8 @@ export const ComboboxMenu = memoGeneric(
                   <span
                     key={`${item.value}-token-${j}`}
                     className={cx(
-                      token.type === "match" ? "font-bold" : "font-normal",
-                      "whitespace-pre truncate"
+                      token.type === "match" ? "n-font-bold" : "n-font-normal",
+                      "n-whitespace-pre n-truncate"
                     )}
                   >
                     {token.text}

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";
@@ -50,7 +52,7 @@ export const CommandPalette = memo(function CommandPalette({
         }, 0);
       }}
     >
-      <div className="flex flex-col flex-1">
+      <div className="n-flex n-flex-col n-flex-1">
         <AutoSizer>
           {(size) => (
             <SearchCompletionMenu

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,
@@ -17,7 +19,7 @@ const StyledOverlay = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
-    className={cx(`fixed inset-0 bg-[rgba(0,0,0,0.5)] `, className)}
+    className={cx(`n-fixed n-inset-0 n-bg-[rgba(0,0,0,0.5)]`, className)}
     {...props}
   />
 ));
@@ -30,13 +32,7 @@ const StyledContent = forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cx(
-        `fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
-      w-[90vw] max-w-[550px] 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-dialog-shadow
-      flex flex-col
-    `,
+        `n-fixed n-top-1/2 n-left-1/2 -n-translate-x-1/2 -n-translate-y-1/2 n-w-[90vw] n-max-w-[550px] n-max-h-[85vh] n-p-dialog-padding n-rounded-[2px] n-font-sans n-text-heading5 n-font-normal n-leading-[19px] n-text-text-muted n-bg-popover-background n-pointer-events-all n-z-[1000] focus:n-outline-none n-shadow-dialog-shadow n-flex n-flex-col`,
         className
       )}
       {...props}
@@ -53,7 +49,7 @@ const StyledTitle = forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cx(
-      `m-0 font-sans text-heading3 font-medium leading-[1.4] text-text `,
+      `n-m-0 n-font-sans n-text-heading3 n-font-medium n-leading-[1.4] n-text-text`,
       className
     )}
     {...props}
@@ -67,7 +63,7 @@ const StyledDescription = forwardRef<
   <DialogPrimitive.Description
     ref={ref}
     className={cx(
-      `m-0 font-sans text-heading5 font-normal leading-[19px] text-text-muted `,
+      `n-m-0 n-font-sans n-text-heading5 n-font-normal n-leading-[19px] n-text-text-muted`,
       className
     )}
     {...props}
@@ -134,7 +130,7 @@ export const Dialog = forwardRef(function Dialog(
           <DialogPrimitive.Close asChild>
             <IconButton
               iconName="Cross1Icon"
-              className="z-[1]"
+              className="n-z-[1]"
               style={{
                 position: "absolute",
                 top: "var(--n-dialog-padding)",
@@ -168,7 +164,7 @@ export const FullscreenDialog = forwardRef(function FullscreenDialog(
   return (
     <Dialog
       ref={forwardedRef}
-      className="w-full h-full max-w-full max-h-full top-0 left-0 translate-none flex flex-col p-0"
+      className="n-w-full n-h-full n-max-w-full n-max-h-full n-top-0 n-left-0 n-translate-none n-flex n-flex-col n-p-0"
       style={style}
       {...rest}
     />

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
@@ -20,17 +20,19 @@ export const Divider = memo(function Divider({
   return (
     <div
       className={cx(
-        `h-px min-h-px self-stretch`,
+        `n-h-px n-min-h-px n-self-stretch`,
         variant === "strong"
-          ? "bg-divider-strong"
+          ? "n-bg-divider-strong"
           : variant === "subtle"
-            ? "bg-divider-subtle"
-            : "bg-divider",
+            ? "n-bg-divider-subtle"
+            : "n-bg-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
@@ -48,17 +50,19 @@ export const DividerVertical = memo(function DividerVertical({
   return (
     <div
       className={cx(
-        `w-px min-w-px self-stretch`,
+        `n-w-px n-min-w-px n-self-stretch`,
         variant === "strong"
-          ? "bg-divider-strong"
+          ? "n-bg-divider-strong"
           : variant === "subtle"
-            ? "bg-divider-subtle"
-            : "bg-divider",
+            ? "n-bg-divider-subtle"
+            : "n-bg-divider",
         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,4 +1,5 @@
-import { DragHandleDots2Icon } from "@noya-app/noya-icons";
+"use client";
+
 import {
   memoGeneric,
   useControlledOrUncontrolled,
@@ -7,6 +8,7 @@ import React, { useCallback, useState } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { DropdownMenu } from "./DropdownMenu";
+import { Icon, IconName } from "./Icons";
 import { MenuItem } from "./internal/Menu";
 
 /**
@@ -23,6 +25,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
   isVisible = true,
   className,
   style,
+  iconName = "DragHandleDots2Icon",
   ...rest
 }: {
   open?: boolean;
@@ -33,6 +36,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
   isVisible?: boolean;
   className?: string;
   style?: React.CSSProperties;
+  iconName?: IconName;
 } & Omit<
   React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
   "onSelect"
@@ -93,7 +97,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
     <div
       {...rest}
       className={cx(
-        "cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ",
+        "n-cursor-pointer n-rounded n-flex n-items-center n-justify-center n-py-[2px] hover:n-bg-input-background-light active:n-bg-active-background",
         className
       )}
       style={style}
@@ -113,14 +117,16 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
           onSelect={onSelect}
           shouldBindKeyboardShortcuts={false}
         >
-          <div className="pointer-events-none h-[15px]">
-            <DragHandleDots2Icon
+          <div className="n-pointer-events-none n-h-[15px]">
+            <Icon
+              name={iconName}
               color={isVisible || open ? cssVars.colors.icon : "transparent"}
             />
           </div>
         </DropdownMenu>
       ) : (
-        <DragHandleDots2Icon
+        <Icon
+          name={iconName}
           color={isVisible || open ? cssVars.colors.icon : "transparent"}
         />
       )}

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>
   ) {
@@ -60,17 +66,19 @@ export const Drawer = React.memo(
       <>
         <Dialog.Overlay
           className={cx(
-            "inset-0 bg-black/50",
-            positioning === "absolute" ? "absolute" : "fixed"
+            "n-inset-0 n-bg-black/50",
+            positioning === "absolute" ? "n-absolute" : "n-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`,
-            positioning === "absolute" ? "absolute" : "fixed",
-            side === "left" ? "left-0 border-r" : "right-0 border-l",
+            `n-top-0 n-bottom-0 n-z-50 n-overflow-y-auto n-bg-sidebar-background n-rounded-none n-max-h-none n-max-w-none sm:!n-max-w-sm n-w-full n-border-divider-strong`,
+            positioning === "absolute" ? "n-absolute" : "n-fixed",
+            side === "left" ? "n-left-0 n-border-r" : "n-right-0 n-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,
@@ -16,7 +18,7 @@ import {
   portalScopeProps,
   usePortalScopeId,
 } from "../contexts/PortalScopeContext";
-import Button, { ButtonProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
 import { MenuProps } from "./ContextMenu";
 import { getKeyboardShortcutsForMenuItems, styles } from "./internal/Menu";
 import { MenuViewport } from "./internal/MenuViewport";

package/src/components/EditableText.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cx, InputField } from "@noya-app/noya-designsystem";
 import React, {
   forwardRef,
@@ -149,7 +151,7 @@ export const EditableText = memo(
     });
 
     const input = (
-      <div className="flex absolute inset-0 -mx-1.5 -my-1">
+      <div className="n-flex n-absolute n-inset-0 -mx-1.5 -n-my-1">
         <InputField.Root onFocusChange={setFocused}>
           <InputField.Input
             ref={inputRef}
@@ -196,7 +198,7 @@ export const EditableText = memo(
     );
 
     return (
-      <div className={cx("flex relative", className)} style={style}>
+      <div className={cx("n-flex n-relative", className)} style={style}>
         {preview}
         {focused && !readOnly && input}
       </div>

package/src/components/Fade.tsx

@@ -27,29 +27,29 @@ export const Fade = ({
   position = "front",
 }: FadeProps) => {
   const gradientDirection = {
-    left: "to-l",
-    right: "to-r",
-    top: "to-t",
-    bottom: "to-b",
+    left: "n-bg-gradient-to-l",
+    right: "n-bg-gradient-to-r",
+    top: "n-bg-gradient-to-t",
+    bottom: "n-bg-gradient-to-b",
   }[direction];
 
   const positionClasses = {
-    left: "left-0 top-0 bottom-0",
-    right: "right-0 top-0 bottom-0",
-    top: "left-0 right-0 top-0",
-    bottom: "left-0 right-0 bottom-0",
+    left: "n-left-0 n-top-0 n-bottom-0",
+    right: "n-right-0 n-top-0 n-bottom-0",
+    top: "n-left-0 n-right-0 n-top-0",
+    bottom: "n-left-0 n-right-0 n-bottom-0",
   }[direction];
 
   return (
-    <div className={cx("relative", className)} style={{ height }}>
+    <div className={cx("n-relative", className)} style={{ height }}>
       {position === "front" ? children : null}
       <div
         className={cx(
-          "absolute pointer-events-none",
+          "n-absolute n-pointer-events-none",
           positionClasses,
-          `bg-gradient-${gradientDirection}`,
-          "from-transparent to-background",
-          zIndex && `z-[${zIndex}]`
+          gradientDirection,
+          "n-from-transparent n-to-background",
+          zIndex && `n-z-[${zIndex}]`
         )}
         style={{
           width: width ?? "100%",

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="n-flex n-items-center n-gap-2">
+      <div className="n-w-12 n-h-12 n-bg-background n-rounded-md n-overflow-hidden">
+        <MediaThumbnail
+          size="medium"
+          fileName={name}
+          contentType={contentType}
+        />
+      </div>
+      <div className="n-flex n-flex-col n-flex-1 n-justify-center n-gap-1 n-min-w-0">
+        {name && (
+          <Small color="text" className="n-truncate n-leading-none">
+            {name}
+          </Small>
+        )}
+        {typeof total === "number" && typeof percent === "number" && (
+          <Small
+            color="textSubtle"
+            className="n-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="n-rounded-sm"
+            colorScheme="secondary"
+          />
+        )}
+      </div>
+      <div className="n-flex n-items-center n-justify-center n-gap-2">
+        {typeof value === "number" && (
+          <Small
+            color="textSubtle"
+            style={{ lineHeight: "1", fontSize: "13px" }}
+            className="n-tabular-nums n-text-right n-w-10"
+          >
+            {value}%
+          </Small>
+        )}
+        {done ? (
+          <div className="n-w-[15px] n-h-[15px] n-bg-secondary n-rounded-full n-flex n-items-center n-justify-center n-text-white">
+            <Checkmark />
+          </div>
+        ) : (
+          <ActivityIndicator size={15} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function FileUploadList({
+  uploads,
+}: {
+  uploads: (FileUploadIndicatorProps & { id: string })[];
+}) {
+  return (
+    <>
+      <div className="n-flex n-items-center n-gap-2 n-py-2 n-px-4">
+        <Heading5>
+          Uploading {uploads.length} {uploads.length === 1 ? "asset" : "assets"}
+        </Heading5>
+      </div>
+      <Divider />
+      <div className="n-flex n-flex-col n-gap-3 n-max-h-[500px] n-overflow-y-auto n-overflow-x-hidden n-py-4 n-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/FloatingWindow.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   cssVars,
   Divider,
@@ -125,11 +127,11 @@ function defaultRenderToolbar({
 }) {
   return (
     <>
-      <Small className="flex-1 font-medium text-text">{title}</Small>
+      <Small className="n-flex-1 n-font-medium n-text-text">{title}</Small>
       {toolbarContent}
       <IconButton
         iconName="Cross3Icon"
-        className="h-8 w-8 rounded-full"
+        className="n-h-8 n-w-8 n-rounded-full"
         onClick={onClose}
         size={20}
         style={{