@noya-app/noya-designsystem 0.1.48 → 0.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.48",
+  "version": "0.1.50",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,10 +22,10 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.18",
-    "@noya-app/noya-utils": "0.1.4",
-    "@noya-app/noya-geometry": "0.1.8",
-    "@noya-app/noya-icons": "0.1.6",
+    "@noya-app/noya-colorpicker": "0.1.19",
+    "@noya-app/noya-utils": "0.1.5",
+    "@noya-app/noya-geometry": "0.1.10",
+    "@noya-app/noya-icons": "0.1.7",
     "@noya-app/noya-keymap": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
@@ -50,6 +50,7 @@
     "vscode-fuzzy-scorer": "^0.0.4"
   },
   "devDependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-virtualized": "^9.21.21",

package/src/__tests__/validateDropIndicator.test.ts

@@ -49,7 +49,7 @@ describe("defaultAcceptsDrop", () => {
 describe("validateDropIndicator", () => {
   const mockAcceptsDrop = (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: "above" | "below" | "inside"
   ) => {
     // Mock that only allows dropping inside
@@ -59,7 +59,7 @@ describe("validateDropIndicator", () => {
 
   const mockAcceptsDropAboveBelow = (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: "above" | "below" | "inside"
   ) => {
     // Mock that only allows dropping above/below
@@ -69,7 +69,7 @@ describe("validateDropIndicator", () => {
 
   const mockAcceptsAll = (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: "above" | "below" | "inside"
   ) => {
     // Mock that allows all drop positions
@@ -78,7 +78,7 @@ describe("validateDropIndicator", () => {
 
   const mockAcceptsAboveAndInside = (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: "above" | "below" | "inside"
   ) => {
     // Mock that allows dropping above and inside, but not below

package/src/components/ActionMenu.tsx

@@ -10,19 +10,29 @@ type ActionMenuProps<TMenu extends string> = {
   onSelect: (action: TMenu) => void;
   selected: boolean;
   onOpenChange: (open: boolean) => void;
+  className?: string;
+  style?: React.CSSProperties;
 };
 
 export const ActionMenu = memoGeneric(function ActionMenu<
   TMenu extends string,
->({ menuItems, onSelect, selected, onOpenChange }: ActionMenuProps<TMenu>) {
-  const style = useMemo(() => {
+>({
+  menuItems,
+  onSelect,
+  selected,
+  onOpenChange,
+  className,
+  style,
+}: ActionMenuProps<TMenu>) {
+  const internalStyle = useMemo(() => {
     return {
       backgroundColor: selected
         ? cssVars.colors.primaryPastel
         : cssVars.colors.inputBackground,
       padding: "4px",
+      ...style,
     };
-  }, [selected]);
+  }, [selected, style]);
 
   return (
     <DropdownMenu
@@ -31,7 +41,8 @@ export const ActionMenu = memoGeneric(function ActionMenu<
       onOpenChange={onOpenChange}
     >
       <IconButton
-        style={style}
+        style={internalStyle}
+        className={className}
         iconName="DotsVerticalIcon"
         color={selected ? cssVars.colors.primary : undefined}
       />

package/src/components/Avatar.tsx

@@ -181,8 +181,8 @@ const OverflowAvatar = React.memo(function OverflowAvatar({
   count: number;
 }) {
   return (
-    <AvatarRoot size={size} backgroundColor="var(--text-disabled)" disabled>
-      <AvatarFallback backgroundColor="var(--text-disabled)" size={size}>
+    <AvatarRoot size={size} backgroundColor="var(--n-text-disabled)" disabled>
+      <AvatarFallback backgroundColor="var(--n-text-disabled)" size={size}>
         +{count}
       </AvatarFallback>
     </AvatarRoot>

package/src/components/Banner.tsx

@@ -0,0 +1,29 @@
+import React, { CSSProperties } from "react";
+import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
+import { Small } from "./Text";
+
+const bannerStyles = {
+  backgroundColor: cssVars.colors.inputBackground,
+  color: cssVars.colors.textDisabled,
+};
+
+export type BannerProps = {
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function Banner({ label = "No items", className, style }: BannerProps) {
+  return (
+    <div
+      className={cx(
+        "flex p-1 items-center justify-center select-none rounded",
+        className
+      )}
+      style={{ ...bannerStyles, ...style }}
+    >
+      <Small color="textDisabled">{label}</Small>
+    </div>
+  );
+}

package/src/components/BaseToolbar.tsx

@@ -21,7 +21,7 @@ export function BaseToolbar({
   return (
     <div className="flex flex-col">
       <div
-        className="flex items-center pr-2.5 bg-sidebar-background flex-none relative"
+        className="flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar"
         style={{
           flex: `0 0 ${cssVars.spacing.toolbarHeight}`,
         }}
@@ -39,7 +39,7 @@ export function BaseToolbar({
             <Spacer.Horizontal size={10} />
           </>
         )}
-        <div className="flex items-center justify-center text-text-muted pointer-events-none lg:absolute inset-0">
+        <div className="flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0">
           <div
             style={{
               display: "flex",

package/src/components/Button.tsx

@@ -5,8 +5,8 @@ import React, {
   ReactNode,
   useCallback,
 } from "react";
-import { Tooltip } from "./Tooltip";
 import { cx } from "../utils/classNames";
+import { Tooltip } from "./Tooltip";
 
 type ButtonVariant =
   | "normal"
@@ -87,7 +87,7 @@ export const Button = forwardRef(function Button(
       ref={forwardedRef}
       id={id}
       className={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(--popover-background)_inset] transition-all",
+        "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" : "",
         active

package/src/components/Checkbox.tsx

@@ -58,8 +58,8 @@ export const Checkbox = React.memo(
           className={`
             absolute 
             inset-0
-            h-[27px] 
-            w-[27px] 
+            h-input-height 
+            w-input-height 
             pointer-events-none
             stroke-white
             opacity-0

package/src/components/Chip.tsx

@@ -19,32 +19,32 @@ const SIZE_STYLES = {
 } 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]",
+  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]",
 } as const;
 
 const COLOR_STYLES = {
   primary: {
     text: "text-primary",
     bg: "bg-primary-pastel",
-    subtle: "bg-[var(--chip-primary-bg)]",
+    subtle: "bg-[var(--n-chip-primary-bg)]",
   },
   secondary: {
     text: "text-secondary",
     bg: "bg-secondary-pastel",
-    subtle: "bg-[var(--chip-secondary-bg)]",
+    subtle: "bg-[var(--n-chip-secondary-bg)]",
   },
   error: {
     text: "text-text",
     bg: "bg-[rgb(255,219,219)]",
-    subtle: "bg-[var(--chip-error-bg)]",
+    subtle: "bg-[var(--n-chip-error-bg)]",
   },
   default: {
     text: "text-text",
     bg: "bg-input-background",
-    subtle: "bg-[var(--chip-default-bg)]",
+    subtle: "bg-[var(--n-chip-default-bg)]",
   },
 } as const;
 
@@ -52,16 +52,16 @@ 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",
+    add: "ml-[-2px] mr-[2px] -top-[1px] scale-[0.75]",
+    delete: "mr-[-2px] ml-[2px] scale-[0.75]",
   },
   medium: {
-    add: "ml-[-2px] mr-[-2px] scale-60",
-    delete: "mr-[-2px] scale-60",
+    add: "ml-[-2px] mr-[-2px] scale-[0.60]",
+    delete: "mr-[-2px] scale-[0.60]",
   },
   small: {
-    add: "ml-[-2px] mr-[-2px] scale-60",
-    delete: "mr-[-2px] scale-60",
+    add: "ml-[-2px] mr-[-2px] scale-[0.60]",
+    delete: "mr-[-2px] scale-[0.60]",
   },
 } as const;
 
@@ -82,6 +82,7 @@ export interface ChipProps {
   onHoverDeleteChange?: (hovering: boolean) => void;
   style?: React.CSSProperties;
   tabIndex?: number;
+  role?: string;
 }
 
 export const Chip = memo(

package/src/components/Collection.tsx

@@ -2,11 +2,17 @@ import React from "react";
 import { forwardRefGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
 import { Grid, GridViewSize } from "../components/Grid";
 import { MenuItem } from "../components/internal/Menu";
-import { ListView, ListViewRootProps } from "../components/ListView";
+import {
+  ListView,
+  ListViewRootProps,
+  ListViewRowProps,
+} from "../components/ListView";
 import { List } from "./List";
 
 export type CollectionViewType = "grid" | "list";
 
+export type CollectionThumbnailSize = "auto" | "custom";
+
 export type CollectionRef = {
   editName: (id: string) => void;
 };
@@ -16,12 +22,19 @@ export type CollectionThumbnailProps<T> = {
   selected: boolean;
 };
 
+export type CollectionRenderActionProps<T> = {
+  item: T;
+  selected: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
 export interface CollectionProps<T, M extends string = string> {
   className?: string;
   items: T[];
   getId: (item: T) => string;
   getName: (item: T) => string;
   getExpanded?: (item: T) => boolean | undefined;
+  getPlaceholder?: (item: T) => string;
   /**
    * Whether directories should be expandable.
    * @default true
@@ -39,7 +52,9 @@ export interface CollectionProps<T, M extends string = string> {
     item,
     selected,
   }: CollectionThumbnailProps<T>) => React.ReactNode;
-  renderAction?: "menu" | ((item: T, selected: boolean) => React.ReactNode);
+  renderAction?:
+    | "menu"
+    | ((props: CollectionRenderActionProps<T>) => React.ReactNode);
   renderDetail?: (item: T, selected: boolean) => React.ReactNode;
   /** Callback when selection changes. If not provided, selection will be disabled. */
   onSelectionChange?: (
@@ -52,13 +67,18 @@ export interface CollectionProps<T, M extends string = string> {
   detailPosition?: "end" | "below";
   /** Size of the list items. Defaults to 'medium'. */
   size?: GridViewSize;
+  /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
+  thumbnailSize?: CollectionThumbnailSize;
   /** For testing: Override the hover state with a specific item ID */
   testHoveredId?: string;
   /** For testing: Override the renaming state with a specific item ID */
   testRenamingId?: 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"];
   getDepth?: (item: T) => number;
   onFilesDrop?: (event: React.DragEvent<Element>) => void;
   getRenamable?: (item: T) => boolean;
@@ -68,6 +88,9 @@ export interface CollectionProps<T, M extends string = string> {
   onClickItem?: (itemId: string) => void;
   onDoubleClickItem?: (itemId: string) => void;
   renderEmptyState?: () => React.ReactElement;
+  /** @default false */
+  sortable?: boolean;
+  dragIndicatorStyle?: ListViewRowProps<M>["dragIndicatorStyle"];
 }
 
 export const Collection = forwardRefGeneric(function Collection<

package/src/components/Combobox.tsx

@@ -27,10 +27,6 @@ import {
 import { ListView } from "./ListView";
 import { Small } from "./Text";
 
-const comboboxButtonStyle = {
-  right: "2px",
-};
-
 export type BaseComboboxProps<T extends string> = {
   id?: string;
   loading?: boolean;
@@ -454,6 +450,28 @@ export const Combobox = memoGeneric(
         id={id}
         size={size}
         sideOffset={6}
+        end={
+          <>
+            {loading && (
+              <div className="pr-1.5">
+                <ActivityIndicator />
+              </div>
+            )}
+            {!readOnly && (
+              <InputField.Button
+                variant="floating"
+                onClick={handleChevronClick}
+              >
+                <DropdownChevronIcon
+                  className={cx(
+                    "transition-transform duration-100",
+                    shouldShowMenu ? "rotate-180" : "rotate-0"
+                  )}
+                />
+              </InputField.Button>
+            )}
+          </>
+        }
         renderPopoverContent={({ width }) => {
           const height = Math.min(
             ListView.calculateHeight({
@@ -528,25 +546,6 @@ export const Combobox = memoGeneric(
             />
           )}
         {children}
-        {loading && (
-          <InputField.Label htmlFor={id}>
-            <ActivityIndicator />
-          </InputField.Label>
-        )}
-        {!readOnly && (
-          <InputField.Button
-            variant="floating"
-            onClick={handleChevronClick}
-            style={comboboxButtonStyle}
-          >
-            <DropdownChevronIcon
-              className={cx(
-                "transition-transform duration-100",
-                shouldShowMenu ? "rotate-180" : "rotate-0"
-              )}
-            />
-          </InputField.Button>
-        )}
       </InputField.Root>
     );
   })

package/src/components/ComboboxMenu.tsx

@@ -92,7 +92,7 @@ export const ComboboxMenu = memoGeneric(
               <div className="flex flex-1 min-w-0 items-center">
                 {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
                 {item.checked ? (
-                  <div className={styles.itemIndicatorStyle}>
+                  <div {...styles.itemIndicator}>
                     <CheckIcon />
                   </div>
                 ) : indented ? (

package/src/components/Dialog.tsx

@@ -138,8 +138,8 @@ export const Dialog = forwardRef(function Dialog(
               className="z-[1]"
               style={{
                 position: "absolute",
-                top: "var(--dialog-padding)",
-                right: "var(--dialog-padding)",
+                top: "var(--n-dialog-padding)",
+                right: "var(--n-dialog-padding)",
               }}
             />
           </DialogPrimitive.Close>

package/src/components/DimensionInput.tsx

@@ -1,6 +1,7 @@
 import { round } from "@noya-app/noya-utils";
 import * as React from "react";
 import { InputField } from "./InputField";
+import { LabeledField } from "./LabeledField";
 
 export type SetNumberMode = "replace" | "adjust";
 
@@ -50,17 +51,18 @@ export const DimensionInput = React.memo(function DimensionInput({
   );
 
   return (
-    <InputField.Root id={id} width={size}>
-      <InputField.NumberInput
-        value={value === undefined ? value : round(value, 2)}
-        placeholder={value === undefined ? placeholder : undefined}
-        onNudge={handleNudgeValue}
-        disabled={disabled}
-        {...(trigger === "change"
-          ? { onChange: handleSetValue }
-          : { onSubmit: handleSetValue })}
-      />
-      {label && <InputField.Label>{label}</InputField.Label>}
-    </InputField.Root>
+    <LabeledField label={label} labelPosition="inset">
+      <InputField.Root id={id} width={size}>
+        <InputField.NumberInput
+          value={value === undefined ? value : round(value, 2)}
+          placeholder={value === undefined ? placeholder : undefined}
+          onNudge={handleNudgeValue}
+          disabled={disabled}
+          {...(trigger === "change"
+            ? { onChange: handleSetValue }
+            : { onSubmit: handleSetValue })}
+        />
+      </InputField.Root>
+    </LabeledField>
   );
 });

package/src/components/EditableText.tsx

@@ -35,6 +35,7 @@ type Props = {
   textClassName?: string;
   readOnly?: boolean;
   onBlur?: () => void;
+  tabIndex?: number;
   /**
    * If true, will render an unfocused input. This should only be used for visual regression tests.
    */
@@ -66,6 +67,7 @@ export const EditableText = memo(
       readOnly,
       onBlur,
       testFocused = false,
+      tabIndex = 0,
       ...props
     }: Props,
     ref: React.ForwardedRef<EditableTextRef>
@@ -136,7 +138,7 @@ export const EditableText = memo(
       children: displayValue,
       onClick: () => setFocused(true),
       ref: previewRef,
-      tabIndex: 0,
+      tabIndex,
       onKeyDown: (e: React.KeyboardEvent) => {
         if (e.key === "Enter" || e.key === " ") {
           setFocused(true);

package/src/components/FillInputField.tsx

@@ -1,8 +1,8 @@
 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";
-import { cx } from "../utils/classNames";
 
 const FillButton = forwardRef<
   HTMLButtonElement,
@@ -11,7 +11,7 @@ const FillButton = forwardRef<
   <button
     ref={ref}
     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)] `,
+      `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-[0_0_0_1px_var(--n-sidebar-background),0_0_0_3px_var(--n-primary)] `,
       className
     )}
     {...props}