@moderneinc/neo-styled-components 5.0.0-next.e31f75 → 5.0.0-next.e7f738

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 (41) 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/CanceledIcon/CanceledIcon.d.ts +11 -0
  5. package/dist/Checkbox/Checkbox.d.ts +1 -1
  6. package/dist/DatePickerListItem/DatePickerListItem.d.ts +1 -1
  7. package/dist/DatePickerMenu/DatePickerMenu.d.ts +1 -1
  8. package/dist/Dot/Dot.d.ts +11 -4
  9. package/dist/FilledStatusIcons/FilledStatusIcons.d.ts +41 -0
  10. package/dist/GeneralAvatar/GeneralAvatar.d.ts +1 -7
  11. package/dist/InputField/InputField.d.ts +12 -1
  12. package/dist/ListItemButton/ListItemButton.d.ts +12 -1
  13. package/dist/MenuItem/MenuItem.d.ts +30 -8
  14. package/dist/NavigationAvatar/NavigationAvatar.d.ts +1 -1
  15. package/dist/NavigationItem/NavigationItem.d.ts +9 -2
  16. package/dist/NeoAvatarCell/NeoAvatarCell.d.ts +1 -3
  17. package/dist/PageContent/PageContent.d.ts +12 -1
  18. package/dist/RadioButtonWithText/RadioButtonWithText.d.ts +1 -1
  19. package/dist/RipplingDot/RipplingDot.d.ts +12 -0
  20. package/dist/SelectField/SelectField.d.ts +64 -0
  21. package/dist/SideNav/NeoSideNavContext.d.ts +5 -0
  22. package/dist/SideNav/SideNav.d.ts +19 -6
  23. package/dist/TabPanel/TabPanel.d.ts +47 -0
  24. package/dist/Table/Table.d.ts +64 -0
  25. package/dist/Tabs/Tabs.d.ts +1 -1
  26. package/dist/ToggleButton/ToggleButton.d.ts +19 -4
  27. package/dist/ToggleButtonGroup/ToggleButtonGroup.d.ts +26 -0
  28. package/dist/ToggleButtonWithText/ToggleButtonWithText.d.ts +1 -1
  29. package/dist/Tooltip/Tooltip.d.ts +8 -5
  30. package/dist/TopNav/TopNav.d.ts +1 -1
  31. package/dist/TourModal/TourModal.d.ts +1 -1
  32. package/dist/TypologyControl/TypologyControl.d.ts +1 -1
  33. package/dist/VibratingDot/VibratingDot.d.ts +12 -0
  34. package/dist/index.d.ts +429 -70
  35. package/dist/index.esm.js +927 -401
  36. package/dist/index.esm.js.map +1 -1
  37. package/dist/index.js +938 -398
  38. package/dist/index.js.map +1 -1
  39. package/dist/utils/colorHelpers.d.ts +6 -0
  40. package/package.json +5 -5
  41. 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 {
@@ -0,0 +1,11 @@
1
+ import { type SvgIconProps } from '@mui/material/SvgIcon';
2
+ /**
3
+ * NeoCanceledIcon - Outlined circle struck through by a horizontal line.
4
+ *
5
+ * Marks a CANCELED state. Color comes entirely from `currentColor` (stroke plus
6
+ * a 10% fill tint); set it via the `color`/`sx` prop or a parent.
7
+ */
8
+ export declare const NeoCanceledIcon: {
9
+ (props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
10
+ displayName: string;
11
+ };
@@ -15,7 +15,7 @@ declare module '@mui/material/Checkbox' {
15
15
  medium: true;
16
16
  }
17
17
  }
18
- declare const StyledCheckbox: import("@emotion/styled").StyledComponent<CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
18
+ declare const StyledCheckbox: import("@emotion/styled").StyledComponent<CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
19
19
  size?: CheckboxSize;
20
20
  disabled?: boolean;
21
21
  }, {}, {}>;
@@ -3,4 +3,4 @@
3
3
  *
4
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8521
5
5
  */
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>, {}>;
6
+ export declare const NeoDatePickerListItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -3,4 +3,4 @@
3
3
  *
