@noya-app/noya-designsystem 0.1.63 → 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 = {
@@ -16,51 +20,80 @@ const toolbarStyle = {
   [cssVarNames.colors.inputBackground]: "transparent",
 };
 
+export function BaseToolbarContainer({
+  children,
+  showDivider = true,
+  className,
+  innerClassName,
+  enableAbsoluteBreakpoint = true,
+}: {
+  children: React.ReactNode;
+  showDivider?: boolean;
+  className?: string;
+  innerClassName?: string;
+  enableAbsoluteBreakpoint?: boolean;
+}) {
+  return (
+    <div className={cx("n-flex n-flex-col", className)} style={toolbarStyle}>
+      <div
+        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}`,
+        }}
+      >
+        {children}
+      </div>
+      {showDivider && <Divider variant="strong" />}
+    </div>
+  );
+}
+
 export function BaseToolbar({
   children,
   left,
   right,
   logo,
   showDivider = true,
+  className,
+  innerClassName,
+  enableAbsoluteBreakpoint = true,
 }: BaseToolbarProps) {
   return (
-    <div className="flex flex-col" style={toolbarStyle}>
+    <BaseToolbarContainer
+      showDivider={showDivider}
+      className={className}
+      innerClassName={innerClassName}
+      enableAbsoluteBreakpoint={enableAbsoluteBreakpoint}
+    >
+      {logo && (
+        <>
+          {logo}
+          <DividerVertical />
+        </>
+      )}
+      <Spacer.Horizontal size={10} />
+      {left && (
+        <>
+          <div className="n-flex n-gap-toolbar-separator">{left}</div>
+          <Spacer.Horizontal size={10} />
+        </>
+      )}
       <div
-        className="flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar"
-        style={{
-          flex: `0 0 ${cssVars.spacing.toolbarHeight}`,
-        }}
+        className={
+          "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none @2xl/toolbar:n-absolute n-inset-0"
+        }
       >
-        {logo && (
-          <>
-            {logo}
-            <DividerVertical />
-          </>
-        )}
-        <Spacer.Horizontal size={10} />
-        {left && (
-          <>
-            <div className="flex 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">
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              pointerEvents: "all",
-            }}
-          >
-            {children}
-          </div>
+        <div className="n-flex n-items-center n-justify-center n-pointer-events-auto">
+          {children}
         </div>
-        <Spacer.Horizontal />
-        <Spacer.Horizontal size={10} />
-        <div className="flex gap-toolbar-separator">{right}</div>
       </div>
-      {showDivider && <Divider variant="strong" />}
-    </div>
+      <Spacer.Horizontal />
+      <Spacer.Horizontal size={10} />
+      <div className="n-flex n-gap-toolbar-separator">{right}</div>
+    </BaseToolbarContainer>
   );
 }

package/src/components/Breadcrumbs.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRef } from "react";
 
 import React from "react";
@@ -19,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

@@ -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";
 
@@ -20,27 +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",
+    "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
@@ -97,11 +101,12 @@ 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",
-    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"
@@ -112,9 +117,11 @@ export const Button = forwardRef(function Button(
             ? "none"
             : size
     ],
-    variant === "normal" && (children ? "min-w-[31px]" : "min-w-[27px]"),
-    colorSchemeStyles[colorScheme],
-    !children && (icon || iconRight) && !(icon && iconRight) && "w-[27px]"
+    variant === "normal" && (children ? "n-min-w-[31px]" : "n-min-w-[27px]"),
+    variant === "ghost"
+      ? "n-border-solid n-border-input-background hover:n-bg-input-background-light"
+      : colorSchemeStyles[colorScheme],
+    !children && (icon || iconRight) && !(icon && iconRight) && "n-w-[27px]"
   );
 
   const buttonClassName = useMemo(() => {
@@ -140,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)}
@@ -160,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

@@ -1,67 +1,81 @@
+"use client";
+
 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 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;
 
@@ -121,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,13 +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";
@@ -33,8 +34,10 @@ 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;
   getExpanded?: (item: T) => boolean | undefined;
   getPlaceholder?: (item: T) => string;
   /**
@@ -59,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";
@@ -79,18 +86,19 @@ 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;
+  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-color";
+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="n-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="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

@@ -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,14 +54,14 @@ 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}
             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}
           />
         );
@@ -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}
@@ -81,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}