@noya-app/noya-designsystem 0.1.40 → 0.1.42

package/src/components/LabeledElementView.tsx

@@ -1,50 +1,42 @@
-import * as kiwi from 'kiwi.js';
-import React, {
-  Children,
-  createRef,
-  Fragment,
-  isValidElement,
-  memo,
-  ReactNode,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import * as kiwi from "kiwi.js";
+import * as React from "react";
 
 interface ContainerProps {
-  children: ReactNode;
-  renderLabel: (provided: { id: string; index: number }) => ReactNode;
+  children: React.ReactNode;
+  renderLabel: (provided: { id: string; index: number }) => React.ReactNode;
 }
 
-export const LabeledElementView = memo(function LabeledElementView({
+export const LabeledElementView = React.memo(function LabeledElementView({
   children,
   renderLabel,
 }: ContainerProps) {
-  const elementIds: string[] = Children.toArray(children)
+  const elementIds: string[] = React.Children.toArray(children)
     .flatMap((child) =>
-      isValidElement(child) && child.type === Fragment
-        ? (child.props.children as ReactNode[])
-        : [child],
+      React.isValidElement(child) && child.type === React.Fragment
+        ? (child.props.children as React.ReactNode[])
+        : [child]
     )
     .map((child) =>
-      isValidElement(child) && 'id' in child.props ? child.props.id : null,
+      React.isValidElement(child) && "id" in child.props ? child.props.id : null
     )
     .filter((id) => !!id);
-  const serializedIds = elementIds.join(',');
-  const containerRef = useRef<HTMLDivElement | null>(null);
+  const serializedIds = elementIds.join(",");
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
 
-  const refs = useMemo(() => {
+  const refs = React.useMemo(() => {
     return Object.fromEntries(
-      serializedIds.split(',').map((id) => [id, createRef<HTMLSpanElement>()]),
+      serializedIds
+        .split(",")
+        .map((id) => [id, React.createRef<HTMLSpanElement>()])
     );
   }, [serializedIds]);
 
-  const labelElements = useMemo(() => {
-    return serializedIds.split(',').map((id, index) => (
+  const labelElements = React.useMemo(() => {
+    return serializedIds.split(",").map((id, index) => (
       <span
         key={id}
         ref={refs[id]}
-        style={{ position: 'absolute', left: `var(--x-offset)` }}
+        style={{ position: "absolute", left: `var(--x-offset)` }}
       >
         {renderLabel({
           id,
@@ -54,7 +46,7 @@ export const LabeledElementView = memo(function LabeledElementView({
     ));
   }, [refs, serializedIds, renderLabel]);
 
-  useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     if (!containerRef.current) return;
 
     const containerRect = containerRef.current.getBoundingClientRect();
@@ -87,8 +79,8 @@ export const LabeledElementView = memo(function LabeledElementView({
           new kiwi.Expression(labelMidX),
           kiwi.Operator.Eq,
           new kiwi.Expression(targetMidXValue),
-          kiwi.Strength.strong,
-        ),
+          kiwi.Strength.strong
+        )
       );
 
       if (index === 0) {
@@ -97,8 +89,8 @@ export const LabeledElementView = memo(function LabeledElementView({
             new kiwi.Expression(labelMidX),
             kiwi.Operator.Ge,
             new kiwi.Expression(labelRect.width / 2),
-            kiwi.Strength.required,
-          ),
+            kiwi.Strength.required
+          )
         );
       }
 
@@ -124,8 +116,8 @@ export const LabeledElementView = memo(function LabeledElementView({
             new kiwi.Expression(labelMidX),
             kiwi.Operator.Le,
             new kiwi.Expression(containerRect.width - labelRect.width / 2),
-            kiwi.Strength.required,
-          ),
+            kiwi.Strength.required
+          )
         );
       }
 
@@ -136,7 +128,7 @@ export const LabeledElementView = memo(function LabeledElementView({
 
     solver.updateVariables();
 
-    Object.entries(refs).forEach(([id, ref], index) => {
+    Object.entries(refs).forEach(([_id, ref], index) => {
       if (!ref.current) return;
 
       // console.log(id, variables[index].value());
@@ -144,21 +136,23 @@ export const LabeledElementView = memo(function LabeledElementView({
       const labelRect = ref.current.getBoundingClientRect();
 
       ref.current.style.setProperty(
-        '--x-offset',
-        `${variables[index].value() - labelRect.width / 2}px`,
+        "--x-offset",
+        `${variables[index].value() - labelRect.width / 2}px`
       );
     });
 
     containerRef.current.style.setProperty(
-      '--height',
-      `${Math.max(...heights)}px`,
+      "--height",
+      `${Math.max(...heights)}px`
     );
   }, [refs, labelElements]);
 
   return (
     <div className="flex flex-1 flex-col relative" ref={containerRef}>
       <div className="flex flex-1 items-center">{children}</div>
-      <div className="relative overflow-hidden select-none">{labelElements}</div>
+      <div className="relative overflow-hidden select-none">
+        {labelElements}
+      </div>
     </div>
   );
-});
+});

package/src/components/ListView.tsx

@@ -38,6 +38,7 @@ import {
   Sortable,
 } from "./Sortable";
 import { Spacer } from "./Spacer";
+import { labelTextStyles } from "./SelectMenu";
 
 export type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
 export type ListRowPosition = "only" | "first" | "middle" | "last";
@@ -202,6 +203,7 @@ const RowContainer = forwardRef<
     $colorScheme: ListColorScheme;
     $gap: number;
     $backgroundColor?: CSSProperties["backgroundColor"];
+    $clickable?: boolean;
   }
 >(
   (
@@ -221,6 +223,7 @@ const RowContainer = forwardRef<
       $gap,
       $backgroundColor,
       style,
+      $clickable,
       "aria-describedby": _, // Causes hydration warning
       ...props
     },
@@ -232,48 +235,46 @@ const RowContainer = forwardRef<
       <div
         ref={ref}
         className={cx(
-          `${
-            $isSectionHeader && $sectionHeaderVariant === "label"
-              ? "font-sans text-label font-medium"
-              : "font-sans text-heading5 font-normal"
-          } `,
+          $isSectionHeader && $sectionHeaderVariant === "label"
+            ? labelTextStyles
+            : "font-sans text-heading5 font-normal",
+          !$isSectionHeader &&
+            $selected &&
+            "text-white active:bg-primary-light",
+          !$isSectionHeader && $disabled && "text-text-disabled",
+          $clickable ? "cursor-pointer" : "cursor-default",
+          $isSectionHeader && "bg-listview-raised-background",
+          "flex flex-[0_0_auto] select-none items-center relative",
           className
         )}
         style={{
-          ...($isSectionHeader && { fontWeight: 500 }),
           gap: $gap,
-          flex: "0 0 auto",
-          userSelect: "none",
-          cursor: "default",
           ...($variant !== "bare" && {
-            paddingTop: "6px",
-            paddingRight: "12px",
-            paddingBottom: "6px",
-            paddingLeft: "12px",
-            ...($variant === "padded" && {
-              borderRadius: "2px",
-              marginLeft: "8px",
-              marginRight: "8px",
-              marginTop: `${margin.top}px`,
-              marginBottom: `${margin.bottom}px`,
-            }),
+            paddingTop: $selected ? "4px" : "6px",
+            paddingRight: $selected ? "8px" : "12px",
+            paddingBottom: $selected ? "4px" : "6px",
+            paddingLeft: $selected ? "8px" : "12px",
+            borderRadius:
+              $variant === "padded" ? "2px" : $selected ? "4px" : "",
+            marginLeft: $variant === "padded" ? "8px" : $selected ? "4px" : "",
+            marginRight: $variant === "padded" ? "8px" : $selected ? "4px" : "",
+            marginTop:
+              $variant === "padded"
+                ? `${margin.top}px`
+                : $selected
+                  ? "2px"
+                  : "",
+            marginBottom:
+              $variant === "padded"
+                ? `${margin.bottom}px`
+                : $selected
+                  ? "2px"
+                  : "",
           }),
-          color: cssVars.colors.textMuted,
-          ...($isSectionHeader && {
-            backgroundColor: cssVars.colors.listviewRaisedBackground,
-            ...($sectionHeaderVariant === "label" && {
-              color: cssVars.colors.textDisabled,
+          ...($selected &&
+            !$isSectionHeader && {
+              backgroundColor: cssVars.colors[$colorScheme],
             }),
-          }),
-          ...($disabled && {
-            color: cssVars.colors.textDisabled,
-          }),
-          ...($selected && {
-            color: "white",
-            backgroundColor: cssVars.colors[$colorScheme],
-          }),
-          display: "flex",
-          alignItems: "center",
           ...($selected &&
             !$isSectionHeader &&
             ($selectedPosition === "middle" ||
@@ -288,7 +289,6 @@ const RowContainer = forwardRef<
               borderBottomRightRadius: "0px",
               borderBottomLeftRadius: "0px",
             }),
-          position: "relative",
           ...($hovered && {
             boxShadow: `0 0 0 1px ${cssVars.colors[$colorScheme]} inset`,
           }),
@@ -549,6 +549,7 @@ const ListViewRow = forwardRefGeneric(function ListViewRow<
         )}
         tabIndex={tabIndex}
         className={className}
+        $clickable={!!onPress}
       >
         {relativeDropPosition && (
           <ListViewDragIndicatorElement
@@ -716,7 +717,7 @@ const VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner<T>(
                 itemSize={getItemHeight}
                 estimatedItemSize={ROW_HEIGHT}
               >
-                {VirtualizedListRow}
+                {VirtualizedListRow as any}
               </VariableSizeList>
             </div>
           ),
@@ -848,10 +849,19 @@ const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
       pressEventName,
       variant,
       gap,
-      sectionHeaderVariant: "normal",
+      sectionHeaderVariant,
       isSectionHeader: false,
     }),
-    [colorScheme, sortable, expandable, divider, pressEventName, variant, gap]
+    [
+      colorScheme,
+      sortable,
+      expandable,
+      divider,
+      pressEventName,
+      variant,
+      gap,
+      sectionHeaderVariant,
+    ]
   );
 
   const getItemContextValue = useCallback(

package/src/components/Message.tsx

@@ -0,0 +1,75 @@
+import React, { forwardRef, memo, useMemo } from "react";
+import { Icons } from "./Icons";
+import { Avatar } from "./Avatar";
+import { cx } from "../utils/classNames";
+import { Text } from "./Text";
+import { MultiplayerUser } from "@noya-app/noya-multiplayer-react";
+import { colorFromString } from "../utils/colorFromString";
+import { cssVars } from "../theme";
+
+export type MessageProps = {
+  role: "user" | "assistant" | "system" | "data";
+  children?: React.ReactNode;
+  user?: MultiplayerUser;
+  /** @default 27 */
+  avatarSize?: number;
+};
+
+export const Message = memo(
+  forwardRef(function Message(
+    { role, children, user, avatarSize = 27 }: MessageProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) {
+    const randomId = crypto.randomUUID();
+    const userMessageBackgroundColor = colorFromString(user?.id ?? randomId);
+    const styles = useMemo(
+      () =>
+        role === "user"
+          ? {
+              backgroundColor: userMessageBackgroundColor,
+            }
+          : undefined,
+      [userMessageBackgroundColor, role]
+    );
+    return (
+      <div
+        className={cx(
+          "flex gap-2",
+          role === "user" ? "flex-row-reverse" : "flex-row"
+        )}
+      >
+        {role === "assistant" ? (
+          <Avatar
+            name="Assistant"
+            size={avatarSize}
+            backgroundColor={cssVars.colors.inputBackground}
+          >
+            <Icons.PersonIcon fontSize={22} color={cssVars.colors.text} />
+          </Avatar>
+        ) : (
+          <Avatar
+            userId={!user ? randomId : user?.id}
+            name={user?.name ?? "Anonymous"}
+            image={user?.image}
+            size={avatarSize}
+          />
+        )}
+        <div
+          className={cx(
+            "flex flex-row gap-2 rounded-lg py-2 px-3 transition-all duration-200 min-w-6 max-w-[70%] items-start",
+            role === "user" ? "ml-auto" : "bg-input-background"
+          )}
+          style={styles}
+          ref={ref}
+        >
+          <Text
+            variant="small"
+            className={role === "user" ? "text-white" : "text-text"}
+          >
+            {children}
+          </Text>
+        </div>
+      </div>
+    );
+  })
+);

package/src/components/Progress.tsx

@@ -1,6 +1,6 @@
 import { clamp } from "@noya-app/noya-utils";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import React, { useMemo } from "react";
+import * as React from "react";
 import { cx } from "../utils/classNames";
 
 type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
@@ -15,7 +15,7 @@ export function Progress({
   className?: string;
 }) {
   const clampedValue = clamp(value, 0, 100);
-  const transformStyles = useMemo(
+  const transformStyles = React.useMemo(
     () => ({
       transform: `translateX(-${100 - clampedValue}%)`,
     }),

package/src/components/ScrollArea.tsx

@@ -1,20 +1,22 @@
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import React, { memo, ReactNode, useCallback, useState } from "react";
+import * as React from "react";
 
 interface Props {
-  children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
+  children?:
+    | React.ReactNode
+    | ((scrollElementRef: HTMLDivElement) => React.ReactNode);
 }
 
-export const ScrollArea = memo(function ScrollArea({ children }: Props) {
+export const ScrollArea = React.memo(function ScrollArea({ children }: Props) {
   const [scrollElementRef, setScrollElementRef] =
-    useState<HTMLDivElement | null>(null);
+    React.useState<HTMLDivElement | null>(null);
 
   return (
     <div className="flex-1 min-h-0">
       <RadixScrollArea.Root style={{ width: "100%", height: "100%" }}>
         <RadixScrollArea.Viewport
           className="w-full h-full [&>div]:block"
-          ref={useCallback(
+          ref={React.useCallback(
             (ref: HTMLDivElement | null) => setScrollElementRef(ref),
             []
           )}

package/src/components/SegmentedControl.tsx

@@ -0,0 +1,171 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import React, {
+  createContext,
+  forwardRef,
+  memo,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
+import { cx } from "../utils/classNames";
+import { renderIcon } from "./Icons";
+import { RegularMenuItem } from "./internal/Menu";
+import { Tooltip } from "./Tooltip";
+
+type SegmentedControlColorScheme = "primary" | "secondary";
+
+type SegmentedControlContextValue = {
+  /** @default primary */
+  colorScheme?: SegmentedControlColorScheme;
+};
+
+const SegmentedControlContext = createContext<SegmentedControlContextValue>({
+  colorScheme: "primary",
+});
+
+export interface SegmentedControlProps<T extends string> {
+  id?: string;
+  value?: T;
+  onValueChange?: (value: T) => void;
+  /** @default primary */
+  colorScheme?: SegmentedControlColorScheme;
+  allowEmpty?: boolean;
+  separator?: boolean;
+  items: SegmentedControlItemProps<T>[];
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export type SegmentedControlItemProps<T extends string> = {
+  title?: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  tooltip?: ReactNode;
+} & Pick<RegularMenuItem<T>, "value" | "disabled" | "icon" | "role">;
+
+const SegmentedControlItem = forwardRef(function SegmentedControlItem<
+  T extends string,
+>(
+  {
+    value,
+    tooltip,
+    title,
+    disabled = false,
+    icon,
+    className,
+    ...props
+  }: SegmentedControlItemProps<T>,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>
+) {
+  const { colorScheme } = useContext(SegmentedControlContext);
+
+  const itemElement = (
+    <ToggleGroupPrimitive.Item
+      ref={forwardedRef}
+      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",
+        "focus:z-interactable",
+        "aria-checked:shadow-[0_1px_1px_rgba(0,0,0,0.1)]",
+        className
+      )}
+      {...props}
+    >
+      {icon && renderIcon(icon)}
+      {title}
+    </ToggleGroupPrimitive.Item>
+  );
+
+  return tooltip ? (
+    <Tooltip content={tooltip}>{itemElement}</Tooltip>
+  ) : (
+    itemElement
+  );
+});
+
+const Separator = ({ transparent }: { transparent: boolean }) => (
+  <div
+    className={cx(
+      "w-[1px] my-1 self-stretch bg-divider",
+      transparent && "bg-transparent"
+    )}
+  />
+);
+
+export const SegmentedControl = memo(function SegmentedControl<
+  T extends string,
+>({
+  id,
+  value,
+  onValueChange,
+  colorScheme,
+  allowEmpty,
+  items,
+  separator = true,
+  className,
+  style,
+}: SegmentedControlProps<T>) {
+  const contextValue = useMemo(() => ({ colorScheme }), [colorScheme]);
+
+  const handleValueChange = useCallback(
+    (value: T) => {
+      if (!allowEmpty && !value) return;
+      onValueChange?.(value);
+    },
+    [allowEmpty, onValueChange]
+  );
+
+  const selectedIndex = items.findIndex((item) => item?.value === value);
+
+  return (
+    <SegmentedControlContext.Provider value={contextValue}>
+      <ToggleGroupPrimitive.Root
+        id={id}
+        type="single"
+        value={value}
+        onValueChange={handleValueChange}
+        className={cx(
+          `flex items-stretch w-full appearance-none relative outline-none min-h-[27px] rounded bg-input-background py-[2px] px-[2px]`,
+          className
+        )}
+        style={style}
+      >
+        {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} />
+            ))}
+      </ToggleGroupPrimitive.Root>
+    </SegmentedControlContext.Provider>
+  );
+});