@moderneinc/design-system-components 6.0.0-next.02da4a

package/dist/FilledStatusIcons/FilledStatusIcons.d.ts

@@ -0,0 +1,41 @@
+import { type SvgIconProps } from '@mui/material/SvgIcon';
+/**
+ * Filled status icons — sourced from the published Figma library components
+ * Filled_Success / Filled_Queued / Filled_Info / Filled_Warning / Filled_Error /
+ * Filled_Neutral / Filled_Canceled.
+ *
+ * Designed at 16px; size via `fontSize` like any MUI `SvgIcon`. Each ships its
+ * intent's status color baked into the silhouette with a white inner glyph — the
+ * fill is fixed, so `color`/`htmlColor` are omitted from the props. There is no
+ * Filled_Active (the open-arc spinner cannot fill). Use below 18px; above that,
+ * prefer the Lucide outline glyph.
+ */
+export type ModFilledStatusIconProps = Omit<SvgIconProps, 'color' | 'htmlColor'>;
+export declare const ModFilledSuccess: {
+    (props: ModFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ModFilledQueued: {
+    (props: ModFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ModFilledInfo: {
+    (props: ModFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ModFilledWarning: {
+    (props: ModFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ModFilledError: {
+    (props: ModFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ModFilledNeutral: {
+    (props: ModFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ModFilledCanceled: {
+    (props: ModFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/FilterChip/FilterChip.d.ts

@@ -0,0 +1,40 @@
+import { type ChipProps } from '@mui/material/Chip';
+export interface ModFilterChipProps extends Omit<ChipProps, 'variant' | 'color' | 'label'> {
+    /**
+     * The filter label text
+     */
+    label: string;
+    /**
+     * Whether the filter has active selections
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the filter dropdown is expanded
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Value text shown when selected (e.g. "Filter 1, Filter 2")
+     */
+    selectedLabel?: string;
+    /**
+     * Number of active filter selections (shown as badge when selected)
+     * @default 0
+     */
+    count?: number;
+    /**
+     * Handler for clearing the filter (shows X icon when provided and selected)
+     */
+    onClear?: (e: React.MouseEvent) => void;
+}
+/**
+ * ModFilterChip - Filter chip for filtering data, based on MUI Chip.
+ *
+ * @example
+ * <ModFilterChip label="Status" selected selectedLabel="Active, Pending" count={2} onClear={handleClear} />
+ */
+export declare const ModFilterChip: {
+    ({ label, selected, expanded, selectedLabel, count, onClear, onClick, ...props }: ModFilterChipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Footer/Footer.d.ts

@@ -0,0 +1,111 @@
+import type { ReactNode } from 'react';
+export interface ModFooterProps {
+    /**
+     * Footer variant
+     * - "loading": Shows result count with loading indicator and "Load more" button
+     * - "pagination": Shows pagination controls with page range and navigation buttons
+     * @default "pagination"
+     */
+    variant?: 'loading' | 'pagination';
+    /**
+     * Whether to show the drop shadow on top of footer (for scrolling effect)
+     * @default false
+     */
+    showShadow?: boolean;
+    /**
+     * Whether to show the loading indicator (only for "loading" variant)
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Total number of results (for "loading" variant)
+     */
+    resultCount?: number;
+    /**
+     * Callback when "Load more" is clicked (for "loading" variant)
+     */
+    onLoadMore?: () => void;
+    /**
+     * Whether there are more results to load (for "loading" variant)
+     * @default true
+     */
+    hasMore?: boolean;
+    /**
+     * Custom pagination info text (for "pagination" variant)
+     * If not provided, will attempt to use DataGrid's pagination state
+     * @example "1-80 of 120"
+     */
+    paginationInfo?: string;
+    /**
+     * Callback when previous page button is clicked (for "pagination" variant)
+     */
+    onPreviousPage?: () => void;
+    /**
+     * Callback when next page button is clicked (for "pagination" variant)
+     */
+    onNextPage?: () => void;
+    /**
+     * Whether the previous page button is disabled (for "pagination" variant)
+     * If not provided, will attempt to use DataGrid's pagination state
+     */
+    hasPreviousPage?: boolean;
+    /**
+     * Whether the next page button is disabled (for "pagination" variant)
+     * If not provided, will attempt to use DataGrid's pagination state
+     */
+    hasNextPage?: boolean;
+    /**
+     * Whether to show the selected row count on the left side (pagination variant)
+     * @default true
+     */
+    showSelected?: boolean;
+    /**
+     * Custom content to render in the footer
+     */
+    children?: ReactNode;
+}
+/**
+ * ModFooter - Footer component for data grids
+ *
+ * Provides two variants:
+ * - "loading": Shows result count with loading indicator and "Load more" button for infinite scroll
+ * - "pagination": Shows pagination controls with page range and navigation buttons
+ *
+ * @example
+ * // Loading variant with load more
+ * <ModFooter
+ *   variant="loading"
+ *   loading={isLoading}
+ *   resultCount={40}
+ *   hasMore={true}
+ *   onLoadMore={() => loadMore()}
+ * />
+ *
+ * @example
+ * // Pagination variant
+ * <ModFooter
+ *   variant="pagination"
+ *   paginationInfo="1-80 of 120"
+ *   hasPreviousPage={false}
+ *   hasNextPage={true}
+ *   onPreviousPage={() => goToPrevious()}
+ *   onNextPage={() => goToNext()}
+ * />
+ *
+ * @example
+ * // Used with DataGrid (automatically reads pagination state)
+ * <DataGrid
+ *   rows={rows}
+ *   columns={columns}
+ *   slots={{ footer: ModFooter }}
+ *   slotProps={{
+ *     footer: {
+ *       variant: 'pagination',
+ *     },
+ *   }}
+ * />
+ */
+export declare const ModFooter: {
+    ({ variant, showShadow, loading, resultCount, onLoadMore, hasMore, paginationInfo, onPreviousPage, onNextPage, hasPreviousPage, hasNextPage, showSelected, children, }: ModFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/GeneralAvatar/GeneralAvatar.d.ts

@@ -0,0 +1,23 @@
+import { type AvatarProps } from '@mui/material/Avatar';
+import { type AvatarColorIndex } from '../utils/colorHelpers';
+type AvatarSize = 'small' | 'medium';
+export interface ModGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
+    /**
+     * The size of the avatar
+     * @default "medium"
+     */
+    size?: AvatarSize;
+    /**
+     * Explicit initials color index. When omitted, derived deterministically
+     * from `alt`. Image avatars ignore it and use the default styling.
+     */
+    colorIndex?: AvatarColorIndex;
+}
+/**
+ * ModGeneralAvatar - Avatar with image or colored initials display
+ */
+export declare const ModGeneralAvatar: {
+    ({ size, colorIndex, alt, src, children, ...props }: ModGeneralAvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,42 @@
+import type { ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ReactNode } from 'react';
+type IconButtonSize = 'small' | 'medium';
+type IconButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'nav';
+export interface ModIconButtonProps extends Omit<ButtonBaseProps, 'children' | 'size'> {
+    /**
+     * The size of the icon button
+     * @default "medium"
+     */
+    size?: IconButtonSize;
+    /**
+     * The visual variant of the icon button.
+     * - `primary`, `secondary`, `destructive`, `tertiary`: Uses ModButton's hierarchy styling
+     * - `nav`: White background with border, used in global navigation
+     * @default "tertiary"
+     */
+    variant?: IconButtonVariant;
+    /**
+     * Whether the button is in an active/selected state (e.g., popover is open).
+     * Only applies to the `nav` variant.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Show loading spinner instead of icon.
+     * Only applies to hierarchy variants (not `nav`).
+     * @default false
+     */
+    loading?: boolean;
+    children?: ReactNode;
+}
+/**
+ * ModIconButton - Icon-only button component
+ *
+ * For hierarchy variants (primary/secondary/destructive/tertiary), wraps ModButton with
+ * icon-only sizing. For the `nav` variant, uses a standalone MUI IconButton with custom styling.
+ */
+export declare const ModIconButton: {
+    ({ size, variant, active, loading, children, ...props }: ModIconButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/IconWrapper/IconWrapper.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type IconWrapperSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | 128 | 160 | 192;
+export interface ModIconWrapperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /**
+     * The size of the icon wrapper in pixels
+     * @default 20
+     */
+    size?: IconWrapperSize;
+    /**
+     * Icon element to render inside the wrapper
+     */
+    children?: ReactNode;
+}
+/**
+ * ModIconWrapper - Flex-centered container that sizes icons
+ */
+export declare const ModIconWrapper: {
+    ({ size, children, ...props }: ModIconWrapperProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/InfiniteScrollGrid/InfiniteScrollGrid.d.ts

@@ -0,0 +1,44 @@
+import type { GridSlots } from '@mui/x-data-grid-pro';
+import { type ModDataGridProps } from '../DataGrid/DataGrid';
+export interface ModInfiniteScrollGridProps extends Omit<ModDataGridProps, 'slots'> {
+    /**
+     * Callback when load more is triggered - either by scrolling or clicking button
+     */
+    onLoadMore: () => void;
+    /**
+     * Whether there are more rows to load
+     * @default true
+     */
+    hasNextPage?: boolean;
+    /**
+     * Scroll threshold (0-1) to trigger auto-load. 0.85 = 85% scrolled
+     * @default 0.85
+     */
+    loadMoreAtScrollPercent?: number;
+    /**
+     * Custom slots (merged with design system defaults)
+     */
+    slots?: Partial<GridSlots>;
+}
+/**
+ * ModInfiniteScrollGrid - DataGrid with infinite scroll and load-more functionality
+ *
+ * Features:
+ * - Auto-loads more data when scrolled to 85% (configurable)
+ * - Manual "Load more" button in footer
+ * - Shows row count and loading state
+ * - Inherits all responsive features from ModDataGrid
+ *
+ * @example
+ * <ModInfiniteScrollGrid
+ *   rows={rows}
+ *   columns={columns}
+ *   onLoadMore={loadMoreData}
+ *   hasNextPage={hasMore}
+ *   loading={isLoading}
+ * />
+ */
+export declare function ModInfiniteScrollGrid({ onLoadMore, hasNextPage, loadMoreAtScrollPercent, slots, slotProps: userSlotProps, sx: userSx, ...props }: ModInfiniteScrollGridProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModInfiniteScrollGrid {
+    var displayName: string;
+}

package/dist/InputField/InputField.d.ts

@@ -0,0 +1,65 @@
+import { type InputBaseProps } from '@mui/material/InputBase';
+import type { ReactNode } from 'react';
+type InputFieldSize = 'small' | 'medium';
+export type { InputFieldSize as ModInputFieldSize };
+export declare const StyledFormControl: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "color" | "margin" | "size" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "error" | "fullWidth" | "required" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    size?: InputFieldSize;
+}, {}, {}>;
+export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style" | "color" | "margin" | "size" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "filled" | "error" | "required" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    size?: InputFieldSize;
+    infoIcon?: boolean;
+}, {}, {}>;
+export declare const InfoIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledFormHelperText: import("@emotion/styled").StyledComponent<import("@mui/material").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style" | "margin" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "filled" | "error" | "required" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    size?: InputFieldSize;
+}, {}, {}>;
+export interface ModInputFieldProps extends Omit<InputBaseProps, 'size'> {
+    /**
+     * The size of the input field
+     * @default "medium"
+     */
+    size?: InputFieldSize;
+    /**
+     * Show error/destructive state with red styling
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Show required indicator (asterisk)
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Info icon to display next to the label
+     */
+    infoIcon?: ReactNode;
+    /**
+     * Helper text displayed below the input (normal state)
+     */
+    helperText?: string;
+    /**
+     * Error message displayed below the input (destructive state)
+     * Takes precedence over helperText when destructive is true
+     */
+    errorMessage?: string;
+    /**
+     * Icon to display at the start of the input
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon to display at the end of the input
+     * In destructive state, an error icon is automatically shown
+     */
+    endIcon?: ReactNode;
+}
+/**
+ * ModInputField - Form input field component using MUI FormControl composition
+ */
+export declare const ModInputField: {
+    ({ size, destructive, label, required, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }: ModInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/LinkCell/LinkCell.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+/**
+ * Props for the ModLinkCell component
+ */
+export interface ModLinkCellProps {
+    /**
+     * The content to display inside the component
+     */
+    children?: ReactNode;
+}
+/**
+ * ModLinkCell — scaffold placeholder, not yet implemented.
+ */
+export declare const ModLinkCell: {
+    ({ children, ...props }: ModLinkCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/ListItem/ListItem.d.ts

@@ -0,0 +1,71 @@
+import { type ListItemButtonProps } from '@mui/material/ListItemButton';
+import type { ReactNode } from 'react';
+declare module '@mui/material/ListItemButton' {
+    interface ListItemButtonPropsVariantOverrides {
+        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+    }
+}
+/**
+ * Props for the ModListItem component
+ */
+export interface ModListItemProps extends Omit<ListItemButtonProps, 'children' | 'size' | 'color'> {
+    /**
+     * The size variant of the list item
+     * @default "medium"
+     */
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+    /**
+     * Primary text content (required)
+     */
+    primaryText: ReactNode;
+    /**
+     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge/xxxlarge)
+     */
+    secondaryText?: ReactNode;
+    /**
+     * Badge content for count display (optional, for xxlarge/xxxlarge link variant)
+     */
+    badge?: ReactNode;
+    /**
+     * Icon or logo element (optional, scales based on size)
+     */
+    icon?: ReactNode;
+    /**
+     * The component used for the root node (for polymorphic behavior)
+     * @default 'button'
+     */
+    component?: React.ElementType;
+    /**
+     * Whether this is a link variant (applies link styling)
+     * @default false
+     */
+    isLink?: boolean;
+    /**
+     * Trailing element (optional, e.g., chevron icon for navigation)
+     * Renders at the end of the list item, typically used for navigation indicators.
+     */
+    trailingElement?: ReactNode;
+}
+/**
+ * ModListItem - Flexible list item component with multiple size variants and states
+ *
+ * A versatile list item component built on MUI's ListItemButton that supports six size variants
+ * (small to xxxlarge), interactive states (default, selected, disabled, link), and optional
+ * icons/logos, secondary text, and badges.
+ *
+ * Design Tokens Used:
+ * - semanticColors.typography.body (default text)
+ * - semanticColors.typography.body-secondary (secondary text)
+ * - semanticColors.typography.link.primary (link text)
+ * - semanticColors.icon.placeholder (default icon color)
+ * - semanticColors.icon.pressed (active icon color)
+ * - semanticColors.icon.disabled (disabled icon color)
+ * - semanticColors.buttons.secondary.hover-background (active background)
+ * - semanticColors.surface.input.background (default background)
+ * - semanticColors.surface.input.disabled-background (disabled background)
+ * - semanticColors.buttons.tertiary.disabled (disabled text color)
+ */
+export declare const ModListItem: {
+    ({ size, primaryText, secondaryText, badge, icon, isLink, trailingElement, component, ...props }: ModListItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/ListItemButton/ListItemButton.d.ts

@@ -0,0 +1,64 @@
+import type { ListItemButtonProps } from '@mui/material/ListItemButton';
+type ListItemButtonVariant = 'card' | 'nav';
+/**
+ * Props for the ModListItemButton component
+ */
+export interface ModListItemButtonProps extends ListItemButtonProps {
+    /**
+     * Whether the list item is selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the list item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Visual treatment.
+     * - `card` (default): bordered card-style for settings/radio-list patterns.
+     *   Expects ListItemIcon + ListItemText children for full styling support.
+     * - `nav`: borderless sidebar nav style with subtle hover/selected
+     *   highlights. Renders children inline; works with plain text.
+     * @default 'card'
+     */
+    variant?: ListItemButtonVariant;
+}
+/**
+ * ModListItemButton - Selectable list item with icon and text
+ *
+ * A selectable list item component that displays an optional icon with primary
+ * and secondary text. Supports active (selected), deselected, focus, and disabled states.
+ *
+ * Uses MUI's ListItemButton as base for proper accessibility and interaction.
+ * Compose with ListItemIcon and ListItemText for proper structure.
+ *
+ * @example
+ * ```tsx
+ * <ModListItemButton selected>
+ *   <ListItemIcon>
+ *     <PanelLeft size={36} />
+ *   </ListItemIcon>
+ *   <ListItemText
+ *     primary="Always pin recipe list to the LEFT"
+ *     secondary="This will display the recipe topology in a small box to the left of the recipe list"
+ *   />
+ * </ModListItemButton>
+ * ```
+ *
+ * Design Tokens Used (hex values omitted — they are generated from Figma and drift):
+ * - semanticColors.buttons.primary.default - Active border
+ * - semanticColors.border.primary - Default/disabled border
+ * - semanticColors.icons.default - Active icon color
+ * - semanticColors.icons.disabled - Deselected/disabled icon fill (not a text color)
+ * - semanticColors.buttons.tertiary.disabled - Deselected text color
+ * - semanticColors.typography.bodySecondary - Active secondary text
+ * - semanticColors.typography.button.disabled - Disabled text (button-scoped)
+ * - typography.body - Active primary text
+ * - semanticColors.surface.sunken - Disabled background
+ */
+export declare const ModListItemButton: {
+    ({ children, selected, disabled, variant, ...props }: ModListItemButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/LoadingSpinner/LoadingSpinner.d.ts

@@ -0,0 +1,28 @@
+export interface ModLoadingSpinnerProps {
+    /**
+     * Size of the spinner in pixels
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Color of the spinner
+     * @default semanticColors.buttons.primary.default
+     */
+    color?: string;
+}
+/**
+ * ModLoadingSpinner - Animated loading spinner component
+ *
+ * A circular loading spinner with a partial arc that rotates continuously.
+ * Based on the Figma design system button loading icon.
+ *
+ * @example
+ * <ModLoadingSpinner />
+ *
+ * @example
+ * <ModLoadingSpinner size={32} color="#ff0000" />
+ */
+export declare const ModLoadingSpinner: {
+    ({ size, color, }: ModLoadingSpinnerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Menu/Menu.d.ts

@@ -0,0 +1,30 @@
+import { type MenuProps } from '@mui/material/Menu';
+export interface ModMenuProps extends MenuProps {
+    /**
+     * Menu content (typically ModMenuItem components)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ModMenu - Menu component based on MUI Menu
+ *
+ * @example
+ * ```tsx
+ * const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+ * const open = Boolean(anchorEl);
+ *
+ * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
+ * <ModMenu
+ *   open={open}
+ *   anchorEl={anchorEl}
+ *   onClose={() => setAnchorEl(null)}
+ * >
+ *   <ModMenuItem icon={<Icon />} shortcut="⌘+P">View profile</ModMenuItem>
+ *   <ModMenuItem>Settings</ModMenuItem>
+ * </ModMenu>
+ * ```
+ */
+export declare const ModMenu: {
+    ({ children, ...props }: ModMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/MenuItem/MenuItem.d.ts

@@ -0,0 +1,69 @@
+import MenuItem from '@mui/material/MenuItem';
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+type ModMenuItemOwnProps = {
+    /**
+     * Optional icon to display on the left side
+     * Note: Cannot be directly mapped from Figma (ReactNode)
+     */
+    icon?: ReactNode;
+    /**
+     * Optional keyboard shortcut to display on the right side
+     * @example "⌘+P" or "Ctrl+K"
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     */
+    shortcut?: string;
+    /**
+     * Optional secondary text to display next to the primary label
+     * @example "@username" or supporting text
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     */
+    secondaryText?: string;
+    /**
+     * URL to navigate to. When provided, the menu item renders as an anchor
+     * element (via MUI ButtonBase) so users can middle-click or right-click
+     * to open in a new tab. For client-side routing, also pass
+     * `component={NextLink}` (or your router's link component).
+     */
+    href?: string;
+    /**
+     * Menu item content (text label)
+     */
+    children?: ReactNode;
+};
+export type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
+    component?: C;
+};
+/**
+ * ModMenuItem - Menu item component based on MUI MenuItem
+ *
+ * @example
+ * ```tsx
+ * // With icon and shortcut
+ * <ModMenuItem icon={<UserIcon />} shortcut="⌘+P">
+ *   View profile
+ * </ModMenuItem>
+ *
+ * // With secondary text (user list pattern from Figma node 4305:41844)
+ * <ModMenuItem secondaryText="@phoenix">Phoenix Baker</ModMenuItem>
+ * <ModMenuItem secondaryText="@olivia">Olivia Rhye</ModMenuItem>
+ *
+ * // Disabled state
+ * <ModMenuItem disabled>Disabled item</ModMenuItem>
+ *
+ * // As an anchor — middle-click/right-click open in a new tab
+ * <ModMenuItem href="/api-explorer">API explorer</ModMenuItem>
+ *
+ * // External link
+ * <ModMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
+ *   Documentation
+ * </ModMenuItem>
+ *
+ * // Client-side routing (Next.js)
+ * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
+ * ```
+ */
+export declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, ...rest }: ModMenuItemProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModMenuItem {
+    var displayName: string;
+}
+export {};