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

package/dist/SearchChip/SearchChip.d.ts

@@ -0,0 +1,17 @@
+import { type InputBaseProps } from '@mui/material/InputBase';
+export interface ModSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
+    /**
+     * Handler for clearing the search value (shows X icon when provided and value is non-empty)
+     */
+    onClear?: () => void;
+}
+/**
+ * ModSearchChip - Pill-shaped search input for inline search functionality.
+ *
+ * @example
+ * <ModSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ */
+export declare const ModSearchChip: {
+    ({ onClear, value, ...props }: ModSearchChipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Select/Select.d.ts

@@ -0,0 +1,24 @@
+import { type SelectProps as MuiSelectProps } from '@mui/material/Select';
+import { ModMenuItem } from '../MenuItem/MenuItem';
+export type ModSelectProps = MuiSelectProps;
+/**
+ * ModSelect - Select component with design system styling
+ *
+ * A styled version of MUI's Select that uses design system tokens, Lucide ChevronDown icon,
+ * and ModMenu/ModMenuItem for the dropdown list.
+ *
+ * @example
+ * ```tsx
+ * import { ModSelect, ModSelectOption } from '@moderneinc/design-system-components'
+ *
+ * <ModSelect value={value} onChange={handleChange}>
+ *   <ModSelectOption value="option1">Option 1</ModSelectOption>
+ *   <ModSelectOption value="option2">Option 2</ModSelectOption>
+ * </ModSelect>
+ * ```
+ */
+export declare const ModSelect: {
+    (props: ModSelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ModMenuItem as ModSelectOption };

package/dist/SelectField/SelectField.d.ts

@@ -0,0 +1,64 @@
+import type { SelectChangeEvent, SelectProps } from '@mui/material/Select';
+import type { ReactNode } from 'react';
+import { type ModInputFieldSize } from '../InputField/InputField';
+import { ModSelectOption } from '../Select/Select';
+export interface ModSelectFieldOption {
+    value: string | number;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface ModSelectFieldProps extends Omit<SelectProps, 'size' | 'variant' | 'error' | 'children'> {
+    /**
+     * Form-control size.
+     * @default 'medium'
+     */
+    size?: ModInputFieldSize;
+    /**
+     * Show error/destructive state with red label + helper text styling.
+     * @default false
+     */
+    destructive?: boolean;
+    /** Label text rendered above the select. */
+    label?: string;
+    /** Show required indicator (asterisk) next to the label. @default false */
+    required?: boolean;
+    /** Optional info icon rendered next to the label. */
+    infoIcon?: ReactNode;
+    /** Helper text rendered below the select (normal state). */
+    helperText?: string;
+    /**
+     * Error message rendered below the select when `destructive` is true.
+     * Takes precedence over helperText when destructive.
+     */
+    errorMessage?: string;
+    /**
+     * Convenience option list. Each entry becomes a ModSelectOption.
+     * Use `children` instead for custom option content.
+     */
+    options?: ModSelectFieldOption[];
+    /** Custom option content. Overrides `options` if both are provided. */
+    children?: ReactNode;
+}
+/**
+ * ModSelectField — composite of ModInputField's form chrome (label,
+ * helper text, error state) wrapped around ModSelect. Mirrors the
+ * MUI `<TextField select>` ergonomics with design system tokens, so
+ * consumers don't have to compose the two manually.
+ *
+ * @example
+ * <ModSelectField
+ *   label="Response format"
+ *   value={format}
+ *   onChange={e => setFormat(e.target.value)}
+ *   options={[
+ *     { value: 'json', label: 'JSON' },
+ *     { value: 'plain', label: 'Plain text' },
+ *   ]}
+ * />
+ */
+export declare const ModSelectField: {
+    ({ size, destructive, label, required, infoIcon, helperText, errorMessage, options, children, disabled, id, ...selectProps }: ModSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ModSelectOption };
+export type ModSelectFieldChangeEvent<T = unknown> = SelectChangeEvent<T>;

package/dist/SideNav/ModSideNavContext.d.ts

@@ -0,0 +1,5 @@
+export type ModSideNavContextValue = {
+    collapsed: boolean;
+};
+export declare const ModSideNavContext: import("react").Context<ModSideNavContextValue>;
+export declare const useModSideNav: () => ModSideNavContextValue;

package/dist/SideNav/SideNav.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type ModSideNavProps = {
+    /** Controlled collapsed state. */
+    collapsed: boolean;
+    /** Called with the next collapsed value when the edge-handle is activated. */
+    onCollapsedChange: (next: boolean) => void;
+    /** Fixed top slot (e.g. product logo). */
+    header?: ReactNode;
+    /** Fixed bottom slot (e.g. tenant branding). */
+    footer?: ReactNode;
+    /** Scrolling content slot — the nav items. */
+    children?: ReactNode;
+} & Pick<ComponentPropsWithoutRef<'nav'>, 'className' | 'id' | 'aria-label'>;
+/**
+ * ModSideNav
+ *
+ * Collapsible vertical navigation rail with fixed `header`/`footer` slots and a
+ * scrolling content area. Controlled via `collapsed` + `onCollapsedChange`;
+ * broadcasts collapsed state to descendant `ModNavigationItem`s through context.
+ *
+ * The scroll area's top and bottom edges fade into the fixed slots, each fade
+ * appearing only while there is content to scroll toward in that direction.
+ *
+ * A chevron handle on the rail's trailing edge (beside the tenant-logo row)
+ * toggles the controlled state. Consumers that want the rail to auto-collapse
+ * on viewport changes compute `collapsed` themselves (e.g. via `useMediaQuery`)
+ * and pass it in — see the `AutoCollapseOnResize` Storybook story for the
+ * pattern.
+ */
+export declare function ModSideNav({ collapsed, onCollapsedChange, header, footer, children, className, id, 'aria-label': ariaLabel, }: ModSideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModSideNav {
+    var displayName: string;
+}

package/dist/Skeleton/Skeleton.d.ts

@@ -0,0 +1,29 @@
+import type { SkeletonProps } from '@mui/material/Skeleton';
+/**
+ * Extended props for ModSkeleton component
+ */
+export interface ModSkeletonProps extends Omit<SkeletonProps, 'variant' | 'animation'> {
+    /**
+     * Color theme variant for the skeleton
+     * @default "light"
+     */
+    colorTheme?: 'light' | 'dark';
+    /**
+     * Animation position (direction)
+     * @default "start"
+     */
+    position?: 'start' | 'end';
+}
+/**
+ * ModSkeleton - Loading skeleton component based on MUI Skeleton
+ *
+ * Usage:
+ * ```tsx
+ * <ModSkeleton width={200} height={32} />
+ * <ModSkeleton colorTheme="dark" position="end" width={200} height={32} />
+ * ```
+ */
+export declare const ModSkeleton: {
+    ({ colorTheme, position, ...props }: ModSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/TabPanel/TabPanel.d.ts

@@ -0,0 +1,47 @@
+import { type BoxProps } from '@mui/material/Box';
+import type { ReactNode } from 'react';
+type TabPanelVariant = 'default' | 'flush';
+export interface ModTabPanelProps extends Omit<BoxProps, 'role'> {
+    /** This panel's identity — must match `currentValue` for the panel to render. */
+    value: string | number;
+    /**
+     * The currently selected tab value. When equal to `value`, this panel
+     * renders its children. Otherwise the panel is hidden (and removed from
+     * the accessibility tree via `hidden`).
+     */
+    currentValue: string | number;
+    /**
+     * Layout density.
+     * - `default`: 16px top padding — for standard content tabs.
+     * - `flush`: zero padding — for full-bleed sidebar/panel/canvas layouts
+     *   where content must sit flush against the tab bar's bottom border.
+     * @default 'default'
+     */
+    variant?: TabPanelVariant;
+    /** Panel content. */
+    children?: ReactNode;
+}
+/**
+ * ModTabPanel — completes the ModTabs + ModTab + ModTabPanel set.
+ *
+ * Lightweight ARIA-compliant tab panel that renders children when its
+ * `value` matches `currentValue`. No MUI Lab / TabContext dependency.
+ *
+ * @example
+ * const [tab, setTab] = useState('overview')
+ * return (
+ *   <>
+ *     <ModTabs value={tab} onChange={(_, v) => setTab(v)}>
+ *       <ModTab value="overview" label="Overview" />
+ *       <ModTab value="details" label="Details" />
+ *     </ModTabs>
+ *     <ModTabPanel value="overview" currentValue={tab}>...</ModTabPanel>
+ *     <ModTabPanel value="details" currentValue={tab} variant="flush">...</ModTabPanel>
+ *   </>
+ * )
+ */
+export declare const ModTabPanel: {
+    ({ value, currentValue, variant, children, ...boxProps }: ModTabPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Table/Table.d.ts

@@ -0,0 +1,64 @@
+import { type TableProps } from '@mui/material/Table';
+import type { ReactNode } from 'react';
+type TableSize = 'small' | 'medium';
+type TableVariant = 'bordered' | 'plain';
+type CellAlign = 'left' | 'center' | 'right';
+export interface ModTableColumn {
+    /** Unique key — looked up against each row to find the cell value. */
+    key: string;
+    /** Header label rendered in the thead. */
+    header: ReactNode;
+    /** Cell text alignment. @default 'left' */
+    align?: CellAlign;
+    /** Column width — any CSS length (e.g. '120px', '20%'). */
+    width?: string;
+}
+export interface ModTableProps extends Omit<TableProps, 'size'> {
+    /** Column definitions. Order in the array determines render order. */
+    columns: ModTableColumn[];
+    /**
+     * Row data. Each row is a record keyed by `column.key`. Cell values
+     * may be any ReactNode (strings, badges, icons, etc.).
+     */
+    rows: Array<Record<string, ReactNode>>;
+    /**
+     * Cell density.
+     * - 'small': tight padding for dense lists.
+     * - 'medium': comfortable padding for read-heavy tables.
+     * @default 'small'
+     */
+    size?: TableSize;
+    /**
+     * Container chrome.
+     * - 'bordered': container border + borderRadius.card.
+     * - 'plain': no container chrome — for embedding inside an existing surface.
+     * @default 'bordered'
+     */
+    variant?: TableVariant;
+    /** Optional accessible label for the table. */
+    ariaLabel?: string;
+}
+/**
+ * ModTable — lightweight read-only table for static data (schema rows,
+ * key/value summaries, response metadata). For interactive grids with
+ * sorting / filtering / pagination, use ModDataGrid instead.
+ *
+ * @example
+ * <ModTable
+ *   columns={[
+ *     { key: 'name', header: 'Property' },
+ *     { key: 'type', header: 'Type', align: 'center', width: '120px' },
+ *     { key: 'description', header: 'Description' },
+ *   ]}
+ *   rows={[
+ *     { name: 'id', type: 'string', description: 'Resource identifier' },
+ *     { name: 'count', type: 'number', description: 'Item count' },
+ *   ]}
+ *   size="small"
+ * />
+ */
+export declare const ModTable: {
+    ({ columns, rows, size, variant, ariaLabel, ...tableProps }: ModTableProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,28 @@
+import { type TabProps } from '@mui/material/Tab';
+import type { ReactNode } from 'react';
+/**
+ * ModTabs - Tabs container component based on MUI Tabs
+ */
+export declare const ModTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children" | "sx" | "className" | "aria-label" | "aria-labelledby" | "onChange" | "classes" | "action" | "value" | "variant" | "orientation" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "scrollButtons" | "selectionFollowsFocus" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export interface ModTabProps extends Omit<TabProps, 'label'> {
+    /**
+     * The label for the tab
+     */
+    label: ReactNode;
+    /**
+     * Optional count to display in a tag next to the label
+     * @default undefined
+     */
+    count?: number | string;
+    /**
+     * Tab value identifier
+     */
+    value: string | number;
+}
+/**
+ * ModTab - Individual tab button component based on MUI Tab
+ */
+export declare const ModTab: {
+    ({ label, count, ...props }: ModTabProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Tag/Tag.d.ts

@@ -0,0 +1,51 @@
+import Chip, { type ChipProps } from '@mui/material/Chip';
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
+declare module '@mui/material/Chip' {
+    interface ChipPropsColorOverrides {
+        violet: true;
+        beta: true;
+    }
+    interface ChipPropsSizeOverrides {
+        large: true;
+    }
+    interface ChipPropsVariantOverrides {
+        outlined: true;
+        filled: true;
+    }
+}
+type TagShape = 'square' | 'rounded';
+export type ModTagOwnProps = {
+    /**
+     * The size of the tag
+     * @default "small"
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant style of the tag
+     * @default "outlined"
+     */
+    variant?: 'outlined' | 'filled';
+    /**
+     * The intent/purpose of the tag
+     * @default "default"
+     */
+    intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
+    /**
+     * Corner treatment. `square` = borderRadius.xS, `rounded` = borderRadius.full.
+     * Deliberately defaults to `square` even though Figma's Shape default differs —
+     * this keeps existing consumers rendering unchanged. Don't "fix" it.
+     * @default "square"
+     */
+    shape?: TagShape;
+};
+export type ModTagProps<C extends ElementType = typeof Chip> = ModTagOwnProps & Omit<ChipProps, keyof ModTagOwnProps | 'component' | 'color'> & Omit<ComponentPropsWithoutRef<C>, keyof ModTagOwnProps | keyof ChipProps> & {
+    component?: C;
+};
+/**
+ * ModTag - Small label component based on MUI Chip
+ */
+export declare function ModTag<C extends ElementType = typeof Chip>({ size, variant, intent, shape, ...props }: ModTagProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModTag {
+    var displayName: string;
+}
+export {};

package/dist/Toast/Toast.d.ts

@@ -0,0 +1,66 @@
+import { type AlertProps } from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import type { ReactNode } from 'react';
+type Intent = 'neutral' | 'info' | 'success' | 'error' | 'warning';
+/**
+ * @deprecated The Figma design no longer has Filled/Outlined styles. Retained for API
+ * compatibility only; all toasts render the single tinted style.
+ */
+type ToastType = 'outlined' | 'filled';
+export interface ModToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
+    /**
+     * The intent/purpose of the toast
+     * @default "neutral"
+     */
+    intent?: Intent;
+    /**
+     * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored; all
+     * toasts render the single tinted style.
+     */
+    type?: ToastType;
+    /**
+     * The title/header text
+     */
+    title?: string;
+    /**
+     * The body/supporting text
+     */
+    message?: string;
+    /**
+     * Whether to show the close button
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * Custom action buttons (for default toast types)
+     * Pass action buttons as children of this prop
+     */
+    actions?: ReactNode;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+}
+/**
+ * ModToast - Notification/Toast component based on MUI Alert
+ */
+export declare const ModToast: {
+    ({ intent, type: _type, title, message, showClose, actions, onClose, ...props }: ModToastProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Helper component for creating toast action buttons with proper styling
+ */
+export declare const ModToastButton: {
+    ({ primary, intent, type: _type, children, ...props }: {
+        primary?: boolean;
+        intent?: Intent;
+        /**
+         * @deprecated The Figma design no longer has Filled/Outlined styles. Ignored.
+         */
+        type?: ToastType;
+        children: ReactNode;
+    } & Omit<React.ComponentProps<typeof Button>, "variant" | "type">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Toggle/Toggle.d.ts

@@ -0,0 +1,52 @@
+import { type SwitchProps } from '@mui/material/Switch';
+import type { ReactNode } from 'react';
+declare module '@mui/material/Switch' {
+    interface SwitchPropsSizeOverrides {
+        small: true;
+        medium: true;
+    }
+}
+type ToggleSize = 'small' | 'medium';
+export interface ModToggleProps extends Omit<SwitchProps, 'size'> {
+    /**
+     * The size of the toggle
+     * @default "medium"
+     */
+    size?: ToggleSize;
+    /**
+     * The label text displayed next to the toggle
+     */
+    label?: ReactNode;
+    /**
+     * The helper text displayed below the label
+     */
+    helperText?: ReactNode;
+}
+/**
+ * ModToggle - Binary on/off switch component based on MUI Switch
+ *
+ * @example
+ * // Basic toggle
+ * <ModToggle />
+ *
+ * @example
+ * // With label
+ * <ModToggle label="Remember me" />
+ *
+ * @example
+ * // With label and helper text
+ * <ModToggle label="Remember me" helperText="Save my login details for next time." />
+ *
+ * @example
+ * // Small size
+ * <ModToggle size="small" label="Remember me" />
+ *
+ * @example
+ * // Controlled
+ * <ModToggle checked={isChecked} onChange={handleChange} label="Remember me" />
+ */
+export declare const ModToggle: {
+    ({ size, label, helperText, disabled, ...props }: ModToggleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,34 @@
+import { type ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';
+type ToggleButtonSize = 'small' | 'medium';
+/**
+ * Visual style of the toggle. Set automatically by ModToggleButtonGroup.
+ * - `default`: buttons fill a bordered pill; selected is a tinted band.
+ * - `segmented`: buttons are raised pills on a sunken track; selected lifts to
+ *   the card surface in accent text (the Morpheus segmented control).
+ */
+export type ToggleButtonVariant = 'default' | 'segmented';
+export interface ModToggleButtonProps extends Omit<MuiToggleButtonProps, 'color' | 'size'> {
+    /**
+     * Size of the toggle button. Set automatically by ModToggleButtonGroup
+     * when used as a child; set explicitly only for standalone use.
+     * @default 'medium'
+     */
+    size?: ToggleButtonSize;
+    /**
+     * Visual style. Set automatically by ModToggleButtonGroup; set explicitly
+     * only for standalone use.
+     * @default 'default'
+     */
+    variant?: ToggleButtonVariant;
+}
+/**
+ * ModToggleButton — a single button in a segmented control. Use inside
+ * ModToggleButtonGroup; the group manages selection state and forwards
+ * size and variant to its children. Suitable for inline toolbar mode switches
+ * ("Table" / "Raw"). For page-level tabs, prefer ModButtonTab.
+ */
+export declare const ModToggleButton: {
+    ({ children, size, variant, ...props }: ModToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,33 @@
+import { type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
+import { type ToggleButtonVariant } from '../ToggleButton/ToggleButton';
+type ToggleButtonGroupSize = 'small' | 'medium';
+export interface ModToggleButtonGroupProps extends Omit<MuiToggleButtonGroupProps, 'orientation' | 'color' | 'size' | 'fullWidth'> {
+    /**
+     * Size of the buttons in the group. Forwarded to each ModToggleButton child.
+     * @default 'medium'
+     */
+    size?: ToggleButtonGroupSize;
+    /**
+     * Visual style, forwarded to each child. `segmented` renders raised pills on
+     * a sunken track with the selected pill lifted to the card surface in accent
+     * text (Morpheus). `default` is a bordered pill with a tinted selection.
+     * @default 'default'
+     */
+    variant?: ToggleButtonVariant;
+}
+/**
+ * ModToggleButtonGroup — segmented control wrapping MUI ToggleButtonGroup with
+ * design system tokens. Use for inline toolbar mode switches (e.g. "Table" / "Raw" in a
+ * panel header). For page-level tab navigation, prefer ModButtonTabGroup.
+ *
+ * @example
+ * <ModToggleButtonGroup value={mode} exclusive onChange={(_, v) => v && setMode(v)} variant="segmented" size="small">
+ *   <ModToggleButton value="table">Table</ModToggleButton>
+ *   <ModToggleButton value="raw">Raw</ModToggleButton>
+ * </ModToggleButtonGroup>
+ */
+export declare const ModToggleButtonGroup: {
+    ({ size, variant, children, ...props }: ModToggleButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ToggleButtonWithText/ToggleButtonWithText.d.ts

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

package/dist/Toolbar/Toolbar.d.ts

@@ -0,0 +1,51 @@
+import { type ToolbarProps } from '@mui/x-data-grid';
+import type { ReactNode } from 'react';
+export interface ModToolbarProps extends ToolbarProps {
+    /**
+     * Toolbar content (typically ModQuickFilter, ModButton, ModToggle, etc.)
+     */
+    children?: ReactNode;
+}
+/**
+ * ModToolbar - Styled toolbar component for data grid controls
+ *
+ * A composable toolbar component that provides consistent styling for data grid toolbars.
+ * Uses justify-space-between layout. Wrap left-side controls in a Box with gap, and right-side
+ * controls in another Box.
+ *
+ * @example
+ * // Basic toolbar with search
+ * <ModToolbar>
+ *   <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+ *     <ModQuickFilter placeholder="Search..." />
+ *   </Box>
+ * </ModToolbar>
+ *
+ * @example
+ * // Full toolbar with left controls and right actions
+ * <ModToolbar>
+ *   <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+ *     <ModQuickFilter placeholder="Search..." />
+ *     <ModButton variant="secondary" size="small">
+ *       <SlidersHorizontal size={20} />
+ *       Filters
+ *       <ModTag label="4" variant="filled" color="info" />
+ *     </ModButton>
+ *     <ModButton variant="secondary" size="small">
+ *       <Columns3 size={16} />
+ *       Columns
+ *     </ModButton>
+ *     <ModToggle size="small" label="Toggle option" checked={true} />
+ *   </Box>
+ *   <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', height: 40 }}>
+ *     <ModButton variant="secondary" size="small">
+ *       Actions
+ *       <ChevronDown size={16} />
+ *     </ModButton>
+ *   </Box>
+ * </ModToolbar>
+ */
+export declare const ModToolbar: {
+    ({ children, ...props }: ModToolbarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,46 @@
+import { type TooltipProps } from '@mui/material/Tooltip';
+import type { ReactNode } from 'react';
+/**
+ * Variant type for ModTooltip
+ */
+type TooltipVariant = 'light' | 'dark' | 'brand';
+/**
+ * Props for the ModTooltip component
+ */
+export interface ModTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
+    /**
+     * The visual style variant
+     * @default "light"
+     */
+    variant?: TooltipVariant;
+    /**
+     * The main tooltip content. Accepts a string or any ReactNode, so callers can
+     * compose richer content when the `description` variant isn't enough.
+     */
+    title: ReactNode;
+    /**
+     * Optional supporting description text. When provided, shows a larger tooltip
+     * with a heading + body hierarchy: title (13px semibold) above a muted
+     * description (12px medium).
+     * @default undefined
+     */
+    description?: string;
+}
+/**
+ * ModTooltip - Tooltip component following design system
+ *
+ * Provides contextual information when users hover over or focus on an element.
+ * Supports three visual variants (light, dark, brand) and optional supporting text.
+ *
+ * Design Tokens Used:
+ * - Light: surfaces.tooltip, typography.tooltip.default
+ * - Dark: surfaces.white, typography.body
+ * - Brand: surfaces.snackbarBrand, typography.linkWhite (both fixed across modes)
+ * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
+ * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
+ */
+export declare const ModTooltip: {
+    ({ variant, title, description, children, arrow, placement, ...props }: ModTooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};