@noya-app/noya-designsystem 0.1.39 → 0.1.40

package/src/components/Chip.tsx

@@ -2,119 +2,68 @@ import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
 import React, { forwardRef, memo } from "react";
 import { useHover } from "../hooks/useHover";
 import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
 
 type ChipColorScheme = "primary" | "secondary" | "error";
 type ChipSize = "small" | "medium" | "large";
 type ChipVariant = "solid" | "outlined" | "ghost";
 
-function getChipStyles({
-  $colorScheme,
-  $size,
-  $variant,
-  $monospace,
-  $isInteractive,
-}: {
-  $colorScheme?: ChipColorScheme;
-  $size: ChipSize;
-  $variant: ChipVariant;
-  $monospace: boolean;
-  $isInteractive: boolean;
-}) {
-  // Base styles
-  const baseStyles = `
-    inline-flex items-center
-    whitespace-pre rounded
-    select-none
-    leading-[15px]
-  `;
-
-  // Size styles
-  const sizeStyles = {
-    large: "text-[11px] p-[4px_8px]",
-    medium: "text-[10px] p-[2px_6px]",
-    small: "text-[9px] p-[0px_4px]",
-  }[$size];
-
-  // Font family
-  const fontStyles = $monospace ? "font-mono" : "";
-  const shadowStyles = {
-    primary: "shadow-[0_0_0_1px_var(--chip-primary-shadow)_inset]",
-    secondary: "shadow-[0_0_0_1px_var(--chip-secondary-shadow)_inset]",
-    error: "shadow-[0_0_0_1px_var(--chip-error-shadow)_inset]",
-    default: "shadow-[0_0_0_1px_var(--chip-default-shadow)_inset]",
-  };
-
-  // Color and background based on scheme and variant
-  const variantStyles = (() => {
-    const colors = {
-      primary: {
-        text: "text-primary",
-        bg: "bg-primary-pastel",
-        subtle: "bg-[var(--chip-primary-bg)]",
-      },
-      secondary: {
-        text: "text-secondary",
-        bg: "bg-secondary-pastel",
-        subtle: "bg-[var(--chip-secondary-bg)]",
-      },
-      error: {
-        text: "text-text",
-        bg: "bg-[rgb(255,219,219)]",
-        subtle: "bg-[var(--chip-error-bg)]",
-      },
-      default: {
-        text: "text-text",
-        bg: "bg-input-background",
-        subtle: "bg-[var(--chip-default-bg)]",
-      },
-    }[$colorScheme ?? "default"];
-
-    if ($variant === "solid") {
-      return `${colors.text} ${colors.bg}`;
-    }
-    if ($variant === "outlined") {
-      return `
-        ${colors.text} bg-transparent
-        ${shadowStyles[$colorScheme ?? "default"]}
-        hover:${colors.subtle} hover:shadow-none
-      `;
-    }
-    return "";
-  })();
-
-  // Interactive states
-  const interactiveStyles = $isInteractive
-    ? "cursor-pointer hover:opacity-85"
-    : "";
-
-  return `
-    ${baseStyles}
-    ${sizeStyles}
-    ${fontStyles}
-    ${variantStyles}
-    ${interactiveStyles}
-  `
-    .replace(/\s+/g, " ")
-    .trim();
-}
-
-function getIconStyles(size: ChipSize, isAdd: boolean) {
-  const baseStyles = "relative opacity-50 cursor-pointer hover:opacity-85";
-
-  if (size === "large") {
-    return `
-      ${baseStyles}
-      ${isAdd ? "ml-[-2px] mr-[2px] -top-[1px]" : "mr-[-2px] ml-[2px]"}
-      scale-75
-    `;
-  }
-
-  return `
-    ${baseStyles}
-    ${isAdd ? "ml-[-2px] mr-[-2px]" : "mr-[-2px]"}
-    scale-60
-  `;
-}
+// Hoisted constants for styles
+const BASE_STYLES =
+  "inline-flex items-center whitespace-pre rounded select-none leading-[15px]";
+
+const SIZE_STYLES = {
+  large: "text-[11px] p-[4px_8px]",
+  medium: "text-[10px] p-[2px_6px]",
+  small: "text-[9px] p-[0px_4px]",
+} as const;
+
+const SHADOW_STYLES = {
+  primary: "shadow-[0_0_0_1px_var(--chip-primary-shadow)_inset]",
+  secondary: "shadow-[0_0_0_1px_var(--chip-secondary-shadow)_inset]",
+  error: "shadow-[0_0_0_1px_var(--chip-error-shadow)_inset]",
+  default: "shadow-[0_0_0_1px_var(--chip-default-shadow)_inset]",
+} as const;
+
+const COLOR_STYLES = {
+  primary: {
+    text: "text-primary",
+    bg: "bg-primary-pastel",
+    subtle: "bg-[var(--chip-primary-bg)]",
+  },
+  secondary: {
+    text: "text-secondary",
+    bg: "bg-secondary-pastel",
+    subtle: "bg-[var(--chip-secondary-bg)]",
+  },
+  error: {
+    text: "text-text",
+    bg: "bg-[rgb(255,219,219)]",
+    subtle: "bg-[var(--chip-error-bg)]",
+  },
+  default: {
+    text: "text-text",
+    bg: "bg-input-background",
+    subtle: "bg-[var(--chip-default-bg)]",
+  },
+} as const;
+
+const ICON_BASE_STYLES = "relative opacity-50 cursor-pointer hover:opacity-85";
+
+const ICON_SIZE_STYLES = {
+  large: {
+    add: "ml-[-2px] mr-[2px] -top-[1px] scale-75",
+    delete: "mr-[-2px] ml-[2px] scale-75",
+  },
+  medium: {
+    add: "ml-[-2px] mr-[-2px] scale-60",
+    delete: "mr-[-2px] scale-60",
+  },
+  small: {
+    add: "ml-[-2px] mr-[-2px] scale-60",
+    delete: "mr-[-2px] scale-60",
+  },
+} as const;
 
 export interface ChipProps {
   id?: string;
@@ -162,6 +111,24 @@ export const Chip = memo(
     });
 
     const handleClick = !children && !deletable && addable ? onAdd : onClick;
