@dust-tt/sparkle 0.5.0 → 0.5.2-rc-1

package/src/components/Avatar.tsx

@@ -257,6 +257,7 @@ interface AvatarStackProps {
   isRounded?: boolean;
   hasMagnifier?: boolean;
   tooltipTriggerAsChild?: boolean;
+  orientation?: "horizontal" | "vertical";
 }
 
 const sizeClassesPx: Record<AvatarStackSizeType, number> = {
@@ -272,6 +273,7 @@ Avatar.Stack = function ({
   isRounded = false,
   hasMagnifier = true,
   tooltipTriggerAsChild = false,
+  orientation = "horizontal",
 }: AvatarStackProps) {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -294,6 +296,8 @@ Avatar.Stack = function ({
     marginLeft: 0,
     widthHovered: sizeClassesPx[size] * 0.6,
     width: sizeClassesPx[size] * 0.25,
+    heightHovered: sizeClassesPx[size] * 0.6,
+    height: sizeClassesPx[size] * 0.25,
   };
 
   const collapsedWidth =
@@ -306,7 +310,20 @@ Avatar.Stack = function ({
       (visibleAvatars.length + Number(Boolean(remainingCount))) +
     (sizeClassesPx[size] - sizeSetting.widthHovered);
 
-  const transitionSettings = "width 200ms ease-out";
+  const collapsedHeight =
+    sizeSetting.height *
+      (visibleAvatars.length + Number(Boolean(remainingCount))) +
+    (sizeClassesPx[size] - sizeSetting.height);
+
+  const openedHeight =
+    sizeSetting.heightHovered *
+      (visibleAvatars.length + Number(Boolean(remainingCount))) +
+    (sizeClassesPx[size] - sizeSetting.heightHovered);
+
+  const transitionSettings =
+    orientation === "vertical"
+      ? "height 200ms ease-out"
+      : "width 200ms ease-out";
 
   return (
     <Tooltip
@@ -315,13 +332,24 @@ Avatar.Stack = function ({
       trigger={
         <>
           <div
-            className="s-flex s-flex-row"
+            className={cn(
+              "s-flex",
+              orientation === "vertical" ? "s-flex-col" : "s-flex-row"
+            )}
             onMouseEnter={() => visibleAvatars.length > 1 && setIsHovered(true)}
             onMouseLeave={() =>
               visibleAvatars.length > 1 && setIsHovered(false)
             }
             style={{
-              width: `${isHovered ? openedWidth : collapsedWidth}px`,
+              [orientation === "vertical" ? "height" : "width"]: `${
+                isHovered
+                  ? orientation === "vertical"
+                    ? openedHeight
+                    : openedWidth
+                  : orientation === "vertical"
+                    ? collapsedHeight
+                    : collapsedWidth
+              }px`,
               transition: transitionSettings,
             }}
           >
@@ -330,9 +358,13 @@ Avatar.Stack = function ({
                 key={i}
                 className="s-cursor-pointer s-drop-shadow-md"
                 style={{
-                  width: isHovered
-                    ? sizeSetting.widthHovered
-                    : sizeSetting.width,
+                  [orientation === "vertical" ? "height" : "width"]: isHovered
+                    ? orientation === "vertical"
+                      ? sizeSetting.heightHovered
+                      : sizeSetting.widthHovered
+                    : orientation === "vertical"
+                      ? sizeSetting.height
+                      : sizeSetting.width,
                   transition: transitionSettings,
                 }}
               >
@@ -359,9 +391,13 @@ Avatar.Stack = function ({
               <div
                 className="s-cursor-pointer s-drop-shadow-md"
                 style={{
-                  width: isHovered
-                    ? sizeSetting.widthHovered
-                    : sizeSetting.width,
+                  [orientation === "vertical" ? "height" : "width"]: isHovered
+                    ? orientation === "vertical"
+                      ? sizeSetting.heightHovered
+                      : sizeSetting.widthHovered
+                    : orientation === "vertical"
+                      ? sizeSetting.height
+                      : sizeSetting.width,
                   transition: transitionSettings,
                 }}
               >

package/src/components/Button.tsx

@@ -204,7 +204,8 @@ const chevronVariantMap = {
 } as const;
 
 export interface MetaButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
   isRounded?: boolean;

package/src/components/ButtonGroup.tsx

@@ -80,7 +80,8 @@ const buttonGroupVariants = cva("s-inline-flex", {
 });
 
 export interface ButtonGroupProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
     VariantProps<typeof buttonGroupVariants> {
   /**
    * Array of button or dropdown items to render in the group.

package/src/components/ButtonsSwitch.tsx

@@ -54,7 +54,8 @@ const listStyles = cva(
 );
 
 export interface ButtonsSwitchListProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof listStyles> {
   size?: ButtonSize;
   disabled?: boolean;
@@ -115,8 +116,10 @@ export const ButtonsSwitchList = React.forwardRef<
 );
 ButtonsSwitchList.displayName = "ButtonsSwitchList";
 
-interface ButtonsSwitchProps
-  extends Omit<React.ComponentProps<typeof Button>, "size" | "variant"> {
+interface ButtonsSwitchProps extends Omit<
+  React.ComponentProps<typeof Button>,
+  "size" | "variant"
+> {
   value: string;
   label?: string;
   icon?: React.ComponentProps<typeof Button>["icon"];

package/src/components/Card.tsx

@@ -89,8 +89,7 @@ interface CardLinkProps extends CommonProps, LinkWrapperProps {
 }
 
 interface CardButtonProps
-  extends CommonProps,
-    React.ButtonHTMLAttributes<HTMLDivElement> {
+  extends CommonProps, React.ButtonHTMLAttributes<HTMLDivElement> {
   href?: never;
   target?: never;
   rel?: never;
@@ -176,15 +175,13 @@ interface CardPropsBase {
 }
 
 interface CardPropsWithLink
-  extends CardPropsBase,
-    Omit<CardLinkProps, keyof CardPropsBase> {
+  extends CardPropsBase, Omit<CardLinkProps, keyof CardPropsBase> {
   href: string;
   onClick?: never;
 }
 
 interface CardPropsWithButton
-  extends CardPropsBase,
-    Omit<CardButtonProps, keyof CardPropsBase> {
+  extends CardPropsBase, Omit<CardButtonProps, keyof CardPropsBase> {
   href?: never;
 }
 

package/src/components/Checkbox.tsx

@@ -44,7 +44,8 @@ const checkboxStyles = cva(
 type CheckBoxStateType = boolean | "partial";
 
 interface CheckboxProps
-  extends Omit<
+  extends
+    Omit<
       React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
       "checked" | "defaultChecked"
     >,

package/src/components/Citation.tsx

@@ -132,8 +132,7 @@ const CitationGrid = React.forwardRef<HTMLDivElement, CitationGridProps>(
 );
 CitationGrid.displayName = "CitationGrid";
 
-interface CitationCloseProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface CitationCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string;
   onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
@@ -260,8 +259,7 @@ const CitationTitle = React.forwardRef<HTMLDivElement, CitationTitleProps>(
 );
 CitationTitle.displayName = "CitationTitle";
 
-interface CitationDescriptionProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface CitationDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
 }
 

package/src/components/Collapsible.tsx

@@ -63,7 +63,8 @@ const Collapsible = React.forwardRef<
 Collapsible.displayName = "Collapsible";
 
 export interface CollapsibleTriggerProps
-  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>,
+  extends
+    React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>,
     Omit<VariantProps<typeof labelVariants>, "disabled"> {
   label?: string;
   isOpen?: boolean;
@@ -130,7 +131,8 @@ const contentVariants = cva("s-overflow-hidden s-transition-all", {
 });
 
 export interface CollapsibleContentProps
-  extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
+  extends
+    React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
     VariantProps<typeof contentVariants> {}
 
 const CollapsibleContent = React.forwardRef<

package/src/components/ConversationMessage.tsx

@@ -34,7 +34,8 @@ export const ConversationContainer = React.forwardRef<
 ConversationContainer.displayName = "ConversationContainer";
 
 interface ConversationMessageProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof messageVariants> {
   actions?: ConversationMessageAction[];
   avatarBusy?: boolean;
@@ -141,8 +142,7 @@ export const ConversationMessage = React.forwardRef<
 
 ConversationMessage.displayName = "ConversationMessage";
 
-interface ConversationMessageContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface ConversationMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   citations?: React.ReactElement[];
   type: ConversationMessageType;
@@ -173,8 +173,7 @@ export const ConversationMessageContent = React.forwardRef<
 
 ConversationMessageContent.displayName = "ConversationMessageContent";
 
-interface ConversationMessageHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   actions?: ConversationMessageAction[];
   avatarUrl?: string | React.ReactNode;
   isBusy?: boolean;

package/src/components/Counter.tsx

@@ -94,7 +94,8 @@ const counterVariants = cva(
 );
 
 export interface CounterProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof counterVariants> {
   value: number;
 }

package/src/components/DataTable.tsx

@@ -333,8 +333,9 @@ export function DataTable<TData extends TBaseData>({
   );
 }
 
-export interface ScrollableDataTableProps<TData extends TBaseData>
-  extends DataTableProps<TData> {
+export interface ScrollableDataTableProps<
+  TData extends TBaseData,
+> extends DataTableProps<TData> {
   maxHeight?: string | boolean;
   onLoadMore?: () => void;
   isLoading?: boolean;
@@ -871,8 +872,7 @@ interface BaseMenuItem {
 }
 
 interface RegularMenuItem
-  extends BaseMenuItem,
-    Omit<DropdownMenuItemProps, "children" | "label"> {
+  extends BaseMenuItem, Omit<DropdownMenuItemProps, "children" | "label"> {
   kind: "item";
 }
 

package/src/components/Dialog.tsx

@@ -73,8 +73,9 @@ const dialogVariants = cva(
   }
 );
 
-interface DialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+interface DialogContentProps extends React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> {
   size?: DialogSizeType;
   height?: DialogHeightType;
   trapFocusScope?: boolean;

package/src/components/Dropdown.tsx

@@ -242,8 +242,9 @@ const DropdownMenuSubContent = React.forwardRef<
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
-interface DropdownMenuContentProps
-  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Content
+> {
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;
   dropdownHeaders?: React.ReactNode;
@@ -486,8 +487,10 @@ const DropdownMenuRadioItem = React.forwardRef<
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-interface DropdownMenuTagItemProps
-  extends Omit<DropdownMenuItemProps, "label" | "icon" | "onClick"> {
+interface DropdownMenuTagItemProps extends Omit<
+  DropdownMenuItemProps,
+  "label" | "icon" | "onClick"
+> {
   label: string;
   size?: React.ComponentProps<typeof Chip>["size"];
   color?: React.ComponentProps<typeof Chip>["color"];

package/src/components/Hoverable.tsx

@@ -42,8 +42,7 @@ const variantStyle = cva(
 );
 
 interface MetaHoverableProps
-  extends React.HTMLAttributes<HTMLElement>,
-    VariantProps<typeof variantStyle> {
+  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof variantStyle> {
   asChild?: boolean;
 }
 
@@ -64,8 +63,7 @@ const MetaHoverable = React.forwardRef<HTMLElement, MetaHoverableProps>(
 MetaHoverable.displayName = "MetaHoverable";
 
 export interface HoverableProps
-  extends MetaHoverableProps,
-    Omit<LinkWrapperProps, "children"> {}
+  extends MetaHoverableProps, Omit<LinkWrapperProps, "children"> {}
 
 const Hoverable = React.forwardRef<HTMLElement, HoverableProps>(
   ({ href, target, rel, children, variant, className, ...props }, ref) => {

package/src/components/IconButton.tsx

@@ -69,11 +69,10 @@ const iconButtonVariants = cva(
   }
 );
 
-export interface IconButtonProps
-  extends Omit<
-    React.ComponentPropsWithoutRef<typeof Button>,
-    "label" | "variant"
-  > {
+export interface IconButtonProps extends Omit<
+  React.ComponentPropsWithoutRef<typeof Button>,
+  "label" | "variant"
+> {
   variant?: IconButtonVariantType;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   tooltip?: string;

package/src/components/Input.tsx

@@ -11,8 +11,10 @@ const MESSAGE_STATUS = ["info", "default", "error"] as const;
 
 type MessageStatus = (typeof MESSAGE_STATUS)[number];
 
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"> {
+export interface InputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "value"
+> {
   message?: string | null;
   messageStatus?: MessageStatus;
   value?: string | null;

package/src/components/Label.tsx

@@ -26,7 +26,8 @@ const labelVariants = cva(
 );
 
 export interface LabelProps
-  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
+  extends
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
     VariantProps<typeof labelVariants> {
   isMuted?: boolean;
 }

package/src/components/MultiPageDialog.tsx

@@ -32,8 +32,7 @@ const MultiPageDialogRoot = Dialog;
 const MultiPageDialogTrigger = DialogTrigger;
 const MultiPageDialogClose = DialogClose;
 
-interface MultiPageDialogFooterProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface MultiPageDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   addTopSeparator: boolean;
   leftButton?: React.ComponentProps<typeof Button>;
   centerButton?: React.ComponentProps<typeof Button>;

package/src/components/MultiPageSheet.tsx

@@ -52,8 +52,7 @@ const MultiPageSheetRoot = Sheet;
 const MultiPageSheetTrigger = SheetTrigger;
 const MultiPageSheetClose = SheetClose;
 
-interface MultiPageSheetFooterProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface MultiPageSheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   addTopSeparator: boolean;
   leftButton?: React.ComponentProps<typeof Button>;
   centerButton?: React.ComponentProps<typeof Button>;

package/src/components/NavigationList.tsx

@@ -1,3 +1,4 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
@@ -10,7 +11,11 @@ import {
   ScrollBar,
 } from "@sparkle/components/";
 import { Button } from "@sparkle/components/Button";
-import { MoreIcon } from "@sparkle/icons/app";
+import {
+  Collapsible,
+  CollapsibleContent,
+} from "@sparkle/components/Collapsible";
+import { ArrowDownSIcon, ArrowRightSIcon, MoreIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
 const NavigationListItemStyles = cva(
@@ -215,37 +220,168 @@ const variantStyles = cva("", {
 });
 
 const labelStyles = cva(
-  "s-pt-4 s-pb-2 s-pl-3 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
+  "s-flex s-items-center s-justify-between s-gap-2 s-pt-4 s-pb-2 s-heading-xs s-whitespace-nowrap s-overflow-hidden s-text-ellipsis"
 );
 
+interface NavigationListLabelButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ComponentType;
+  children?: React.ReactNode;
+}
+
+const NavigationListLabelButton = React.forwardRef<
+  HTMLButtonElement,
+  NavigationListLabelButtonProps
+>(({ className, icon, children, disabled, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={disabled}
+      className={cn(
+        "s-inline-flex s-flex-shrink-0 s-items-center s-justify-center",
+        "s-rounded-md s-transition-colors s-duration-200",
+        "s-text-muted-foreground dark:s-text-muted-foreground-night",
+        "hover:s-text-foreground dark:hover:s-text-foreground-night",
+        "hover:s-bg-primary-150 dark:hover:s-bg-primary-150-night",
+        "active:s-bg-primary-200 dark:active:s-bg-primary-200-night",
+        "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-ring focus-visible:s-ring-offset-1",
+        "disabled:s-cursor-not-allowed disabled:s-opacity-50",
+        "disabled:hover:s-text-muted-foreground dark:disabled:hover:s-text-muted-foreground-night",
+        "disabled:hover:s-bg-transparent dark:disabled:hover:s-bg-transparent",
+        className
+      )}
+      {...props}
+    >
+      {icon ? <Icon visual={icon} size="xs" /> : children}
+    </button>
+  );
+});
+
+NavigationListLabelButton.displayName = "NavigationListLabelButton";
+
 interface NavigationListLabelProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof variantStyles> {
   label: string;
+  isCollapsible?: boolean;
+  isOpen?: boolean;
+  action?: React.ReactNode;
 }
 
 const NavigationListLabel = React.forwardRef<
   HTMLDivElement,
   NavigationListLabelProps
->(({ className, variant, label, isSticky, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      labelStyles(),
-      variantStyles({ variant, isSticky }),
-      className
-    )}
-    {...props}
-  >
-    {label}
-  </div>
-));
+>(
+  (
+    {
+      className,
+      variant,
+      label,
+      isSticky,
+      isCollapsible,
+      isOpen,
+      action,
+      ...props
+    },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        labelStyles(),
+        variantStyles({ variant, isSticky }),
+        isCollapsible ? "s-pl-1.5" : "s-pl-3",
+        className
+      )}
+      {...props}
+    >
+      <div className="s-flex s-items-center s-gap-1 s-overflow-hidden s-text-ellipsis">
+        {isCollapsible && (
+          <NavigationListLabelButton
+            icon={isOpen ? ArrowDownSIcon : ArrowRightSIcon}
+            aria-label={isOpen ? "Collapse section" : "Expand section"}
+          />
+        )}
+        <span className="s-overflow-hidden s-text-ellipsis">{label}</span>
+      </div>
+      {action}
+    </div>
+  )
+);
 
 NavigationListLabel.displayName = "NavigationListLabel";
 
+interface NavigationListCollapsibleSectionProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  label: string;
+  action?: React.ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+const NavigationListCollapsibleSection = React.forwardRef<
+  React.ElementRef<typeof Collapsible>,
+  NavigationListCollapsibleSectionProps
+>(
+  (
+    {
+      label,
+      action,
+      defaultOpen,
+      open,
+      onOpenChange,
+      children,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = React.useState(
+      defaultOpen ?? false
+    );
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : internalOpen;
+
+    const handleOpenChange = (newOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    };
+
+    return (
+      <Collapsible
+        ref={ref}
+        open={isOpen}
+        onOpenChange={handleOpenChange}
+        className={className}
+        {...props}
+      >
+        <CollapsiblePrimitive.Trigger asChild>
+          <NavigationListLabel
+            label={label}
+            isCollapsible={true}
+            isOpen={isOpen}
+            action={action}
+          />
+        </CollapsiblePrimitive.Trigger>
+        <CollapsibleContent>{children}</CollapsibleContent>
+      </Collapsible>
+    );
+  }
+);
+
+NavigationListCollapsibleSection.displayName =
+  "NavigationListCollapsibleSection";
+
 export {
   NavigationList,
+  NavigationListCollapsibleSection,
   NavigationListItem,
   NavigationListItemAction,
   NavigationListLabel,
+  NavigationListLabelButton,
 };

package/src/components/Popover.tsx

@@ -9,8 +9,9 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverPortal = PopoverPrimitive.Portal;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
-export interface PopoverContentProps
-  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+export interface PopoverContentProps extends React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+> {
   fullWidth?: boolean;
   mountPortal?: boolean;
   mountPortalContainer?: HTMLElement;

package/src/components/RadioGroup.tsx

@@ -63,7 +63,8 @@ const RadioGroup = React.forwardRef<
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 interface RadioGroupItemProps
-  extends Omit<
+  extends
+    Omit<
       React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
       "children"
     >,
@@ -127,7 +128,8 @@ const RadioGroupItem = React.forwardRef<
 type IconPosition = "start" | "center" | "end";
 
 interface RadioGroupCustomItemProps
-  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
+  extends
+    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
     VariantProps<typeof radioStyles> {
   iconPosition?: IconPosition;
   customItem: React.ReactNode;