@moderneinc/neo-styled-components 5.0.0-next.d56e54 → 5.0.0-next.e2cf11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/Alert/Alert.d.ts +15 -1
  2. package/dist/Badge/Badge.d.ts +16 -2
  3. package/dist/Breadcrumbs/Breadcrumbs.d.ts +0 -10
  4. package/dist/DataGrid/DataGrid.d.ts +1 -1
  5. package/dist/DataGrid/DataGrid.styles.d.ts +3 -0
  6. package/dist/DataGridCell/DataGridCell.d.ts +0 -16
  7. package/dist/DataGridHeaderCell/DataGridHeaderCell.d.ts +0 -37
  8. package/dist/DatePickerListItem/DatePickerListItem.d.ts +2 -22
  9. package/dist/DatePickerMenu/DatePickerMenu.d.ts +2 -22
  10. package/dist/Dot/Dot.d.ts +11 -4
  11. package/dist/GeneralAvatar/GeneralAvatar.d.ts +1 -7
  12. package/dist/InputField/InputField.d.ts +12 -1
  13. package/dist/ListItemButton/ListItemButton.d.ts +12 -1
  14. package/dist/MenuItem/MenuItem.d.ts +31 -9
  15. package/dist/NavigationAvatar/NavigationAvatar.d.ts +1 -1
  16. package/dist/NavigationItem/NavigationItem.d.ts +16 -2
  17. package/dist/NeoActionsCell/NeoActionsCell.d.ts +9 -0
  18. package/dist/NeoAvatarCell/NeoAvatarCell.d.ts +25 -0
  19. package/dist/NeoIconCell/NeoIconCell.d.ts +14 -0
  20. package/dist/NeoLogoCell/NeoLogoCell.d.ts +24 -0
  21. package/dist/NeoProgressCell/NeoProgressCell.d.ts +21 -0
  22. package/dist/NeoStatusCell/NeoStatusCell.d.ts +30 -0
  23. package/dist/PageContent/PageContent.d.ts +12 -1
  24. package/dist/RadioButtonWithText/RadioButtonWithText.d.ts +2 -22
  25. package/dist/SelectField/SelectField.d.ts +64 -0
  26. package/dist/SideNav/SideNav.d.ts +2 -22
  27. package/dist/TabPanel/TabPanel.d.ts +47 -0
  28. package/dist/Table/Table.d.ts +64 -0
  29. package/dist/Tag/Tag.d.ts +1 -2
  30. package/dist/ToggleButton/ToggleButton.d.ts +13 -18
  31. package/dist/ToggleButtonGroup/ToggleButtonGroup.d.ts +26 -0
  32. package/dist/ToggleButtonWithText/ToggleButtonWithText.d.ts +2 -22
  33. package/dist/TopNav/TopNav.d.ts +2 -22
  34. package/dist/TourModal/TourModal.d.ts +2 -22
  35. package/dist/index.d.ts +547 -123
  36. package/dist/index.esm.js +894 -414
  37. package/dist/index.esm.js.map +1 -1
  38. package/dist/index.js +909 -410
  39. package/dist/index.js.map +1 -1
  40. package/dist/utils/colorHelpers.d.ts +6 -0
  41. package/package.json +1 -1
  42. package/dist/utils/avatarColors.d.ts +0 -7
@@ -2,6 +2,7 @@ import { type AlertProps } from '@mui/material/Alert';
2
2
  import type { ReactNode } from 'react';
3
3
  type Intent = 'success' | 'error' | 'warning' | 'offline' | 'info';
4
4
  type AlertType = 'outlined' | 'filled';
5
+ type AlertSize = 'default' | 'compact';
5
6
  export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
6
7
  /**
7
8
  * The intent/purpose of the alert
@@ -15,6 +16,13 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
15
16
  * @figma Type
16
17
  */
17
18
  type?: AlertType;
19
+ /**
20
+ * Vertical density. `default` is page-level (64px fixed height,
21
+ * supports title + description). `compact` is inline-panel use
22
+ * (auto height, 40px min, single-line optimized for terse messages).
23
+ * @default "default"
24
+ */
25
+ size?: AlertSize;
18
26
  /**
19
27
  * The title text displayed in the alert
20
28
  */
@@ -31,6 +39,12 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
31
39
  * Optional action element (typically a button) displayed on the right
32
40
  */
