@noya-app/noya-designsystem 0.1.40 → 0.1.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,11 +23,11 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.14",
+    "@noya-app/noya-colorpicker": "0.1.15",
     "@noya-app/noya-utils": "0.1.3",
     "@noya-app/noya-geometry": "0.1.6",
-    "@noya-app/noya-icons": "0.1.4",
-    "@noya-app/noya-keymap": "0.1.2",
+    "@noya-app/noya-icons": "0.1.5",
+    "@noya-app/noya-keymap": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.1",
     "@radix-ui/react-compose-refs": "^1.0.0",
@@ -36,9 +36,8 @@
     "@radix-ui/react-dropdown-menu": "^2.0.1",
     "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-progress": "^1.0.1",
-    "@radix-ui/react-radio-group": "^1.1.0",
     "@radix-ui/react-scroll-area": "^1.0.2",
-    "@radix-ui/react-slider": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-toggle-group": "^1.0.1",

package/src/__tests__/combobox.test.ts

@@ -0,0 +1,578 @@
+import { expect, test } from "bun:test";
+import { ComboboxOption, ComboboxState } from "../utils/combobox";
+import { IScoredItem } from "../utils/fuzzyScorer";
+
+const testItems = [
+  { id: "1", name: "font-bold" },
+  { id: "2", name: "font-italic" },
+  { id: "3", name: "font-regular" },
+  {
+    type: "sectionHeader" as const,
+    id: "header1",
+    name: "Border Styles",
+    maxVisibleItems: 2,
+  },
+  { id: "4", name: "border-solid" },
+  { id: "5", name: "border-dashed" },
+  { id: "6", name: "border-dotted" },
+];
+
+test("initializes with default values", () => {
+  const state = new ComboboxState(testItems, "initial", true);
+  const snapshot = state.getSnapshot();
+
+  expect(snapshot.filter).toBe("initial");
+  expect(snapshot.selectedIndex).toBe(0);
+  expect(snapshot.lastSubmittedValue).toEqual({
+    filter: "initial",
+    itemName: "initial",
+  });
+  expect(snapshot.filteredItems).toHaveLength(testItems.length);
+});
+
+test("filters items based on query", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+  const snapshot = state.getSnapshot();
+
+  expect(snapshot.filteredItems).toHaveLength(3);
+  expect(
+    snapshot.filteredItems.every(
+      (item) => item.type !== "sectionHeader" && item.name.includes("font")
+    )
+  ).toBe(true);
+});
+
+test("respects section header maxVisibleItems", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("border");
+  const snapshot = state.getSnapshot();
+
+  // When filtering by "border", we should get:
+  // 1. The border section header
+  // 2. Only 2 items (maxVisibleItems) from that section
+  expect(snapshot.filteredItems).toHaveLength(3);
+  expect(snapshot.filteredItems[0].type).toBe("sectionHeader");
+  expect(snapshot.filteredItems[0].name).toBe("Border Styles");
+
+  const items = snapshot.filteredItems.slice(1);
+  expect(items).toHaveLength(2); // maxVisibleItems is 2
+  expect(items.every((item) => item.name.includes("border"))).toBe(true);
+});
+
+test("respects section header maxVisibleItems with empty query", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("");
+  const snapshot = state.getSnapshot();
+
+  // Find the border section
+  const borderSectionIndex = snapshot.filteredItems.findIndex(
+    (item) => item.type === "sectionHeader" && item.name === "Border Styles"
+  );
+
+  // Get items in the border section
+  const borderSectionItems = snapshot.filteredItems.slice(
+    borderSectionIndex + 1
+  );
+
+  // Should only show maxVisibleItems (2) items from the border section
+  expect(borderSectionItems).toHaveLength(2);
+  expect(
+    borderSectionItems.every((item) => item.name.startsWith("border-"))
+  ).toBe(true);
+});
+
+test("moves selection up and down", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+
+  // Move down twice
+  state.moveSelection("down");
+  state.moveSelection("down");
+  expect(state.getSnapshot().selectedIndex).toBe(2);
+
+  // Move up once
+  state.moveSelection("up");
+  expect(state.getSnapshot().selectedIndex).toBe(1);
+
+  // Should skip section headers when moving
+  state.setFilter("");
+  state.moveSelection("down");
+  const snapshot = state.getSnapshot();
+  expect(snapshot.filteredItems[snapshot.selectedIndex].type).not.toBe(
+    "sectionHeader"
+  );
+});
+
+test("selects current item", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+  state.moveSelection("down"); // Select second item
+  const selectedItem = state.selectCurrentItem();
+
+  expect(selectedItem?.name).toBe("font-italic");
+  const snapshot = state.getSnapshot();
+  expect(snapshot.filter).toBe("font-italic");
+  expect(snapshot.lastSubmittedValue).toEqual({
+    filter: "font-italic",
+    itemName: "font-italic",
+  });
+});
+
+test("restores last submitted value", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+  state.selectCurrentItem(); // Select first matching item
+  state.setFilter("something else");
+  state.restoreLastSubmittedValue();
+
+  const snapshot = state.getSnapshot();
+  expect(snapshot.filter).toBe("font-bold");
+});
+
+test("resets state", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+  state.moveSelection("down");
+  state.selectCurrentItem();
+
+  state.reset("new");
+  const snapshot = state.getSnapshot();
+  expect(snapshot.filter).toBe("new");
+  expect(snapshot.selectedIndex).toBe(0);
+});
+
+test("handles empty query", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("");
+  const snapshot = state.getSnapshot();
+
+  // With empty query, we should get:
+  // - 3 font items (no maxVisibleItems limit)
+  // - 1 border section header
+  // - 2 border items (maxVisibleItems: 2)
+  expect(snapshot.filteredItems).toHaveLength(6);
+
+  // Verify font items (first 3)
+  const fontItems = snapshot.filteredItems.slice(0, 3);
+  expect(fontItems.every((item) => item.name.startsWith("font-"))).toBe(true);
+
+  // Verify border section
+  expect(snapshot.filteredItems[3].type).toBe("sectionHeader");
+  expect(snapshot.filteredItems[3].name).toBe("Border Styles");
+
+  // Verify border items (last 2, limited by maxVisibleItems)
+  const borderItems = snapshot.filteredItems.slice(4);
+  expect(borderItems).toHaveLength(2);
+  expect(borderItems.every((item) => item.name.startsWith("border-"))).toBe(
+    true
+  );
+});
+
+test("provides typeahead value", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+
+  const typeaheadValue = state.getTypeaheadValue();
+  expect(typeaheadValue).toBe("font-bold");
+});
+
+test("notifies subscribers of changes", () => {
+  const state = new ComboboxState(testItems, "", true);
+  let callCount = 0;
+
+  const unsubscribe = state.subscribe(() => {
+    callCount++;
+  });
+
+  state.setFilter("font");
+  expect(callCount).toBe(1);
+
+  state.moveSelection("down");
+  expect(callCount).toBe(2);
+
+  state.selectCurrentItem();
+  expect(callCount).toBe(3);
+
+  unsubscribe();
+  state.setFilter("test");
+  expect(callCount).toBe(3); // Should not increment after unsubscribe
+});
+
+test("caches snapshots", () => {
+  const state = new ComboboxState(testItems, "", true);
+
+  const snapshot1 = state.getSnapshot();
+  const snapshot2 = state.getSnapshot();
+
+  // Should return the same object reference when no changes
+  expect(snapshot1).toBe(snapshot2);
+
+  // Should return new snapshot after change
+  state.setFilter("font");
+  const snapshot3 = state.getSnapshot();
+  expect(snapshot3).not.toBe(snapshot1);
+});
+
+test("supports fuzzy matching", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("fb"); // Should match "font-bold"
+  const snapshot = state.getSnapshot();
+
+  expect(snapshot.filteredItems).toHaveLength(1);
+  expect(snapshot.filteredItems[0].name).toBe("font-bold");
+});
+
+test("wraps selection at boundaries", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+
+  // Move up from first item should wrap to last
+  state.moveSelection("up");
+  expect(state.getSnapshot().selectedIndex).toBe(2);
+
+  // Move down from last item should wrap to first
+  state.moveSelection("down");
+  expect(state.getSnapshot().selectedIndex).toBe(0);
+});
+
+test("respects alwaysInclude flag", () => {
+  const itemsWithAlwaysInclude = [
+    { id: "1", name: "font-bold", alwaysInclude: true },
+    { id: "2", name: "font-italic" },
+    { id: "3", name: "font-regular" },
+  ];
+
+  const state = new ComboboxState(itemsWithAlwaysInclude, "", true);
+  state.setFilter("italic");
+  const snapshot = state.getSnapshot();
+
+  expect(snapshot.filteredItems).toHaveLength(2); // Should include "italic" match and "bold" due to alwaysInclude
+  expect(snapshot.filteredItems.some((item) => item.name === "font-bold")).toBe(
+    true
+  );
+  expect(
+    snapshot.filteredItems.some((item) => item.name === "font-italic")
+  ).toBe(true);
+});
+
+test("handles empty items array", () => {
+  const state = new ComboboxState([], "", true);
+  const snapshot = state.getSnapshot();
+
+  expect(snapshot.filteredItems).toHaveLength(0);
+  expect(snapshot.selectedIndex).toBe(0);
+});
+
+test("handles multiple section headers", () => {
+  const itemsWithMultipleSections = [
+    {
+      type: "sectionHeader" as const,
+      id: "header1",
+      name: "Fonts",
+      maxVisibleItems: 2,
+    },
+    { id: "1", name: "font-bold" },
+    { id: "2", name: "font-italic" },
+    { id: "3", name: "font-regular" },
+    {
+      type: "sectionHeader" as const,
+      id: "header2",
+      name: "Borders",
+      maxVisibleItems: 1,
+    },
+    { id: "4", name: "border-solid" },
+    { id: "5", name: "border-dashed" },
+  ];
+
+  const state = new ComboboxState(itemsWithMultipleSections, "", true);
+
+  // First test with empty filter - should respect maxVisibleItems
+  state.setFilter("");
+  let snapshot = state.getSnapshot();
+  // Expected:
+  // - 1 font header
+  // - 2 font items (maxVisibleItems: 2)
+  // - 1 border header
+  // - 1 border item (maxVisibleItems: 1)
+  expect(snapshot.filteredItems).toHaveLength(5);
+
+  // Now test with filters to verify maxVisibleItems
+  state.setFilter("font");
+  snapshot = state.getSnapshot();
+  expect(snapshot.filteredItems).toHaveLength(3); // header + 2 items (maxVisibleItems: 2)
+  expect(snapshot.filteredItems[0].type).toBe("sectionHeader");
+  expect(snapshot.filteredItems[0].name).toBe("Fonts");
+  expect(snapshot.filteredItems.slice(1)).toHaveLength(2);
+
+  state.setFilter("border");
+  snapshot = state.getSnapshot();
+  expect(snapshot.filteredItems).toHaveLength(2); // header + 1 item (maxVisibleItems: 1)
+  expect(snapshot.filteredItems[0].type).toBe("sectionHeader");
+  expect(snapshot.filteredItems[0].name).toBe("Borders");
+  expect(snapshot.filteredItems.slice(1)).toHaveLength(1);
+});
+
+test("handles multiple section headers with empty query", () => {
+  const itemsWithMultipleSections = [
+    {
+      type: "sectionHeader" as const,
+      id: "header1",
+      name: "Fonts",
+      maxVisibleItems: 2,
+    },
+    { id: "1", name: "font-bold" },
+    { id: "2", name: "font-italic" },
+    { id: "3", name: "font-regular" },
+    {
+      type: "sectionHeader" as const,
+      id: "header2",
+      name: "Borders",
+      maxVisibleItems: 1,
+    },
+    { id: "4", name: "border-solid" },
+    { id: "5", name: "border-dashed" },
+  ];
+
+  const state = new ComboboxState(itemsWithMultipleSections, "", true);
+  state.setFilter("");
+  const snapshot = state.getSnapshot();
+
+  // Expected structure:
+  // 1. "Fonts" header
+  // 2. 2 font items (maxVisibleItems: 2)
+  // 3. "Borders" header
+  // 4. 1 border item (maxVisibleItems: 1)
+  expect(snapshot.filteredItems).toHaveLength(5);
+
+  // Verify fonts section
+  expect(snapshot.filteredItems[0].type).toBe("sectionHeader");
+  expect(snapshot.filteredItems[0].name).toBe("Fonts");
+  expect(snapshot.filteredItems.slice(1, 3)).toHaveLength(2);
+  expect(
+    snapshot.filteredItems
+      .slice(1, 3)
+      .every((item) => item.name.startsWith("font-"))
+  ).toBe(true);
+
+  // Verify borders section
+  expect(snapshot.filteredItems[3].type).toBe("sectionHeader");
+  expect(snapshot.filteredItems[3].name).toBe("Borders");
+  expect(snapshot.filteredItems.slice(4)).toHaveLength(1);
+  expect(
+    snapshot.filteredItems
+      .slice(4)
+      .every((item) => item.name.startsWith("border-"))
+  ).toBe(true);
+});
+
+test("handles case insensitive matching", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("FONT");
+  const snapshot = state.getSnapshot();
+
+  expect(snapshot.filteredItems).toHaveLength(3);
+  expect(
+    snapshot.filteredItems.every(
+      (item) =>
+        item.type !== "sectionHeader" &&
+        item.name.toLowerCase().includes("font")
+    )
+  ).toBe(true);
+});
+
+test("maintains correct indices after filtering", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+  const snapshot = state.getSnapshot();
+
+  // Check that indices match original positions
+  const boldItem = snapshot.filteredItems.find(
+    (item): item is ComboboxOption & IScoredItem =>
+      item.type !== "sectionHeader" && item.name === "font-bold"
+  );
+  expect(boldItem?.index).toBe(0);
+
+  const italicItem = snapshot.filteredItems.find(
+    (item): item is ComboboxOption & IScoredItem =>
+      item.type !== "sectionHeader" && item.name === "font-italic"
+  );
+  expect(italicItem?.index).toBe(1);
+});
+
+test("handles section header selection", () => {
+  const state = new ComboboxState(testItems, "", true);
+
+  // Try to select the section header (index 3)
+  state.setSelectedIndex(3);
+  let snapshot = state.getSnapshot();
+  // Should select the next selectable item after the header
+  expect(snapshot.selectedIndex).toBe(4);
+  expect(snapshot.filteredItems[snapshot.selectedIndex].name).toBe(
+    "border-solid"
+  );
+
+  // Try to select a header when it's the last item
+  const itemsWithHeaderAtEnd = [
+    { id: "1", name: "item1" },
+    { id: "2", name: "item2" },
+    {
+      type: "sectionHeader" as const,
+      id: "header",
+      name: "Header",
+    },
+  ];
+  const stateWithHeaderAtEnd = new ComboboxState(
+    itemsWithHeaderAtEnd,
+    "",
+    true
+  );
+  stateWithHeaderAtEnd.setSelectedIndex(2); // Try to select header
+  snapshot = stateWithHeaderAtEnd.getSnapshot();
+  // Should select the previous selectable item before the header
+  expect(snapshot.selectedIndex).toBe(1);
+  expect(snapshot.filteredItems[snapshot.selectedIndex].name).toBe("item2");
+
+  // Try to select a header when it's between two sections
+  const itemsWithHeaderBetween = [
+    { id: "1", name: "item1" },
+    {
+      type: "sectionHeader" as const,
+      id: "header",
+      name: "Header",
+    },
+    { id: "2", name: "item2" },
+  ];
+  const stateWithHeaderBetween = new ComboboxState(
+    itemsWithHeaderBetween,
+    "",
+    true
+  );
+  stateWithHeaderBetween.setSelectedIndex(1); // Try to select header
+  snapshot = stateWithHeaderBetween.getSnapshot();
+  // Should select the next selectable item after the header
+  expect(snapshot.selectedIndex).toBe(2);
+  expect(snapshot.filteredItems[snapshot.selectedIndex].name).toBe("item2");
+});
+
+test("handles section header selection with no selectable items", () => {
+  // Test with only headers
+  const onlyHeaders = [
+    {
+      type: "sectionHeader" as const,
+      id: "header1",
+      name: "Header 1",
+    },
+    {
+      type: "sectionHeader" as const,
+      id: "header2",
+      name: "Header 2",
+    },
+  ];
+  const state = new ComboboxState(onlyHeaders, "", true);
+
+  // Try to select any header
+  state.setSelectedIndex(0);
+  const snapshot = state.getSnapshot();
+  // Should keep the initial selection since there are no selectable items
+  expect(snapshot.selectedIndex).toBe(0);
+});
+
+test("selects specific item when provided", () => {
+  const state = new ComboboxState(testItems, "", true);
+  state.setFilter("font");
+
+  // Get the items we can select from
+  const snapshot = state.getSnapshot();
+  const italicItem = snapshot.filteredItems.find(
+    (item): item is ComboboxOption & IScoredItem =>
+      item.type !== "sectionHeader" && item.name === "font-italic"
+  );
+
+  // Select a specific item, even though it's not the currently selected one
+  const selectedItem = state.selectCurrentItem(italicItem);
+  expect(selectedItem?.name).toBe("font-italic");
+
+  // Verify the state was updated
+  const newSnapshot = state.getSnapshot();
+  expect(newSnapshot.filter).toBe("font-italic");
+  expect(newSnapshot.lastSubmittedValue).toEqual({
+    filter: "font-italic",
+    itemName: "font-italic",
+  });
+});
+
+test("notifies subscribers synchronously", () => {
+  const state = new ComboboxState(testItems, "", true);
+  let callCount = 0;
+
+  state.subscribe(() => {
+    callCount++;
+  });
+
+  state.setFilter("font");
+  // Subscribers should be notified immediately
+  expect(callCount).toBe(1);
+
+  // State should be updated immediately
+  const snapshot = state.getSnapshot();
+  expect(snapshot.filter).toBe("font");
+
+  state.moveSelection("down");
+  expect(callCount).toBe(2);
+});
+
+test("handles arbitrary filter submission", () => {
+  const state = new ComboboxState(testItems, "", true);
+  const arbitraryValue = "custom-value";
+
+  // Submit an arbitrary value
+  state.submitArbitraryFilter(arbitraryValue);
+  let snapshot = state.getSnapshot();
+
+  // Check that the filter and lastSubmittedValue are updated
+  expect(snapshot.filter).toBe(arbitraryValue);
+  expect(snapshot.lastSubmittedValue).toEqual({
+    filter: arbitraryValue,
+    itemName: arbitraryValue,
+  });
+
+  // Verify that the arbitrary value persists after filtering
+  state.setFilter("font");
+  state.restoreLastSubmittedValue();
+  snapshot = state.getSnapshot();
+  expect(snapshot.filter).toBe(arbitraryValue);
+});
+
+test("handles arbitrary filter with setFilter", () => {
+  const state = new ComboboxState(testItems, "", false);
+  const nonExistentValue = "nonexistent";
+
+  // Should allow typing any value regardless of allowArbitraryValues
+  state.setFilter(nonExistentValue);
+  let snapshot = state.getSnapshot();
+  expect(snapshot.filter).toBe(nonExistentValue);
+  expect(snapshot.filteredItems).toHaveLength(0);
+
+  // Try to submit the arbitrary value
+  state.selectCurrentItem();
+  snapshot = state.getSnapshot();
+  // Since allowArbitraryValues is false, the filter should be restored to the last valid value
+  expect(snapshot.filter).toBe("");
+});
+
+test("handles invalid initial value with allowArbitraryValues", () => {
+  const invalidInitialValue = "nonexistent";
+
+  // With allowArbitraryValues = true
+  let state = new ComboboxState(testItems, invalidInitialValue, true);
+  let snapshot = state.getSnapshot();
+  expect(snapshot.filter).toBe(invalidInitialValue);
+  expect(snapshot.lastSubmittedValue.filter).toBe(invalidInitialValue);
+
+  // With allowArbitraryValues = false
+  state = new ComboboxState(testItems, invalidInitialValue, false);
+  snapshot = state.getSnapshot();
+  expect(snapshot.filter).toBe(""); // Should be empty since the value isn't allowed
+  expect(snapshot.lastSubmittedValue.filter).toBe(invalidInitialValue); // But keep the initial value in history
+});

