@noya-app/noya-designsystem 0.1.63 → 0.1.64

package/src/components/SegmentedControl.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { memoGeneric } from "@noya-app/react-utils";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import React, {
   createContext,
   forwardRef,
@@ -15,7 +17,7 @@ import { SelectableMenuItem } from "./internal/Menu";
 import { Tooltip } from "./Tooltip";
 
 type SegmentedControlColorScheme = "primary" | "secondary";
-type SegmentedControlVariant = "default" | "tabs";
+type SegmentedControlVariant = "default" | "tabs" | "buttons";
 
 type SegmentedControlContextValue = {
   /** @default primary */
@@ -75,26 +77,49 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
       className={cx(
         "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",
+        "font-sans text-button relative flex-1 appearance-none focus:outline-none transition-colors",
+        // text color
+        variant === "buttons"
+          ? "text-button-text"
+          : "text-segmented-control-item",
+        // font weight
+        variant === "tabs"
+          ? "font-semibold"
+          : variant === "buttons"
+            ? "font-medium"
+            : "font-normal",
+        // focus ring
         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 === "buttons"
+            ? "focus-visible:ring-2 focus-visible:ring-primary focus:shadow-[0_0_0_1px_var(--n-popover-background)_inset] transition-all"
+            : colorScheme === "secondary"
+              ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
+              : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
+        // checked
         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-segmented-control-item-active-background aria-checked:text-segmented-control-item-active-text",
+          : variant === "buttons"
+            ? "active:text-button-text-active active:bg-button-background-active aria-checked:text-button-text-active aria-checked:bg-button-background-active"
+            : colorScheme === "secondary"
+              ? "aria-checked:bg-secondary aria-checked:text-white"
+              : colorScheme === "primary"
+                ? "aria-checked:bg-primary aria-checked:text-white"
+                : "aria-checked:bg-segmented-control-item-active-background aria-checked:text-segmented-control-item-active-text",
         "focus:z-interactable",
-        variant === "default"
-          ? "px-1 rounded aria-checked:shadow-segment"
-          : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+        // checked default (all colorSchemes)
         variant === "default" &&
-          "border-r border-divider last:border-r-0 aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent",
+          "aria-checked:border-r-transparent [&:has(+[aria-checked=true])]:border-r-transparent aria-checked:shadow-segment",
+        // hover
+        variant === "buttons" && "hover:bg-button-background-hover",
+        // spacing and borders
+        variant === "default"
+          ? "px-1 rounded border-r border-divider last:border-r-0"
+          : variant === "buttons"
+            ? "px-1 rounded-sm max-w-fit"
+            : "px-1.5 border-y-2 border-y-transparent aria-checked:border-b-primary",
+        // icon only buttons
+        variant === "buttons" && title === "" && icon && "min-w-input-height",
         className
       )}
       {...props}
@@ -155,6 +180,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
           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]",
+          variant === "buttons" && "flex gap-1.5 min-h-input-height",
           className
         )}
         style={{

package/src/components/SelectMenu.tsx

@@ -1,10 +1,12 @@
+"use client";
+
 import {
   ChevronDownIcon,
   ChevronUpIcon,
   DropdownChevronIcon,
 } from "@noya-app/noya-icons";
 import { memoGeneric } from "@noya-app/react-utils";
-import * as Select from "@radix-ui/react-select";
+import { Select } from "radix-ui";
 import { type SelectProps } from "@radix-ui/react-select";
 import React, {
   CSSProperties,

package/src/components/SelectionToolbar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   cssVarNames,
   cx,
@@ -76,7 +78,7 @@ export const SelectionToolbarContainer = memo(
         collisionPadding={10}
         contentEditable={false}
         style={{
-          zIndex: 1000,
+          zIndex: 10,
           opacity: size ? 1 : 0,
           transition: `opacity ${transitionDuration}s ease-in-out`,
           [cssVarNames.colors.inputBackground]: "transparent",

package/src/components/Slider.tsx

@@ -1,4 +1,6 @@
-import * as RadixSlider from "@radix-ui/react-slider";
+"use client";
+
+import { Slider as RadixSlider } from "radix-ui";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";

package/src/components/Switch.tsx

@@ -1,4 +1,6 @@
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+"use client";
+
+import { Switch as SwitchPrimitive } from "radix-ui";
 import * as React from "react";
 import { cx } from "../utils/classNames";
 

package/src/components/Tabs.tsx

@@ -11,6 +11,7 @@ export type TabsProps<T extends string = string> = {
   onValueChange?: (value: T) => void;
   items: MenuItem<T>[];
   renderContent: ({ value }: { value: T }) => React.ReactNode;
+  variant?: "default" | "tabs" | "buttons";
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
 export function Tabs<T extends string = string>({
@@ -18,6 +19,7 @@ export function Tabs<T extends string = string>({
   onValueChange,
   items,
   renderContent,
+  variant = "tabs",
   ...props
 }: TabsProps<T>) {
   const selectableItems = items.filter(isSelectableMenuItem);
@@ -35,7 +37,7 @@ export function Tabs<T extends string = string>({
           className="flex-1"
           value={activeTab}
           onValueChange={setActiveTab}
-          variant="tabs"
+          variant={variant}
           items={selectableItems}
         />
       </div>

package/src/components/Text.tsx

@@ -1,4 +1,6 @@
-import React, { ForwardedRef, forwardRef, ReactHTML, ReactNode } from "react";
+"use client";
+
+import React, { ForwardedRef, forwardRef, ReactNode } from "react";
 import { ThemeColor } from "../theme";
 import { camelToKebabCase, KebabToCamelCase } from "../theme/themeUtils";
 import { cx } from "../utils/classNames";
@@ -17,7 +19,7 @@ type Variant =
   | "code"
   | "label";
 
-const elements: Record<Variant, keyof ReactHTML> = {
+const elements: Record<Variant, React.HTMLElementType> = {
   title: "h1",
   subtitle: "h1",
   heading1: "h1",
@@ -48,7 +50,7 @@ export const textStyles: Record<Variant, string> = {
 } as const;
 
 export type TextProps = {
-  as?: keyof ReactHTML;
+  as?: React.HTMLElementType;
   href?: string;
   className?: string;
   style?: React.CSSProperties;
@@ -78,11 +80,10 @@ export const Text = forwardRef(function Text(
   }: TextProps,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
-  const Component = as ?? elements[variant] ?? "span";
+  const Component = (as ?? elements[variant] ?? "span") as "span";
 
   return (
     <Component
-      // @ts-expect-error expected to be many semantic html elements
       ref={forwardedRef}
       className={cx(
         `${textStyles[variant]} text-${camelToKebabCase(String(color)) ?? "text"} `,

package/src/components/TextArea.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { assignRef } from "@noya-app/react-utils";
 import React, {
   ComponentProps,

package/src/components/Toast.tsx

@@ -1,4 +1,4 @@
-import * as ToastPrimitive from "@radix-ui/react-toast";
+import { Toast as ToastPrimitive } from "radix-ui";
 import React, { ReactNode } from "react";
 import { IconButton } from "./IconButton";
 import { textStyles } from "./Text";

package/src/components/Toolbar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React, { ComponentProps, ReactNode } from "react";
 
@@ -17,6 +19,7 @@ import {
 } from "./internal/Menu";
 import { Popover } from "./Popover";
 import { Spacer } from "./Spacer";
+import { ToolbarDrawer } from "./ToolbarDrawer";
 import { Tooltip } from "./Tooltip";
 
 const SIDE_OFFSET = 6;
@@ -144,11 +147,12 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
   activeValue?: T;
   tooltipSide?: ComponentProps<typeof Tooltip>["side"];
 }) {
+  const isActive = item.checked || activeValue === item.value;
   const content = (
     <Button
       as={as}
       disabled={item.disabled}
-      active={item.checked || activeValue === item.value}
+      active={isActive}
       icon={item.icon}
       {...(as === "a" && { href: item.value })}
       onClick={() => {
@@ -161,7 +165,9 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
     </Button>
   );
 
-  return item.tooltip ? (
+  return item.drawer && isActive ? (
+    <ToolbarDrawer trigger={content}>{item.drawer}</ToolbarDrawer>
+  ) : item.tooltip ? (
     <Tooltip sideOffset={SIDE_OFFSET} content={item.tooltip} side={tooltipSide}>
       {content}
     </Tooltip>

package/src/components/ToolbarDrawer.tsx

@@ -0,0 +1,29 @@
+import React, { ForwardedRef, forwardRef, memo, ReactNode } from "react";
+
+type ToolbarDrawerProps = {
+  children: ReactNode;
+  trigger: ReactNode;
+  sideOffset?: number;
+};
+
+export const ToolbarDrawer = memo(
+  forwardRef(function ToolbarDrawer(
+    { children, trigger, sideOffset = 8 }: ToolbarDrawerProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) {
+    return (
+      <div className="relative" ref={ref}>
+        <div
+          className="absolute bottom-full left-1/2 -translate-x-1/2 rounded-t-lg border border-toolbar-drawer-border border-b-transparent bg-toolbar-drawer-background -z-10"
+          style={{
+            marginBottom: `${sideOffset}px`,
+            boxShadow: "0px -2px 12px 0px var(--n-toolbar-drawer-shadow)",
+          }}
+        >
+          {children}
+        </div>
+        {trigger}
+      </div>
+    );
+  })
+);

package/src/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import * as React from "react";
 import { ComponentProps } from "react";
 import {

package/src/components/TreeView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, { ForwardedRef, ReactNode, useCallback, useContext } from "react";
 import { IconButton } from "./IconButton";

package/src/components/UserPointer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { memo, useMemo } from "react";
 import { cx } from "../utils/classNames";
 import { colorFromString } from "../utils/colorFromString";

package/src/components/ai-assistant/AIAssistantLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { IconButton } from "../IconButton";
 
 import { cssVars } from "../../theme";

package/src/components/blocks/ImageBlockComponent.tsx

@@ -0,0 +1,156 @@
+import { ActivityIndicator, cx } from "@noya-app/noya-designsystem";
+import { ImageIcon } from "@noya-app/noya-icons";
+import React, { ForwardedRef, forwardRef } from "react";
+
+type ImageState = "loading" | "error" | "loaded";
+
+const placeholderClassName =
+  "cursor-pointer flex items-center justify-center p-4 border border-dashed border-indigo-100 rounded-md bg-indigo-50";
+
+export function decodeImageSrc(src?: string): string | undefined {
+  if (!src) return undefined;
+
+  try {
+    return decodeURIComponent(src);
+  } catch (error) {
+    return undefined;
+  }
+}
+
+const ImageLoadingComponent = forwardRef(function ImageLoadingComponent(
+  props: React.HTMLAttributes<HTMLSpanElement>,
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      {...props}
+      ref={forwardedRef}
+      contentEditable={false}
+      className={cx(placeholderClassName, props.className)}
+    >
+      <ActivityIndicator />
+    </span>
+  );
+});
+
+const ImagePlaceholderComponent = forwardRef(function ImagePlaceholderComponent(
+  props: React.HTMLAttributes<HTMLSpanElement>,
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      {...props}
+      ref={forwardedRef}
+      contentEditable={false}
+      className={cx(placeholderClassName, props.className)}
+    >
+      <ImageIcon className="w-[30px] h-[30px] text-indigo-900 pointer-events-none" />
+    </span>
+  );
+});
+
+const ImageErrorComponent = forwardRef(function ImageErrorComponent(
+  { src, ...props }: React.HTMLAttributes<HTMLSpanElement> & { src?: string },
+  forwardedRef: ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <span
+      {...props}
+      ref={forwardedRef}
+      contentEditable={false}
+      className={cx(placeholderClassName, props.className)}
+    >
+      <span className="text-cm-error font-mono text-sm">
+        Invalid image URL: {src ?? "No URL provided"}
+      </span>
+    </span>
+  );
+});
+
+const ImageDisplayComponent = forwardRef(function ImageDisplayComponent(
+  {
+    src,
+    alt,
+    title,
+    ...props
+  }: React.DetailedHTMLProps<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  >,
+  forwardedRef: ForwardedRef<HTMLImageElement>
+) {
+  return (
+    <img
+      {...props}
+      ref={forwardedRef}
+      src={src}
+      alt={alt ?? ""}
+      title={title ?? undefined}
+      className={cx(
+        "cursor-pointer max-w-full max-h-[720px] object-contain mx-auto my-8",
+        props.className
+      )}
+    />
+  );
+});
+
+const ImageBlockComponent_ = forwardRef(function ImageBlockComponent(
+  {
+    src,
+    alt,
+    title,
+    imageState,
+    ...props
+  }: React.DetailedHTMLProps<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+  > & { imageState?: ImageState },
+  forwardedRef: ForwardedRef<HTMLImageElement>
+) {
+  if (imageState === "loading") {
+    return (
+      <ImageLoadingComponent
+        {...props}
+        ref={forwardedRef as ForwardedRef<HTMLSpanElement>}
+      />
+    );
+  }
+
+  if (!src) {
+    return (
+      <ImagePlaceholderComponent
+        {...props}
+        ref={forwardedRef as ForwardedRef<HTMLSpanElement>}
+      />
+    );
+  }
+
+  const decodedSrc = decodeImageSrc(src.toString());
+
+  if (!decodedSrc || imageState === "error") {
+    return (
+      <ImageErrorComponent
+        {...props}
+        src={src.toString()}
+        ref={forwardedRef as ForwardedRef<HTMLSpanElement>}
+      />
+    );
+  }
+
+  return (
+    <ImageDisplayComponent
+      {...props}
+      ref={forwardedRef}
+      src={src}
+      alt={alt}
+      title={title}
+    />
+  );
+});
+
+export const ImageBlockComponent = Object.assign(ImageBlockComponent_, {
+  Loading: ImageLoadingComponent,
+  Placeholder: ImagePlaceholderComponent,
+  Error: ImageErrorComponent,
+  Display: ImageDisplayComponent,
+});

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { INPUT_HEIGHT } from "../../theme";
 import { Avatar, AvatarProps, AvatarStack } from "../Avatar";

package/src/components/file-explorer/FileExplorerLayout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   ActivityIndicator,
   Banner,

package/src/components/internal/Checkmark.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export function Checkmark(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      width={15}
+      height={15}
+      {...props}
+    >
+      <path
+        className="scale-90 origin-center"
+        d="M3 8L6 11L12 5"
+        strokeWidth="1.1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+}

package/src/components/internal/Menu.tsx

@@ -68,7 +68,7 @@ export const separator: SeparatorItem = {
 
 type FalsyReactNode = false | "" | null | undefined;
 
-export type MenuItemIcon = IconName | React.ReactElement | FalsyReactNode;
+export type MenuItemIcon = IconName | React.ReactElement<any> | FalsyReactNode;
 
 type BaseMenuItem = {
   checked?: boolean;
@@ -93,6 +93,7 @@ export type SelectableMenuItem<T extends string> = BaseMenuItem & {
   value: T;
   testSelected?: boolean;
   tooltip?: ReactNode;
+  drawer?: ReactNode;
 };
 
 export type SubMenuItem<T extends string> = BaseMenuItem & {

package/src/components/internal/MenuViewport.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import { ChevronRightIcon } from "@noya-app/noya-icons";
-import * as RadixContextMenu from "@radix-ui/react-context-menu";
-import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+import { ContextMenu as RadixContextMenu } from "radix-ui";
+import { DropdownMenu as RadixDropdownMenu } from "radix-ui";
 import React from "react";
 import {
   portalScopeProps,

package/src/components/internal/SelectItem.tsx

@@ -1,9 +1,12 @@
+"use client";
+
 import { renderIcon } from "../Icons";
 
-import * as Select from "@radix-ui/react-select";
+import { Select } from "radix-ui";
 import React, { useCallback } from "react";
 import { cx } from "../../utils/classNames";
 import { Spacer } from "../Spacer";
+import { Checkmark } from "./Checkmark";
 import {
   CHECKBOX_INDENT_WIDTH,
   CHECKBOX_RIGHT_INSET,
@@ -133,25 +136,3 @@ export const SelectItem = React.forwardRef(
     );
   }
 );
-
-function Checkmark() {
-  return (
-    <svg
-      viewBox="0 0 15 15"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      width={15}
-      height={15}
-    >
-      <path
-        className="scale-90 origin-center"
-        d="M3 8L6 11L12 5"
-        strokeWidth="1.1"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        stroke="currentColor"
-      />
-    </svg>
-  );
-}

package/src/components/internal/TextInput.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { composeRefs } from "@radix-ui/react-compose-refs";
 import React, {
   AriaRole,

package/src/components/sorting/DragRegistration.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   AcceptsDrop,
   DragState,
@@ -5,7 +7,7 @@ import {
   RelativeDropPosition,
 } from "./sorting";
 
-import { Active, Over, UniqueIdentifier } from "@dnd-kit/core";
+import { ClientRect, UniqueIdentifier } from "@dnd-kit/core";
 import { AcceptsFromList } from "./sorting";
 
 import { Point } from "@noya-app/noya-geometry";
@@ -13,8 +15,9 @@ import React from "react";
 
 export type GetDropIndicatorParameters = {
   absolutePosition: Point;
-  active: Active;
-  over: Over;
+  activeIndex: number;
+  overIndex: number;
+  overRect: ClientRect;
   sourceListId: string;
   targetListId: string;
 };
@@ -27,7 +30,8 @@ export interface RegisteredList {
   acceptsFromList: AcceptsFromList;
   acceptsDrop: AcceptsDrop;
   getDropIndicator: (
-    parameters: GetDropIndicatorParameters
+    parameters: GetDropIndicatorParameters,
+    acceptsDrop: AcceptsDrop
   ) => RelativeDropPosition | undefined;
 }