33
41
  action?: ReactNode;
42
+ /**
43
+ * Optional content rendered below the title inside the alert container.
44
+ * Use for rich content like stack traces or code blocks. When present,
45
+ * the alert expands to auto height and top-aligns its icon and action.
46
+ */
47
+ children?: ReactNode;
34
48
  }
35
49
  /**
36
50
  * NeoAlert - Alert component for displaying contextual status messages
@@ -44,7 +58,7 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
44
58
  * - Show Button → action prop presence
45
59
  */
46
60
  export declare const NeoAlert: {
47
- ({ intent, type, title, description, icon, action, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
61
+ ({ intent, type, size, title, description, icon, action, children, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
48
62
  displayName: string;
49
63
  };
50
64
  export {};
@@ -1,10 +1,23 @@
1
1
  import { type ChipProps } from '@mui/material/Chip';
2
+ type BadgeSize = 'small' | 'medium';
3
+ type BadgeVariant = 'filled' | 'outlined';
2
4
  export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
3
5
  /**
4
- * The color/state of the badge
6
+ * The color/state of the badge. Ignored when `variant="outlined"`.
5
7
  * @default "default"
6
8
  */
7
9
  color?: 'default' | 'error' | 'warning' | 'success' | 'info';
10
+ /**
11
+ * Visual density of the badge. `small` is 20px tall, `medium` is 24px tall.
12
+ * @default "medium"
13
+ */
14
+ size?: BadgeSize;
15
+ /**
16
+ * Visual treatment. `filled` uses a per-color tinted background;
17
+ * `outlined` uses a transparent background with a neutral secondary border.
18
+ * @default "filled"
19
+ */
20
+ variant?: BadgeVariant;
8
21
  }
9
22
  /**
10
23
  * NeoBadge - Status badge component based on MUI Chip
@@ -18,6 +31,7 @@ export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
18
31
  * - Label → label prop
19
32
  */
20
33
  export declare const NeoBadge: {
21
- (props: NeoBadgeProps): import("react/jsx-runtime").JSX.Element;
34
+ ({ size, variant, ...props }: NeoBadgeProps): import("react/jsx-runtime").JSX.Element;
22
35
  displayName: string;
23
36
  };
37
+ export {};
@@ -3,16 +3,6 @@ import type { ElementType, ReactNode } from 'react';
3
3
  /**
4
4
  * NeoBreadcrumbs - Navigation breadcrumb component
5
5
  *
6
- * Figma Mapping:
7
- * - Base component uses MuiBreadcrumbs with custom styled Links
8
- * - Uses chevron separator (ChevronRight from lucide-react)
9
- * - Typography: 14px Medium (500 weight)
10
- * - Colors:
11
- * - Non-current: semanticColors.typography.bodySecondary (#6b7280)
12
- * - Current: semanticColors.buttons.primary.default (#2f42ff)
13
- * - Hover: semanticColors.icons.hover (#1f2937) or buttons.tertiary.hover (#1e2ec2)
14
- * - Focus: 2px outline with buttons.primary.focus
15
- *
16
6
  * @see https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4563-122872
17
7
  */
18
8
  export interface NeoBreadcrumbsProps {
@@ -38,7 +38,7 @@ export interface NeoDataGridProps extends Omit<DataGridProProps, 'slots'> {
38
38
  * - `size` → Row heights (compact: 42px, standard: 48px, comfortable: 56px) and header heights (compact: 38px, standard: 44px, comfortable: 52px)
39
39
  *
40
40
  * Design tokens used:
41
- * - Colors: semanticColors.border.primary, semanticColors.background.*
41
+ * - Colors: semanticColors.border.primary, semanticColors.surfaces.dataGrid.*
42
42
  * - Typography: typography.fontFamily.body, typography.fontSize.sm
43
43
  * - Spacing: spacing.spacing_*
44
44
  *
@@ -0,0 +1,3 @@
1
+ import type { SxProps, Theme } from '@mui/material/styles';
2
+ export declare const getDataGridHeaderStyles: () => SxProps<Theme>;
3
+ export declare const getDataGridRowStyles: () => SxProps<Theme>;
@@ -45,22 +45,6 @@ export declare const NeoDataGridCellContent: {
45
45
  ({ children, ...props }: NeoDataGridCellContentProps): import("react/jsx-runtime").JSX.Element;
46
46
  displayName: string;
47
47
  };
48
- /**
49
- * Utility function to get DataGrid sx styles for consistent cell appearance
50
- *
51
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4212-41631
52
- *
53
- * Apply this to DataGrid's `sx` prop to ensure cells are properly aligned and styled.
54
- *
55
- * @param size - Row size variant (affects row height)
56
- * @returns SxProps for DataGrid
57
- *
58
- * @example
59
- * <DataGrid
60
- * rows={rows}
61
- * columns={columns}
62
- * />
63
- */
64
48
  /**
65
49
  * Row height configuration for DataGrid size variants (from Figma specs)
66
50
  * - compact: 42px
@@ -1,4 +1,3 @@
1
- import type { SxProps, Theme } from '@mui/material/styles';
2
1
  /**
3
2
  * Sort icon components for MUI DataGrid slots
4
3
  *
@@ -7,39 +6,3 @@ import type { SxProps, Theme } from '@mui/material/styles';
7
6
  export declare function SortedDescendingIcon(): import("react/jsx-runtime").JSX.Element;
8
7
  export declare function SortedAscendingIcon(): import("react/jsx-runtime").JSX.Element;
9
8
  export declare function UnsortedIcon(): import("react/jsx-runtime").JSX.Element;
10
- /**
11
- * Utility function to get DataGrid sx styles for header cells
12
- *
13
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4212-41618
14
- *
15
- * Figma prop mappings:
16
- * - `size` → `size`: Figma "condensed" → MUI 'compact', Figma "default" → MUI 'standard', Figma "relaxed" → MUI 'comfortable'
17
- *
18
- * Design tokens used:
19
- * - Background: colors.grey[50] (#f9fafb)
20
- * - Border: semanticColors.border.primary
21
- * - Padding: 12px vertical, 24px horizontal
22
- * - Gap: 12px
23
- *
24
- *
25
- * @param size - Header row size variant (affects header cell height)
26
- * @returns SxProps for DataGrid header cells
27
- *
28
- * @example
29
- * import { getDataGridHeaderStyles, SortedDescendingIcon, SortedAscendingIcon, UnsortedIcon } from './DataGridHeaderCell'
30
- *
31
- * <DataGrid
32
- * columnHeaderHeight={38} // for compact (Figma: condensed)
33
- * sx={{
34
- * ...getDataGridHeaderStyles(),
35
- * }}
36
- * slots={{
37
- * columnSortedDescendingIcon: SortedDescendingIcon,
38
- * columnSortedAscendingIcon: SortedAscendingIcon,
39
- * columnUnsortedIcon: UnsortedIcon,
40
- * }}
41
- * rows={rows}
42
- * columns={columns}
43
- * />
44
- */
45
- export declare const getDataGridHeaderStyles: () => SxProps<Theme>;
@@ -1,26 +1,6 @@
1
- import type { ReactNode } from 'react';
2
1
  /**
3
- * Props for the NeoDatePickerListItem component
4
- */
5
- export interface NeoDatePickerListItemProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
10
- }
11
- /**
12
- * NeoDatePickerListItem - TODO: Add component description
2
+ * NeoDatePickerListItem
13
3
  *
14
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8521
15
- *
16
- * Figma Props Mapping:
17
- * - TODO: Document Figma property mappings
18
- * - FigmaProp → reactProp
19
- *
20
- * Design Tokens Used:
21
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
22
5
  */
23
- export declare const NeoDatePickerListItem: {
24
- ({ children, ...props }: NeoDatePickerListItemProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
6
+ export declare const NeoDatePickerListItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,26 +1,6 @@
1
- import type { ReactNode } from 'react';
2
1
  /**
3
- * Props for the NeoDatePickerMenu component
4
- */
5
- export interface NeoDatePickerMenuProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
10
- }
11
- /**
12
- * NeoDatePickerMenu - TODO: Add component description
2
+ * NeoDatePickerMenu
13
3
  *
14
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8593
15
- *
16
- * Figma Props Mapping:
17
- * - TODO: Document Figma property mappings
18
- * - FigmaProp → reactProp
19
- *
20
- * Design Tokens Used:
21
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
22
5
  */
23
- export declare const NeoDatePickerMenu: {
24
- ({ children, ...props }: NeoDatePickerMenuProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
6
+ export declare const NeoDatePickerMenu: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
package/dist/Dot/Dot.d.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { type BadgeProps } from '@mui/material/Badge';
1
+ import type { HTMLAttributes, ReactNode } from 'react';
2
2
  type DotSize = 'small' | 'medium' | 'large';
3
3
  type DotVariant = 'solid' | 'outline';
4
4
  type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
5
- export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeContent' | 'children'> {
5
+ export interface NeoDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
6
6
  /**
7
7
  * The size of the dot
8
8
  * @default "medium"
@@ -18,9 +18,16 @@ export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'bad
18
18
  * @default "neutral"
19
19
  */
20
20
  color?: DotColor;
21
+ /**
22
+ * Optional icon rendered centered inside the dot. Use to indicate intent within
23
+ * the dot itself (e.g., a minus icon on a disconnected error dot). SVG children
24
+ * using `currentColor` inherit a white stroke/fill for contrast against the
25
+ * colored background, and are scaled to 70% of the dot size.
26
+ */
27
+ children?: ReactNode;
21
28
  }
22
29
  /**
23
- * NeoDot - Status indicator dot component based on MUI Badge
30
+ * NeoDot - Status indicator dot.
24
31
  *
25
32
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
26
33
  *
@@ -30,7 +37,7 @@ export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'bad
30
37
  * - Color is configurable via color prop (success|error|warning|info|neutral)
31
38
  */
32
39
  export declare const NeoDot: {
33
- ({ size, variant, color, ...props }: NeoDotProps): import("react/jsx-runtime").JSX.Element;
40
+ ({ size, variant, color, children, ...props }: NeoDotProps): import("react/jsx-runtime").JSX.Element;
34
41
  displayName: string;
35
42
  };
36
43
  export {};
@@ -7,12 +7,6 @@ export interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
7
7
  * @figma Size
8
8
  */
9
9
  size?: AvatarSize;
10
- /**
11
- * Color index for initials background (1-7). Use 0 or omit for image mode.
12
- * @default 0
13
- * @figma Color Index
14
- */
15
- colorIndex?: number;
16
10
  }
17
11
  /**
18
12
  * NeoGeneralAvatar - Avatar with image or colored initials display
@@ -20,7 +14,7 @@ export interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
20
14
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
21
15
  */
22
16
  export declare const NeoGeneralAvatar: {
23
- ({ size, colorIndex, children, ...props }: NeoGeneralAvatarProps): import("react/jsx-runtime").JSX.Element;
17
+ ({ size, alt, children, ...props }: NeoGeneralAvatarProps): import("react/jsx-runtime").JSX.Element;
24
18
  displayName: string;
25
19
  };
26
20
  export {};
@@ -1,6 +1,18 @@
1
1
  import { type InputBaseProps } from '@mui/material/InputBase';
2
2
  import type { ReactNode } from 'react';
3
3
  type InputFieldSize = 'small' | 'medium';
4
+ export type { InputFieldSize as NeoInputFieldSize };
5
+ export declare const StyledFormControl: import("@emotion/styled").StyledComponent<import("@mui/material/FormControl").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/styles").Theme> & {
6
+ size?: InputFieldSize;
7
+ }, {}, {}>;
8
+ export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material/InputLabel").InputLabelOwnProps & Pick<import("@mui/material/FormLabel").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/styles").Theme> & {
9
+ size?: InputFieldSize;
10
+ infoIcon?: boolean;
11
+ }, {}, {}>;
12
+ export declare const InfoIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
13
+ export declare const StyledFormHelperText: import("@emotion/styled").StyledComponent<import("@mui/material/FormHelperText").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/styles").Theme> & {
14
+ size?: InputFieldSize;
15
+ }, {}, {}>;
4
16
  export interface NeoInputFieldProps extends Omit<InputBaseProps, 'size'> {
5
17
  /**
6
18
  * The size of the input field
@@ -87,4 +99,3 @@ export declare const NeoInputField: {
87
99
  ({ size, destructive, label, required, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }: NeoInputFieldProps): import("react/jsx-runtime").JSX.Element;
88
100
  displayName: string;
89
101
  };
90
- export {};
@@ -1,4 +1,5 @@
1
1
  import type { ListItemButtonProps } from '@mui/material/ListItemButton';
2
+ type ListItemButtonVariant = 'card' | 'nav';
2
3
  /**
3
4
  * Props for the NeoListItemButton component
4
5
  */
@@ -15,6 +16,15 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
15
16
  * @figma property1="Disabled"
16
17
  */
17
18
  disabled?: boolean;
19
+ /**
20
+ * Visual treatment.
21
+ * - `card` (default): bordered card-style for settings/radio-list patterns.
22
+ * Expects ListItemIcon + ListItemText children for full styling support.
23
+ * - `nav`: borderless sidebar nav style with subtle hover/selected
24
+ * highlights. Renders children inline; works with plain text.
25
+ * @default 'card'
26
+ */
27
+ variant?: ListItemButtonVariant;
18
28
  }
19
29
  /**
20
30
  * NeoListItemButton - Selectable list item with icon and text
@@ -60,6 +70,7 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
60
70
  * - colors.grey[50] (#f9fafb) - Disabled background
61
71
  */
62
72
  export declare const NeoListItemButton: {
63
- ({ children, selected, disabled, ...props }: NeoListItemButtonProps): import("react/jsx-runtime").JSX.Element;
73
+ ({ children, selected, disabled, variant, ...props }: NeoListItemButtonProps): import("react/jsx-runtime").JSX.Element;
64
74
  displayName: string;
65
75
  };
76
+ export {};
@@ -1,6 +1,6 @@
1
- import { type MenuItemProps } from '@mui/material/MenuItem';
2
- import type { ReactNode } from 'react';
3
- export interface NeoMenuItemProps extends MenuItemProps {
1
+ import MenuItem from '@mui/material/MenuItem';
2
+ import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
3
+ type NeoMenuItemOwnProps = {
4
4
  /**
5
5
  * Optional icon to display on the left side
6
6
  * Note: Cannot be directly mapped from Figma (ReactNode)
@@ -18,16 +18,26 @@ export interface NeoMenuItemProps extends MenuItemProps {
18
18
  * Note: Cannot be directly mapped from Figma (ReactNode/string)
19
19
  */
20
20
  secondaryText?: string;
21
+ /**
22
+ * URL to navigate to. When provided, the menu item renders as an anchor
23
+ * element (via MUI ButtonBase) so users can middle-click or right-click
24
+ * to open in a new tab. For client-side routing, also pass
25
+ * `component={NextLink}` (or your router's link component).
26
+ */
27
+ href?: string;
21
28
  /**
22
29
  * Menu item content (text label)
23
30
  * @figma children mapped from Figma layer content
24
31
  */
25
32
  children?: ReactNode;
26
- }
33
+ };
34
+ export type NeoMenuItemProps<C extends ElementType = typeof MenuItem> = NeoMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof NeoMenuItemOwnProps> & {
35
+ component?: C;
36
+ };
27
37
  /**
28
38
  * NeoMenuItem - Menu item component based on MUI MenuItem
29
39
  *
30
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8584
40
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025-26?node-id=4159-8714
31
41
  *
32
42
  * @example
33
43
  * ```tsx
@@ -42,9 +52,21 @@ export interface NeoMenuItemProps extends MenuItemProps {
42
52
  *
43
53
  * // Disabled state
44
54
  * <NeoMenuItem disabled>Disabled item</NeoMenuItem>
55
+ *
56
+ * // As an anchor — middle-click/right-click open in a new tab
57
+ * <NeoMenuItem href="/api-explorer">API explorer</NeoMenuItem>
58
+ *
59
+ * // External link
60
+ * <NeoMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
61
+ * Documentation
62
+ * </NeoMenuItem>
63
+ *
64
+ * // Client-side routing (Next.js)
65
+ * <NeoMenuItem component={NextLink} href="/api-explorer">API explorer</NeoMenuItem>
45
66
  * ```
46
67
  */
47
- export declare const NeoMenuItem: {
48
- ({ icon, shortcut, secondaryText, children, ...props }: NeoMenuItemProps): import("react/jsx-runtime").JSX.Element;
49
- displayName: string;
50
- };
68
+ export declare function NeoMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, ...rest }: NeoMenuItemProps<C>): import("react/jsx-runtime").JSX.Element;
69
+ export declare namespace NeoMenuItem {
70
+ var displayName: string;
71
+ }
72
+ export {};
@@ -10,6 +10,6 @@ export interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 's
10
10
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
11
11
  */