4
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8593
5
5
  */
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>, {}>;
6
+ export declare const NeoDatePickerMenu: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").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 {};
@@ -0,0 +1,41 @@
1
+ import { type SvgIconProps } from '@mui/material/SvgIcon';
2
+ /**
3
+ * Filled status icons — sourced from the published Figma library components
4
+ * Filled_Success / Filled_Queued / Filled_Info / Filled_Warning / Filled_Error /
5
+ * Filled_Neutral / Filled_Canceled.
6
+ *
7
+ * Designed at 16px; size via `fontSize` like any MUI `SvgIcon`. Each ships its
8
+ * intent's status color baked into the silhouette with a white inner glyph — the
9
+ * fill is fixed, so `color`/`htmlColor` are omitted from the props. There is no
10
+ * Filled_Active (the open-arc spinner cannot fill). Use below 18px; above that,
11
+ * prefer the Lucide outline glyph.
12
+ */
13
+ export type NeoFilledStatusIconProps = Omit<SvgIconProps, 'color' | 'htmlColor'>;
14
+ export declare const NeoFilledSuccess: {
15
+ (props: NeoFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
16
+ displayName: string;
17
+ };
18
+ export declare const NeoFilledQueued: {
19
+ (props: NeoFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
20
+ displayName: string;
21
+ };
22
+ export declare const NeoFilledInfo: {
23
+ (props: NeoFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
24
+ displayName: string;
25
+ };
26
+ export declare const NeoFilledWarning: {
27
+ (props: NeoFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
28
+ displayName: string;
29
+ };
30
+ export declare const NeoFilledError: {
31
+ (props: NeoFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
32
+ displayName: string;
33
+ };
34
+ export declare const NeoFilledNeutral: {
35
+ (props: NeoFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
36
+ displayName: string;
37
+ };
38
+ export declare const NeoFilledCanceled: {
39
+ (props: NeoFilledStatusIconProps): import("react/jsx-runtime").JSX.Element;
40
+ displayName: string;
41
+ };
@@ -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").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").Theme> & {
6
+ size?: InputFieldSize;
7
+ }, {}, {}>;
8
+ export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material").InputLabelOwnProps & Pick<import("@mui/material").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").Theme> & {
9
+ size?: InputFieldSize;
10
+ infoIcon?: boolean;
11
+ }, {}, {}>;
12
+ export declare const InfoIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
13
+ export declare const StyledFormHelperText: import("@emotion/styled").StyledComponent<import("@mui/material").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").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,12 +18,22 @@ 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
  *
@@ -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
  };
@@ -21,6 +21,11 @@ type NeoNavigationItemOwnProps = {
21
21
  * @figma Tag
22
22
  */
23
23
  tag?: string;
24
+ /**
25
+ * Hover tooltip shown only when the surrounding NeoSideNav is collapsed
26
+ * (and the label is therefore hidden).
27
+ */
28
+ tooltip?: ReactNode;
24
29
  /**
25
30
  * Slot props for internal sub-components.
26
31
  */
@@ -30,7 +35,9 @@ type NeoNavigationItemOwnProps = {
30
35
  * Override `intent`, `variant`, or `size` to change appearance — e.g.
31
36
  * `{ variant: 'outlined', intent: 'default' }` for a calmer grey badge.
32
37
  */
33
- badge?: NeoTagOwnProps;
38
+ badge?: NeoTagOwnProps & {
39
+ sx?: Record<string, unknown>;
40
+ };
34
41
  };
35
42
  /**
36
43
  * Additional content
@@ -45,7 +52,7 @@ export type NeoNavigationItemProps<C extends ElementType = typeof ButtonBase> =
45
52
  *
46
53
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
47
54
  */
48
- export declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, slotProps, children, ...props }: NeoNavigationItemProps<C>): import("react/jsx-runtime").JSX.Element;
55
+ export declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, tooltip, slotProps, children, ...props }: NeoNavigationItemProps<C>): import("react/jsx-runtime").JSX.Element;
49
56
  export declare namespace NeoNavigationItem {
50
57
  var displayName: string;
51
58
  }
@@ -5,14 +5,12 @@ type NeoAvatarCellEmpty = NeoAvatarCellBase & {
5
5
  empty: true;
6
6
  name?: never;
7
7
  src?: never;
8
- colorIndex?: never;
9
8
  label?: never;
10
9
  };