package/src/components/ActivityIndicator.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from "react";
+import * as React from "react";
 
 interface Props {
   size?: number;
@@ -7,14 +7,14 @@ interface Props {
   trackColor?: string;
 }
 
-export const ActivityIndicator = memo(function ActivityIndicator({
+export const ActivityIndicator = React.memo(function ActivityIndicator({
   size = 16,
   opacity = 1,
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)",
 }: Props) {
-  const opacityStyle = useMemo(() => ({ opacity }), [opacity]);
-  const dynamicStyles = useMemo(
+  const opacityStyle = React.useMemo(() => ({ opacity }), [opacity]);
+  const dynamicStyles = React.useMemo(
     () => ({
       border: `2px solid ${trackColor}`,
       borderTopColor: color,

package/src/components/AnimatePresence.tsx

@@ -1,12 +1,12 @@
 import { isDeepEqual } from "@noya-app/noya-utils";
 import React, {
-  useEffect,
-  useState,
-  useRef,
   Children,
   isValidElement,
   useCallback,
+  useEffect,
   useLayoutEffect,
+  useRef,
+  useState,
 } from "react";
 
 type AnimatePresenceProps = {
@@ -79,7 +79,7 @@ const PresenceChild = ({
         ? "entering"
         : "exited"
   );
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<number>();
   const isInitialMount = useRef(true);
 
   const mergedAnimationStyles = {
@@ -109,7 +109,7 @@ const PresenceChild = ({
       });
     } else if (!isPresent && animationState !== "exited") {
       setAnimationState("exiting");
-      timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = window.setTimeout(() => {
         setAnimationState("exited");
         onExitComplete();
       }, duration);

package/src/components/Avatar.tsx

@@ -50,7 +50,6 @@ const AvatarRoot = React.forwardRef<
         style={dynamicStyles}
         className={cx(
           "flex items-center justify-center align-middle overflow-hidden select-none cursor-pointer rounded-full",
-          !disabled && "hover:translate-y-[-1px]",
           variant !== "bare" && "border border-background",
           className
         )}
@@ -126,6 +125,9 @@ export type AvatarProps = {
   /** @default normal */
   variant?: "normal" | "bare";
   disabled?: boolean;
+  /** Intended to be used in place of a fallback monogram, like an icon */
+  children?: React.ReactNode;
+  onClick?: () => void;
 };
 
 export const Avatar = React.memo(
@@ -137,6 +139,7 @@ export const Avatar = React.memo(
       size = 21,
       backgroundColor,
       variant = "normal",
+      children,
       ...props
     }: AvatarProps,
     forwardedRef: React.ForwardedRef<HTMLDivElement>
@@ -160,7 +163,7 @@ export const Avatar = React.memo(
             size={size}
             variant={variant}
           >
-            {getMonogram(name)}
+            {children ?? getMonogram(name)}
           </AvatarFallback>
         )}
       </AvatarRoot>