12
12
  export declare const NeoNavigationAvatar: {
13
- ({ colorIndex, children, ...props }: NeoNavigationAvatarProps): import("react/jsx-runtime").JSX.Element;
13
+ ({ children, ...props }: NeoNavigationAvatarProps): import("react/jsx-runtime").JSX.Element;
14
14
  displayName: string;
15
15
  };
@@ -1,5 +1,6 @@
1
1
  import ButtonBase, { type ButtonBaseProps } from '@mui/material/ButtonBase';
2
2
  import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
3
+ import type { NeoTagOwnProps } from '../Tag/Tag';
3
4
  type NeoNavigationItemOwnProps = {
4
5
  /**
5
6
  * Icon element to display
@@ -16,10 +17,23 @@ type NeoNavigationItemOwnProps = {
16
17
  */
17
18
  selected?: boolean;
18
19
  /**
19
- * Optional tag badge content (e.g., count)
20
+ * Optional tag badge content (e.g., "Beta")
20
21
  * @figma Tag
21
22
  */
22
23
  tag?: string;
24
+ /**
25
+ * Slot props for internal sub-components.
26
+ */
27
+ slotProps?: {
28
+ /**
29
+ * Props forwarded to the NeoTag badge rendered when `tag` is set.
30
+ * Override `intent`, `variant`, or `size` to change appearance — e.g.
31
+ * `{ variant: 'outlined', intent: 'default' }` for a calmer grey badge.
32
+ */
33
+ badge?: NeoTagOwnProps & {
34
+ sx?: Record<string, unknown>;
35
+ };
36
+ };
23
37
  /**
24
38
  * Additional content
25
39
  */
@@ -33,7 +47,7 @@ export type NeoNavigationItemProps<C extends ElementType = typeof ButtonBase> =
33
47
  *
34
48
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
35
49
  */
36
- export declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps<C>): import("react/jsx-runtime").JSX.Element;
50
+ export declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, slotProps, children, ...props }: NeoNavigationItemProps<C>): import("react/jsx-runtime").JSX.Element;
37
51
  export declare namespace NeoNavigationItem {
38
52
  var displayName: string;
39
53
  }
