@noya-app/noya-designsystem 0.1.63 → 0.1.65

package/src/hooks/useHover.ts

@@ -1,3 +1,5 @@
+"use client";
+
 // From: https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/useHover.ts
 // MIT License
 
@@ -8,13 +10,13 @@
 // @see https://github.com/adobe/react-spectrum/tree/452d1cb6a49f9f493757737edaf2b64014108de6/packages/%40react-aria
 // @see https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import * as React from 'react';
+import * as React from "react";
 
 export interface HoverEvent {
   /** The type of hover event being fired. */
-  type: 'hoverstart' | 'hoverend';
+  type: "hoverstart" | "hoverend";
   /** The pointer type that triggered the hover event. */
-  pointerType: 'mouse' | 'pen';
+  pointerType: "mouse" | "pen";
   /** The target element of the hover event. */
   target: HTMLElement;
 }
@@ -58,17 +60,17 @@ function setGlobalIgnoreEmulatedMouseEvents() {
 }
 
 function handleGlobalPointerEvent(event: PointerEvent) {
-  if (event.pointerType === 'touch') {
+  if (event.pointerType === "touch") {
     setGlobalIgnoreEmulatedMouseEvents();
   }
 }
 
 function setupGlobalTouchEvents() {
-  if (typeof document === 'undefined') {
+  if (typeof document === "undefined") {
     return;
   }
 
-  document.addEventListener('pointerup', handleGlobalPointerEvent);
+  document.addEventListener("pointerup", handleGlobalPointerEvent);
 
   hoverCount++;
   return function teardownGlobalTouchEvents() {
@@ -76,7 +78,7 @@ function setupGlobalTouchEvents() {
     if (hoverCount > 0) {
       return;
     }
-    document.removeEventListener('pointerup', handleGlobalPointerEvent);
+    document.removeEventListener("pointerup", handleGlobalPointerEvent);
   };
 }
 
@@ -98,10 +100,14 @@ export function useHover(props: HoverProps = {}): HoverResult {
   const hoverProps = React.useMemo(
     function getHoverProps() {
       function triggerHoverStart(
-        event: PointerEvent | React.PointerEvent | MouseEvent | React.MouseEvent,
-        pointerType: 'mouse' | 'pen' | 'touch'
+        event:
+          | PointerEvent
+          | React.PointerEvent
+          | MouseEvent
+          | React.MouseEvent,
+        pointerType: "mouse" | "pen" | "touch"
       ) {
-        if (isDisabled || pointerType === 'touch' || state.isHovered) {
+        if (isDisabled || pointerType === "touch" || state.isHovered) {
           return;
         }
 
@@ -110,7 +116,7 @@ export function useHover(props: HoverProps = {}): HoverResult {
 
         if (onHoverStart) {
           onHoverStart({
-            type: 'hoverstart',
+            type: "hoverstart",
             target,
             pointerType,
           });
@@ -124,10 +130,14 @@ export function useHover(props: HoverProps = {}): HoverResult {
       }
 
       function triggerHoverEnd(
-        event: PointerEvent | React.PointerEvent | MouseEvent | React.MouseEvent,
-        pointerType: 'mouse' | 'pen' | 'touch'
+        event:
+          | PointerEvent
+          | React.PointerEvent
+          | MouseEvent
+          | React.MouseEvent,
+        pointerType: "mouse" | "pen" | "touch"
       ) {
-        if (isDisabled || pointerType === 'touch' || !state.isHovered) {
+        if (isDisabled || pointerType === "touch" || !state.isHovered) {
           return;
         }
 
@@ -136,7 +146,7 @@ export function useHover(props: HoverProps = {}): HoverResult {
 
         if (onHoverEnd) {
           onHoverEnd({
-            type: 'hoverend',
+            type: "hoverend",
             target,
             pointerType,
           });
@@ -151,7 +161,10 @@ export function useHover(props: HoverProps = {}): HoverResult {
 
       const hoverProps: React.HTMLAttributes<HTMLElement> = {
         onPointerEnter(event: React.PointerEvent<HTMLElement>) {
-          if (globalIgnoreEmulatedMouseEvents && event.pointerType === 'mouse') {
+          if (
+            globalIgnoreEmulatedMouseEvents &&
+            event.pointerType === "mouse"
+          ) {
             return;
           }
           triggerHoverStart(event, event.pointerType);
@@ -170,4 +183,4 @@ export function useHover(props: HoverProps = {}): HoverResult {
     hoverProps,
     isHovered,
   };
-}
+}

package/src/hooks/useIndent.ts

@@ -1,12 +1,9 @@
+"use client";
+
 import React from "react";
 
-export const IndentContext = React.createContext<{
-  indentLevel: number;
-}>({
-  indentLevel: 0,
-});
+export const IndentContext = React.createContext<number>(0);
 
-export const useIndent = () => {
-  const { indentLevel } = React.useContext(IndentContext);
-  return indentLevel;
+export const useIndent = (): number => {
+  return React.useContext(IndentContext);
 };

package/src/hooks/useLabel.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { ReactNode } from "react";
 
 export type LabelType = "inset" | "start" | "end" | "above" | "none";

package/src/hooks/useObjectURL.ts

@@ -1,4 +1,6 @@
-import { useLayoutEffect, useMemo } from 'react';
+"use client";
+
+import { useLayoutEffect, useMemo } from "react";
 
 export function useObjectURL(object?: ArrayBuffer | Uint8Array | Blob) {
   const objectURL = useMemo(() => {
@@ -8,8 +10,8 @@ export function useObjectURL(object?: ArrayBuffer | Uint8Array | Blob) {
       object instanceof Uint8Array
         ? object
         : object !== undefined
-        ? new Uint8Array(object)
-        : new Uint8Array();
+          ? new Uint8Array(object)
+          : new Uint8Array();
 
     return URL.createObjectURL(new Blob([bytes]));
   }, [object]);

package/src/hooks/usePlatform.ts

@@ -1,4 +1,6 @@
-import { useDesignSystemConfiguration } from '../contexts/DesignSystemConfiguration';
+"use client";
+
+import { useDesignSystemConfiguration } from "../contexts/DesignSystemConfiguration";
 
 export function usePlatform() {
   return useDesignSystemConfiguration().platform;
@@ -7,7 +9,7 @@ export function usePlatform() {
 /**
  * Either ctrl or meta, depending on the platform
  */
-export function usePlatformModKey(): 'ctrlKey' | 'metaKey' {
+export function usePlatformModKey(): "ctrlKey" | "metaKey" {
   const platform = useDesignSystemConfiguration().platform;
-  return platform === 'mac' ? 'metaKey' : 'ctrlKey';
+  return platform === "mac" ? "metaKey" : "ctrlKey";
 }

package/src/hooks/useTheme.ts

@@ -1,4 +1,6 @@
-import { useState, useEffect } from "react";
+"use client";
+
+import { useEffect, useState } from "react";
 
 /** @default light */
 export type UseThemeReturnType = "dark" | "light";

package/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --n-primary-900: rgb(45, 25, 95); /* dark: --n-primary-pastel */
   --n-primary-800: rgb(64, 39, 140);
@@ -11,6 +15,7 @@
   --n-primary-150: rgb(225, 219, 255);
   --n-primary-100: rgb(234, 230, 255); /* --n-primary-pastel */
   --n-primary-50: rgb(243, 242, 255);
+  --n-primary-25: rgb(250, 248, 255);
 
   --n-indigo-950: rgb(18, 26, 37);
   --n-indigo-900: rgb(30, 40, 60);
@@ -40,6 +45,7 @@
   --n-primary: var(--n-primary-600);
   --n-primary-light: var(--n-primary-400);
   --n-primary-pastel: var(--n-primary-100);
+  --n-primary-ring: color-mix(in srgb, var(--n-primary) 35%, transparent);
   --n-secondary: rgb(0, 151, 117);
   --n-secondary-light: rgb(0, 160, 129);
   --n-secondary-pastel: rgb(205, 238, 231);
@@ -58,6 +64,13 @@
   --n-button-background-active-hover: var(--n-primary-50);
   --n-button-text: var(--n-text);
   --n-button-text-active: var(--n-primary);
+  --n-toolbar-drawer-background: var(--n-primary-25);
+  --n-toolbar-drawer-border: color-mix(
+    in srgb,
+    var(--n-primary) 30%,
+    transparent
+  );
+  --n-toolbar-drawer-shadow: rgba(153, 153, 153, 0.25);
   --n-canvas-background: var(--n-indigo-25);
   --n-canvas-grid: rgba(0, 0, 0, 0.05);
   --n-sidebar-background: rgb(255, 255, 255);
@@ -78,6 +91,12 @@
   --n-active-background: var(--n-indigo-150);
   --n-thumbnail-background: #f0efff;
   --n-thumbnail-shadow: #d3ceed66;
+  --n-banner-info-background: var(--n-indigo-50);
+  --n-banner-info-border: var(--n-divider-strong);
+  --n-banner-info-text: #6579aa;
+  --n-banner-error-background: #ffe2e2;
+  --n-banner-error-border: var(--n-divider-strong);
+  --n-banner-error-text: #be1d1d;
   --n-inline-code-text: var(--n-primary-600);
   --n-inline-code-background: rgb(240, 242, 246);
   --n-text-link: var(--n-primary-600);
@@ -133,6 +152,14 @@
   --n-cm-error: #e45649;
   --n-cm-warning: #fb9d00;
   --n-cm-info: #3390ff;
+
+  .bg-sidebar-background {
+    --n-list-view-thumbnail-background: hsl(220 33% 97% / 1);
+  }
+
+  .bg-canvas-background {
+    --n-list-view-thumbnail-background: hsl(220 43% 95% / 1);
+  }
 }
 
 [data-theme="dark"] {
@@ -160,8 +187,20 @@
   --n-button-background-active-hover: var(--n-primary-600);
   --n-button-text: var(--n-text);
   --n-button-text-active: var(--n-primary-100);
+  --n-primary-ring: color-mix(in srgb, var(--n-primary) 45%, transparent);
   --n-secondary-bright: #36fe91;
   --n-code-background: rgb(20, 19, 23);
+  --n-toolbar-drawer-background: color-mix(
+    in srgb,
+    var(--n-primary-900) 50%,
+    var(--n-background)
+  );
+  --n-toolbar-drawer-border: color-mix(
+    in srgb,
+    var(--n-primary-700) 30%,
+    transparent
+  );
+  --n-toolbar-drawer-shadow: rgba(255, 255, 255, 0.1);
   --n-canvas-background: rgb(20, 19, 23);
   --n-canvas-grid: rgba(0, 0, 0, 0.1);
   --n-sidebar-background: rgb(34, 33, 39);
@@ -205,14 +244,8 @@
   --n-cm-info: #3390ff;
 }
 
-.noya-styles {
-  @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
-
-  .markdown-editor-line-placeholder::after {
-    content: var(--n-markdown-editor-line-placeholder-content);
-    color: var(--n-text-disabled);
-    pointer-events: none;
-  }
+.markdown-editor-line-placeholder::after {
+  content: var(--n-markdown-editor-line-placeholder-content);
+  color: var(--n-text-disabled);
+  pointer-events: none;
 }

package/src/index.tsx

@@ -1,10 +1,12 @@
 // Components
 export * from "./components/ActionMenu";
 export * from "./components/ActivityIndicator";
+export * from "./components/ActivityLog";
 export * from "./components/ai-assistant/AIAssistantLayout";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
 export * from "./components/Banner";
+export * from "./components/blocks/ImageBlockComponent";
 export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Checkbox";
@@ -25,10 +27,8 @@ export * from "./components/DropdownMenu";
 export * from "./components/EditableText";
 export * from "./components/Fade";
 export * from "./components/file-explorer/FileExplorerLayout";
-export * from "./components/FillInputField";
-export * from "./components/FillPreviewBackground";
+export * from "./components/FileUploadIndicator";
 export * from "./components/FloatingWindow";
-export * from "./components/GradientPicker";
 export * from "./components/Grid";
 export * from "./components/GridView";
 export * from "./components/IconButton";
@@ -42,17 +42,24 @@ export type {
   SelectableMenuItem,
 } from "./components/internal/Menu";
 export * from "./components/internal/MenuViewport";
+export * from "./components/IVirtualizedList";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
 export * from "./components/LabeledField";
 export * from "./components/List";
+export * from "./components/ListMenu";
+export * from "./components/ListNavigator";
 export * from "./components/ListView";
 export * from "./components/MediaThumbnail";
 export * from "./components/Message";
+export * from "./components/Navigator";
 export * from "./components/NoyaLogo";
 export * from "./components/pipeline/PipelineResultLayout";
 export * from "./components/Popover";
 export * from "./components/Progress";
+export * from "./components/ResizableContainer";
+export * from "./components/RingProgress";
+export * from "./components/ScrollableSidebar";
 export * from "./components/ScrollArea";
 export * from "./components/SearchCompletionMenu";
 export * from "./components/Section";
@@ -65,6 +72,8 @@ export * from "./components/sorting/SharedDragProvider";
 export * from "./components/sorting/Sortable";
 export * from "./components/sorting/sorting";
 export * from "./components/Spacer";
+export * from "./components/StackNavigator";
+export * from "./components/Stepper";
 export * from "./components/Switch";
 export * from "./components/Tabs";
 export * from "./components/Text";
@@ -81,6 +90,7 @@ export * from "./contexts/DialogContext";
 export * from "./contexts/FloatingWindowContext";
 export * from "./contexts/GlobalInputBlurContext";
 export * from "./contexts/ImageDataContext";
+export * from "./contexts/LinkComponentContext";
 export * from "./contexts/OpenPortalsContext";
 export * from "./contexts/PortalScopeContext";
 // Hooks
@@ -88,13 +98,11 @@ export * from "./hooks/useHover";
 export * from "./hooks/useIndent";
 export * from "./hooks/useLabel";
 export * from "./hooks/usePlatform";
-export * from "./hooks/usePreservePanelSize";
 export * from "./hooks/useTheme";
-export * from "./mediaQuery";
 export * from "./theme";
 export * from "./utils/classNames";
 export * from "./utils/createSectionedMenu";
-export * from "./utils/getGradientBackground";
+export * from "./utils/formatByteSize";
 // Utils
 export * from "./utils/colorFromString";
 export * from "./utils/combobox";
@@ -102,7 +110,6 @@ export * from "./utils/editableBlockStyles";
 export * from "./utils/fuzzyScorer";
 export * from "./utils/moveTreeItem";
 export * from "./utils/selection";
-export * from "./utils/sketchColor";
 export * from "./utils/sketchPattern";
 export { default as withSeparatorElements } from "./utils/withSeparatorElements";
 
@@ -112,3 +119,4 @@ export * as InspectorPrimitives from "./components/InspectorPrimitives";
 
 export * from "./components/BaseToolbar";
 export * from "./components/Toolbar";
+export * from "./components/ToolbarDrawer";

package/src/utils/classNames.ts

@@ -1,19 +1,42 @@
 import tailwindConfig from "@noya-app/noya-tailwind-config";
 
 type ClassNameItem = string | number | BigInt | boolean | null | undefined;
-type Category = "text" | "color" | "font" | "flex" | "position";
+type Category =
+  | "text"
+  | "color"
+  | "font"
+  | "flex"
+  | "position"
+  | "textAlign"
+  | "rounded";
 type Options = {
   categories?: Category[];
 };
 
+const TAILWIND_PREFIX = tailwindConfig.prefix ?? "";
+
+function withTailwindPrefix(className: string): string {
+  return `${TAILWIND_PREFIX}${className}`;
+}
+
+function createPrefixedClassSet(classNames: string[]): Set<string> {
+  if (!TAILWIND_PREFIX) {
+    return new Set(classNames);
+  }
+
+  const prefixedClassNames = classNames.map(withTailwindPrefix);
+
+  return new Set([...classNames, ...prefixedClassNames]);
+}
+
 const colorKeys = Object.keys(tailwindConfig.theme.extend.colors).map(
   (key) => `text-${key}`
 );
-const colorKeysSet = new Set(colorKeys);
+const colorKeysSet = createPrefixedClassSet(colorKeys);
 const textKeys = Object.keys(tailwindConfig.theme.extend.fontSize).map(
   (key) => `text-${key}`
 );
-const textKeysSet = new Set(textKeys);
+const textKeysSet = createPrefixedClassSet(textKeys);
 const fontKeys = [
   "thin",
   "extralight",
@@ -25,24 +48,48 @@ const fontKeys = [
   "extra-bold",
   "black",
 ].map((key) => `font-${key}`);
-const fontKeysSet = new Set(fontKeys);
-const flexKeysSet = new Set([
+const fontKeysSet = createPrefixedClassSet(fontKeys);
+const flexKeysSet = createPrefixedClassSet([
   "flex-auto",
   "flex-none",
   "flex-[0_0_auto]",
   "flex-1",
 ]);
-const positionKeysSet = new Set(["absolute", "relative", "fixed", "sticky"]);
+const positionKeysSet = createPrefixedClassSet([
+  "absolute",
+  "relative",
+  "fixed",
+  "sticky",
+]);
+const roundedKeysSet = createPrefixedClassSet([
+  "rounded",
+  "rounded-sm",
+  "rounded-md",
+  "rounded-lg",
+  "rounded-xl",
+  "rounded-2xl",
+  "rounded-3xl",
+  "rounded-full",
+  "rounded-none",
+]);
+const textAlignKeysSet = createPrefixedClassSet([
+  "text-left",
+  "text-center",
+  "text-right",
+]);
 const keyMap: Record<Category, Set<string>> = {
   text: textKeysSet,
   flex: flexKeysSet,
   color: colorKeysSet,
   font: fontKeysSet,
   position: positionKeysSet,
+  textAlign: textAlignKeysSet,
+  rounded: roundedKeysSet,
 };
 
-export function cx(...args: ClassNameItem[]): string {
-  return args.filter(Boolean).join(" ").trim();
+export function cx(...args: ClassNameItem[]): string | undefined {
+  const classes = args.filter(Boolean).join(" ").trim();
+  return classes.length > 0 ? classes : undefined;
 }
 
 const filterLastClassNameInCategory = ({
@@ -68,7 +115,7 @@ export function mergeConflictingClassNames(
   const classes = Array.isArray(classNames)
     ? cx(...classNames)
     : cx(classNames);
-  let classNamesList = classes.split(/\s+/);
+  let classNamesList = classes?.split(/\s+/) ?? [];
   options?.categories?.forEach((category) => {
     classNamesList = filterLastClassNameInCategory({
       classNames: classNamesList,

package/src/utils/combobox.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { chunkBy, partition } from "@noya-app/noya-utils";
 import { useSyncExternalStore } from "react";
 import {

package/src/utils/editableBlockStyles.ts

@@ -4,7 +4,7 @@ export const editableBlockStyles = (
   viewType: "editable" | "readOnly" | "preview" = "editable"
 ) =>
   cx(
-    "relative outline-primary focus:outline focus:outline-1",
+    "n-relative n-outline-primary focus:n-outline focus:n-outline-1",
     viewType !== "preview" &&
-      "hover:outline-2 [&:not(:has([data-editor-selectable-block]:hover))]:hover:outline"
+      "hover:n-outline-2 [&:not(:has([data-editor-selectable-block]:hover))]:hover:n-outline"
   );

package/src/utils/formatByteSize.ts

@@ -0,0 +1,9 @@
+const byteSizeUnits = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+export function formatByteSize(size: number) {
+  if (size === 0) return "0 B";
+  const unitIndex = Math.floor(Math.log(size) / Math.log(1024));
+  const unit = byteSizeUnits[unitIndex];
+  const value = size / Math.pow(1024, unitIndex);
+  return `${value.toFixed(1)} ${unit}`;
+}

package/src/utils/inputs.ts

@@ -2,20 +2,22 @@ import { cx } from "./classNames";
 
 export type InputSize = "small" | "medium" | "large";
 
-const insetEndBaseStyles = "absolute inset-y-0 flex items-center z-label";
+const insetEndBaseStyles =
+  "n-absolute n-inset-y-0 n-flex n-items-center n-z-label";
 
 export const getInsetEndStyles = (size: InputSize = "medium") => {
   return cx(
     insetEndBaseStyles,
     size === "large"
-      ? "right-2"
+      ? "n-right-2"
       : size === "medium"
-        ? "right-1.5"
+        ? "n-right-1.5"
         : size === "small"
-          ? "right-0.5"
+          ? "n-right-0.5"
           : "",
-    size === "small" ? "min-h-[19px]" : "min-h-input-height"
+    size === "small" ? "n-min-h-[19px]" : "n-min-h-input-height"
   );
 };
 
-export const startBaseStyles = "absolute left-1.5 inset-y-0 flex items-center";
+export const startBaseStyles =
+  "n-absolute n-left-1.5 n-inset-y-0 n-flex n-items-center";

package/src/utils/sketchColor.ts

@@ -1,34 +0,0 @@
-import {
-  hsvaToRgbaString,
-  RgbaColor,
-  rgbaToHex,
-  rgbaToHsva,
-} from '@noya-app/noya-colorpicker';
-import type { Sketch } from '@noya-app/noya-file-format';
-
-export function sketchColorToRgba(value: Sketch.Color): RgbaColor {
-  return {
-    r: Math.floor(value.red * 255),
-    g: Math.floor(value.green * 255),
-    b: Math.floor(value.blue * 255),
-    a: value.alpha,
-  };
-}
-
-export function sketchColorToRgbaString(value: Sketch.Color): string {
-  return hsvaToRgbaString(rgbaToHsva(sketchColorToRgba(value)));
-}
-
-export function rgbaToSketchColor(value: RgbaColor): Sketch.Color {
-  return {
-    _class: 'color',
-    alpha: value.a,
-    red: value.r / 255,
-    green: value.g / 255,
-    blue: value.b / 255,
-  };
-}
-
-export function sketchColorToHex(value: Sketch.Color): string {
-  return rgbaToHex(sketchColorToRgba(value)).toUpperCase();
-}

package/src/utils/withSeparatorElements.ts

@@ -16,7 +16,7 @@ function flattenChildren(
 ): ReactNode[] {
   return Children.toArray(children).flatMap((child) => {
     if (traverseFragments && isValidElement(child) && child.type === Fragment) {
-      return flattenChildren(child.props.children, traverseFragments);
+      return flattenChildren((child as any).props.children, traverseFragments);
     }
     return child;
   });

package/tailwind.config.ts

@@ -4,6 +4,7 @@ import type { Config } from "tailwindcss";
 
 const config = {
   ...noyaConfig,
+  prefix: "n-",
   plugins: [containerQueries],
 } satisfies Config;
 

package/src/components/FillInputField.tsx

@@ -1,37 +0,0 @@
-import { Sketch } from "@noya-app/noya-file-format";
-import React, { forwardRef, memo } from "react";
-import { cx } from "../utils/classNames";
-import { SketchPattern } from "../utils/sketchPattern";
-import { FillPreviewBackground } from "./FillPreviewBackground";
-
-const FillButton = forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement>
->(({ className, ...props }, ref) => (
-  <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-active-input `,
-      className
-    )}
-    {...props}
-  />
-));
-
-interface Props {
-  id?: string;
-  value?: Sketch.Color | Sketch.Gradient | SketchPattern;
-}
-
-export const FillInputField = memo(
-  forwardRef<HTMLButtonElement, Props>(function FillInputField(
-    { id, value, ...rest },
-    ref
-  ) {
-    return (
-      <FillButton ref={ref} id={id} {...rest}>
-        <FillPreviewBackground value={value} />
-      </FillButton>
-    );
-  })
-);