+    const isInteractive = !!handleClick || clickable === true;
+
+    const colors = COLOR_STYLES[colorScheme ?? "default"];
+    const variantClasses =
+      variant === "solid"
+        ? `${colors.text} ${colors.bg}`
+        : variant === "outlined"
+          ? `${colors.text} bg-transparent ${SHADOW_STYLES[colorScheme ?? "default"]} hover:${colors.subtle} hover:shadow-none`
+          : "";
+
+    const chipClasses = cx(
+      BASE_STYLES,
+      SIZE_STYLES[size],
+      monospace && "font-mono",
+      variantClasses,
+      isInteractive && "cursor-pointer hover:opacity-85",
+      className
+    );
 
     const color =
       colorScheme === "primary"
@@ -173,16 +140,7 @@ export const Chip = memo(
     return (
       <span
         ref={forwardedRef}
-        className={`
-          ${getChipStyles({
-            $colorScheme: colorScheme,
-            $size: size,
-            $variant: variant,
-            $monospace: monospace,
-            $isInteractive: !!handleClick || clickable === true,
-          })}
-          ${className ?? ""}
-        `}
+        className={chipClasses}
         style={style}
         onClick={handleClick}
         tabIndex={tabIndex}
@@ -190,14 +148,13 @@ export const Chip = memo(
       >
         {addable && (
           <PlusIcon
-            className={getIconStyles(size, true)}
+            className={cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size].add)}
             onClick={
-              onAdd
-                ? (event) => {
-                    event.stopPropagation();
-                    onAdd?.();
-                  }
-                : undefined
+              onAdd &&
+              ((event) => {
+                event.stopPropagation();
+                onAdd();
+              })
             }
             color={color}
           />
@@ -205,15 +162,14 @@ export const Chip = memo(
         {children}
         {deletable && (
           <Cross1Icon
-            className={getIconStyles(size, false)}
+            className={cx(ICON_BASE_STYLES, ICON_SIZE_STYLES[size].delete)}
             {...(hoverDeleteProps as any)}
             onClick={
-              onDelete
-                ? (event) => {
-                    event.stopPropagation();
-                    onDelete?.();
-                  }
-                : undefined
+              onDelete &&
+              ((event) => {
+                event.stopPropagation();
+                onDelete();
+              })
             }
             color={color}
           />

package/src/components/{InputFieldWithCompletions.tsx → Combobox.tsx}

@@ -140,6 +140,7 @@ export const CompletionMenu = memo(
 );
 
 export type InputFieldWithCompletionsProps = {
+  id?: string;
   loading?: boolean;
   initialValue?: string;
   placeholder?: string;
@@ -153,6 +154,7 @@ export type InputFieldWithCompletionsProps = {
   size?: InputFieldSize;
   style?: React.CSSProperties;
   className?: string;
+  label?: React.ReactNode;
   children?: React.ReactNode;
   hideChildrenWhenFocused?: boolean;
   hideMenuWhenEmptyValue?: boolean;
@@ -164,9 +166,10 @@ export interface InputFieldWithCompletionsRef {
   selectAllInputText(): void;
 }
 
-export const InputFieldWithCompletions = memo(
-  forwardRef(function InputFieldWithCompletions(
+export const Combobox = memo(
+  forwardRef(function Combobox(
     {
+      id,
       loading,
       initialValue = "",
       placeholder,
@@ -180,6 +183,7 @@ export const InputFieldWithCompletions = memo(
       onDeleteWhenEmpty,
       style,
       className,
+      label,
       children,
       hideChildrenWhenFocused = false,
       hideMenuWhenEmptyValue = false,
@@ -409,7 +413,9 @@ export const InputFieldWithCompletions = memo(
 
     return (
       <InputField.Root
+        id={id}
         size={size}
+        labelPosition="end"
         renderPopoverContent={({ width }) => {
           const listSize = { width, height };
 
@@ -417,7 +423,7 @@ export const InputFieldWithCompletions = memo(
             <div
               className={`flex flex-col ${!filter && hideMenuWhenEmptyValue ? "none" : "flex"}`}
               style={{
-                flex: `0 0 ${height}px`
+                flex: `0 0 ${height}px`,
               }}
             >
               {filteredItems.length > 0 ? (
@@ -472,6 +478,7 @@ export const InputFieldWithCompletions = memo(
             <ActivityIndicator />
           </InputField.Label>
         )}
+        {label && <InputField.Label>{label}</InputField.Label>}
       </InputField.Root>
     );
   })

package/src/components/ContextMenu.tsx

@@ -1,7 +1,8 @@
 import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 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, memo, useCallback, useMemo } from "react";
+import React, { ReactNode, useCallback, useMemo } from "react";
 import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import {
@@ -26,7 +27,7 @@ export interface MenuItemProps<T extends string> {
   items?: MenuItem<T>[];
 }
 
-const ContextMenuItem = memo(function ContextMenuItem<T extends string>({
+const ContextMenuItem = memoGeneric(function ContextMenuItem<T extends string>({
   value,
   children,
   onSelect,
@@ -68,7 +69,7 @@ const ContextMenuItem = memo(function ContextMenuItem<T extends string>({
 
   const element = (
     <RadixContextMenu.Item
-    className={styles.itemStyle({ disabled })}
+      className={styles.itemStyle({ disabled })}
       disabled={disabled}
       onSelect={handleSelectItem}
       onPointerDown={handlePointerDown}
@@ -171,7 +172,10 @@ function ContextMenuRoot<T extends string>({
         <ContentComponent className={styles.contentStyle}>
           {items.map((item, index) =>
             item === SEPARATOR_ITEM ? (
-              <RadixContextMenu.Separator key={index} className={styles.separatorStyle} />
+              <RadixContextMenu.Separator
+                key={index}
+                className={styles.separatorStyle}
+              />
             ) : (
               <ContextMenuItem
                 key={item.value ?? index}
@@ -194,4 +198,4 @@ function ContextMenuRoot<T extends string>({
   );
 }
 
-export const ContextMenu = memo(ContextMenuRoot);
+export const ContextMenu = memoGeneric(ContextMenuRoot);

package/src/components/Dialog.tsx

@@ -9,7 +9,7 @@ import React, {
 } from "react";
 import { IconButton } from "./IconButton";
 import { Spacer } from "./Spacer";
-import { cn } from "../utils/tailwind";
+import { cx } from "../utils/classNames";
 
 const StyledOverlay = forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -17,7 +17,7 @@ const StyledOverlay = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
-    className={cn("fixed inset-0 bg-[rgba(0,0,0,0.5)]", className)}
+    className={cx(`fixed inset-0 bg-[rgba(0,0,0,0.5)] `, className)}
     {...props}
   />
 ));
@@ -28,14 +28,16 @@ const StyledContent = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Content
     ref={ref}
-    className={`
+    className={cx(
+      `
       fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
       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 overflow-y-auto 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)] 
-      ${className}
-    `}
+    `,
+      className
+    )}
     {...props}
   />
 ));
@@ -46,8 +48,8 @@ const StyledTitle = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "m-0 font-sans text-base font-normal leading-[1.4] text-text",
+    className={cx(
+      `m-0 font-sans text-base font-normal leading-[1.4] text-text `,
       className
     )}
     {...props}
@@ -60,8 +62,8 @@ const StyledDescription = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn(
-      "m-0 font-sans text-heading5 font-normal leading-[19px] text-text-muted",
+    className={cx(
+      `m-0 font-sans text-heading5 font-normal leading-[19px] text-text-muted `,
       className
     )}
     {...props}
@@ -74,7 +76,10 @@ const CloseButtonContainer = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={`absolute top-dialog-padding right-dialog-padding z-[1] bg-popover-background p-[4px_6px] rounded-[2px] border border-[rgba(128,128,128,0.2)] ${className}`}
+    className={cx(
+      `absolute top-dialog-padding right-dialog-padding z-[1] bg-popover-background p-[4px_6px] rounded-[2px] border border-[rgba(128,128,128,0.2)] `,
+      className
+    )}
     {...props}
   />
 ));
@@ -94,6 +99,7 @@ interface Props {
     typeof DialogPrimitive.Content
   >["onOpenAutoFocus"];
   closeOnInteractOutside?: boolean;
+  className?: string;
 }
 
 export const Dialog = forwardRef(function Dialog(
@@ -106,6 +112,7 @@ export const Dialog = forwardRef(function Dialog(
     onOpenChange,
     onOpenAutoFocus,
     closeOnInteractOutside = true,
+    className,
   }: Props,
   forwardedRef: ForwardedRef<IDialog>
 ) {
@@ -125,6 +132,7 @@ export const Dialog = forwardRef(function Dialog(
         ref={contentRef}
         onOpenAutoFocus={onOpenAutoFocus}
         style={style}
+        className={className}
         {...(closeOnInteractOutside === false && {
           onPointerDownOutside: (event) => event.preventDefault(),
           onInteractOutside: (event) => event.preventDefault(),
@@ -161,19 +169,8 @@ export const FullscreenDialog = forwardRef(function FullscreenDialog(
   return (
     <Dialog
       ref={forwardedRef}
-      style={{
-        width: "100%",
-        height: "100%",
-        maxWidth: "100%",
-        maxHeight: "100%",
-        top: "0",
-        left: "0",
-        transform: "none",
-        display: "flex",
-        flexDirection: "column",
-        padding: 0,
-        ...style,
-      }}
+      className="w-full h-full max-w-full max-h-full top-0 left-0 translate-none flex flex-col p-0"
+      style={style}
       {...rest}
     />
   );

package/src/components/Divider.tsx

@@ -1,4 +1,5 @@
 import React, { memo } from "react";
+import { cx } from "../utils/classNames";
 
 type DividerVariant = "normal" | "subtle" | "strong";
 
@@ -18,12 +19,14 @@ export const Divider = memo(function Divider({
 }: DividerProps) {
   return (
     <div
-      className={`
+      className={cx(
+        `
         h-px min-h-px
         ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
         self-stretch
-        ${className ?? ""}
-      `}
+      `,
+        className
+      )}
       style={{
         marginLeft: `-${overflow}px`,
         marginRight: `-${overflow}px`,
@@ -38,17 +41,22 @@ export const DividerVertical = memo(function DividerVertical({
   variant = "normal",
   overflow = 0,
   className,
+  style,
   ...props
 }: DividerProps) {
   return (
     <div
-      className={`
+      className={cx(`
         w-px min-w-px
-        my-[-${overflow}px]
         ${variant === "strong" ? "bg-divider-strong" : variant === "subtle" ? "bg-divider-subtle" : "bg-divider"}
         self-stretch
-        ${className ?? ""}
-      `}
+        ${className}
+      `)}
+      style={{
+        marginTop: `-${overflow}px`,
+        marginBottom: `-${overflow}px`,
+        ...style,
+      }}
       {...props}
     />
   );

package/src/components/DraggableMenuButton.tsx

@@ -1,7 +1,8 @@
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import React, { forwardRef, memo, useCallback, useState } from "react";
+import { memoGeneric } from "@noya-app/react-utils";
+import React, { forwardRef, useCallback, useState } from "react";
 import { cssVars } from "../theme";
-import { cn } from "../utils/tailwind";
+import { cx } from "../utils/classNames";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
 
@@ -11,7 +12,10 @@ const DotButton = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={`cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ${className ?? ""}`}
+    className={cx(
+      `cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background `,
+      className
+    )}
     {...props}
   />
 ));
@@ -22,7 +26,7 @@ const Trigger = forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("pointer-events-none h-[15px]", className)}
+    className={cx(`pointer-events-none h-[15px] `, className)}
     {...props}
   />
 ));
@@ -30,7 +34,7 @@ const Trigger = forwardRef<
 /**
  * A button that opens a menu when clicked, but also allows dragging the
  */
-export const DraggableMenuButton = memo(function DraggableMenuButton<
+export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
   T extends string,
 >({
   items,

package/src/components/DropdownMenu.tsx

@@ -1,12 +1,11 @@
 import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 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 React, {
   ComponentProps,
   ForwardedRef,
   SyntheticEvent,
-  forwardRef,
-  memo,
   useCallback,
   useMemo,
 } from "react";
@@ -22,7 +21,9 @@ import {
   styles,
 } from "./internal/Menu";
 
-const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
+const DropdownMenuItem = memoGeneric(function ContextMenuItem<
+  T extends string,
+>({
   value,
   children,
   onSelect,
@@ -123,7 +124,9 @@ type DropdownRootProps<T extends string> = MenuProps<T> & {
     "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"
   >;
 
-const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
+const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
+  T extends string,
+>(
   {
     items,
     children,
@@ -213,4 +216,4 @@ const DropdownMenuRoot = forwardRef(function DropdownMenuRoot<T extends string>(
   );
 });
 
-export const DropdownMenu = memo(DropdownMenuRoot);
+export const DropdownMenu = memoGeneric(DropdownMenuRoot);

package/src/components/FillInputField.tsx

@@ -2,6 +2,7 @@ import { Sketch } from "@noya-app/noya-file-format";
 import React, { forwardRef, memo } from "react";
 import { SketchPattern } from "../utils/sketchPattern";
 import { FillPreviewBackground } from "./FillPreviewBackground";
+import { cx } from "../utils/classNames";
 
 const FillButton = forwardRef<
   HTMLButtonElement,
@@ -9,7 +10,10 @@ const FillButton = forwardRef<
 >(({ className, ...props }, ref) => (
   <button
     ref={ref}
-    className={`outline-none p-0 w-[50px] h-[27px] rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_var(--primary)] ${className ?? ""}`}
+    className={cx(
+      `outline-none p-0 w-[50px] h-[27px] rounded overflow-hidden border-none shadow-[0_0_0_1px_var(--divider)_inset] bg-transparent relative focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_var(--primary)] `,
+      className
+    )}
     {...props}
   />
 ));

package/src/components/FillPreviewBackground.tsx

@@ -7,7 +7,6 @@ import { cssVars } from "../theme";
 import { getGradientBackground } from "../utils/getGradientBackground";
 import { sketchColorToRgbaString } from "../utils/sketchColor";
 import { SketchPattern } from "../utils/sketchPattern";
-import { cn } from "../utils/tailwind";
 
 const dotsHorizontalSvg = (fillColor: string) => `
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${fillColor}'>
@@ -22,10 +21,7 @@ const Background = memo(function Background({
 }) {
   return (
     <span
-      className={cn(
-        "absolute inset-0",
-        background ? `bg-[${background}]` : "bg-input-background"
-      )}
+      className={`${background ? `bg-[${background}]` : "bg-input-background"} absolute inset-0`}
     />
   );
 });