@@ -0,0 +1,9 @@
1
+ import type { GridRenderCellParams } from '@mui/x-data-grid';
2
+ import type { ReactNode } from 'react';
3
+ export interface NeoActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
4
+ api?: GridRenderCellParams['api'];
5
+ children: ReactNode;
6
+ position?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
7
+ suppressChildrenValidation?: boolean;
8
+ }
9
+ export declare function NeoActionsCell(props: NeoActionsCellProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,25 @@
1
+ type NeoAvatarCellBase = {
2
+ disabled?: boolean;
3
+ };
4
+ type NeoAvatarCellEmpty = NeoAvatarCellBase & {
5
+ empty: true;
6
+ name?: never;
7
+ src?: never;
8
+ label?: never;
9
+ };
10
+ type NeoAvatarCellContent = NeoAvatarCellBase & {
11
+ empty?: false;
12
+ name?: string;
13
+ src?: string;
14
+ label?: string;
15
+ };
16
+ export type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
17
+ /**
18
+ * NeoAvatarCell — DataGrid cell displaying a user avatar with optional label.
19
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
20
+ */
21
+ export declare const NeoAvatarCell: {
22
+ ({ name, src, label, disabled, empty, }: NeoAvatarCellProps): import("react/jsx-runtime").JSX.Element;
23
+ displayName: string;
24
+ };
25
+ export {};
@@ -0,0 +1,14 @@
1
+ import type { ReactNode } from 'react';
2
+ export interface NeoIconCellProps {
3
+ icon?: ReactNode;
4
+ ariaLabel?: string;
5
+ disabled?: boolean;
6
+ }
7
+ /**
8
+ * NeoIconCell — Icon cell for DataGrid. Renders an icon centered in the cell.
9
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13272-9345
10
+ */
11
+ export declare const NeoIconCell: {
12
+ ({ icon, ariaLabel, disabled }: NeoIconCellProps): import("react/jsx-runtime").JSX.Element | null;
13
+ displayName: string;
14
+ };
@@ -0,0 +1,24 @@
1
+ type NeoLogoCellNoSrc = {
2
+ src?: undefined;
3
+ alt?: string;
4
+ disabled?: boolean;
5
+ };
6
+ type NeoLogoCellWithSrc = {
7
+ src: string;
8
+ alt: string;
9
+ disabled?: boolean;
10
+ };
11
+ export type NeoLogoCellProps = NeoLogoCellNoSrc | NeoLogoCellWithSrc;
12
+ /**
13
+ * NeoLogoCell — DataGrid cell displaying a raster or SVG logo image.
14
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13278-9558
15
+ *
16
+ * Kept separate from NeoIconCell to match Neo's Icon/Logo component split:
17
+ * - NeoIconCell: MUI SvgIcon components
18
+ * - NeoLogoCell: raster or SVG image URLs (img tag)
19
+ */
20
+ export declare const NeoLogoCell: {
21
+ ({ src, alt, disabled }: NeoLogoCellProps): import("react/jsx-runtime").JSX.Element;
22
+ displayName: string;
23
+ };
24
+ export {};
@@ -0,0 +1,21 @@
1
+ type NeoProgressCellBase = {
2
+ disabled?: boolean;
3
+ };
4
+ type NeoProgressCellEmpty = NeoProgressCellBase & {
5
+ empty: true;
6
+ value?: never;
7
+ };
8
+ type NeoProgressCellContent = NeoProgressCellBase & {
9
+ empty?: false;
10
+ value?: number;
11
+ };
12
+ export type NeoProgressCellProps = NeoProgressCellEmpty | NeoProgressCellContent;
13
+ /**
14
+ * NeoProgressCell — DataGrid cell displaying a linear progress indicator.
15
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13425-5378
16
+ */
17
+ export declare const NeoProgressCell: {
18
+ ({ value, disabled, empty, }: NeoProgressCellProps): import("react/jsx-runtime").JSX.Element;
19
+ displayName: string;
20
+ };
21
+ export {};
@@ -0,0 +1,30 @@
1
+ import type { ReactNode } from 'react';
2
+ export type NeoStatusCellVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';
3
+ type NeoStatusCellBase = {
4
+ disabled?: boolean;
5
+ };
6
+ type NeoStatusCellEmpty = NeoStatusCellBase & {
7
+ empty: true;
8
+ label?: never;
9
+ icon?: never;
10
+ variant?: never;
11
+ details?: never;
12
+ };
13
+ type NeoStatusCellContent = NeoStatusCellBase & {
14
+ empty?: false;
15
+ label: string;
16
+ icon?: ReactNode;
17
+ variant?: NeoStatusCellVariant;
18
+ /** Error details shown in a hover tooltip. Clipboard actions should be handled by the consuming app. */
19
+ details?: string;
20
+ };
21
+ export type NeoStatusCellProps = NeoStatusCellEmpty | NeoStatusCellContent;
22
+ /**
23
+ * NeoStatusCell — DataGrid cell displaying an icon + label chip with optional error tooltip.
24
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13272-8705
25
+ */
26
+ export declare const NeoStatusCell: {
27
+ ({ icon, label, details, disabled, variant, empty, }: NeoStatusCellProps): import("react/jsx-runtime").JSX.Element;
28
+ displayName: string;
29
+ };
30
+ export {};
@@ -73,6 +73,17 @@ export interface NeoPageContentProps extends BoxProps {
73
73
  * @default false
74
74
  */
75
75
  disableGutters?: boolean;
76
+ /**
77
+ * Page layout mode.
78
+ * - `default`: standard centered/max-width-constrained content with
79
+ * gutters. Best for content-driven pages (settings, forms, lists).
80
+ * - `fullBleed`: removes max-width and horizontal/bottom padding, lets
81
+ * the content area flex-fill the viewport. Best for full-height
82
+ * layouts (sidebar + panel canvases, builders, explorers). Title
83
+ * and breadcrumbs still render — they sit at the leading edge.
84
+ * @default 'default'
85
+ */
86
+ layout?: 'default' | 'fullBleed';
76
87
  /**
77
88
  * Loading state - shows spinner while content loads
78
89
  * @default false
@@ -143,7 +154,7 @@ export interface NeoPageContentProps extends BoxProps {
143
154
  * </NeoPageContent>
144
155
  * ```
145
156
  */
146
- export declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
157
+ export declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth: contentMaxWidthProp, centerContent, disableGutters: disableGuttersProp, isLoading, showBackToTop, layout, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
147
158
  export declare namespace NeoPageContent {
148
159
  var displayName: string;
149
160
  }