11
10
  type NeoAvatarCellContent = NeoAvatarCellBase & {
12
11
  empty?: false;
13
12
  name?: string;
14
13
  src?: string;
15
- colorIndex?: number;
16
14
  label?: string;
17
15
  };
18
16
  export type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
@@ -21,7 +19,7 @@ export type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
21
19
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
22
20
  */
23
21
  export declare const NeoAvatarCell: {
24
- ({ name, src, colorIndex, label, disabled, empty, }: NeoAvatarCellProps): import("react/jsx-runtime").JSX.Element;
22
+ ({ name, src, label, disabled, empty, }: NeoAvatarCellProps): import("react/jsx-runtime").JSX.Element;
25
23
  displayName: string;
26
24
  };
27
25
  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
  }
@@ -3,4 +3,4 @@
3
3
  *
4
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11565-7682
5
5
  */
6
- export declare const NeoRadioButtonWithText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
6
+ export declare const NeoRadioButtonWithText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -0,0 +1,12 @@
1
+ import { type BoxProps } from '@mui/material';
2
+ import type { FunctionComponent } from 'react';
3
+ export interface NeoRipplingDotProps extends BoxProps {
4
+ }
5
+ /**
6
+ * NeoRipplingDot - Animated status dot with an expanding ripple ring.
7
+ *
8
+ * Indicates an in-progress, indeterminate state (RUNNING / SYNCING / PROCESSING).
9
+ * Color is inherited from `currentColor`; set it via the `color`/`sx` prop or a
10
+ * parent. Sized to the lowercase-letter height regardless of parent fontSize.
11
+ */
12
+ export declare const NeoRipplingDot: FunctionComponent<NeoRipplingDotProps>;
@@ -0,0 +1,64 @@
1
+ import type { SelectChangeEvent, SelectProps } from '@mui/material/Select';
2
+ import type { ReactNode } from 'react';
3
+ import { type NeoInputFieldSize } from '../InputField/InputField';
4
+ import { NeoSelectOption } from '../Select/Select';
5
+ export interface NeoSelectFieldOption {
6
+ value: string | number;
7
+ label: ReactNode;
8
+ disabled?: boolean;
9
+ }
10
+ export interface NeoSelectFieldProps extends Omit<SelectProps, 'size' | 'variant' | 'error' | 'children'> {
11
+ /**
12
+ * Form-control size.
13
+ * @default 'medium'
14
+ */
15
+ size?: NeoInputFieldSize;
16
+ /**
17
+ * Show error/destructive state with red label + helper text styling.
18
+ * @default false
19
+ */
20
+ destructive?: boolean;
21
+ /** Label text rendered above the select. */
22
+ label?: string;
23
+ /** Show required indicator (asterisk) next to the label. @default false */
24
+ required?: boolean;
25
+ /** Optional info icon rendered next to the label. */
26
+ infoIcon?: ReactNode;
27
+ /** Helper text rendered below the select (normal state). */
28
+ helperText?: string;
29
+ /**
30
+ * Error message rendered below the select when `destructive` is true.
31
+ * Takes precedence over helperText when destructive.
32
+ */
33
+ errorMessage?: string;
34
+ /**
35
+ * Convenience option list. Each entry becomes a NeoSelectOption.
36
+ * Use `children` instead for custom option content.
37
+ */
38
+ options?: NeoSelectFieldOption[];
39
+ /** Custom option content. Overrides `options` if both are provided. */
40
+ children?: ReactNode;
41
+ }
42
+ /**
43
+ * NeoSelectField — composite of NeoInputField's form chrome (label,
44
+ * helper text, error state) wrapped around NeoSelect. Mirrors the
45
+ * MUI `<TextField select>` ergonomics with Neo design tokens, so
46
+ * consumers don't have to compose the two manually.
47
+ *
48
+ * @example
49
+ * <NeoSelectField
50
+ * label="Response format"
51
+ * value={format}
52
+ * onChange={e => setFormat(e.target.value)}
53
+ * options={[
54
+ * { value: 'json', label: 'JSON' },
55
+ * { value: 'plain', label: 'Plain text' },
56
+ * ]}
57
+ * />
58
+ */
59
+ export declare const NeoSelectField: {
60
+ ({ size, destructive, label, required, infoIcon, helperText, errorMessage, options, children, disabled, id, ...selectProps }: NeoSelectFieldProps): import("react/jsx-runtime").JSX.Element;
61
+ displayName: string;
62
+ };
63
+ export { NeoSelectOption };
64
+ export type NeoSelectFieldChangeEvent<T = unknown> = SelectChangeEvent<T>;
@@ -0,0 +1,5 @@
1
+ export type NeoSideNavContextValue = {
2
+ collapsed: boolean;
3
+ };
4
+ export declare const NeoSideNavContext: import("react").Context<NeoSideNavContextValue>;
5
+ export declare const useNeoSideNav: () => NeoSideNavContextValue;
@@ -1,6 +1,19 @@
1
- /**
2
- * NeoSideNav
3
- *
4
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4065-3425
5
- */
6
- export declare const NeoSideNav: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1
+ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
+ export type NeoSideNavProps = {
3
+ /** Controlled collapsed state. */
4
+ collapsed: boolean;
5
+ /** Called with the next collapsed value when the toggle is activated. */
6
+ onCollapsedChange: (next: boolean) => void;
7
+ /** Fixed top slot (e.g. product logo). */
8
+ header?: ReactNode;
9
+ /** Fixed bottom slot (e.g. tenant branding), rendered above the toggle. */
10
+ footer?: ReactNode;
11
+ /** Scrolling content slot — the nav items. */
12
+ children: ReactNode;
13
+ /** Toggle label shown when expanded. Default "Less". */
14
+ collapseLabel?: string;
15
+ } & Pick<ComponentPropsWithoutRef<'nav'>, 'className' | 'id' | 'aria-label'>;
16
+ export declare function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, collapseLabel, ...rest }: NeoSideNavProps): import("react/jsx-runtime").JSX.Element;
17
+ export declare namespace NeoSideNav {
18
+ var displayName: string;
19
+ }
@@ -0,0 +1,47 @@
1
+ import { type BoxProps } from '@mui/material/Box';
2
+ import type { ReactNode } from 'react';
3
+ type TabPanelVariant = 'default' | 'flush';
4
+ export interface NeoTabPanelProps extends Omit<BoxProps, 'role'> {
5
+ /** This panel's identity — must match `currentValue` for the panel to render. */
6
+ value: string | number;
7
+ /**
8
+ * The currently selected tab value. When equal to `value`, this panel
9
+ * renders its children. Otherwise the panel is hidden (and removed from
10
+ * the accessibility tree via `hidden`).
11
+ */
12
+ currentValue: string | number;
13
+ /**
14
+ * Layout density.
15
+ * - `default`: 16px top padding — for standard content tabs.
16
+ * - `flush`: zero padding — for full-bleed sidebar/panel/canvas layouts
17
+ * where content must sit flush against the tab bar's bottom border.
18
+ * @default 'default'
19
+ */
20
+ variant?: TabPanelVariant;
21
+ /** Panel content. */
22
+ children?: ReactNode;
23
+ }
24
+ /**
25
+ * NeoTabPanel — completes the NeoTabs + NeoTab + NeoTabPanel set.
26
+ *
27
+ * Lightweight ARIA-compliant tab panel that renders children when its
28
+ * `value` matches `currentValue`. No MUI Lab / TabContext dependency.
29
+ *
30
+ * @example
31
+ * const [tab, setTab] = useState('overview')
32
+ * return (
33
+ * <>
34
+ * <NeoTabs value={tab} onChange={(_, v) => setTab(v)}>
35
+ * <NeoTab value="overview" label="Overview" />
36
+ * <NeoTab value="details" label="Details" />
37
+ * </NeoTabs>
38
+ * <NeoTabPanel value="overview" currentValue={tab}>...</NeoTabPanel>
39
+ * <NeoTabPanel value="details" currentValue={tab} variant="flush">...</NeoTabPanel>
40
+ * </>
41
+ * )
42
+ */
43
+ export declare const NeoTabPanel: {
44
+ ({ value, currentValue, variant, children, ...boxProps }: NeoTabPanelProps): import("react/jsx-runtime").JSX.Element;
45
+ displayName: string;
46
+ };
47
+ export {};