@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/menu.d.ts

@@ -0,0 +1,368 @@
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+import * as _mui_material_MenuItem from '@mui/material/MenuItem';
+export { default as MenuItem } from '@mui/material/MenuItem';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import Popper, { PopperPlacementType } from '@mui/material/Popper';
+import _mui_material_IconButton from '@mui/material/IconButton';
+import { TooltipProps } from '@mui/material/Tooltip';
+import * as _mui_material_ListItemIcon from '@mui/material/ListItemIcon';
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
+import * as _mui_material_styles from '@mui/material/styles';
+import { SxProps, Theme } from '@mui/material/styles';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import * as _mui_material_ButtonBase from '@mui/material/ButtonBase';
+import { PaperProps } from '@mui/material/Paper';
+
+type OnItemClickEvent = React.MouseEvent<HTMLLIElement, MouseEvent>;
+type OnClickEvent = React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLDivElement, MouseEvent>;
+type OnItemClickClientArg = (arg: {
+    event?: OnItemClickEvent;
+    closeHandler?: () => void;
+}) => void;
+type OnItemClickHandler = (event: OnItemClickEvent) => void;
+type OnTriggerClickHandler = (event: OnClickEvent) => void;
+type MenuOption = {
+    id: string;
+    label: string | number | React.ReactNode;
+    onClick?: () => void;
+    icon?: React.ReactElement;
+    extension?: React.ReactNode;
+};
+type MenuRef = {
+    getSelectedItem: () => MenuOption["id"][];
+};
+
+type Props$1 = {
+    options: MenuOption[];
+    optionHeader?: React.ReactNode;
+    extraItemClickHandler?: OnItemClickHandler;
+    menuItemProps?: {
+        variant?: 'rounded' | 'square';
+        fontSize?: React.CSSProperties['fontSize'];
+        padding?: React.CSSProperties['padding'];
+    };
+    initSelected: MenuOption["id"][];
+    multiple?: boolean;
+    autoFocusItem?: boolean;
+    menuRef?: React.RefObject<HTMLUListElement | null>;
+    isIconOnly?: boolean;
+    sorted?: boolean;
+};
+/**
+ * A Mui Menu component
+ *
+ * @param extraItemClickHandler - a function to be called when an item is clicked
+ *
+ */
+declare const CustomMenuList: react.ForwardRefExoticComponent<Props$1 & react.RefAttributes<MenuRef>>;
+
+declare const menuItemTheme: {
+    readonly defaultProps: {};
+    readonly styleOverrides: {
+        readonly root: {
+            readonly '--menu-item-hover-bg': "var(--mui-palette-background-hover-1)";
+            readonly '--menu-item-selected-bg': "var(--mui-palette-focus-1)";
+            readonly "&:hover": {
+                readonly backgroundColor: "var(--menu-item-hover-bg)";
+            };
+            readonly "&.Mui-selected:before": {
+                readonly width: "100%";
+                readonly height: "100%";
+                readonly content: "''";
+                readonly position: "absolute";
+                readonly left: 0;
+                readonly top: 0;
+                readonly backgroundColor: "var(--menu-item-selected-bg)";
+                readonly overflow: "hidden";
+            };
+            readonly "& svg": {
+                readonly fontSize: "1.2rem";
+            };
+        };
+    };
+};
+declare const menuTheme: {
+    readonly styleOverrides: {};
+};
+
+type MenuPopperProps = {
+    options: MenuOption[];
+    placement?: React.ComponentProps<typeof Popper>["placement"];
+    openMenuProps: OpenMenuProps;
+    menuItemProps?: React.ComponentProps<typeof CustomMenuList>["menuItemProps"];
+    optionHeader?: React.ComponentProps<typeof CustomMenuList>["optionHeader"];
+};
+/**
+ * A Mui Menu component that is triggered by an icon button.
+ */
+declare const MenuPopper: ({ placement, options, openMenuProps, menuItemProps, optionHeader, }: MenuPopperProps) => react_jsx_runtime.JSX.Element;
+type OpenMenuProps = {
+    anchorEl: HTMLButtonElement | HTMLDivElement | null;
+    anchorPosition: {
+        top: number;
+        left: number;
+    };
+    onTriggerClickHandler: OnTriggerClickHandler;
+    onItemClickClientArg?: OnItemClickClientArg;
+    closeHandler: (event?: Event | React.SyntheticEvent) => void;
+    multiple?: boolean;
+    ref: React.RefObject<MenuRef | null>;
+    menuRef: React.RefObject<HTMLUListElement | null>;
+    initSelected: MenuOption["id"][];
+    sorted?: boolean;
+};
+type UseMenuProps = {
+    onItemClickClientArg?: OnItemClickClientArg;
+    multiple?: boolean;
+    initSelected?: OpenMenuProps["initSelected"];
+    setSelected?: React.Dispatch<React.SetStateAction<MenuOption["id"][]>>;
+};
+declare function useMenu({ onItemClickClientArg, multiple, initSelected, setSelected, }: UseMenuProps): OpenMenuProps;
+
+type IconButtonProps = React.ComponentProps<typeof _mui_material_IconButton>;
+type Props = {
+    /** The Icon to render */
+    children: React.ReactNode;
+    /** The title of the tooltip */
+    title?: string;
+    /**
+     * The color theme of the entire component.
+     * @default 'secondary' (from theme)
+     */
+    color?: IconButtonProps['color'];
+    /**
+     * The size of the component.
+     * @default 'small' (from theme)
+     */
+    size?: IconButtonProps['size'];
+    selected?: boolean;
+    slotProps?: {
+        tooltip?: Omit<TooltipProps, "children">;
+    };
+} & Omit<IconButtonProps, "color" | "size">;
+/**
+ * A MuiIconButton wrapped in a MuiTooltip.
+ * Default props like `size` and `color` are handled by the theme.
+ */
+declare const IconButton: react.ForwardRefExoticComponent<Omit<Props, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+type TriggerBtnIconProps = {
+    icon?: React.ReactNode;
+    title?: string;
+    iconSize?: "small" | "medium" | "large";
+    onItemClickClientArg?: OnItemClickClientArg;
+    isSpinButton?: boolean;
+} & Omit<React.ComponentProps<typeof IconButton>, "title" | "size" | "children" | "onClick">;
+type IconMenuListSlots = {
+    /**
+     * The component used for the trigger button.
+     * Defaults to IconButton (or IconButtonSpin if isSpinButton is true).
+     */
+    trigger?: React.ElementType;
+};
+type IconMenuListSlotProps = {
+    /**
+     * Props passed to the trigger component.
+     */
+    trigger?: TriggerBtnIconProps;
+    /**
+     * Props passed to the MenuPopper component (logic props).
+     */
+    menu?: Partial<OpenMenuProps>;
+    /**
+     * Props passed to the menu items.
+     */
+    menuItem?: React.ComponentProps<typeof MenuPopper>["menuItemProps"];
+    /**
+     * Props/Content for the option header.
+     */
+    optionHeader?: React.ComponentProps<typeof MenuPopper>["optionHeader"];
+    /**
+     * Props passed to the Popper component.
+     */
+    popper?: Omit<React.ComponentProps<typeof MenuPopper>, 'openMenuProps' | 'options' | 'menuItemProps' | 'optionHeader'>;
+};
+type IconMenuListProps = {
+    options: MenuOption[];
+    slots?: IconMenuListSlots;
+    slotProps?: IconMenuListSlotProps;
+};
+/**
+ * A Mui Menu component that is triggered by an icon button.
+ */
+declare const IconMenuList: (props: IconMenuListProps) => react_jsx_runtime.JSX.Element;
+
+declare const StyledMenuItem: _emotion_styled.StyledComponent<_mui_material_MenuItem.MenuItemOwnProps & Omit<_mui_material_ButtonBase.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react__default.DetailedHTMLProps<react__default.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "dense" | "disableGutters" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme> & {
+    customPadding?: react__default.CSSProperties["padding"];
+    customFontSize?: react__default.CSSProperties["fontSize"];
+}, {}, {}>;
+declare const StyledItemIcon: _emotion_styled.StyledComponent<_mui_material_ListItemIcon.ListItemIconProps & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme> & {
+    isIconOnly?: boolean;
+}, {}, {}>;
+
+type DetailMenuOption = {
+    id: string;
+    label: string;
+    /** Side-panel description when this option is hovered / focused. */
+    detail?: string;
+    icon?: react__default.ReactNode;
+    /** Accent for detail title + selected checkmark. */
+    accentColor?: string;
+    /** Extra text included in search matching (label is always searched). */
+    keywords?: string;
+    /** Short pill rendered after the label (e.g. "Fast", "High"). Included in search. */
+    badge?: string;
+    /**
+     * Free-form content rendered at the bottom of this option's detail panel —
+     * a slot for host-owned controls (e.g. a per-model config selector).
+     * DetailMenu never interprets it.
+     */
+    detailSlot?: react__default.ReactNode;
+    /** Section label — an uppercase header renders above the first option of each distinct group. */
+    group?: string;
+    /** Hide behind the "N more" footer row until expanded (click). Ignored while searching. */
+    collapsed?: boolean;
+    /**
+     * Trailing per-option action (e.g. a settings gear), revealed on row
+     * hover/focus. Clicks inside it never trigger option selection.
+     */
+    actionSlot?: react__default.ReactNode;
+};
+type DetailMenuPaperSlotProps = {
+    sx?: SxProps<Theme>;
+} & Omit<PaperProps, 'sx' | 'children' | 'elevation'>;
+type DetailMenuProps = {
+    anchorEl: HTMLElement | null;
+    options: readonly DetailMenuOption[];
+    selectedId?: string | null;
+    onClose: () => void;
+    onSelect: (id: string) => void;
+    placement?: PopperPlacementType;
+    /** Show a filter field above the list. Default false. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Hover/focus preview panel beside the list. Default true. */
+    showDetailPanel?: boolean;
+    emptySearchText?: string;
+    /** Label for the collapsed-options footer row (only relevant when options use `collapsed`). */
+    collapsedRowLabel?: (hiddenCount: number) => string;
+    /**
+     * Free-form footer under the option list (e.g. "Add Models").
+     * Rendered inside the list Paper, below the scrollable list.
+     */
+    footerSlot?: react__default.ReactNode;
+    maxListHeight?: number | string;
+    listMinWidth?: number | string;
+    listMaxWidth?: number | string;
+    detailWidth?: number | string;
+    /**
+     * Props forwarded to the list Paper (`paper`) and hover detail Paper
+     * (`detailPaper`). `sx` merges after DetailMenu defaults.
+     */
+    slotProps?: {
+        paper?: DetailMenuPaperSlotProps;
+        detailPaper?: DetailMenuPaperSlotProps;
+    };
+};
+/**
+ * Anchored select menu with optional search and a hover detail panel —
+ * the graph/mode-menu pattern used in the composer dock.
+ */
+declare function DetailMenu({ anchorEl, options, selectedId, onClose, onSelect, placement, searchable, searchPlaceholder, showDetailPanel, emptySearchText, collapsedRowLabel, footerSlot, maxListHeight, listMinWidth, listMaxWidth, detailWidth, slotProps, }: DetailMenuProps): react_jsx_runtime.JSX.Element;
+
+type ModelBrand = 'openai' | 'anthropic' | 'google' | 'meta';
+type ModelMenuOption = {
+    id: string;
+    label: string;
+    /** Side-panel description when this option is hovered / focused. */
+    detail?: string;
+    /** Optional provider key. Pass `brandIconMap` or `option.icon` for a brand mark. */
+    brand?: ModelBrand | (string & {});
+    /** Extra search terms merged into the filter index. */
+    keywords?: string;
+    /** Short config pill rendered after the label (e.g. "Fast"); searchable. */
+    badge?: string;
+    /** Per-option icon override; wins over the brand icon. */
+    icon?: ReactNode;
+    /**
+     * Slot rendered at the bottom of this option's detail panel — host-owned
+     * config controls (e.g. a reasoning-effort selector for models that allow
+     * it). ModelMenu never interprets the content; per-model capability
+     * ("does this model allow effort?") stays with the host, which simply
+     * omits the slot for models without it.
+     */
+    detailSlot?: ReactNode;
+    /** Section label — an uppercase header renders above the first option of each distinct group (e.g. "Favorites"). */
+    group?: string;
+    /** Hide behind the "N more models" footer row until expanded (click). Ignored while searching. */
+    collapsed?: boolean;
+    /**
+     * Trailing per-option action (e.g. a settings gear), revealed on row
+     * hover/focus. Clicks inside it never select the model.
+     */
+    actionSlot?: ReactNode;
+};
+type ModelMenuProps = {
+    anchorEl: HTMLElement | null;
+    options: readonly ModelMenuOption[];
+    selectedId?: string | null;
+    onClose: () => void;
+    onSelect: (optionId: string) => void;
+    /** Default: on when there are 6+ options. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Popper placement. Default: top-start. */
+    placement?: DetailMenuProps['placement'];
+    /** Hover detail panel beside the list. Default true. */
+    showDetailPanel?: boolean;
+    /** Host-owned brand marks keyed by `option.brand`. The library does not ship provider logos. */
+    brandIconMap?: Record<string, ReactNode>;
+    slotProps?: DetailMenuProps['slotProps'];
+    maxListHeight?: number | string;
+    /** Footer under the list (e.g. "Add Models"). */
+    footerSlot?: ReactNode;
+};
+/**
+ * Anchored model picker — DetailMenu specialized with host-owned brand
+ * icons and search that turns on automatically for longer lists.
+ * The model catalog and provider logos stay owned by the consuming app.
+ */
+declare function ModelMenu({ anchorEl, options, selectedId, onClose, onSelect, searchable, searchPlaceholder, placement, showDetailPanel, brandIconMap, slotProps, maxListHeight, footerSlot, }: ModelMenuProps): react_jsx_runtime.JSX.Element;
+
+type ModelPickerProps = {
+    anchorEl: HTMLElement | null;
+    options: readonly ModelMenuOption[];
+    selectedId?: string | null;
+    onClose: () => void;
+    onSelect: (optionId: string) => void;
+    /**
+     * Host-owned config controls rendered above the Model row (e.g. a
+     * Reasoning Low/High/Max list). ModelPicker never interprets the content —
+     * omit it when the selected model has nothing to configure.
+     */
+    configSlot?: ReactNode;
+    /** Label for the bottom Model section. Default: "Model". */
+    modelSectionLabel?: string;
+    /** Forwarded to the ModelMenu flyout. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    brandIconMap?: ModelMenuProps['brandIconMap'];
+    slotProps?: ModelMenuProps['slotProps'];
+    maxListHeight?: ModelMenuProps['maxListHeight'];
+    /** Footer under the model list flyout (e.g. "Add Models"). */
+    footerSlot?: ReactNode;
+    /**
+     * Hover detail panel beside the model list (title + detail text + optional
+     * detailSlot). Default true.
+     */
+    showDetailPanel?: boolean;
+};
+/**
+ * Cursor-style model picker: configure first (configSlot), change the model
+ * at the bottom. The Model row opens ModelMenu as a side flyout.
+ */
+declare function ModelPicker({ anchorEl, options, selectedId, onClose, onSelect, configSlot, modelSectionLabel, searchable, searchPlaceholder, brandIconMap, slotProps, maxListHeight, footerSlot, showDetailPanel, }: ModelPickerProps): react_jsx_runtime.JSX.Element;
+
+export { DetailMenu, type DetailMenuOption, type DetailMenuProps, IconMenuList as IconMenu, CustomMenuList as Menu, MenuPopper, type ModelBrand, ModelMenu, type ModelMenuOption, type ModelMenuProps, ModelPicker, type ModelPickerProps, StyledItemIcon, StyledMenuItem, menuItemTheme, menuTheme, useMenu };