@moderneinc/design-system-components 7.1.0-next.d21647 → 7.1.1-next.9c4186

package/dist/SearchChip/SearchChip.d.ts

@@ -1,5 +1,11 @@
 import { type InputBaseProps } from '@mui/material/InputBase';
-export interface ModSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
+type SearchChipSize = 'small' | 'medium';
+export interface ModSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type' | 'size'> {
+    /**
+     * The size of the search chip
+     * @default "medium"
+     */
+    size?: SearchChipSize;
     /**
      * Handler for clearing the search value (shows X icon when provided and value is non-empty)
      */
@@ -10,8 +16,13 @@ export interface ModSearchChipProps extends Omit<InputBaseProps, 'startAdornment
  *
  * @example
  * <ModSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ *
+ * @example
+ * // Small size
+ * <ModSearchChip size="small" placeholder="Search titles" value={query} onChange={handleChange} />
  */
 export declare const ModSearchChip: {
     ({ onClear, value, ...props }: ModSearchChipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/dist/index.d.ts

@@ -2551,7 +2551,13 @@ interface ModRipplingDotProps extends BoxProps$1 {
  */
 declare const ModRipplingDot: FunctionComponent<ModRipplingDotProps>;
 
-interface ModSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
+type SearchChipSize = 'small' | 'medium';
+interface ModSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type' | 'size'> {
+    /**
+     * The size of the search chip
+     * @default "medium"
+     */
+    size?: SearchChipSize;
     /**
      * Handler for clearing the search value (shows X icon when provided and value is non-empty)
      */
@@ -2562,6 +2568,10 @@ interface ModSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'en
  *
  * @example
  * <ModSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ *
+ * @example
+ * // Small size
+ * <ModSearchChip size="small" placeholder="Search titles" value={query} onChange={handleChange} />
  */
 declare const ModSearchChip: {
     ({ onClear, value, ...props }: ModSearchChipProps): react_jsx_runtime.JSX.Element;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { semanticColors, spacing, typography, borderRadius, shadows, colors, semanticColorsDark, semanticTypography } from '@moderneinc/design-system-tokens';
+import { semanticColors, spacing, typography, borderRadius, shadows, colors, semanticColorsDark, semanticTypography, height } from '@moderneinc/design-system-tokens';
 import Box from '@mui/material/Box';
 import { styled, useTheme, alpha } from '@mui/material/styles';
 import Chip, { chipClasses } from '@mui/material/Chip';
@@ -965,17 +965,21 @@ ModButtonTab.displayName = 'ModButtonTab';
  *
  * Custom styling:
  * - Rounded-rectangle border (borderRadius.button)
- * - Size variants (small=32px, medium=40px)
+ * - Size variants (small=24px, medium=40px)
  * - Border colors using semantic tokens
  * - Selected state colors from design system tokens
  */
 const StyledButtonTabGroup = styled(MuiToggleButtonGroup)(({ theme, size = 'medium' }) => {
     const sizeStyles = {
         small: {
-            height: spacing.spacing_4,
+            height: spacing.spacing_3,
+            padding: `0 ${spacing.spacing_1_1_2}px`,
+            fontSize: typography.fontSize.caption,
         },
         medium: {
             height: spacing.spacing_5,
+            padding: `${spacing.spacing_1}px ${spacing.spacing_2}px`,
+            fontSize: typography.fontSize.sm,
         },
     };
     return {
@@ -987,8 +991,8 @@ const StyledButtonTabGroup = styled(MuiToggleButtonGroup)(({ theme, size = 'medi
             flex: 1,
             minWidth: 'auto',
             height: sizeStyles[size].height,
-            padding: `${spacing.spacing_1}px ${spacing.spacing_2}px`,
-            fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+            padding: sizeStyles[size].padding,
+            fontSize: theme.typography.pxToRem(sizeStyles[size].fontSize),
             fontWeight: typography.fontWeight.regular,
             lineHeight: 1,
             textTransform: 'none',
@@ -1538,37 +1542,35 @@ const panelSurfaceStyles = {
 const getDataGridHeaderStyles = () => {
     return {
         // Header cell container styles - from Figma: bg, border, padding
-        // Height is set via density-specific selectors in DataGrid.tsx
         [`& .${gridClasses.columnHeader}`]: {
             backgroundColor: semanticColors.color.surface.dataGrid.header,
             borderBottom: `1px solid ${semanticColors.color.border.primary}`,
-            paddingTop: `${spacing.spacing_1_1_2}px`,
-            paddingBottom: `${spacing.spacing_1_1_2}px`,
-            paddingLeft: `${spacing.spacing_2}px`,
-            paddingRight: `${spacing.spacing_2}px`,
+            paddingTop: `${spacing.spacing_1_1_4}px`,
+            paddingBottom: `${spacing.spacing_1_1_4}px`,
+            // WARNING: must track cell padding in DataGrid.tsx or labels sit left of
+            // the column they label.
+            paddingLeft: `${spacing.spacing_3}px`,
+            paddingRight: `${spacing.spacing_3}px`,
             boxSizing: 'border-box',
         },
         // Style the filler element to match header
-        // Height is set via density-specific selectors in DataGrid.tsx
         [`& .${gridClasses.filler}`]: {
             backgroundColor: semanticColors.color.surface.dataGrid.header,
             borderBottom: `1px solid ${semanticColors.color.border.primary}`,
             boxSizing: 'border-box',
         },
-        // Style the default MUI column header title text to match Figma
+        // NOTE: tertiary, not secondary — the mock's `--muted` is text.tertiary in
+        // both modes.
         [`& .${gridClasses.columnHeaderTitle}`]: {
-            fontFamily: `${typography.fontFamily.body}, sans-serif`,
-            fontSize: typography.fontSize.sm,
-            fontWeight: typography.fontWeight.semiBold, // Always semiBold (600)
-            lineHeight: 'normal',
-            color: semanticColors.color.text.secondary, // #6b7280 by default
+            ...semanticTypography.table.header,
+            color: semanticColors.color.text.tertiary,
             transition: 'color 0.2s',
             textOverflow: 'clip',
             whiteSpace: 'break-spaces',
         },
         // Change text color on hover
         [`& .${gridClasses.columnHeader}:hover .${gridClasses.columnHeaderTitle}`]: {
-            color: semanticColors.color.icon.default, // #1f2937 on hover
+            color: semanticColors.color.text.primary,
         },
         // Style the checkbox in header to match design system (16x16 from Figma)
         [`& .${gridClasses.columnHeaderCheckbox}`]: {
@@ -1583,9 +1585,8 @@ const getDataGridHeaderStyles = () => {
                 },
             },
         },
-        // MUI clips this container when header vertical padding leaves < 16px of content
-        // area (e.g. compact: 38px − 24px padding = 14px). overflow:visible lets the
-        // sort icon render at full 16px without being cropped.
+        // MUI clips this container when padding leaves < 16px of content area, which
+        // crops the sort icon. Guards callers that shrink height.table.header.
         [`& .${gridClasses.columnHeaderTitleContainer}`]: {
             overflow: 'visible',
             lineHeight: 1,
@@ -1800,7 +1801,7 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
     borderRadius: 0,
     color: semanticColors.color.icon.default,
     textDecoration: 'none',
-    fontSize: theme.typography.pxToRem(typography.fontSize.default),
+    fontSize: theme.typography.pxToRem(typography.fontSize.caption),
     fontWeight: typography.fontWeight.regular,
     lineHeight: '20px',
     transition: theme.transitions.create(['background-color'], {
@@ -1820,6 +1821,7 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
     },
     [`&.${menuItemClasses.focusVisible}`]: {
         backgroundColor: semanticColors.color.surface.rowHover,
+        outline: 'none',
     },
 }));
 const MenuItemContent = styled('div')({
@@ -1897,7 +1899,11 @@ function ModMenuItem({ icon, shortcut, secondaryText, children, component, href,
     // root is `button` (as of @mui/material 9.2) — so an `href` on the default root lands as
     // an attribute on the `<li>` and never navigates (#722). Root at an anchor instead,
     // unless the caller named a component (e.g. a router link) themselves.
-    const rootProps = { ...rest, href, component: component ?? (href ? 'a' : undefined) };
+    const rootProps = {
+        ...rest,
+        href,
+        component: component ?? (href ? 'a' : undefined),
+    };
     return (jsx(StyledMenuItem, { ...rootProps, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$3, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
 }
 ModMenuItem.displayName = 'ModMenuItem';
@@ -2379,7 +2385,9 @@ function ModDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         },
         ...sx,
     };
-    return (jsx(DataGridPro, { apiRef: apiRef, columnHeaderHeight: density === 'compact' ? 38 : density === 'comfortable' ? 52 : 44, autoHeight: autoHeight, autoPageSize: !autoHeight, getRowHeight: () => 'auto', showToolbar: !!toolbar, slots: mergedSlots, slotProps: {
+    return (jsx(DataGridPro, { apiRef: apiRef, 
+        // One height at every density; `cell.minHeight` below still scales.
+        columnHeaderHeight: height.table.header, autoHeight: autoHeight, autoPageSize: !autoHeight, getRowHeight: () => 'auto', showToolbar: !!toolbar, slots: mergedSlots, slotProps: {
             basePopper: {
                 placement: 'bottom-start',
             },
@@ -2407,7 +2415,7 @@ function ModDataGridColumnsButton() {
 }
 ModDataGridColumnsButton.displayName = 'ModDataGridColumnsButton';
 
-const sizeStyles$1 = {
+const sizeStyles$2 = {
     small: {
         height: 16,
         minWidth: 16,
@@ -2504,7 +2512,7 @@ const StyledChip$2 = styled(Chip, {
     lineHeight: semanticTypography.chip.lineHeight,
     fontWeight: semanticTypography.chip.fontWeight,
     overflow: 'visible',
-    ...(size && sizeStyles$1[size]),
+    ...(size && sizeStyles$2[size]),
     [`& .${chipClasses.label}`]: {
         padding: 0,
         overflow: 'visible',
@@ -2552,13 +2560,7 @@ ModDataGridFiltersButton.displayName = 'ModDataGridFiltersButton';
 /**
  * ModDataGridHeaderLabel - Header label for DataGrid columns with help icon support
  *
- * Design tokens used:
- * - Font: typography.fontWeight.semiBold (600)
- * - Font size: 14px (from Figma Table/header)
- * - Colors:
- *   - Default: semanticColors.typography.bodySecondary (#6b7280)
- *   - Hover: semanticColors.icons.default (#1f2937)
- *   - Icons: semanticColors.icons.utility (#9ca3af)
+ * Shares semanticTypography.table.header with the plain DataGrid column title.
  *
  * @example
  * // Basic usage (for custom header content)
@@ -2576,18 +2578,15 @@ const LabelContainer$2 = styled('div')({
     gap: `${spacing.spacing_1_2}px`,
 });
 const LabelText$1 = styled('p')({
-    fontFamily: `${typography.fontFamily.body}, sans-serif`,
-    fontSize: typography.fontSize.sm,
-    fontWeight: typography.fontWeight.semiBold, // Always semiBold (600)
-    lineHeight: 'normal',
-    color: semanticColors.color.text.secondary, // #6b7280 by default
+    ...semanticTypography.table.header,
+    color: semanticColors.color.text.tertiary,
     whiteSpace: 'nowrap',
     margin: 0,
     padding: 0,
     transition: 'color 0.2s',
     // Hover state - changes to primary text color
     '&:hover': {
-        color: semanticColors.color.icon.default, // #1f2937 on hover
+        color: semanticColors.color.text.primary,
     },
 });
 const IconWrapper = styled('div')({
@@ -5318,12 +5317,24 @@ const ModRipplingDot = props => (jsx(Box$1, { "aria-hidden": "true", ...props, s
     } }));
 ModRipplingDot.displayName = 'ModRipplingDot';
 
-const StyledSearchChip = styled(InputBase)(({ theme }) => ({
+const sizeStyles$1 = {
+    small: {
+        height: height.input.dense,
+        padding: `0 ${spacing.spacing_1_1_4}px`,
+    },
+    medium: {
+        height: height.input.default,
+        padding: `0 ${spacing.spacing_1_1_2}px`,
+    },
+};
+const StyledSearchChip = styled(InputBase, {
+    shouldForwardProp: prop => prop !== 'size' && !isMuiInternalProp(prop),
+})(({ theme, size = 'medium' }) => ({
     borderRadius: borderRadius.button,
     border: `1px solid ${semanticColors.color.border.primary}`,
     backgroundColor: semanticColors.color.surface.raised,
-    height: 40,
-    padding: `0 ${spacing.spacing_1_1_2}px`,
+    height: sizeStyles$1[size].height,
+    padding: sizeStyles$1[size].padding,
     gap: spacing.spacing_1_2,
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     fontWeight: typography.fontWeight.medium,
@@ -5388,6 +5399,10 @@ const ClearButton = styled(ButtonBase)({
  *
  * @example
  * <ModSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ *
+ * @example
+ * // Small size
+ * <ModSearchChip size="small" placeholder="Search titles" value={query} onChange={handleChange} />
  */
 const ModSearchChip = ({ onClear, value, ...props }) => {
     const hasValue = Boolean(value && String(value).length > 0);
@@ -5661,9 +5676,13 @@ const ModSkeleton = ({ colorTheme = 'light', position = 'start', ...props }) =>
 };
 ModSkeleton.displayName = 'ModSkeleton';
 
-const sizePadding = {
-    small: `${spacing.spacing_3_4}px ${spacing.spacing_1_1_2}px`,
-    medium: `${spacing.spacing_1_1_2}px ${spacing.spacing_2}px`,
+const sizePaddingY = {
+    small: spacing.spacing_3_4,
+    medium: spacing.spacing_1_1_2,
+};
+const sizePaddingX = {
+    small: spacing.spacing_1_1_2,
+    medium: spacing.spacing_2,
 };
 const sizeFontSize = {
     small: typography.fontSize.xs,
@@ -5674,14 +5693,12 @@ const StyledTable = styled(MuiTable, {
 })(({ theme, tableSize = 'small' }) => ({
     borderCollapse: 'separate',
     borderSpacing: 0,
+    // `size` scales the rows only; headers hold one treatment and one height.
     [`& .${tableCellClasses.head}`]: {
+        ...semanticTypography.table.header,
         backgroundColor: semanticColors.color.surface.dataGrid.header,
-        color: semanticColors.color.text.primary,
-        fontFamily: typography.fontFamily.body,
-        fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
-        fontWeight: typography.fontWeight.semiBold,
-        lineHeight: 1.4,
-        padding: sizePadding[tableSize],
+        color: semanticColors.color.text.tertiary,
+        padding: `${spacing.spacing_1_1_4}px ${sizePaddingX[tableSize]}px`,
         borderBottom: `1px solid ${semanticColors.color.border.primary}`,
     },
     [`& .${tableCellClasses.body}`]: {
@@ -5690,7 +5707,7 @@ const StyledTable = styled(MuiTable, {
         fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
         fontWeight: typography.fontWeight.regular,
         lineHeight: 1.4,
-        padding: sizePadding[tableSize],
+        padding: `${sizePaddingY[tableSize]}px ${sizePaddingX[tableSize]}px`,
         borderBottom: `1px solid ${semanticColors.color.border.primary}`,
     },
     // Drop the trailing row's bottom border so the container border (if