@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/BaseToolbar.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { cssVarNames, cssVars } from "../theme";
+import { cx } from "../utils/classNames";
 import { Divider, DividerVertical } from "./Divider";
 import { Spacer } from "./Spacer";
 
@@ -9,6 +10,9 @@ export interface BaseToolbarProps {
   right?: React.ReactNode;
   logo?: React.ReactNode;
   showDivider?: boolean;
+  className?: string;
+  innerClassName?: string;
+  enableAbsoluteBreakpoint?: boolean;
 }
 
 const toolbarStyle = {
@@ -19,14 +23,24 @@ const toolbarStyle = {
 export function BaseToolbarContainer({
   children,
   showDivider = true,
+  className,
+  innerClassName,
+  enableAbsoluteBreakpoint = true,
 }: {
   children: React.ReactNode;
   showDivider?: boolean;
+  className?: string;
+  innerClassName?: string;
+  enableAbsoluteBreakpoint?: boolean;
 }) {
   return (
-    <div className="flex flex-col" style={toolbarStyle}>
+    <div className={cx("n-flex n-flex-col", className)} style={toolbarStyle}>
       <div
-        className="flex items-center bg-sidebar-background flex-none relative @container/toolbar"
+        className={cx(
+          "n-flex n-items-center n-bg-sidebar-background n-flex-none n-relative",
+          enableAbsoluteBreakpoint && "n-@container/toolbar",
+          innerClassName
+        )}
         style={{
           flex: `0 0 ${cssVars.spacing.toolbarHeight}`,
         }}
@@ -44,9 +58,17 @@ export function BaseToolbar({
   right,
   logo,
   showDivider = true,
+  className,
+  innerClassName,
+  enableAbsoluteBreakpoint = true,
 }: BaseToolbarProps) {
   return (
-    <BaseToolbarContainer showDivider={showDivider}>
+    <BaseToolbarContainer
+      showDivider={showDivider}
+      className={className}
+      innerClassName={innerClassName}
+      enableAbsoluteBreakpoint={enableAbsoluteBreakpoint}
+    >
       {logo && (
         <>
           {logo}
@@ -56,22 +78,22 @@ export function BaseToolbar({
       <Spacer.Horizontal size={10} />
       {left && (
         <>
-          <div className="flex gap-toolbar-separator">{left}</div>
+          <div className="n-flex n-gap-toolbar-separator">{left}</div>
           <Spacer.Horizontal size={10} />
         </>
       )}
       <div
         className={
-          "flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0"
+          "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @2xl/toolbar:n-absolute n-inset-0"
         }
       >
-        <div className="flex items-center justify-center pointer-events-auto">
+        <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
           {children}
         </div>
       </div>
       <Spacer.Horizontal />
       <Spacer.Horizontal size={10} />
-      <div className="flex gap-toolbar-separator">{right}</div>
+      <div className="n-flex n-gap-toolbar-separator">{right}</div>
     </BaseToolbarContainer>
   );
 }

package/src/components/Breadcrumbs.tsx

@@ -21,9 +21,9 @@ export const BreadcrumbText = forwardRef(function BreadcrumbText(
       {...props}
       variant="small"
       className={cx(
-        "whitespace-pre leading-[15px] select-none",
+        "n-whitespace-pre n-leading-[15px] n-select-none",
         onClick &&
-          "hover:text-breadcrumb-text-hover hover:cursor-pointer hover:whitespace-pre hover:select-none",
+          "hover:n-text-breadcrumb-text-hover hover:n-cursor-pointer hover:n-whitespace-pre hover:n-select-none",
         className
       )}
       ref={ref}

package/src/components/Button.tsx

@@ -22,28 +22,29 @@ 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",
+    "n-bg-button-background n-text-button-text hover:n-bg-button-background-hover active:n-bg-button-background-active",
+  primary:
+    "n-bg-primary n-text-white hover:n-bg-primary-light active:n-bg-primary",
   secondary:
-    "bg-secondary text-white hover:bg-secondary-light active:bg-secondary",
+    "n-bg-secondary n-text-white hover:n-bg-secondary-light active:n-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",
+    "n-bg-floating-button n-text-text n-shadow-[0_1px_2px_rgba(0,0,0,0.1)] hover:n-opacity-80 active:n-opacity-90",
+  thin: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
+  none: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
+  ghost: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
 };
 
 const sizeStyles: Record<ButtonSize | "thin" | "none", string> = {
-  small: "px-[2px] font-sans text-[10px] font-medium",
-  normal: "px-[6px] py-1 font-sans text-button font-medium",
-  large: "p-3 px-4 font-sans text-heading4 font-medium",
-  thin: "px-[1px] py-1 font-sans text-button font-medium",
-  floating: "px-1 py-0 font-sans text-[12px] font-medium",
-  none: "py-0 px-0",
+  small: "n-px-[2px] n-font-sans n-text-[10px] n-font-medium",
+  normal: "n-px-[6px] n-py-1 n-font-sans n-text-button n-font-medium",
+  large: "n-p-3 n-px-4 n-font-sans n-text-heading4 n-font-medium",
+  thin: "n-px-[1px] n-py-1 n-font-sans n-text-button n-font-medium",
+  floating: "n-px-1 n-py-0 n-font-sans n-text-[12px] n-font-medium",
+  none: "n-py-0 n-px-0",
 };
 
 export interface ButtonProps
@@ -100,12 +101,12 @@ export const Button = forwardRef(function Button(
   const colorScheme = colorSchemeProp ?? "default";
 
   const baseClassName = cx(
-    "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" : "",
+    "n-no-underline n-leading-[1] n-relative n-outline-none n-select-none n-text-left n-rounded n-flex n-items-center n-justify-center [&>*]:n-pointer-events-none n-[-webkit-app-region:no-drag] focus:n-ring-2 focus:n-ring-primary focus:n-shadow-[0_0_0_1px_var(--n-popover-background)_inset] n-transition-all",
+    variant === "ghost" ? "n-border" : "n-border-0",
+    disabled ? "n-opacity-25" : "",
+    !className?.includes("flex") ? "n-flex-none" : "",
     active
-      ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover"
+      ? "n-bg-button-background-active n-text-button-text-active hover:n-bg-button-background-active-hover"
       : variantStyles[variant],
     sizeStyles[
       variant === "thin"
@@ -116,11 +117,11 @@ export const Button = forwardRef(function Button(
             ? "none"
             : size
     ],
-    variant === "normal" && (children ? "min-w-[31px]" : "min-w-[27px]"),
+    variant === "normal" && (children ? "n-min-w-[31px]" : "n-min-w-[27px]"),
     variant === "ghost"
-      ? "border-solid border-input-background hover:bg-input-background-light"
+      ? "n-border-solid n-border-input-background hover:n-bg-input-background-light"
       : colorSchemeStyles[colorScheme],
-    !children && (icon || iconRight) && !(icon && iconRight) && "w-[27px]"
+    !children && (icon || iconRight) && !(icon && iconRight) && "n-w-[27px]"
   );
 
   const buttonClassName = useMemo(() => {
@@ -146,7 +147,7 @@ export const Button = forwardRef(function Button(
       {...rest}
     >
       <span
-        className="min-h-[19px] flex items-center flex-1 justify-center leading-[15px]"
+        className="n-min-h-[19px] n-flex n-items-center n-flex-1 n-justify-center n-leading-[15px]"
         style={contentStyle}
       >
         {icon && renderIcon(icon)}
@@ -166,5 +167,3 @@ export const Button = forwardRef(function Button(
     buttonElement
   );
 });
-
-export default Button;

package/src/components/Checkbox.tsx

@@ -8,9 +8,9 @@ interface CheckboxProps
 }
 
 const colorSchemeStyles = {
-  normal: "text-text-subtle",
-  primary: "text-primary",
-  secondary: "text-secondary",
+  normal: "n-text-text-subtle",
+  primary: "n-text-primary",
+  secondary: "n-text-secondary",
 };
 
 export const Checkbox = React.memo(
@@ -22,7 +22,7 @@ export const Checkbox = React.memo(
     return (
       <div
         className={cx(
-          "flex-none relative inline-flex w-[19px] h-[19px]",
+          "n-flex-none n-relative n-inline-flex n-w-[19px] n-h-[19px]",
           colorSchemeStyles[colorScheme],
           className
         )}
@@ -31,42 +31,13 @@ export const Checkbox = React.memo(
         <input
           ref={ref}
           type="checkbox"
-          className={`
-            w-full
-            h-full
-            peer
-            appearance-none
-            m-0
-            rounded
-            bg-input-background
-            border
-            border-divider
-            disabled:opacity-50
-            cursor-pointer
-            disabled:cursor-not-allowed
-            focus:ring-2
-            focus:ring-primary
-            focus:ring-offset-1
-            focus:z-interactable
-            transition-all
-            `}
+          className={`n-w-full n-h-full n-peer n-appearance-none n-m-0 n-rounded n-bg-input-background n-border n-border-divider disabled:n-opacity-50 n-cursor-pointer disabled:n-cursor-not-allowed focus:n-ring-2 focus:n-ring-primary focus:n-ring-offset-1 focus:n-z-interactable n-transition-all`}
           aria-checked={props.checked}
           {...props}
           id={id}
         />
         <svg
-          className={`
-            absolute 
-            inset-0
-            h-input-height 
-            w-input-height 
-            pointer-events-none
-            stroke-white
-            opacity-0
-            peer-checked:opacity-100
-            z-label
-            stroke-[1.3px]
-          `}
+          className={`n-absolute n-inset-0 n-h-input-height n-w-input-height n-pointer-events-none n-stroke-white n-opacity-0 peer-checked:n-opacity-100 n-z-label stroke-[1.3px]`}
           viewBox="0 0 16 16"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

package/src/components/Chip.tsx

@@ -6,64 +6,76 @@ 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 ChipColorScheme = "primary" | "secondary" | "info" | "error";
+type ChipSize = "small" | "medium" | "large" | "xl";
 type ChipVariant = "solid" | "outlined" | "ghost";
 
 // Hoisted constants for styles
 const BASE_STYLES =
-  "inline-flex items-center whitespace-pre rounded select-none leading-[15px]";
+  "n-inline-flex n-items-center n-whitespace-pre n-rounded n-select-none n-leading-[15px]";
 
 const SIZE_STYLES = {
-  large: "text-[11px] p-[4px_8px]",
-  medium: "text-[10px] p-[2px_6px]",
-  small: "text-[9px] p-[0px_4px]",
+  xl: "n-text-[12px] n-p-[6px_12px]",
+  large: "n-text-[11px] n-p-[4px_8px]",
+  medium: "n-text-[10px] n-p-[2px_6px]",
+  small: "n-text-[9px] n-p-[0px_4px]",
 } as const;
 
 const SHADOW_STYLES = {
-  primary: "shadow-[0_0_0_1px_var(--n-chip-primary-shadow)_inset]",
-  secondary: "shadow-[0_0_0_1px_var(--n-chip-secondary-shadow)_inset]",
-  error: "shadow-[0_0_0_1px_var(--n-chip-error-shadow)_inset]",
-  default: "shadow-[0_0_0_1px_var(--n-chip-default-shadow)_inset]",
+  primary: "n-shadow-[0_0_0_1px_var(--n-chip-primary-shadow)_inset]",
+  secondary: "n-shadow-[0_0_0_1px_var(--n-chip-secondary-shadow)_inset]",
+  info: "n-shadow-[0_0_0_1px_var(--n-chip-default-shadow)_inset]",
+  error: "n-shadow-[0_0_0_1px_var(--n-chip-error-shadow)_inset]",
+  default: "n-shadow-[0_0_0_1px_var(--n-chip-default-shadow)_inset]",
 } as const;
 
 const COLOR_STYLES = {
   primary: {
-    text: "text-primary",
-    bg: "bg-primary-pastel",
-    subtle: "bg-[var(--n-chip-primary-bg)]",
+    text: "n-text-primary",
+    bg: "n-bg-primary-pastel",
+    subtle: "n-bg-[var(--n-chip-primary-bg)]",
   },
   secondary: {
-    text: "text-secondary",
-    bg: "bg-secondary-pastel",
-    subtle: "bg-[var(--n-chip-secondary-bg)]",
+    text: "n-text-secondary",
+    bg: "n-bg-secondary-pastel",
+    subtle: "n-bg-[var(--n-chip-secondary-bg)]",
+  },
+  info: {
+    text: "n-text-[#4071e8]",
+    bg: "n-bg-[#dce8ff]",
+    subtle: "n-bg-[var(--n-banner-info-border)]",
   },
   error: {
-    text: "text-text",
-    bg: "bg-[rgb(255,219,219)]",
-    subtle: "bg-[var(--n-chip-error-bg)]",
+    text: "n-text-text",
+    bg: "n-bg-[rgb(255,219,219)]",
+    subtle: "n-bg-[var(--n-chip-error-bg)]",
   },
   default: {
-    text: "text-text",
-    bg: "bg-input-background",
-    subtle: "bg-[var(--n-chip-default-bg)]",
+    text: "n-text-text",
+    bg: "n-bg-input-background",
+    subtle: "n-bg-[var(--n-chip-default-bg)]",
   },
 } as const;
 
-const ICON_BASE_STYLES = "relative opacity-50 cursor-pointer hover:opacity-85";
+const ICON_BASE_STYLES =
+  "n-relative n-opacity-50 n-cursor-pointer hover:n-opacity-85";
 
 const ICON_SIZE_STYLES = {
+  xl: {
+    add: "n-ml-[-2px] n-mr-[2px] -n-top-[1px] n-scale-[0.75]",
+    delete: "n-mr-[-2px] n-ml-[2px] n-scale-[0.75]",
+  },
   large: {
-    add: "ml-[-2px] mr-[2px] -top-[1px] scale-[0.75]",
-    delete: "mr-[-2px] ml-[2px] scale-[0.75]",
+    add: "n-ml-[-2px] n-mr-[2px] -n-top-[1px] n-scale-[0.75]",
+    delete: "n-mr-[-2px] n-ml-[2px] n-scale-[0.75]",
   },
   medium: {
-    add: "ml-[-2px] mr-[-2px] scale-[0.60]",
-    delete: "mr-[-2px] scale-[0.60]",
+    add: "n-ml-[-2px] n-mr-[-2px] n-scale-[0.60]",
+    delete: "n-mr-[-2px] n-scale-[0.60]",
   },
   small: {
-    add: "ml-[-2px] mr-[-2px] scale-[0.60]",
-    delete: "mr-[-2px] scale-[0.60]",
+    add: "n-ml-[-2px] n-mr-[-2px] n-scale-[0.60]",
+    delete: "n-mr-[-2px] n-scale-[0.60]",
   },
 } as const;
 
@@ -123,16 +135,16 @@ export const Chip = memo(
       variant === "solid"
         ? `${colors.text} ${colors.bg}`
         : variant === "outlined"
-          ? `${colors.text} bg-transparent ${SHADOW_STYLES[colorScheme ?? "default"]} hover:${colors.subtle} hover:shadow-none`
+          ? `${colors.text} n-bg-transparent ${SHADOW_STYLES[colorScheme ?? "default"]} hover:${colors.subtle} hover:n-shadow-none`
           : "";
 
     const chipClasses = cx(
       BASE_STYLES,
       SIZE_STYLES[size],
-      monospace && "font-mono",
+      monospace && "n-font-mono",
       variantClasses,
-      isInteractive && "cursor-pointer hover:opacity-85",
-      disabled && "opacity-50",
+      isInteractive && "n-cursor-pointer hover:n-opacity-85",
+      disabled && "n-opacity-50",
       className
     );
 

package/src/components/Collection.tsx

@@ -1,15 +1,14 @@
 "use client";
 
+import { Size } from "@noya-app/noya-geometry";
 import { forwardRefGeneric } from "@noya-app/react-utils";
-import React from "react";
-import { Grid } from "../components/Grid";
-import { MenuItem } from "../components/internal/Menu";
-import {
-  ListView,
-  ListViewRootProps,
-  ListViewRowProps,
-} from "../components/ListView";
+import React, { CSSProperties } from "react";
+import { Grid } from "./Grid";
+import { MenuItem } from "./internal/Menu";
 import { List } from "./List";
+import { ListView } from "./ListView";
+import { ListViewRootProps } from "./listView/ListViewRoot";
+import { ListViewRowProps } from "./listView/ListViewRow";
 import { SharedDragProps } from "./sorting/DragRegistration";
 
 export type CollectionViewType = "grid" | "list";
@@ -35,6 +34,7 @@ export type CollectionRenderActionProps<T> = {
 export interface CollectionProps<T, M extends string = string> {
   className?: string;
   items: T[];
+  virtualized?: Size;
   getId: (item: T) => string;
   getName: (item: T) => string;
   getHref?: (item: T) => string;
@@ -62,12 +62,16 @@ export interface CollectionProps<T, M extends string = string> {
     | "menu"
     | ((props: CollectionRenderActionProps<T>) => React.ReactNode);
   renderDetail?: (item: T, selected: boolean) => React.ReactNode;
+  /** Optional right-side content renderer for each item */
+  renderRight?: (item: T, selected: boolean) => React.ReactNode;
   /** Callback when selection changes. If not provided, selection will be disabled. */
   onSelectionChange?: (
     selectedItemIds: string[],
     event?: ListView.ClickInfo
   ) => void;
   scrollable?: boolean;
+  itemStyle?: CSSProperties;
+  itemClassName?: string;
   itemRoleDescription?: string;
   /** Position of the detail content. Defaults to 'end'. */
   detailPosition?: "end" | "below";
@@ -82,15 +86,16 @@ export interface CollectionProps<T, M extends string = string> {
   /** For testing: Override the drop indicator state with a specific item ID */
   testShowDropIndicatorId?: string;
   setExpanded?: (item: T, expanded: boolean) => void;
-  acceptsDrop?: ListViewRootProps["acceptsDrop"];
-  onMoveItem?: ListViewRootProps["onMoveItem"];
-  getDropTargetParentIndex?: ListViewRootProps["getDropTargetParentIndex"];
+  acceptsDrop?: ListViewRootProps<T>["acceptsDrop"];
+  onMoveItem?: ListViewRootProps<T>["onMoveItem"];
+  getDropTargetParentIndex?: ListViewRootProps<T>["getDropTargetParentIndex"];
   getDepth?: (item: T) => number;
   onFilesDrop?: (event: React.DragEvent<Element>) => void;
   getRenamable?: (item: T) => boolean;
   /** Currently selected file IDs */
   selectedIds?: string[];
   viewType?: CollectionViewType;
+  onClick?: () => void;
   onClickItem?: (itemId: string) => void;
   onDoubleClickItem?: (itemId: string) => void;
   renderEmptyState?: () => React.ReactElement<any>;

package/src/components/ColorSwatch.tsx

@@ -1,4 +1,4 @@
-import { getContrastColorForBackground } from "@noya-app/noya-colorpicker";
+import { getContrastColorForBackground } from "@noya-app/noya-color";
 import { CheckIcon } from "@noya-app/noya-icons";
 import React, { forwardRef } from "react";
 
@@ -39,7 +39,7 @@ export const ColorSwatch = forwardRef(function ColorSwatch(
   const checkedColor = getContrastColorForBackground(color);
 
   return (
-    <div className="relative" style={{ width: sizePx, height: sizePx }}>
+    <div className="n-relative" style={{ width: sizePx, height: sizePx }}>
       <Component
         {...props}
         ref={ref}
@@ -57,7 +57,7 @@ export const ColorSwatch = forwardRef(function ColorSwatch(
       {checked && (
         <CheckIcon
           color={checkedColor}
-          className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          className="n-absolute n-top-1/2 n-left-1/2 -n-translate-x-1/2 -n-translate-y-1/2"
         />
       )}
     </div>

package/src/components/ColorSwatchControl.tsx

@@ -61,7 +61,7 @@ export function ColorSwatchControl(props: ColorSwatchControlProps) {
             onBlur={onBlur}
             disabled={disabled}
             // TODO: decide on "checked" visual treatment
-            className={cx(readOnly ? "cursor-default" : "cursor-pointer")}
+            className={cx(readOnly ? "n-cursor-default" : "n-cursor-pointer")}
             checked={value === option}
           />
         );
@@ -83,7 +83,7 @@ export function ColorSwatchControl(props: ColorSwatchControlProps) {
       type="single"
       value={value as string}
       onValueChange={onValueChange}
-      className="w-full"
+      className="n-w-full"
       disabled={readOnly}
     >
       {content}

package/src/components/Combobox.tsx

@@ -466,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>
@@ -488,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 ? (
@@ -506,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

@@ -52,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/Dialog.tsx

@@ -19,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}
   />
 ));
@@ -32,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}
@@ -55,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}
@@ -69,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}
@@ -136,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)",
@@ -170,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}
     />