@noya-app/noya-designsystem 0.1.48 → 0.1.49

package/src/components/Message.tsx

@@ -1,11 +1,11 @@
+import { MultiplayerUser } from "@noya-app/noya-multiplayer-react";
 import React, { forwardRef, memo, useMemo } from "react";
-import { Icons } from "./Icons";
-import { Avatar } from "./Avatar";
+import { cssVars, INPUT_HEIGHT } from "../theme";
 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";
+import { Avatar } from "./Avatar";
+import { Logo } from "./NoyaLogo";
+import { Text } from "./Text";
 
 export type MessageProps = {
   role: "user" | "assistant" | "system" | "data";
@@ -17,7 +17,7 @@ export type MessageProps = {
 
 export const Message = memo(
   forwardRef(function Message(
-    { role, children, user, avatarSize = 27 }: MessageProps,
+    { role, children, user, avatarSize = INPUT_HEIGHT }: MessageProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) {
     const randomId = crypto.randomUUID();
@@ -42,9 +42,9 @@ export const Message = memo(
           <Avatar
             name="Assistant"
             size={avatarSize}
-            backgroundColor={cssVars.colors.inputBackground}
+            backgroundColor={cssVars.colors.primaryPastel}
           >
-            <Icons.PersonIcon fontSize={22} color={cssVars.colors.text} />
+            <Logo style={{ width: 15 }} fill={cssVars.colors.primary} />
           </Avatar>
         ) : (
           <Avatar

package/src/components/NoyaLogo.tsx

@@ -0,0 +1,41 @@
+import { cssVars } from "@noya-app/noya-designsystem";
+import React, { forwardRef } from "react";
+
+export const Logo = forwardRef(function Logo(
+  props: React.ComponentProps<"svg">,
+  ref: React.Ref<SVGSVGElement>
+) {
+  const fill = props.fill || cssVars.colors.logoFill;
+
+  return (
+    <svg
+      ref={ref}
+      viewBox="0 0 24 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className="w-6 aspect-[24/26]"
+    >
+      <path
+        d="M6.5 3H2V12H5V6H6.5C7.32843 6 8 6.67157 8 7.5V12H11V7.5C11 5.01472 8.98528 3 6.5 3Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.5 12C19.9853 12 22 9.98528 22 7.5C22 5.01472 19.9853 3 17.5 3C15.0147 3 13 5.01472 13 7.5C13 9.98528 15.0147 12 17.5 12ZM17.5 9C18.3284 9 19 8.32843 19 7.5C19 6.67157 18.3284 6 17.5 6C16.6716 6 16 6.67157 16 7.5C16 8.32843 16.6716 9 17.5 9Z"
+        fill={fill}
+      />
+      <path
+        d="M5 14H2V18.5C2 20.9853 4.01472 23 6.5 23H8V26H11V17H8V20H6.5C5.67157 20 5 19.3284 5 18.5V14Z"
+        fill={fill}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.5 23C15.0147 23 13 20.9853 13 18.5C13 16.0147 15.0147 14 17.5 14C19.9853 14 22 16.0147 22 18.5V23H17.5ZM17.5 20C18.3284 20 19 19.3284 19 18.5C19 17.6716 18.3284 17 17.5 17C16.6716 17 16 17.6716 16 18.5C16 19.3284 16.6716 20 17.5 20Z"
+        fill={fill}
+      />
+    </svg>
+  );
+});

package/src/components/SegmentedControl.tsx

@@ -141,7 +141,7 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         value={value}
         onValueChange={handleValueChange}
         className={cx(
-          `flex items-stretch flex-auto appearance-none relative outline-none min-h-[27px] rounded bg-input-background py-[2px] px-[2px]`,
+          `flex items-stretch flex-auto appearance-none relative outline-none min-h-input-height rounded bg-input-background py-[2px] px-[2px]`,
           className
         )}
         style={style}

package/src/components/SelectMenu.tsx

@@ -15,6 +15,7 @@ import React, {
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
+import { getInsetEndStyles } from "../utils/inputs";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
 import {
@@ -24,7 +25,7 @@ import {
   styles,
 } from "./internal/Menu";
 import { MenuComponents, MenuViewport } from "./internal/MenuViewport";
-import { InsetLabel } from "./Label";
+import { Label } from "./Label";
 
 type Props<T extends string> = {
   id?: string;
@@ -57,6 +58,8 @@ const scrollButtonStyles = `
   hover:text-text
 `;
 
+const insetEndStyles = getInsetEndStyles();
+
 interface SelectMenuTriggerProps {
   id?: string;
   style?: React.CSSProperties;
@@ -101,9 +104,11 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
       >
         {icon && <span className="pr-1.5">{renderIcon(icon)}</span>}
         {label && labelPosition === "inset" && (
-          <InsetLabel className="pr-4" htmlFor={id}>
-            {label}
-          </InsetLabel>
+          <div className={insetEndStyles}>
+            <Label className="pr-4 !text-text-disabled" htmlFor={id}>
+              {label}
+            </Label>
+          </div>
         )}
         <span className="flex-1 flex">
           <Select.Value placeholder={placeholder} />

package/src/components/Slider.tsx

@@ -2,7 +2,8 @@ import * as RadixSlider from "@radix-ui/react-slider";
 import React, { FocusEventHandler, memo, useCallback, useMemo } from "react";
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
-import { InsetLabel } from "./Label";
+import { getInsetEndStyles } from "../utils/inputs";
+import { Label } from "./Label";
 
 type ColorScheme = "primary" | "secondary";
 
@@ -28,6 +29,8 @@ const thumbStyle = {
   width: THUMB_WIDTH,
 };
 
+const insetEndStyles = getInsetEndStyles();
+
 export const Slider = memo(function Slider({
   style,
   className,
@@ -95,7 +98,7 @@ export const Slider = memo(function Slider({
       value={arrayValue}
       onValueChange={handleValueChange}
       className={cx(
-        "flex relative items-center select-none touch-none h-[27px] rounded overflow-hidden flex-grow max-h-[27px]",
+        "flex relative items-center select-none touch-none h-input-height rounded overflow-hidden flex-grow max-h-input-height",
         className
       )}
       style={style}
@@ -105,7 +108,11 @@ export const Slider = memo(function Slider({
     >
       <RadixSlider.Track className="flex-grow h-full rounded overflow-hidden bg-input-background">
         {label && labelPosition === "inset" && (
-          <InsetLabel htmlFor={id}>{label}</InsetLabel>
+          <div className={insetEndStyles}>
+            <Label htmlFor={id} className="!text-text-disabled">
+              {label}
+            </Label>
+          </div>
         )}
         <div
           style={trackFillStyle}
@@ -117,14 +124,16 @@ export const Slider = memo(function Slider({
         />
       </RadixSlider.Track>
       {label && labelPosition === "inset" && colorScheme !== undefined && (
-        <InsetLabel className="text-white overflow-hidden" style={labelStyle}>
-          {label}
-        </InsetLabel>
+        <div className={insetEndStyles}>
+          <Label className="text-white overflow-hidden" style={labelStyle}>
+            {label}
+          </Label>
+        </div>
       )}
       <RadixSlider.Thumb
         style={thumbStyle}
         className={cx(
-          "block h-[27px] rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
+          "block h-input-height rounded border border-solid bg-slider-thumb-background transition-colors focus:border-primary focus:border-2 outline-none",
           colorScheme === undefined && "border-slider-border",
           colorScheme === "primary" && "border-primary",
           colorScheme === "secondary" && "border-secondary"

package/src/components/Sortable.tsx

@@ -25,11 +25,11 @@ export type RelativeDropPosition = "above" | "below" | "inside";
 
 export type DropValidator = (
   sourceIndex: number,
-  destinationIndex: number,
+  targetIndex: number,
   position: RelativeDropPosition
 ) => boolean;
 
-export const normalizeListDestinationIndex = (
+export const normalizeListTargetIndex = (
   index: number,
   position: "above" | "below"
 ): number => {
@@ -38,12 +38,12 @@ export const normalizeListDestinationIndex = (
 
 export const defaultAcceptsDrop: DropValidator = (
   sourceIndex,
-  destinationIndex,
+  targetIndex,
   position
 ) => {
   if (position === "inside") return false;
 
-  const normalized = normalizeListDestinationIndex(destinationIndex, position);
+  const normalized = normalizeListTargetIndex(targetIndex, position);
 
   if (sourceIndex === normalized || sourceIndex + 1 === normalized) {
     return false;
@@ -52,18 +52,22 @@ export const defaultAcceptsDrop: DropValidator = (
   return true;
 };
 
-const SortableItemContext = React.createContext<{
+export type SortableItemContextProps = {
   keys: UniqueIdentifier[];
   acceptsDrop: DropValidator;
   axis: "x" | "y";
   position: { x: number; y: number };
   setActivatorEvent: (event: PointerEvent) => void;
-}>({
+  getDropTargetParentIndex?: (index: number) => number | undefined;
+};
+
+const SortableItemContext = React.createContext<SortableItemContextProps>({
   keys: [],
   acceptsDrop: defaultAcceptsDrop,
   axis: "y",
   position: { x: 0, y: 0 },
   setActivatorEvent: () => {},
+  getDropTargetParentIndex: undefined,
 });
 
 type ValidateDropIndicatorParams = {
@@ -135,8 +139,14 @@ function SortableItem<T extends HTMLElement>({
   disabled,
   children,
 }: ItemProps<T>) {
-  const { keys, position, acceptsDrop, setActivatorEvent, axis } =
-    React.useContext(SortableItemContext);
+  const {
+    keys,
+    position,
+    acceptsDrop,
+    setActivatorEvent,
+    axis,
+    getDropTargetParentIndex,
+  } = React.useContext(SortableItemContext);
   const sortable = useSortable({ id, disabled });
   const { activatorEvent } = useDndContext();
 
@@ -147,6 +157,7 @@ function SortableItem<T extends HTMLElement>({
     setNodeRef,
     isDragging,
     index,
+    activeIndex,
     overIndex,
     over,
   } = sortable;
@@ -161,23 +172,40 @@ function SortableItem<T extends HTMLElement>({
   const offsetTop = eventY + position.y;
 
   const ref = React.useCallback((node: T) => setNodeRef(node), [setNodeRef]);
+  const parentIndex =
+    overIndex === -1 ? undefined : getDropTargetParentIndex?.(overIndex);
+  const isValidParent =
+    parentIndex === undefined || parentIndex === -1
+      ? false
+      : acceptsDrop(activeIndex, parentIndex, "inside");
+  const overIdAcceptsDrop =
+    overIndex === -1
+      ? undefined
+      : acceptsDrop(activeIndex, overIndex, "inside");
+
+  const relativeDropPosition =
+    index >= 0 && index === overIndex && !isDragging && active && over
+      ? validateDropIndicator({
+          acceptsDrop,
+          keys,
+          activeId: active.id,
+          overId: over.id,
+          offsetStart: axis === "x" ? offsetLeft : offsetTop,
+          elementStart: axis === "x" ? over.rect.left : over.rect.top,
+          elementSize: axis === "x" ? over.rect.width : over.rect.height,
+        })
+      : undefined;
+
+  const showDragInsideIndicatorOnParent =
+    !overIdAcceptsDrop && isValidParent && parentIndex === index;
 
   return children({
     ref,
     ...attributes,
     ...listeners,
     relativeDropPosition:
-      index >= 0 && index === overIndex && !isDragging && active && over
-        ? validateDropIndicator({
-            acceptsDrop,
-            keys,
-            activeId: active.id,
-            overId: over.id,
-            offsetStart: axis === "x" ? offsetLeft : offsetTop,
-            elementStart: axis === "x" ? over.rect.left : over.rect.top,
-            elementSize: axis === "x" ? over.rect.width : over.rect.height,
-          })
-        : undefined,
+      relativeDropPosition ??
+      (showDragInsideIndicatorOnParent ? "inside" : undefined),
   });
 }
 
@@ -191,11 +219,12 @@ interface RootProps {
   renderOverlay?: (index: number) => React.ReactNode;
   onMoveItem?: (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: RelativeDropPosition
   ) => void;
-  acceptsDrop?: DropValidator;
-  axis?: "x" | "y";
+  acceptsDrop?: SortableItemContextProps["acceptsDrop"];
+  axis?: SortableItemContextProps["axis"];
+  getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
 }
 
 function SortableRoot({
@@ -205,6 +234,7 @@ function SortableRoot({
   renderOverlay,
   acceptsDrop = defaultAcceptsDrop,
   axis = "y",
+  getDropTargetParentIndex,
 }: RootProps) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -242,7 +272,6 @@ function SortableRoot({
       const { active, over } = event;
 
       setActiveIndex(undefined);
-
       if (over && active.id !== over.id) {
         const oldIndex = keys.findIndex((id) => id === active.id);
         const newIndex = keys.findIndex((id) => id === over.id);
@@ -281,14 +310,22 @@ function SortableRoot({
   return (
     <SortableItemContext.Provider
       value={React.useMemo(
-        () => ({
+        (): SortableItemContextProps => ({
           keys,
           acceptsDrop,
           position,
           setActivatorEvent,
           axis,
+          getDropTargetParentIndex,
         }),
-        [acceptsDrop, axis, keys, position, setActivatorEvent]
+        [
+          acceptsDrop,
+          axis,
+          getDropTargetParentIndex,
+          keys,
+          position,
+          setActivatorEvent,
+        ]
       )}
     >
       <DndContext

package/src/components/internal/Menu.tsx

@@ -157,12 +157,12 @@ export const getMenuItemKey = <T extends string>(
   }
 };
 
-export const CHECKBOX_WIDTH = 16;
+export const CHECKBOX_WIDTH = 15;
 export const CHECKBOX_RIGHT_INSET = 8;
 export const CHECKBOX_INDENT_WIDTH = 6;
 
 export const styles = {
-  separatorStyle: "h-px bg-divider mx-4 my-1",
+  separatorStyle: "h-px bg-divider mx-3 my-1",
   selectedItemStyle:
     "focus:outline-none focus:text-white focus:bg-primary focus:kbd:text-white",
   testSelectedItemStyle: "outline-none text-white bg-primary kbd:text-white",
@@ -175,7 +175,12 @@ export const styles = {
     font-sans text-button font-medium
     ${disabled ? "text-text-disabled" : ""}
   `,
-  itemIndicatorStyle: "flex items-center relative -left-2.5 -mr-2",
+  itemIndicator: {
+    className: "flex items-center relative -left-2.5",
+    style: {
+      marginRight: -CHECKBOX_RIGHT_INSET,
+    },
+  },
   contentStyle:
     "rounded bg-popover-background text-text shadow-[0_2px_4px_rgba(0,0,0,0.2),_0_0_12px_rgba(0,0,0,0.1)] z-menu py-1",
 };

package/src/components/internal/SelectItem.tsx

@@ -65,8 +65,9 @@ export const SelectItem = React.forwardRef(
               testSelected && styles.testSelectedItemStyle
             )}
           >
+            <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />
             {Components.ItemIndicator && (
-              <Components.ItemIndicator className={styles.itemIndicatorStyle}>
+              <Components.ItemIndicator {...styles.itemIndicator}>
                 <CheckIcon />
               </Components.ItemIndicator>
             )}
@@ -107,7 +108,7 @@ export const SelectItem = React.forwardRef(
           <div className="flex flex-1 items-center">
             {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
             {checked ? (
-              <div className={styles.itemIndicatorStyle}>
+              <div {...styles.itemIndicator}>
                 <CheckIcon />
               </div>
             ) : indented ? (

package/src/index.css

@@ -21,7 +21,6 @@
   --secondary-light: rgb(0, 160, 129);
   --secondary-pastel: rgb(205, 238, 231);
   --secondary-bright: #0ab557;
-  --input-background: rgb(240, 242, 246);
   --input-background-light: rgb(243, 245, 249);
   --code-background: rgb(250, 250, 250);
   --code-background-dark: #435080;
@@ -37,6 +36,9 @@
   --popover-divider: transparent;
   --listview-raised-background: rgba(0, 0, 0, 0.03);
   --listview-editing-background: #fff;
+  --input-background: rgb(240, 242, 246);
+  --list-view-hover-background: rgb(244, 246, 250);
+  --list-view-thumbnail-background: var(--input-background);
   --slider-thumb-background: white;
   --slider-border: #9698ac;
   --mask: rgb(12, 193, 67);
@@ -78,6 +80,8 @@
   --chip-error-shadow: rgb(255, 219, 219);
   --chip-default-shadow: rgb(0, 0, 0);
   --floating-button: rgb(248, 248, 250);
+  --block-border: rgb(184, 201, 218);
+  --block-highlight: rgb(255, 165, 0);
 }
 
 [data-theme="dark"] {
@@ -105,6 +109,8 @@
   --popover-divider: rgba(255, 255, 255, 0.08);
   --listview-raised-background: rgba(181, 178, 255, 0.1);
   --listview-editing-background: #000;
+  --list-view-hover-background: var(--input-background-light);
+  --list-view-thumbnail-background: var(--input-background);
   --slider-thumb-background: var(--input-background-light);
   --slider-border: var(--divider);
   --mask: rgb(102, 187, 106);

package/src/index.tsx

@@ -1,4 +1,5 @@
 // Components
+export * from "./components/ActionMenu";
 export * from "./components/ActivityIndicator";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
@@ -42,6 +43,7 @@ export * from "./components/List";
 export * from "./components/ListView";
 export * from "./components/MediaThumbnail";
 export * from "./components/Message";
+export * from "./components/NoyaLogo";
 export * from "./components/Popover";
 export * from "./components/Progress";
 export * from "./components/ScrollArea";

package/src/theme/index.ts

@@ -6,3 +6,5 @@ export type Theme = (typeof tailwindConfig.theme)["extend"];
 export type ThemeColor = keyof Theme["colors"];
 
 export const cssVars = convertKebabToCamelCase(tailwindConfig.theme.extend);
+
+export const INPUT_HEIGHT = 27;

package/src/utils/classNames.ts

@@ -1,5 +1,53 @@
-export function cx(
-  ...args: Array<string | number | boolean | null | undefined>
-): string {
+import tailwindConfig from "../../tailwind.config";
+
+type ClassNameItem = string | number | BigInt | boolean | null | undefined;
+type Category = "text" | "flex";
+type Options = {
+  categories?: Category[];
+};
+
+const textKeys = Object.keys(tailwindConfig.theme.extend.fontSize).map(
+  (key) => `text-${key}`
+);
+const textKeysSet = new Set(textKeys);
+const keyMap: Record<Category, Set<string>> = {
+  text: textKeysSet,
+  flex: new Set(["flex-auto", "flex-none", "flex-[0_0_auto]", "flex-1"]),
+};
+
+export function cx(...args: ClassNameItem[]): string {
   return args.filter(Boolean).join(" ").trim();
 }
+
+const filterLastClassNameInCategory = ({
+  classNames,
+  categoryKeys,
+}: {
+  classNames: string[];
+  categoryKeys: Set<string>;
+}) => {
+  const lastClassInGroup = classNames.findLast((key) => categoryKeys.has(key));
+  return classNames.flatMap((className) => {
+    if (categoryKeys.has(className)) {
+      return lastClassInGroup === className ? [className] : [];
+    }
+    return [className];
+  });
+};
+
+export function mergeConflictingClassNames(
+  classNames: ClassNameItem | ClassNameItem[],
+  options?: Options
+): string {
+  const classes = Array.isArray(classNames)
+    ? cx(...classNames)
+    : cx(classNames);
+  let classNamesList = classes.split(/\s+/);
+  options?.categories?.forEach((category) => {
+    classNamesList = filterLastClassNameInCategory({
+      classNames: classNamesList,
+      categoryKeys: keyMap[category],
+    });
+  });
+  return classNamesList.join(" ");
+}

package/src/utils/inputs.ts

@@ -0,0 +1,21 @@
+import { cx } from "./classNames";
+
+export type InputSize = "small" | "medium" | "large";
+
+const insetEndBaseStyles = "absolute inset-y-0 flex items-center z-label";
+
+export const getInsetEndStyles = (size: InputSize = "medium") => {
+  return cx(
+    insetEndBaseStyles,
+    size === "large"
+      ? "right-2"
+      : size === "medium"
+        ? "right-1.5"
+        : size === "small"
+          ? "right-0.5"
+          : "",
+    size === "small" ? "min-h-[19px]" : "min-h-input-height"
+  );
+};
+
+export const startBaseStyles = "absolute left-1.5 inset-y-0 flex items-center";

package/tailwind.config.ts

@@ -1,3 +1,4 @@
+import containerQueries from "@tailwindcss/container-queries";
 import type { Config } from "tailwindcss";
 
 const config = {
@@ -29,6 +30,9 @@ const config = {
         "secondary-bright": "var(--secondary-bright)",
         "input-background": "var(--input-background)",
         "input-background-light": "var(--input-background-light)",
+        "list-view-hover-background": "var(--list-view-hover-background)",
+        "list-view-thumbnail-background":
+          "var(--list-view-thumbnail-background)",
         "code-background": "var(--code-background)",
         "code-background-dark": "var(--code-background-dark)",
         "selected-background": "var(--selected-background)",
@@ -74,6 +78,8 @@ const config = {
         "chip-error-shadow": "var(--chip-error-shadow)",
         "chip-default-shadow": "var(--chip-default-shadow)",
         "floating-button": "var(--floating-button)",
+        "block-border": "var(--block-border)",
+        "block-highlight": "var(--block-highlight)",
       },
       fontFamily: {
         sans: [
@@ -235,6 +241,7 @@ const config = {
     "gap-toolbar-separator",
     "-mr-1",
   ],
+  plugins: [containerQueries],
 } satisfies Config;
 
 export default config;