@noya-app/noya-designsystem 0.1.53 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "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.20",
+    "@noya-app/noya-colorpicker": "0.1.21",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-geometry": "0.1.11",
-    "@noya-app/noya-icons": "0.1.8",
+    "@noya-app/noya-icons": "0.1.9",
     "@noya-app/noya-keymap": "0.1.3",
     "@noya-app/noya-tailwind-config": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",

package/src/components/Button.tsx

@@ -7,7 +7,10 @@ import React, {
   useMemo,
 } from "react";
 import { cx, mergeConflictingClassNames } from "../utils/classNames";
+import { renderIcon } from "./Icons";
+import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
+import type { MenuItemIcon } from "./internal/Menu";
 
 type ButtonVariant =
   | "normal"
@@ -48,6 +51,8 @@ export interface ButtonRootProps {
   className?: string;
   style?: CSSProperties;
   tabIndex?: number;
+  icon?: MenuItemIcon;
+  iconRight?: MenuItemIcon;
   children: ReactNode;
   active?: boolean;
   disabled?: boolean;
@@ -71,6 +76,8 @@ export const Button = forwardRef(function Button(
     className,
     style,
     tabIndex,
+    icon,
+    iconRight,
     tooltip,
     active = false,
     disabled = false,
@@ -128,7 +135,13 @@ export const Button = forwardRef(function Button(
         className="min-h-[19px] flex items-center flex-1 justify-center leading-[15px]"
         style={contentStyle}
       >
+        {icon && renderIcon(icon)}
+        {icon && children && <Spacer.Horizontal inline size={6} />}
         {children}
+        {iconRight && (icon || children) && (
+          <Spacer.Horizontal inline size={6} />
+        )}
+        {iconRight && renderIcon(iconRight)}
       </span>
     </Component>
   );

package/src/components/ColorSwatch.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { cssVars } from "../theme";
 
 export type ColorSwatchSize = "xsmall" | "small" | "medium" | "large";
 
@@ -31,10 +32,12 @@ export const ColorSwatch = forwardRef(function ColorSwatch(
         height: sizePx,
         borderRadius: "4px",
         outline: checked
-          ? "2px solid rgba(0,0,0,0.2)"
+          ? `2px solid ${cssVars.colors.primary}`
           : "1px solid rgba(0,0,0,0.1)",
         outlineOffset: -1,
-        boxShadow: checked ? `inset 0 0 0 2px rgba(0,0,0,0.2)` : undefined,
+        boxShadow: checked
+          ? `inset 0 0 0 2px ${cssVars.colors.background}`
+          : undefined,
         ...style,
       }}
     />

package/src/components/Dialog.tsx

@@ -30,9 +30,8 @@ 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-[450px] max-h-[85vh] p-dialog-padding rounded-[2px] 
+        `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
@@ -54,7 +53,7 @@ const StyledTitle = forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cx(
-      `m-0 font-sans text-base font-normal leading-[1.4] text-text `,
+      `m-0 font-sans text-heading3 font-medium leading-[1.4] text-text `,
       className
     )}
     {...props}
@@ -152,7 +151,6 @@ export const Dialog = forwardRef(function Dialog(
         )}
         {description && (
           <>
-            <Spacer.Vertical size={10} />
             <StyledDescription>{description}</StyledDescription>
             <Spacer.Vertical size={20} />
           </>

package/src/components/Grid.tsx

@@ -235,7 +235,9 @@ export const Grid = memoGeneric(
                         <span
                           {...props}
                           className={cx(
-                            isSelected && "text-selected-list-item-text",
+                            isSelected
+                              ? "text-selected-list-item-text"
+                              : "text-text",
                             "truncate select-none"
                           )}
                         />

package/src/components/GridView.tsx

@@ -194,6 +194,7 @@ const GridViewItem = forwardRefGeneric(function GridViewItem<
         <>
           <Spacer.Vertical size={8} />
           <ItemTitle>{title || " "}</ItemTitle>
+          <Spacer.Vertical size={2} />
           <ItemDescription>{subtitle || " "}</ItemDescription>
         </>
       )}

package/src/components/InputField.tsx

@@ -239,7 +239,7 @@ const InputElement = forwardRef(
         : size === "large"
           ? "py-2.5 text-heading5"
           : size === "medium"
-            ? "py-1  text-heading5"
+            ? "py-1 text-heading5"
             : $variant === "bare" && "py-1 -m-1",
       className
     );
@@ -488,7 +488,9 @@ interface InputFieldRootProps {
   id?: string;
   children?: ReactNode;
   start?: ReactNode;
+  startClassName?: string;
   end?: ReactNode;
+  endClassName?: string;
   label?: ReactNode;
   width?: number;
   startWidth?: number;
@@ -520,6 +522,8 @@ function InputFieldRoot({
   className,
   start,
   end,
+  startClassName,
+  endClassName,
   label: labelProp,
 }: InputFieldRootProps) {
   const randomId = useId();
@@ -577,12 +581,15 @@ function InputFieldRoot({
     <RootContainer $width={width} style={style} className={className}>
       {children}
       {start && (
-        <span ref={startRef} className={startBaseStyles}>
+        <span ref={startRef} className={cx(startBaseStyles, startClassName)}>
           {start}
         </span>
       )}
       {(end || label) && (
-        <span ref={endRef} className={cx(endStyles, label && end && "gap-1.5")}>
+        <span
+          ref={endRef}
+          className={cx(endStyles, label && end && "gap-1.5", endClassName)}
+        >
           {labelProp
             ? insetLabel
             : label && labelPosition === "inset" && insetLabel}

package/src/components/Popover.tsx

@@ -1,5 +1,7 @@
+import { useControlledOrUncontrolled } from "@noya-app/react-utils";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, useEffect, useId, useRef } from "react";
+import { useOpenPortalsControls } from "../contexts/OpenPortalsContext";
 import {
   portalScopeProps,
   usePortalScopeId,
@@ -34,6 +36,7 @@ interface Props
   onClickClose?: () => void;
   showArrow?: boolean;
   className?: string;
+  portalContainer?: HTMLElement | null;
 }
 
 export const popoverStyle = {
@@ -59,15 +62,36 @@ export function Popover({
   onFocusOutside,
   onClickClose,
   className,
+  portalContainer,
 }: Props) {
+  const defaultId = useId();
   const portalScopeId = usePortalScopeId();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useControlledOrUncontrolled({
+    value: open,
+    onChange: onOpenChange,
+    defaultValue: false,
+  });
+
+  const { addOpenPortal, removeOpenPortal } = useOpenPortalsControls();
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    addOpenPortal(portalScopeId || defaultId);
+
+    return () => {
+      removeOpenPortal(portalScopeId || defaultId);
+    };
+  }, [addOpenPortal, isOpen, portalScopeId, removeOpenPortal, defaultId]);
 
   return (
-    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+    <PopoverPrimitive.Root open={isOpen} onOpenChange={setIsOpen}>
       <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portalContainer}>
         <PopoverPrimitive.Content
           {...portalScopeProps(portalScopeId)}
+          ref={contentRef}
           className={cx(
             popoverStyle.base,
             variant === "large" && popoverStyle.large,
@@ -81,7 +105,18 @@ export function Popover({
           onCloseAutoFocus={onCloseAutoFocus}
           onInteractOutside={onInteractOutside}
           onFocusOutside={onFocusOutside}
-          onPointerDownOutside={onPointerDownOutside}
+          onPointerDownOutside={(event) => {
+            if (
+              isEventInsideElement(
+                event.detail.originalEvent,
+                contentRef.current
+              )
+            ) {
+              event.preventDefault();
+            }
+
+            onPointerDownOutside?.(event);
+          }}
           collisionPadding={8}
           arrowPadding={2}
           // Don't propagate pointer down events to the canvas
@@ -109,3 +144,32 @@ export function Popover({
     </PopoverPrimitive.Root>
   );
 }
+
+/**
+ * Radix ignores pointer-events on the body when a popover is open.
+ * This function checks if an event is inside an element by temporarily
+ * setting pointer-events to auto and then restoring it afterward.
+ */
+function isEventInsideElement(
+  event: PointerEvent,
+  element: HTMLElement | null
+) {
+  if (!element) return false;
+
+  const body = document.body;
+  const originalPointerEvents = body.style.pointerEvents;
+  body.style.pointerEvents = "auto";
+
+  // Get all elements at the point
+  const elementsAtPoint = document.elementsFromPoint(
+    event.clientX,
+    event.clientY
+  );
+
+  // Restore original pointer-events
+  body.style.pointerEvents = originalPointerEvents;
+
+  const target = elementsAtPoint.at(0);
+
+  return target && element.contains(target);
+}

package/src/components/SegmentedControl.tsx

@@ -15,6 +15,7 @@ import { SelectableMenuItem } from "./internal/Menu";
 import { Tooltip } from "./Tooltip";
 
 type SegmentedControlColorScheme = "primary" | "secondary";
+type SegmentedControlVariant = "default" | "tabs";
 
 type SegmentedControlContextValue = {
   /** @default primary */
@@ -32,10 +33,10 @@ export interface SegmentedControlProps<T extends string> {
   /** @default primary */
   colorScheme?: SegmentedControlColorScheme;
   allowEmpty?: boolean;
-  separator?: boolean;
   items: SegmentedControlItemProps<T>[];
   className?: string;
   style?: React.CSSProperties;
+  variant?: SegmentedControlVariant;
 }
 
 export type SegmentedControlItemProps<T extends string> = {
@@ -43,6 +44,7 @@ export type SegmentedControlItemProps<T extends string> = {
   className?: string;
   style?: React.CSSProperties;
   tooltip?: ReactNode;
+  variant?: SegmentedControlVariant;
 } & Pick<
   SelectableMenuItem<T>,
   "value" | "disabled" | "icon" | "role" | "title"
@@ -58,6 +60,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
     disabled = false,
     icon,
     className,
+    variant = "default",
     ...props
   }: SegmentedControlItemProps<T>,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>
@@ -70,24 +73,42 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
       value={(value ?? "").toString()}
       disabled={disabled}
       className={cx(
-        "font-sans text-heading5 font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
-        colorScheme === "secondary"
-          ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
-          : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
-        colorScheme === "secondary"
-          ? "aria-checked:bg-secondary aria-checked:text-white"
-          : colorScheme === "primary"
-            ? "aria-checked:bg-primary aria-checked:text-white"
-            : "aria-checked:bg-background aria-checked:text-text",
+        "group",
+        "flex items-center justify-center",
+        "font-sans text-button relative flex-1 appearance-none text-segmented-control-item focus:outline-none transition-colors",
+        variant === "tabs" ? "font-semibold" : "font-normal",
+        variant === "tabs"
+          ? ""
+          : colorScheme === "secondary"
+            ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
+            : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
+        variant === "tabs"
+          ? "aria-checked:text-primary"
+          : colorScheme === "secondary"
+            ? "aria-checked:bg-secondary aria-checked:text-white"
+            : colorScheme === "primary"
+              ? "aria-checked:bg-primary aria-checked:text-white"
+              : "aria-checked:bg-background aria-checked:text-text",
         "focus:z-interactable",
-        "aria-checked:shadow-segment",
-        "whitespace-pre",
+        variant === "default"
+          ? "px-1 rounded aria-checked:shadow-segment"
+          : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+        variant === "default" &&
+          "border-r border-divider last:border-r-0 aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent",
         className
       )}
       {...props}
     >
-      {icon && renderIcon(icon)}
-      {title}
+      <span
+        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"
+        )}
+      >
+        {icon && renderIcon(icon)}
+        {title}
+      </span>
     </ToggleGroupPrimitive.Item>
   );
 
@@ -98,15 +119,6 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
   );
 });
 
-const Separator = ({ transparent }: { transparent: boolean }) => (
-  <div
-    className={cx(
-      "w-[1px] my-1 self-stretch bg-divider",
-      transparent && "bg-transparent"
-    )}
-  />
-);
-
 export const SegmentedControl = memoGeneric(function SegmentedControl<
   T extends string,
 >({
@@ -116,7 +128,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
   colorScheme,
   allowEmpty,
   items,
-  separator = true,
+  variant = "default",
   className,
   style,
 }: SegmentedControlProps<T>) {
@@ -131,8 +143,6 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
     [allowEmpty, onValueChange]
   );
 
-  const selectedIndex = items.findIndex((item) => item?.value === value);
-
   return (
     <SegmentedControlContext.Provider value={contextValue}>
       <ToggleGroupPrimitive.Root
@@ -141,36 +151,20 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         value={value}
         onValueChange={handleValueChange}
         className={cx(
-          `flex items-stretch flex-auto appearance-none relative outline-none min-h-input-height rounded bg-input-background py-[2px] px-[2px]`,
+          `appearance-none relative outline-none`,
+          variant === "default" &&
+            "grid min-h-input-height bg-input-background rounded py-0.5 px-0.5",
+          variant === "tabs" && "flex gap-1.5 min-h-[33px]",
           className
         )}
-        style={style}
+        style={{
+          ...style,
+          gridTemplateColumns: `repeat(${items.length}, 1fr)`,
+        }}
       >
-        {separator
-          ? items.map((item, index) => {
-              const isLastItem = index === items.length - 1;
-              const currentValue = item?.value;
-
-              // Show separator if:
-              // 1. Current item is not selected AND
-              // 2. Current item is not immediately before the selected item (except when selected is 0)
-              // 3. Current item is not immediately after the selected item
-              const showSeparator =
-                currentValue !== value &&
-                (selectedIndex === 0 && selectedIndex !== index
-                  ? true
-                  : index !== selectedIndex - 1);
-
-              return (
-                <React.Fragment key={index}>
-                  <SegmentedControlItem key={index} {...item} />
-                  {!isLastItem && <Separator transparent={!showSeparator} />}
-                </React.Fragment>
-              );
-            })
-          : items.map((item, index) => (
-              <SegmentedControlItem key={index} {...item} />
-            ))}
+        {items.map((item, index) => (
+          <SegmentedControlItem key={index} {...item} variant={variant} />
+        ))}
       </ToggleGroupPrimitive.Root>
     </SegmentedControlContext.Provider>
   );

package/src/components/SelectionToolbar.tsx

@@ -7,6 +7,7 @@ import { useSize } from "@noya-app/react-utils";
 import * as PopperPrimitive from "@radix-ui/react-popper";
 import type { MeasurableElement } from "@radix-ui/utils";
 import React, { CSSProperties, memo, useMemo } from "react";
+import { createPortal } from "react-dom";
 
 // Create a Measurable from a Rect
 const createVirtualElement = (rect: Rect): MeasurableElement => ({
@@ -26,12 +27,14 @@ const createVirtualElement = (rect: Rect): MeasurableElement => ({
 type SelectionToolbarContainerProps = {
   rect: Rect;
   children: React.ReactNode;
+  portalContainer?: HTMLElement | null;
 };
 
 export const SelectionToolbarContainer = memo(
   function SelectionToolbarContainer({
     rect,
     children,
+    portalContainer,
   }: SelectionToolbarContainerProps) {
     const portalScopeId = usePortalScopeId();
     const containerRef = React.useRef<HTMLDivElement>(null);
@@ -45,31 +48,41 @@ export const SelectionToolbarContainer = memo(
       [rect]
     );
 
+    const popperContent = (
+      <PopperPrimitive.Content
+        {...portalScopeProps(portalScopeId)}
+        side="top"
+        sideOffset={10}
+        align="center"
+        avoidCollisions
+        collisionPadding={10}
+        contentEditable={false}
+        style={{
+          zIndex: 1000,
+          opacity: size ? 1 : 0,
+          transition: "opacity 0.2s ease-in-out",
+          ["--n-input-background" as keyof CSSProperties]: "transparent",
+        }}
+      >
+        <div
+          ref={containerRef}
+          className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
+          onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+          onWheel={(e) => e.stopPropagation()}
+        >
+          {children}
+        </div>
+      </PopperPrimitive.Content>
+    );
+
     return (
       <PopperPrimitive.Root>
         <PopperPrimitive.Anchor virtualRef={virtualRef} />
-        <PopperPrimitive.Content
-          {...portalScopeProps(portalScopeId)}
-          side="top"
-          sideOffset={10}
-          align="center"
-          avoidCollisions
-          collisionPadding={10}
-          contentEditable={false}
-          style={{
-            zIndex: 1000,
-            opacity: size ? 1 : 0,
-            transition: "opacity 0.2s ease-in-out",
-            ["--n-input-background" as keyof CSSProperties]: "transparent",
-          }}
-        >
-          <div
-            ref={containerRef}
-            className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
-          >
-            {children}
-          </div>
-        </PopperPrimitive.Content>
+        {portalContainer
+          ? createPortal(popperContent, portalContainer)
+          : popperContent}
       </PopperPrimitive.Root>
     );
   }

package/src/components/Slider.tsx

@@ -117,7 +117,7 @@ export const Slider = memo(function Slider({
         <div
           style={trackFillStyle}
           className={cx(
-            "absolute inset-0 w-full h-full rounded overflow-hidden",
+            "absolute inset-0 w-full h-full rounded overflow-hidden bg-primary-pastel",
             colorScheme === "primary" && "bg-primary",
             colorScheme === "secondary" && "bg-secondary"
           )}