@moderneinc/design-system-components 6.0.1-next.d0f7d0 → 6.1.0-alpha.034d53

package/dist/DataGrid/DataGrid.styles.d.ts

@@ -8,7 +8,7 @@ import type { SxProps, Theme } from '@mui/material/styles';
  * they carry this surface themselves.
  */
 export declare const panelSurfaceStyles: {
-    readonly backgroundColor: "var(--mod-surfaces-white)";
+    readonly backgroundColor: "var(--mod-color-surface-raised)";
 };
 export declare const getDataGridHeaderStyles: () => SxProps<Theme>;
 export declare const getDataGridRowStyles: () => SxProps<Theme>;

package/dist/DataGridFilterPanel/DataGridFilterPanel.d.ts

@@ -1,6 +1,5 @@
-import { type GridSlotsComponent, GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
+import { type GridSlotProps, type GridSlotsComponent, GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
 import type React from 'react';
-import { ModSelect } from '../Select/Select';
 /**
  * Icon components for DataGrid filter panel slots
  * These must be passed to the DataGrid's slots prop
@@ -17,18 +16,19 @@ export declare const ModDataGridFilterPanelRemoveAllIcon: {
     (): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export type ModDataGridSelectProps = GridSlotProps['baseSelect'];
 /**
- * ModSelect, typed for the DataGrid `baseSelect` slot.
+ * ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
  *
- * The grid's own `SelectProps` shares MUI's prop names and semantics, but types
- * `onChange` as a bare `ChangeEventHandler` and adds `aria-*`/`data-*` index
- * signatures — structurally incompatible, behaviourally identical. Asserted
- * once here rather than at every call site; #721 tracks replacing the assertion
- * with a real adapter. Intersected rather than replaced so direct consumers keep
- * `ModSelectProps` — casting to the slot type alone drops `variant`, `MenuProps`
- * and the `SelectChangeEvent` signature.
+ * Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
+ * can be diffed on upgrade.
+ *
+ * @example
+ * ```tsx
+ * <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
+ * ```
  */
-export declare const ModDataGridSelect: typeof ModSelect & GridSlotsComponent["baseSelect"];
+export declare const ModDataGridSelect: GridSlotsComponent['baseSelect'];
 /**
  * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
  *

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GridColumnsPanelProps, GridDensity as GridDensity$1, DataGridProProps, GridSlots } from '@mui/x-data-grid-pro';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentPropsWithoutRef, ComponentType, FunctionComponent } from 'react';
-import { GridDensity, GridFilterPanel, GridSlotsComponent, GridRenderCellParams, ToolbarProps } from '@mui/x-data-grid';
+import { GridDensity, GridFilterPanel, GridSlotsComponent, GridSlotProps, GridRenderCellParams, ToolbarProps } from '@mui/x-data-grid';
 import { AlertProps } from '@mui/material/Alert';
 import Chip, { ChipProps } from '@mui/material/Chip';
 import { LinkProps } from '@mui/material/Link';
@@ -13,7 +13,6 @@ import { SvgIconProps } from '@mui/material/SvgIcon';
 import { CardProps } from '@mui/material/Card';
 import { CheckboxProps } from '@mui/material/Checkbox';
 import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
-import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePickerProps } from '@mui/x-date-pickers-pro/DateRangePicker';
@@ -31,6 +30,7 @@ import { LinearProgressProps } from '@mui/material/LinearProgress';
 import { RadioProps } from '@mui/material/Radio';
 import * as _mui_material from '@mui/material';
 import { BoxProps as BoxProps$1 } from '@mui/material';
+import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
 import { SkeletonProps } from '@mui/material/Skeleton';
 import { TableProps } from '@mui/material/Table';
 import * as _mui_system from '@mui/system';
@@ -1033,118 +1033,6 @@ declare namespace ModDataGridColumnsButton {
     var displayName: string;
 }
 
-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. Supplying `href` roots the item at an anchor instead of the `li`
-     * MUI defaults to, so it navigates and offers the browser's open-in-new-tab on middle-
-     * or right-click. Pass `component` explicitly (e.g. a router link such as Next.js
-     * `Link`) to override that default.
-     *
-     * The anchor then sits directly inside `MenuList`'s `ul`. `role="menuitem"` keeps that
-     * correct for ARIA, but `ul`'s content model permits only `li`, so HTML validators and
-     * axe-core's `list` rule flag it. This is the pattern MUI's own docs use for link menu
-     * items, and what `ModListItem` already produces inside `List`.
-     */
-    href?: string;
-    /**
-     * Anchor `target`, e.g. `_blank`. Only meaningful with `href` — without one the item
-     * roots at `li` and this renders as an inert attribute, the same trap as #722.
-     */
-    target?: string;
-    /**
-     * Anchor `rel`, e.g. `noopener noreferrer`. Only meaningful with `href` — without one
-     * the item roots at `li` and this renders as an inert attribute.
-     */
-    rel?: string;
-    /**
-     * Menu item content (text label)
-     */
-    children?: ReactNode;
-};
-type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
-    /**
-     * Root element or component. Naming one bypasses the `href` → anchor default, so pass
-     * a link component (`'a'`, Next.js `Link`, …) if the item still has to navigate:
-     * `component="div"` with an `href` renders an inert attribute. `component="button"` is
-     * the exception — ButtonBase promotes a `button` root to an anchor itself.
-     *
-     * @default 'li', or 'a' when `href` is set
-     */
-    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 — `href` alone is enough
- * <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) — an explicit `component` wins over the anchor default
- * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
- * ```
- */
-declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, component, href, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
-declare namespace ModMenuItem {
-    var displayName: string;
-}
-
-type ModSelectProps = SelectProps;
-/**
- * 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>
- * ```
- */
-declare const ModSelect: {
-    (props: ModSelectProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 /**
  * Icon components for DataGrid filter panel slots
  * These must be passed to the DataGrid's slots prop
@@ -1161,18 +1049,19 @@ declare const ModDataGridFilterPanelRemoveAllIcon: {
     (): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
+type ModDataGridSelectProps = GridSlotProps['baseSelect'];
 /**
- * ModSelect, typed for the DataGrid `baseSelect` slot.
+ * ModDataGridSelect - ModSelect adapted to the DataGrid `baseSelect` slot contract.
+ *
+ * Kept structurally parallel to MUI's own `BaseSelect` (`@mui/x-data-grid/material`) so the two
+ * can be diffed on upgrade.
  *
- * The grid's own `SelectProps` shares MUI's prop names and semantics, but types
- * `onChange` as a bare `ChangeEventHandler` and adds `aria-*`/`data-*` index
- * signatures — structurally incompatible, behaviourally identical. Asserted
- * once here rather than at every call site; #721 tracks replacing the assertion
- * with a real adapter. Intersected rather than replaced so direct consumers keep
- * `ModSelectProps` — casting to the slot type alone drops `variant`, `MenuProps`
- * and the `SelectChangeEvent` signature.
+ * @example
+ * ```tsx
+ * <ModDataGrid rows={rows} columns={columns} slots={{ baseSelect: ModDataGridSelect }} />
+ * ```
  */
-declare const ModDataGridSelect: typeof ModSelect & GridSlotsComponent["baseSelect"];
+declare const ModDataGridSelect: GridSlotsComponent['baseSelect'];
 /**
  * ModDataGridFilterPanel - MUI GridFilterPanel with design system styling and Lucide icons
  *
@@ -1913,6 +1802,96 @@ declare const ModMenu: {
     displayName: string;
 };
 
+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. Supplying `href` roots the item at an anchor instead of the `li`
+     * MUI defaults to, so it navigates and offers the browser's open-in-new-tab on middle-
+     * or right-click. Pass `component` explicitly (e.g. a router link such as Next.js
+     * `Link`) to override that default.
+     *
+     * The anchor then sits directly inside `MenuList`'s `ul`. `role="menuitem"` keeps that
+     * correct for ARIA, but `ul`'s content model permits only `li`, so HTML validators and
+     * axe-core's `list` rule flag it. This is the pattern MUI's own docs use for link menu
+     * items, and what `ModListItem` already produces inside `List`.
+     */
+    href?: string;
+    /**
+     * Anchor `target`, e.g. `_blank`. Only meaningful with `href` — without one the item
+     * roots at `li` and this renders as an inert attribute, the same trap as #722.
+     */
+    target?: string;
+    /**
+     * Anchor `rel`, e.g. `noopener noreferrer`. Only meaningful with `href` — without one
+     * the item roots at `li` and this renders as an inert attribute.
+     */
+    rel?: string;
+    /**
+     * Menu item content (text label)
+     */
+    children?: ReactNode;
+};
+type ModMenuItemProps<C extends ElementType = typeof MenuItem> = ModMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof ModMenuItemOwnProps> & {
+    /**
+     * Root element or component. Naming one bypasses the `href` → anchor default, so pass
+     * a link component (`'a'`, Next.js `Link`, …) if the item still has to navigate:
+     * `component="div"` with an `href` renders an inert attribute. `component="button"` is
+     * the exception — ButtonBase promotes a `button` root to an anchor itself.
+     *
+     * @default 'li', or 'a' when `href` is set
+     */
+    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 — `href` alone is enough
+ * <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) — an explicit `component` wins over the anchor default
+ * <ModMenuItem component={NextLink} href="/api-explorer">API explorer</ModMenuItem>
+ * ```
+ */
+declare function ModMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, component, href, ...rest }: ModMenuItemProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace ModMenuItem {
+    var displayName: string;
+}
+
 interface ModActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
     api?: GridRenderCellParams['api'];
     children: ReactNode;
@@ -2589,6 +2568,28 @@ declare const ModSearchChip: {
     displayName: string;
 };
 
+type ModSelectProps = SelectProps;
+/**
+ * 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>
+ * ```
+ */
+declare const ModSelect: {
+    (props: ModSelectProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface ModSelectFieldOption {
     value: string | number;
     label: ReactNode;
@@ -3178,7 +3179,7 @@ declare const ModTypologyControl: {
  * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
  */
 declare const focusRingStyles: {
-    readonly outline: "2px solid var(--mod-border-focus)";
+    readonly outline: "2px solid var(--mod-color-border-focus)";
     readonly outlineOffset: "2px";
 };
 
@@ -3217,4 +3218,4 @@ declare module '@mui/x-data-grid-pro' {
 declare const version: string
 
 export { ActivityScene, CIRCLE_RADIUS, ModActionsCell, ModActivityHeader, ModActivityIndicatorCell, ModAlert, ModAvatarCell, ModBadge, ModBanner, ModBreadcrumbLink, ModBreadcrumbs, ModButton, ModButtonTab, ModButtonTabGroup, ModCanceledIcon, ModCard, ModCheckbox, ModCheckboxWithText, ModCodeSnippet, ModDataGrid, ModDataGridCellContent, ModDataGridColumnsButton, ModDataGridColumnsPanel, ModDataGridFilterPanel, ModDataGridFilterPanelAddIcon, ModDataGridFilterPanelDeleteIcon, ModDataGridFilterPanelRemoveAllIcon, ModDataGridFiltersButton, ModDataGridHeaderLabel, ModDataGridSelect, ModDatePicker, ModDivider, ModDot, ModDownloadToast, ModSelect as ModDropdown, ModMenu as ModDropdownMenu, ModMenuItem as ModDropdownMenuItem, ModMenuItem as ModDropdownOption, ModFilledCanceled, ModFilledError, ModFilledInfo, ModFilledNeutral, ModFilledQueued, ModFilledSuccess, ModFilledWarning, ModFilterChip, ModFooter, ModGeneralAvatar, ModIconButton, ModIconCell, ModIconWrapper, ModInfiniteScrollGrid, ModInputField, ModListItem, ModListItemButton, ModLoadingSpinner, ModLogoCell, ModMenu, ModMenuItem, ModModal, ModModalContent, ModModalFooter, ModModalHeader, ModMultiBadgesCell, ModNavigationAvatar, ModNavigationItem, ModPageContent, ModPaginatedGrid, ModProgressCell, ModProgressbar, ModQuickFilter, ModRadio, ModRipplingDot, ModSearchChip, ModSelect, ModSelectField, ModMenuItem as ModSelectOption, ModSideNav, ModSkeleton, ModStatusBadgeCell, ModStatusCell, ModTab, ModTabPanel, ModTable, ModTabs, ModTag, ModToast, ModToastButton, ModToggle, ModToggleButton, ModToggleButtonGroup, ModToolbar, ModTooltip, ModTreeItem, ModTreeView, StyledToggleButton as ModTypologyButton, ModTypologyControl, ModUserAvatarCell, ModVibratingDot, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, modRowHeights, version };
-export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, IconWrapperSize, ModActionsCellProps, ModActivityHeaderProps, ModActivityIndicatorCellProps, ModAlertProps, ModAvatarCellProps, ModBadgeProps, ModBannerProps, ModBreadcrumbLinkProps, ModBreadcrumbsProps, ModButtonProps, ModButtonTabGroupProps, ModButtonTabProps, ModCardLargeProps, ModCardProps, ModCardSize, ModCardSmallProps, ModCheckboxProps, ModCheckboxWithTextProps, ModCodeSnippetProps, ModDataGridCellContentProps, ModDataGridHeaderLabelProps, ModDataGridProps, ModDatePickerProps, ModDividerProps, ModDotProps, ModDownloadToastProps, ModMenuItemProps as ModDropdownMenuItemProps, ModMenuProps as ModDropdownMenuProps, ModSelectProps as ModDropdownProps, ModFilledStatusIconProps, ModFilterChipProps, ModFooterProps, ModGeneralAvatarProps, ModIconButtonProps, ModIconCellProps, ModIconWrapperProps, ModInfiniteScrollGridProps, ModInputFieldProps, ModListItemButtonProps, ModListItemProps, ModLoadingSpinnerProps, ModLogoCellProps, ModMenuItemProps, ModMenuProps, ModModalContentProps, ModModalFooterProps, ModModalHeaderProps, ModModalProps, ModMultiBadgesCellProps, ModNavigationAvatarProps, ModNavigationItemProps, ModPageContentProps, ModPaginatedGridProps, ModProgressCellProps, ModProgressbarProps, ModQuickFilterProps, ModRadioProps, ModRipplingDotProps, ModSearchChipProps, ModSelectFieldChangeEvent, ModSelectFieldOption, ModSelectFieldProps, ModSelectProps, ModSideNavProps, ModSkeletonProps, ModStatusBadgeCellProps, ModStatusCellProps, ModStatusCellVariant, ModTabPanelProps, ModTabProps, ModTableColumn, ModTableProps, ModTagProps, ModToastProps, ModToggleButtonGroupProps, ModToggleButtonProps, ModToggleProps, ModToolbarProps, ModTooltipProps, ModTreeItemData, ModTreeItemProps, ModTreeViewProps, ModTypologyControlProps, ModUserAvatarCellProps, ModVibratingDotProps };
+export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, IconWrapperSize, ModActionsCellProps, ModActivityHeaderProps, ModActivityIndicatorCellProps, ModAlertProps, ModAvatarCellProps, ModBadgeProps, ModBannerProps, ModBreadcrumbLinkProps, ModBreadcrumbsProps, ModButtonProps, ModButtonTabGroupProps, ModButtonTabProps, ModCardLargeProps, ModCardProps, ModCardSize, ModCardSmallProps, ModCheckboxProps, ModCheckboxWithTextProps, ModCodeSnippetProps, ModDataGridCellContentProps, ModDataGridHeaderLabelProps, ModDataGridProps, ModDataGridSelectProps, ModDatePickerProps, ModDividerProps, ModDotProps, ModDownloadToastProps, ModMenuItemProps as ModDropdownMenuItemProps, ModMenuProps as ModDropdownMenuProps, ModSelectProps as ModDropdownProps, ModFilledStatusIconProps, ModFilterChipProps, ModFooterProps, ModGeneralAvatarProps, ModIconButtonProps, ModIconCellProps, ModIconWrapperProps, ModInfiniteScrollGridProps, ModInputFieldProps, ModListItemButtonProps, ModListItemProps, ModLoadingSpinnerProps, ModLogoCellProps, ModMenuItemProps, ModMenuProps, ModModalContentProps, ModModalFooterProps, ModModalHeaderProps, ModModalProps, ModMultiBadgesCellProps, ModNavigationAvatarProps, ModNavigationItemProps, ModPageContentProps, ModPaginatedGridProps, ModProgressCellProps, ModProgressbarProps, ModQuickFilterProps, ModRadioProps, ModRipplingDotProps, ModSearchChipProps, ModSelectFieldChangeEvent, ModSelectFieldOption, ModSelectFieldProps, ModSelectProps, ModSideNavProps, ModSkeletonProps, ModStatusBadgeCellProps, ModStatusCellProps, ModStatusCellVariant, ModTabPanelProps, ModTabProps, ModTableColumn, ModTableProps, ModTagProps, ModToastProps, ModToggleButtonGroupProps, ModToggleButtonProps, ModToggleProps, ModToolbarProps, ModTooltipProps, ModTreeItemData, ModTreeItemProps, ModTreeViewProps, ModTypologyControlProps, ModUserAvatarCellProps, ModVibratingDotProps };