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

package/dist/ModActionsCell/ModActionsCell.d.ts

@@ -0,0 +1,9 @@
+import type { GridRenderCellParams } from '@mui/x-data-grid';
+import type { ReactNode } from 'react';
+export interface ModActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
+    api?: GridRenderCellParams['api'];
+    children: ReactNode;
+    position?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+    suppressChildrenValidation?: boolean;
+}
+export declare function ModActionsCell(props: ModActionsCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ModAvatarCell/ModAvatarCell.d.ts

@@ -0,0 +1,24 @@
+type ModAvatarCellBase = {
+    disabled?: boolean;
+};
+type ModAvatarCellEmpty = ModAvatarCellBase & {
+    empty: true;
+    name?: never;
+    src?: never;
+    label?: never;
+};
+type ModAvatarCellContent = ModAvatarCellBase & {
+    empty?: false;
+    name?: string;
+    src?: string;
+    label?: string;
+};
+export type ModAvatarCellProps = ModAvatarCellEmpty | ModAvatarCellContent;
+/**
+ * ModAvatarCell — DataGrid cell displaying a user avatar with optional label.
+ */
+export declare const ModAvatarCell: {
+    ({ name, src, label, disabled, empty, }: ModAvatarCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ModIconCell/ModIconCell.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+export interface ModIconCellProps {
+    icon?: ReactNode;
+    ariaLabel?: string;
+    disabled?: boolean;
+}
+/**
+ * ModIconCell — Icon cell for DataGrid. Renders an icon centered in the cell.
+ */
+export declare const ModIconCell: {
+    ({ icon, ariaLabel, disabled }: ModIconCellProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/ModLogoCell/ModLogoCell.d.ts

@@ -0,0 +1,23 @@
+type ModLogoCellNoSrc = {
+    src?: undefined;
+    alt?: string;
+    disabled?: boolean;
+};
+type ModLogoCellWithSrc = {
+    src: string;
+    alt: string;
+    disabled?: boolean;
+};
+export type ModLogoCellProps = ModLogoCellNoSrc | ModLogoCellWithSrc;
+/**
+ * ModLogoCell — DataGrid cell displaying a raster or SVG logo image.
+ *
+ * Kept separate from ModIconCell to match the design system Icon/Logo component split:
+ * - ModIconCell: MUI SvgIcon components
+ * - ModLogoCell: raster or SVG image URLs (img tag)
+ */
+export declare const ModLogoCell: {
+    ({ src, alt, disabled }: ModLogoCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ModProgressCell/ModProgressCell.d.ts

@@ -0,0 +1,20 @@
+type ModProgressCellBase = {
+    disabled?: boolean;
+};
+type ModProgressCellEmpty = ModProgressCellBase & {
+    empty: true;
+    value?: never;
+};
+type ModProgressCellContent = ModProgressCellBase & {
+    empty?: false;
+    value?: number;
+};
+export type ModProgressCellProps = ModProgressCellEmpty | ModProgressCellContent;
+/**
+ * ModProgressCell — DataGrid cell displaying a linear progress indicator.
+ */
+export declare const ModProgressCell: {
+    ({ value, disabled, empty, }: ModProgressCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ModStatusCell/ModStatusCell.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export type ModStatusCellVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+type ModStatusCellBase = {
+    disabled?: boolean;
+};
+type ModStatusCellEmpty = ModStatusCellBase & {
+    empty: true;
+    label?: never;
+    icon?: never;
+    variant?: never;
+    details?: never;
+};
+type ModStatusCellContent = ModStatusCellBase & {
+    empty?: false;
+    label: string;
+    icon?: ReactNode;
+    variant?: ModStatusCellVariant;
+    /** Error details shown in a hover tooltip. Clipboard actions should be handled by the consuming app. */
+    details?: string;
+};
+export type ModStatusCellProps = ModStatusCellEmpty | ModStatusCellContent;
+/**
+ * ModStatusCell — DataGrid cell displaying an icon + label chip with optional error tooltip.
+ */
+export declare const ModStatusCell: {
+    ({ icon, label, details, disabled, variant, empty, }: ModStatusCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Modal/Modal.d.ts

@@ -0,0 +1,106 @@
+import { type DialogProps } from '@mui/material/Dialog';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { ComponentType, ReactNode } from 'react';
+export interface ModModalProps extends Omit<DialogProps, 'children'> {
+    /**
+     * Dialog content
+     */
+    children?: ReactNode;
+}
+/**
+ * ModModal - Main modal dialog container based on MUI Dialog
+ *
+ * This is a composition component. Use with ModModalHeader, ModModalContent, and ModModalFooter:
+ *
+ * @example
+ * <ModModal open={open} onClose={handleClose}>
+ *   <ModModalHeader
+ *     title="Title"
+ *     subtitle="Subtitle"
+ *     onClose={handleClose}
+ *   />
+ *   <ModModalContent>
+ *     Content goes here
+ *   </ModModalContent>
+ *   <ModModalFooter>
+ *     <ModButton onClick={handleClose}>Action</ModButton>
+ *   </ModModalFooter>
+ * </ModModal>
+ */
+export declare const ModModal: {
+    ({ children, ...props }: ModModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ModModalHeaderProps {
+    /**
+     * Main title text
+     */
+    title?: string;
+    /**
+     * Optional subtitle text or element
+     */
+    subtitle?: ReactNode;
+    /**
+     * URL to link the title to. When provided, title renders as a link.
+     */
+    href?: string;
+    /**
+     * Custom Link component to use for the title link.
+     * Required when href is provided to support framework-specific routing (e.g., Next.js Link).
+     */
+    LinkComponent?: ComponentType<{
+        href: string;
+        children: ReactNode;
+        sx?: SxProps<Theme>;
+    }>;
+    /**
+     * Close button handler
+     */
+    onClose?: () => void;
+    /**
+     * Hide the close button
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /**
+     * Additional content to render below title/subtitle (e.g., tabs)
+     */
+    children?: ReactNode;
+}
+/**
+ * ModModalHeader - Header section with title, optional subtitle, and close button
+ */
+export declare const ModModalHeader: {
+    ({ title, subtitle, href, LinkComponent, onClose, hideCloseButton, children, }: ModModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ModModalContentProps {
+    /**
+     * Content to display in the modal body
+     */
+    children?: ReactNode;
+}
+/**
+ * ModModalContent - Main content area of the modal
+ */
+export declare const ModModalContent: {
+    ({ children }: ModModalContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export interface ModModalFooterProps {
+    /**
+     * Optional leading icon or content (e.g., settings icon)
+     */
+    leadingContent?: ReactNode;
+    /**
+     * Action buttons (typically ModButton components)
+     */
+    children?: ReactNode;
+}
+/**
+ * ModModalFooter - Footer section with optional leading content and action buttons
+ */
+export declare const ModModalFooter: {
+    ({ leadingContent, children }: ModModalFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/NavIconButton/NavIconButton.d.ts

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

package/dist/NavigationAvatar/NavigationAvatar.d.ts

@@ -0,0 +1,13 @@
+import { type ModGeneralAvatarProps } from '../GeneralAvatar/GeneralAvatar';
+export interface ModNavigationAvatarProps extends Omit<ModGeneralAvatarProps, 'size'> {
+}
+/**
+ * ModNavigationAvatar - Compact avatar for navigation contexts
+ *
+ * Wraps ModGeneralAvatar (size="medium") in a 40px container,
+ * providing an interactive area for navigation UI.
+ */
+export declare const ModNavigationAvatar: {
+    ({ children, ...props }: ModNavigationAvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/NavigationItem/NavigationItem.d.ts

@@ -0,0 +1,55 @@
+import ButtonBase, { type ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import type { ModTagOwnProps } from '../Tag/Tag';
+type ModNavigationItemOwnProps = {
+    /**
+     * Icon element to display
+     */
+    icon?: ReactNode;
+    /**
+     * Text label below the icon
+     */
+    label?: string;
+    /**
+     * Whether the item is selected/active
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Optional tag badge content (e.g., "Beta")
+     */
+    tag?: string;
+    /**
+     * Hover tooltip shown only when the surrounding ModSideNav is collapsed
+     * (and the label is therefore hidden).
+     */
+    tooltip?: ReactNode;
+    /**
+     * Slot props for internal sub-components.
+     */
+    slotProps?: {
+        /**
+         * Props forwarded to the ModTag badge rendered when `tag` is set.
+         * Override `intent`, `variant`, or `size` to change appearance — e.g.
+         * `{ variant: 'outlined', intent: 'default' }` for a calmer grey badge.
+         */
+        badge?: ModTagOwnProps & {
+            sx?: Record<string, unknown>;
+        };
+    };
+    /**
+     * Additional content
+     */
+    children?: ReactNode;
+};
+export type ModNavigationItemProps<C extends ElementType = typeof ButtonBase> = ModNavigationItemOwnProps & Omit<ButtonBaseProps, keyof ModNavigationItemOwnProps | 'component'> & Omit<ComponentPropsWithoutRef<C>, keyof ModNavigationItemOwnProps | keyof ButtonBaseProps> & {
+    component?: C;
+};
+/**
+ * ModNavigationItem - Vertical navigation item with icon, label, and optional tag
+ */
+export declare function ModNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, tooltip, slotProps, children, ...props }: ModNavigationItemProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModNavigationItem {
+    var displayName: string;
+}
+export {};

package/dist/PageContent/PageContent.d.ts

@@ -0,0 +1,150 @@
+import type { BoxProps } from '@mui/material/Box';
+import type { Breakpoint } from '@mui/material/styles';
+import type { ElementType, ReactNode } from 'react';
+/**
+ * Breadcrumb item configuration
+ */
+export interface BreadcrumbItem {
+    /** Link label */
+    label: ReactNode;
+    /** Link href (omit for current/last item) */
+    href?: string;
+}
+/**
+ * Breadcrumb configuration with link component and items
+ */
+export interface BreadcrumbConfig {
+    /** Custom link component for client-side navigation (e.g., Next.js Link) */
+    linkComponent?: ElementType;
+    /** Breadcrumb items */
+    items: BreadcrumbItem[];
+}
+export interface ModPageContentProps extends BoxProps {
+    /**
+     * Main heading displayed on the page
+     */
+    pageTitle: ReactNode | string;
+    /**
+     * Optional subtitle displayed below the page title
+     */
+    subtitle?: ReactNode | string;
+    /**
+     * Optional breadcrumbs navigation displayed above the page title.
+     * Last item is automatically marked as current.
+     *
+     * @example
+     * ```tsx
+     * breadcrumbs={{
+     *   linkComponent: NextLink,
+     *   items: [
+     *     { label: 'Settings', href: '/settings' },
+     *     { label: 'Team', href: '/team' },
+     *     { label: 'Team Details' },
+     *   ]
+     * }}
+     * ```
+     */
+    breadcrumbs?: BreadcrumbConfig;
+    /**
+     * Action button displayed in the top-right corner
+     */
+    action?: ReactNode;
+    /**
+     * Make header sticky on scroll
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * Maximum width constraint for content
+     * @default false
+     */
+    contentMaxWidth?: Breakpoint | false;
+    /**
+     * Center content when using contentMaxWidth
+     * @default true
+     */
+    centerContent?: boolean;
+    /**
+     * Disable gutters/padding
+     * @default false
+     */
+    disableGutters?: boolean;
+    /**
+     * Page layout mode.
+     * - `default`: standard centered/max-width-constrained content with
+     *   gutters. Best for content-driven pages (settings, forms, lists).
+     * - `fullBleed`: removes max-width and horizontal/bottom padding, lets
+     *   the content area flex-fill the viewport. Best for full-height
+     *   layouts (sidebar + panel canvases, builders, explorers). Title
+     *   and breadcrumbs still render — they sit at the leading edge.
+     * @default 'default'
+     */
+    layout?: 'default' | 'fullBleed';
+    /**
+     * Loading state - shows spinner while content loads
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Enable back to top button when scrolling
+     * @default true
+     */
+    showBackToTop?: boolean;
+    /**
+     * Content to display in the main area
+     */
+    children: ReactNode;
+}
+/**
+ * ModPageContent - Page content surface from the Moderne Design System
+ *
+ * Represents the main white card/surface that contains page content:
+ * - Page title with optional subtitle and action button
+ * - Content area where tabs and page content should be rendered
+ *
+ * ## Design Tokens
+ * - Background: `semanticColors.surface.canvasContent` — the page content
+ *   canvas (#fbfaf6 light / #1b1b21 dark), not a raised card surface
+
+ * - Border: `semanticColors.border.primary` (#D1D5DB)
+ * - Border radius: `borderRadius.input` (8px)
+ * - Padding: `spacing.spacing_2_1_2` (20px) horizontal, `spacing.spacing_2` (16px) vertical
+ * - Gap: `spacing.spacing_1` (8px)
+ * - Title typography: `typography.fontSize.h3` (21px), `typography.fontWeight.medium`
+ *
+ * @example
+ * ```tsx
+ * <ModPageContent
+ *   pageTitle="Users"
+ *   action={<IconButton>...</IconButton>}
+ * >
+ *   <ModDataGrid ... />
+ * </ModPageContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With subtitle
+ * <ModPageContent
+ *   pageTitle="Settings"
+ *   subtitle="Manage your account preferences"
+ * >
+ *   <SettingsContent />
+ * </ModPageContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With sticky header
+ * <ModPageContent
+ *   pageTitle="Long Content"
+ *   sticky
+ * >
+ *   <VeryLongContent />
+ * </ModPageContent>
+ * ```
+ */
+export declare function ModPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth: contentMaxWidthProp, centerContent, disableGutters: disableGuttersProp, isLoading, showBackToTop, layout, children, sx, ...boxProps }: ModPageContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModPageContent {
+    var displayName: string;
+}

package/dist/PaginatedGrid/PaginatedGrid.d.ts

@@ -0,0 +1,32 @@
+import type { GridSlots } from '@mui/x-data-grid-pro';
+import { type ModDataGridProps } from '../DataGrid/DataGrid';
+export interface ModPaginatedGridProps extends Omit<ModDataGridProps, 'slots'> {
+    /**
+     * Custom slots (merged with design system defaults)
+     */
+    slots?: Partial<GridSlots>;
+}
+/**
+ * ModPaginatedGrid - DataGrid with standard pagination controls
+ *
+ * Features:
+ * - Standard MUI pagination with page numbers
+ * - Shows "1-10 of 100" format in footer
+ * - Previous/Next navigation buttons
+ * - Auto-calculates page size to fit viewport (autoPageSize)
+ * - No vertical scrollbar within pages - use pagination to navigate
+ * - Inherits all responsive features from ModDataGrid
+ *
+ * @example
+ * <ModPaginatedGrid
+ *   rows={rows}
+ *   columns={columns}
+ *   paginationModel={{ page: 0, pageSize: 10 }}
+ *   onPaginationModelChange={handlePaginationChange}
+ *   rowCount={100}
+ * />
+ */
+export declare function ModPaginatedGrid({ slots, pageSizeOptions, slotProps: userSlotProps, ...props }: ModPaginatedGridProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModPaginatedGrid {
+    var displayName: string;
+}

package/dist/ProgressSpinner/ProgressSpinner.d.ts

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

package/dist/Progressbar/Progressbar.d.ts

@@ -0,0 +1,35 @@
+import { type LinearProgressProps } from '@mui/material/LinearProgress';
+export interface ModProgressbarProps extends Omit<LinearProgressProps, 'variant'> {
+    /**
+     * The value of the progress indicator for the determinate variant.
+     * Value between 0 and 100.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Position of the label showing the progress percentage
+     * @default "none"
+     */
+    labelPosition?: 'none' | 'right' | 'top' | 'bottom';
+    /**
+     * The variant of the progress indicator
+     * @default "default"
+     */
+    variant?: 'default' | 'cancelled';
+    /**
+     * Custom label text to display instead of the percentage
+     */
+    labelText?: string;
+}
+/**
+ * ModProgressbar - Linear progress indicator based on MUI LinearProgress
+ *
+ * Design Decisions (from Issue #75):
+ * - MUI Base Component: LinearProgress (provides accessibility, animations, progress tracking)
+ * - Label Positioning: Single labelPosition prop with values 'none', 'right', 'top', 'bottom'
+ * - Cancelled State: Separate variant prop (variant='cancelled') alongside value prop
+ */
+export declare const ModProgressbar: {
+    ({ value, labelPosition, variant, labelText, ...props }: ModProgressbarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/QuickFilter/QuickFilter.d.ts

@@ -0,0 +1,42 @@
+export interface ModQuickFilterProps {
+    /**
+     * Placeholder text for the search input
+     * @default "Search..."
+     */
+    placeholder?: string;
+    /**
+     * Callback fired when a key is pressed
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    /**
+     * If true, the input will be focused on mount
+     * @default false
+     */
+    autoFocus?: boolean;
+}
+/**
+ * ModQuickFilter - Quick search/filter input component for data grids
+ *
+ * Uses MUI X DataGrid's QuickFilterControl with Moderne design system styling.
+ * Styled to match the Figma design with search icon, clear button, and proper spacing.
+ *
+ * **Note:** This component must be used within a DataGrid context (inside a DataGrid component's toolbar).
+ *
+ * @example
+ * // Basic usage in DataGrid toolbar
+ * <DataGrid
+ *   rows={rows}
+ *   columns={columns}
+ *   slots={{
+ *     toolbar: () => (
+ *       <ModToolbar>
+ *         <ModQuickFilter placeholder="Search users..." />
+ *       </ModToolbar>
+ *     ),
+ *   }}
+ * />
+ */
+export declare const ModQuickFilter: {
+    ({ placeholder, onKeyDown, autoFocus, }: ModQuickFilterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Radio/Radio.d.ts

@@ -0,0 +1,59 @@
+import type { RadioProps } from '@mui/material/Radio';
+import type { ReactNode } from 'react';
+declare module '@mui/material/Radio' {
+    interface RadioPropsSizeOverrides {
+        small: true;
+        medium: true;
+    }
+}
+type RadioSize = 'small' | 'medium';
+export interface ModRadioProps extends Omit<RadioProps, 'size'> {
+    /**
+     * The size of the radio button
+     * @default "medium"
+     */
+    size?: RadioSize;
+    /**
+     * The label text displayed next to the radio button
+     */
+    label?: ReactNode;
+    /**
+     * The helper text displayed below the label
+     */
+    helperText?: ReactNode;
+}
+/**
+ * ModRadio - Radio button component based on MUI Radio
+ *
+ * @example
+ * // Basic radio button (just the icon)
+ * <ModRadio />
+ *
+ * @example
+ * // With label
+ * <ModRadio label="Remember me" />
+ *
+ * @example
+ * // With label and helper text
+ * <ModRadio label="Remember me" helperText="Save my login details for next time." />
+ *
+ * @example
+ * // Small size
+ * <ModRadio size="small" label="Remember me" />
+ *
+ * @example
+ * // Controlled
+ * <ModRadio checked={value === 'option1'} onChange={handleChange} value="option1" label="Option 1" />
+ *
+ * @example
+ * // Radio group
+ * <RadioGroup value={value} onChange={handleChange}>
+ *   <ModRadio value="option1" label="Option 1" helperText="First option" />
+ *   <ModRadio value="option2" label="Option 2" helperText="Second option" />
+ * </RadioGroup>
+ */
+export declare const ModRadio: {
+    ({ size, label, helperText, disabled, ...props }: ModRadioProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/RadioButtonWithText/RadioButtonWithText.d.ts

@@ -0,0 +1,4 @@
+/**
+ * ModRadioButtonWithText
+ */
+export declare const ModRadioButtonWithText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/RipplingDot/RipplingDot.d.ts

@@ -0,0 +1,12 @@
+import { type BoxProps } from '@mui/material';
+import type { FunctionComponent } from 'react';
+export interface ModRipplingDotProps extends BoxProps {
+}
+/**
+ * ModRipplingDot - Animated status dot with an expanding ripple ring.
+ *
+ * Indicates an in-progress, indeterminate state (RUNNING / SYNCING / PROCESSING).
+ * Color is inherited from `currentColor`; set it via the `color`/`sx` prop or a
+ * parent. Sized to the lowercase-letter height regardless of parent fontSize.
+ */
+export declare const ModRipplingDot: FunctionComponent<ModRipplingDotProps>;