@noya-app/noya-designsystem 0.1.61 → 0.1.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,12 +22,12 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.25",
+    "@noya-app/noya-colorpicker": "0.1.26",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-geometry": "0.1.12",
-    "@noya-app/noya-icons": "0.1.10",
+    "@noya-app/noya-icons": "0.1.11",
     "@noya-app/noya-keymap": "0.1.3",
-    "@noya-app/noya-tailwind-config": "0.1.4",
+    "@noya-app/noya-tailwind-config": "0.1.5",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",

package/src/components/Button.tsx

@@ -12,25 +12,22 @@ import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 import type { MenuItemIcon } from "./internal/Menu";
 
-type ButtonVariant =
-  | "normal"
-  | "primary"
-  | "secondary"
-  | "secondaryBright"
-  | "thin"
-  | "floating"
-  | "none";
+type ButtonVariant = "normal" | "thin" | "floating" | "none";
 
 type ButtonSize = "small" | "normal" | "large" | "floating";
 
-const variantStyles: Record<ButtonVariant, string> = {
-  normal:
-    "bg-button-background text-button-text hover:bg-button-background-hover active:bg-button-background-active min-w-[31px]",
-  primary:
-    "bg-primary text-white hover:bg-primary-light active:bg-primary min-w-[31px]",
+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",
   secondary:
-    "bg-secondary text-white hover:bg-secondary-light active:bg-secondary min-w-[31px]",
-  secondaryBright: "bg-[#0ab557] text-white hover:opacity-80 active:opacity-90",
+    "bg-secondary text-white hover:bg-secondary-light active: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",
@@ -46,16 +43,21 @@ const sizeStyles: Record<ButtonSize | "thin" | "none", string> = {
   none: "py-0 px-0",
 };
 
-export interface ButtonRootProps {
+export interface ButtonProps
+  extends React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
   id?: string;
   className?: string;
   style?: CSSProperties;
   tabIndex?: number;
   icon?: MenuItemIcon;
   iconRight?: MenuItemIcon;
-  children: ReactNode;
+  children?: ReactNode;
   active?: boolean;
   disabled?: boolean;
+  colorScheme?: ButtonColorScheme;
   variant?: ButtonVariant;
   size?: ButtonSize;
   tooltip?: ReactNode;
@@ -81,6 +83,7 @@ export const Button = forwardRef(function Button(
     tooltip,
     active = false,
     disabled = false,
+    colorScheme: colorSchemeProp,
     variant = "normal",
     size = "normal",
     contentStyle,
@@ -88,15 +91,17 @@ export const Button = forwardRef(function Button(
     children,
     as: Component = "button",
     ...rest
-  }: ButtonRootProps,
+  }: ButtonProps,
   forwardedRef: ForwardedRef<HTMLButtonElement>
 ) {
+  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" : "",
     active
-      ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover min-w-[31px]"
+      ? "bg-button-background-active text-button-text-active hover:bg-button-background-active-hover"
       : variantStyles[variant],
     sizeStyles[
       variant === "thin"
@@ -106,7 +111,10 @@ export const Button = forwardRef(function Button(
           : variant === "none"
             ? "none"
             : size
-    ]
+    ],
+    variant === "normal" && (children ? "min-w-[31px]" : "min-w-[27px]"),
+    colorSchemeStyles[colorScheme],
+    !children && (icon || iconRight) && !(icon && iconRight) && "w-[27px]"
   );
 
   const buttonClassName = useMemo(() => {

package/src/components/DimensionInput.tsx

@@ -51,7 +51,7 @@ export const DimensionInput = React.memo(function DimensionInput({
   );
 
   return (
-    <LabeledField label={label} labelPosition="inset">
+    <LabeledField label={label} labelType="inset">
       <InputField.Root id={id} width={size}>
         <InputField.NumberInput
           value={value === undefined ? value : round(value, 2)}

package/src/components/DraggableMenuButton.tsx

@@ -1,5 +1,8 @@
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
-import { memoGeneric } from "@noya-app/react-utils";
+import {
+  memoGeneric,
+  useControlledOrUncontrolled,
+} from "@noya-app/react-utils";
 import React, { useCallback, useState } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
@@ -12,21 +15,33 @@ import { MenuItem } from "./internal/Menu";
 export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
   T extends string,
 >({
+  open: openProp,
+  onOpenChange: onOpenChangeProp,
   items,
   onSelect,
   onClick,
   isVisible = true,
   className,
   style,
+  ...rest
 }: {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
   items?: MenuItem<T>[];
   onSelect?: (value: T) => void;
   onClick?: () => void;
   isVisible?: boolean;
   className?: string;
   style?: React.CSSProperties;
-}) {
-  const [open, setOpen] = useState(false);
+} & Omit<
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+  "onSelect"
+>) {
+  const [open, setOpen] = useControlledOrUncontrolled({
+    value: openProp,
+    onChange: onOpenChangeProp,
+    defaultValue: false,
+  });
   const [downPosition, setDownPosition] = useState<{
     x: number;
     y: number;
@@ -64,7 +79,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
 
       setDownPosition(null);
     },
-    [downPosition, open]
+    [downPosition, open, setOpen]
   );
 
   const handleOpenChange = useCallback(
@@ -76,6 +91,7 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
 
   return (
     <div
+      {...rest}
       className={cx(
         "cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ",
         className

package/src/components/DropdownMenu.tsx

@@ -1,9 +1,14 @@
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
-import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
+import {
+  forwardRefGeneric,
+  memoGeneric,
+  useControlledOrUncontrolled,
+} from "@noya-app/react-utils";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import React, {
   ComponentProps,
   ForwardedRef,
+  ReactNode,
   SyntheticEvent,
   useMemo,
 } from "react";
@@ -11,6 +16,7 @@ import {
   portalScopeProps,
   usePortalScopeId,
 } from "../contexts/PortalScopeContext";
+import Button, { ButtonProps } from "./Button";
 import { MenuProps } from "./ContextMenu";
 import { getKeyboardShortcutsForMenuItems, styles } from "./internal/Menu";
 import { MenuViewport } from "./internal/MenuViewport";
@@ -19,7 +25,13 @@ import { MenuViewport } from "./internal/MenuViewport";
  * Root
  * ------------------------------------------------------------------------- */
 
-export type DropdownRootProps<T extends string> = MenuProps<T> & {
+export type DropdownRootProps<T extends string> = Omit<
+  MenuProps<T>,
+  "children"
+> & {
+  children?: ReactNode | ((props: { open: boolean }) => ReactNode);
+  title?: ReactNode;
+  icon?: ButtonProps["icon"];
   open?: boolean;
   onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
   emptyState?: React.ReactNode;
@@ -50,7 +62,7 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     onSelect,
     shouldBindKeyboardShortcuts,
     onOpenChange,
-    open,
+    open: openProp,
     onCloseAutoFocus,
     side,
     sideOffset = 4,
@@ -59,8 +71,16 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     collisionPadding = 8,
     emptyState,
     contentStyle,
+    title,
+    icon,
   } = props;
 
+  const [open, setOpen] = useControlledOrUncontrolled({
+    value: openProp,
+    onChange: onOpenChange,
+    defaultValue: false,
+  });
+
   const portalScopeId = usePortalScopeId();
 
   const keymap = useMemo(
@@ -83,12 +103,18 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
   );
 
   return (
-    <RadixDropdownMenu.Root onOpenChange={onOpenChange} open={open}>
+    <RadixDropdownMenu.Root onOpenChange={setOpen} open={open}>
       <RadixDropdownMenu.Trigger
         ref={forwardedRef as ForwardedRef<any>}
         asChild
       >
-        {children}
+        {typeof children === "function"
+          ? children({ open })
+          : children || (
+              <Button icon={icon} active={open} iconRight="DropdownChevronIcon">
+                {title}
+              </Button>
+            )}
       </RadixDropdownMenu.Trigger>
       <RadixDropdownMenu.Portal>
         <RadixDropdownMenu.Content

package/src/components/IconButton.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { cssVars } from "../theme";
-import { Button, ButtonRootProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
 import { IconName, Icons } from "./Icons";
 
-type Props = Omit<ButtonRootProps, "children" | "variant" | "flex" | "size"> & {
+type Props = Omit<ButtonProps, "children" | "variant" | "flex" | "size"> & {
   iconName: IconName;
   className?: string;
   style?: React.CSSProperties;

package/src/components/InputField.tsx

@@ -14,11 +14,11 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { useLabel, useLabelPosition } from "../hooks/useLabel";
+import { useLabel, useLabelType } from "../hooks/useLabel";
 import { cx, mergeConflictingClassNames } from "../utils/classNames";
 import handleNudge from "../utils/handleNudge";
 import { getInsetEndStyles, InputSize, startBaseStyles } from "../utils/inputs";
-import { Button, ButtonRootProps } from "./Button";
+import { Button, ButtonProps } from "./Button";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
 import TextInput, { TextInputProps } from "./internal/TextInput";
@@ -101,7 +101,7 @@ const InputFieldDropdownMenu = memoGeneric(function InputFieldDropdownMenu<
 const InputFieldButton = memo(
   forwardRef(function InputFieldButton(
     props: React.ButtonHTMLAttributes<HTMLButtonElement> &
-      ButtonRootProps & {
+      ButtonProps & {
         variant?: "floating" | "normal";
       },
     forwardedRef: ForwardedRef<HTMLButtonElement>
@@ -537,7 +537,7 @@ function InputFieldRoot({
   const measuredInputSize = useSize(inputRef, "width");
   const measuredStartSize = useSize(startRef, "width");
   const measuredEndSize = useSize(endRef, "width");
-  const labelPosition = useLabelPosition();
+  const labelType = useLabelType();
   const { label } = useLabel({ fieldId: id });
 
   const endStyles = getInsetEndStyles(size);
@@ -592,7 +592,7 @@ function InputFieldRoot({
         >
           {labelProp
             ? insetLabel
-            : label && labelPosition === "inset" && insetLabel}
+            : label && labelType === "inset" && insetLabel}
           {end}
         </span>
       )}

package/src/components/Label.tsx

@@ -1,8 +1,6 @@
 import React, { LabelHTMLAttributes, forwardRef, memo } from "react";
 import { mergeConflictingClassNames } from "../utils/classNames";
 
-export type LabelPosition = "inset" | "start" | "end" | "above";
-
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
 
 const labelStyles = "flex items-center select-none z-label relative";

package/src/components/LabeledField.tsx

@@ -2,29 +2,30 @@ import React, { memo, useMemo } from "react";
 import { useIndent } from "../hooks/useIndent";
 import {
   LabelContext,
-  LabelPositionContext,
-  LabelPositionContextValue,
-  useLabelPosition,
+  LabelType,
+  LabelTypeContext,
+  LabelTypeContextValue,
+  useLabelType,
   useLabelWidth,
 } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
-import { Label, LabelPosition } from "./Label";
+import { Label } from "./Label";
 
-export const labeledFieldStyles = (labelPosition?: LabelPosition) =>
+export const labeledFieldStyles = (labelType?: LabelType) =>
   cx(
     "flex flex-row flex-1 flex-wrap items-center gap-x-1.5",
-    labelPosition === "end" && "flex-row-reverse justify-end",
-    labelPosition === "above" && "flex-col items-stretch justify-start"
+    labelType === "end" && "flex-row-reverse justify-end",
+    labelType === "above" && "flex-col items-stretch justify-start"
   );
 
-const labelPositionInset: LabelPositionContextValue = {
-  position: "inset",
+const labelTypeInset: LabelTypeContextValue = {
+  type: "inset",
 };
 
 export const LabeledField = memo(function LabeledField({
   children,
   label,
-  labelPosition: labelPositionProp,
+  labelType: labelTypeProp,
   fieldId,
   minWidth = 100,
   className,
@@ -34,7 +35,7 @@ export const LabeledField = memo(function LabeledField({
 }: {
   children: React.ReactNode;
   label: React.ReactNode;
-  labelPosition?: LabelPosition;
+  labelType?: LabelType;
   labelStyle?: React.CSSProperties;
   /** Used for both the `id` of the field and the `htmlFor` of the label, unless `id` and `htmlFor` are explicitly provided */
   fieldId?: string;
@@ -47,13 +48,12 @@ export const LabeledField = memo(function LabeledField({
   const labelWidthFromContext = useLabelWidth();
   const labelWidth = labelWidthFromContext ?? minWidth;
 
-  const labelPositionFromContext = useLabelPosition();
-  const labelPosition =
-    labelPositionProp ?? labelPositionFromContext ?? "start";
+  const labelTypeFromContext = useLabelType();
+  const labelType = labelTypeProp ?? labelTypeFromContext;
 
   const labeledFieldClasses = useMemo(
-    () => labeledFieldStyles(labelPosition),
-    [labelPosition]
+    () => labeledFieldStyles(labelType),
+    [labelType]
   );
 
   const labelContextValue = useMemo(
@@ -89,29 +89,31 @@ export const LabeledField = memo(function LabeledField({
   return (
     <LabelContext.Provider value={labelContextValue}>
       {/* let components individually handle inset labels using info from context*/}
-      {labelPosition === "inset" ? (
-        <LabelPositionContext.Provider value={labelPositionInset}>
+      {labelType === "inset" ? (
+        <LabelTypeContext.Provider value={labelTypeInset}>
           {children}
-        </LabelPositionContext.Provider>
+        </LabelTypeContext.Provider>
       ) : (
         <div className={cx("flex relative flex-1", className)} style={style}>
           {Boolean(indentLevel) && <div style={indentStyle} />}
           <div className={labeledFieldClasses}>
-            <Label
-              htmlFor={fieldId}
-              // we do this so presence avatars are aligned to the right when position is above
-              // and when start/end position with textarea it aligns label to the top of the field
-              className={
-                labelPosition === "start" || labelPosition === "end"
-                  ? "self-start"
-                  : undefined
-              }
-              style={labelStyle}
-              {...props}
-            >
-              {label}
-            </Label>
-            {labelPosition === "start" ? (
+            {labelType !== "none" && (
+              <Label
+                htmlFor={fieldId}
+                // we do this so presence avatars are aligned to the right when position is above
+                // and when start/end position with textarea it aligns label to the top of the field
+                className={
+                  labelType === "start" || labelType === "end"
+                    ? "self-start"
+                    : undefined
+                }
+                style={labelStyle}
+                {...props}
+              >
+                {label}
+              </Label>
+            )}
+            {labelType === "start" ? (
               <div className="flex-auto flex" style={fieldStyle}>
                 {children}
               </div>

package/src/components/Popover.tsx

@@ -1,6 +1,12 @@
 import { useControlledOrUncontrolled } from "@noya-app/react-utils";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React, { ComponentProps, useEffect, useId, useRef } from "react";
+import React, {
+  ComponentProps,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+} from "react";
 import { useOpenPortalsControls } from "../contexts/OpenPortalsContext";
 import {
   portalScopeProps,
@@ -26,7 +32,9 @@ interface Props
     | "onFocusOutside"
     | "side"
   > {
-  children: React.ReactNode;
+  children:
+    | React.ReactNode
+    | ((props: { close: () => void }) => React.ReactNode);
   trigger: React.ReactNode;
   variant?: PopoverVariant;
   closable?: boolean;
@@ -72,6 +80,7 @@ export function Popover({
     onChange: onOpenChange,
     defaultValue: false,
   });
+  const close = useCallback(() => setIsOpen(false), [setIsOpen]);
 
   const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
 
@@ -127,7 +136,7 @@ export function Popover({
           //   event.stopPropagation();
           // }}
         >
-          {children}
+          {typeof children === "function" ? children({ close }) : children}
           {showArrow && (
             <PopoverPrimitive.Arrow className="fill-popover-background" />
           )}

package/src/components/SegmentedControl.tsx

@@ -103,7 +103,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
         className={cx(
           "inline-flex whitespace-pre flex-nowrap gap-1.5 items-center justify-center align-middle text-center",
           variant === "tabs" &&
-            "group-focus:ring-2 group-focus:ring-primary-pastel group-focus:ring-offset-2"
+            "group-focus-visible:ring-2 group-focus-visible:ring-primary-pastel group-focus-visible:ring-offset-2"
         )}
       >
         {icon && renderIcon(icon)}

package/src/components/SelectMenu.tsx

@@ -12,7 +12,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { useLabel, useLabelPosition } from "../hooks/useLabel";
+import { useLabel, useLabelType } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
 import {
@@ -92,7 +92,7 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
     label: props.label,
     fieldId: props.id,
   });
-  const labelPosition = useLabelPosition();
+  const labelType = useLabelType();
 
   return (
     <Select.SelectTrigger asChild onFocus={onFocus} onBlur={onBlur}>
@@ -107,7 +107,7 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
         disabled={disabled}
       >
         {icon && <span className="pr-1.5">{renderIcon(icon)}</span>}
-        {label && labelPosition === "inset" && (
+        {label && labelType === "inset" && (
           <div className={insetEndStyles}>
             <Label className="pr-4 text-text-disabled" htmlFor={id}>
               {label}

package/src/components/SelectionToolbar.tsx

@@ -1,5 +1,6 @@
 import {
   cssVarNames,
+  cx,
   portalScopeProps,
   usePortalScopeId,
 } from "@noya-app/noya-designsystem";
@@ -7,7 +8,7 @@ import { Rect } from "@noya-app/noya-geometry";
 import { useSize } from "@noya-app/react-utils";
 import * as PopperPrimitive from "@radix-ui/react-popper";
 import type { MeasurableElement } from "@radix-ui/utils";
-import React, { memo, useMemo } from "react";
+import React, { ComponentProps, memo, useMemo } from "react";
 import { createPortal } from "react-dom";
 
 // Create a Measurable from a Rect
@@ -25,10 +26,20 @@ const createVirtualElement = (rect: Rect): MeasurableElement => ({
   }),
 });
 
-type SelectionToolbarContainerProps = {
+type PopperPrimitiveContentProps = ComponentProps<
+  typeof PopperPrimitive.Content
+>;
+
+type SelectionToolbarContainerProps = Pick<
+  PopperPrimitiveContentProps,
+  "side" | "sideOffset" | "align"
+> & {
   rect: Rect;
   children: React.ReactNode;
   portalContainer?: HTMLElement | null;
+  containerClassName?: string;
+  containerStyle?: React.CSSProperties;
+  transitionDuration?: number;
 };
 
 export const SelectionToolbarContainer = memo(
@@ -36,6 +47,12 @@ export const SelectionToolbarContainer = memo(
     rect,
     children,
     portalContainer,
+    side = "top",
+    sideOffset = 10,
+    align = "center",
+    containerClassName,
+    containerStyle,
+    transitionDuration = 0.2,
   }: SelectionToolbarContainerProps) {
     const portalScopeId = usePortalScopeId();
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -52,23 +69,27 @@ export const SelectionToolbarContainer = memo(
     const popperContent = (
       <PopperPrimitive.Content
         {...portalScopeProps(portalScopeId)}
-        side="top"
-        sideOffset={10}
-        align="center"
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
         avoidCollisions
         collisionPadding={10}
         contentEditable={false}
         style={{
           zIndex: 1000,
           opacity: size ? 1 : 0,
-          transition: "opacity 0.2s ease-in-out",
+          transition: `opacity ${transitionDuration}s ease-in-out`,
           [cssVarNames.colors.inputBackground]: "transparent",
           [cssVarNames.colors.buttonBackground]: "transparent",
         }}
       >
         <div
           ref={containerRef}
-          className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
+          className={cx(
+            "flex gap-1 bg-popover-background rounded shadow-popover p-1",
+            containerClassName
+          )}
+          style={containerStyle}
           onClick={(e) => e.stopPropagation()}
           onMouseDown={(e) => e.stopPropagation()}
           onPointerDown={(e) => e.stopPropagation()}

package/src/components/Slider.tsx

@@ -78,7 +78,7 @@ export const Slider = memo(function Slider({
     >
       <div className="relative flex-grow h-[3px] overflow-hidden">
         <div
-          className="absolute h-full rounded-l bg-primary"
+          className="absolute h-full rounded-l bg-slider-active-background"
           style={{
             left: 0,
             width: `calc(${ratio * 100}% - ${ratio * 8}px - 2px)`,

package/src/components/Spacer.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-pascal-case */
 import type { ForwardedRef } from "react";
 import * as React from "react";