@moderneinc/neo-styled-components 2.4.0 → 2.5.0-next.6c669a
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.
- package/dist/ActivityHeader/ActivityHeader.d.ts +1 -0
- package/dist/ButtonGroup/ButtonGroup.d.ts +0 -1
- package/dist/CodeSnippet/CodeSnippet.d.ts +3 -3
- package/dist/FilterChip/FilterChip.d.ts +42 -0
- package/dist/IconWrapper/IconWrapper.d.ts +23 -0
- package/dist/ListItemButton/ListItemButton.d.ts +5 -4
- package/dist/MenuItem/MenuItem.d.ts +4 -2
- package/dist/NavigationItem/NavigationItem.d.ts +36 -0
- package/dist/StatusBanner/StatusBanner.d.ts +4 -3
- package/dist/Tag/Tag.d.ts +4 -3
- package/dist/index.d.ts +65 -18
- package/dist/index.esm.js +428 -195
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +429 -193
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -34,6 +34,7 @@ export interface NeoActivityHeaderProps {
|
|
|
34
34
|
*
|
|
35
35
|
* **Figma Props Mapping:**
|
|
36
36
|
* - `Size` (Figma) → `size` (React): Height variant matching DataGrid sizes
|
|
37
|
+
* - `Type` (Figma) → `color` (React): Activity type (Commit Job → commitJob, Recipe Run → recipeRun, Visualization → visualization)
|
|
37
38
|
*
|
|
38
39
|
* **Design Tokens:**
|
|
39
40
|
* - `semanticColors.activity.commitJob` - Blue dot for commit job events (#2F42FF)
|
|
@@ -21,7 +21,6 @@ export interface NeoButtonGroupProps extends Omit<MuiButtonGroupProps, 'size' |
|
|
|
21
21
|
*
|
|
22
22
|
* Figma Props Mapping:
|
|
23
23
|
* - Size (Sm|Md) → size prop (small|medium)
|
|
24
|
-
* - Icon=False → Icon support not included in this implementation
|
|
25
24
|
* - Active button state → Controlled externally via button props or classes
|
|
26
25
|
*
|
|
27
26
|
* Usage:
|
|
@@ -7,7 +7,7 @@ declare module '@mui/material/ButtonBase' {
|
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
type CodeSnippetVariant = 'outlined' | 'filled';
|
|
10
|
-
type CodeSnippetSize = 'xs' | 'small' | 'large';
|
|
10
|
+
type CodeSnippetSize = 'xs' | 'small' | 'large' | 'inline';
|
|
11
11
|
export interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
|
|
12
12
|
/**
|
|
13
13
|
* The visual variant of the code snippet
|
|
@@ -20,7 +20,7 @@ export interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
20
20
|
* The size of the code snippet
|
|
21
21
|
* @default "small"
|
|
22
22
|
*
|
|
23
|
-
* @figma size (xs|small|large)
|
|
23
|
+
* @figma size (xs|small|large|inline)
|
|
24
24
|
*/
|
|
25
25
|
size?: CodeSnippetSize;
|
|
26
26
|
/**
|
|
@@ -39,7 +39,7 @@ export interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
39
39
|
*
|
|
40
40
|
* Figma Props Mapping:
|
|
41
41
|
* - Color (Light|Dark) → variant (outlined|filled)
|
|
42
|
-
* - size (Single line|multiline) → auto-detected
|
|
42
|
+
* - size (Single line|multiline|inline) → size prop + auto-detected multiline
|
|
43
43
|
* - Copy button → endIcon (ReactNode)
|
|
44
44
|
* - Text content → children prop
|
|
45
45
|
*/
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { type ChipProps } from '@mui/material/Chip';
|
|
2
|
+
export interface NeoFilterChipProps extends Omit<ChipProps, 'variant' | 'color' | 'label'> {
|
|
3
|
+
/**
|
|
4
|
+
* The filter label text
|
|
5
|
+
*/
|
|
6
|
+
label: string;
|
|
7
|
+
/**
|
|
8
|
+
* Whether the filter has active selections
|
|
9
|
+
* @default false
|
|
10
|
+
*/
|
|
11
|
+
selected?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Whether the filter dropdown is expanded
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
expanded?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Value text shown when selected (e.g. "Filter 1, Filter 2")
|
|
19
|
+
*/
|
|
20
|
+
selectedLabel?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Number of active filter selections (shown as badge when selected)
|
|
23
|
+
* @default 0
|
|
24
|
+
*/
|
|
25
|
+
count?: number;
|
|
26
|
+
/**
|
|
27
|
+
* Handler for clearing the filter (shows X icon when provided and selected)
|
|
28
|
+
*/
|
|
29
|
+
onClear?: (e: React.MouseEvent) => void;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* NeoFilterChip - Filter chip for filtering data, based on MUI Chip.
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* <NeoFilterChip label="Status" selected selectedLabel="Active, Pending" count={2} onClear={handleClear} />
|
|
36
|
+
*
|
|
37
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8257-239
|
|
38
|
+
*/
|
|
39
|
+
export declare const NeoFilterChip: {
|
|
40
|
+
({ label, selected, expanded, selectedLabel, count, onClear, onClick, ...props }: NeoFilterChipProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
displayName: string;
|
|
42
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
export type IconWrapperSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | 128 | 160 | 192;
|
|
3
|
+
export interface NeoIconWrapperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
4
|
+
/**
|
|
5
|
+
* The size of the icon wrapper in pixels
|
|
6
|
+
* @figma Size (8px|12px|...|192px)
|
|
7
|
+
* @default 20
|
|
8
|
+
*/
|
|
9
|
+
size?: IconWrapperSize;
|
|
10
|
+
/**
|
|
11
|
+
* Icon element to render inside the wrapper
|
|
12
|
+
*/
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* NeoIconWrapper - Flex-centered container that sizes icons
|
|
17
|
+
*
|
|
18
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4061-9955
|
|
19
|
+
*/
|
|
20
|
+
export declare const NeoIconWrapper: {
|
|
21
|
+
({ size, children, ...props }: NeoIconWrapperProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
displayName: string;
|
|
23
|
+
};
|
|
@@ -20,7 +20,7 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
|
|
|
20
20
|
* NeoListItemButton - Selectable list item with icon and text
|
|
21
21
|
*
|
|
22
22
|
* A selectable list item component that displays an optional icon with primary
|
|
23
|
-
* and secondary text. Supports active (selected), deselected, and disabled states.
|
|
23
|
+
* and secondary text. Supports active (selected), deselected, focus, and disabled states.
|
|
24
24
|
*
|
|
25
25
|
* Uses MUI's ListItemButton as base for proper accessibility and interaction.
|
|
26
26
|
* Compose with ListItemIcon and ListItemText for proper structure.
|
|
@@ -41,9 +41,10 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
|
|
|
41
41
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4925-3764
|
|
42
42
|
*
|
|
43
43
|
* Figma Props Mapping:
|
|
44
|
-
* -
|
|
45
|
-
* -
|
|
46
|
-
* -
|
|
44
|
+
* - state="active" → selected={true}
|
|
45
|
+
* - state="deselected" → selected={false}
|
|
46
|
+
* - state="focus" → focus-visible CSS state
|
|
47
|
+
* - state="disabled" → disabled={true}
|
|
47
48
|
* - showIcon → Conditional rendering of ListItemIcon child
|
|
48
49
|
*
|
|
49
50
|
* Design Tokens Used:
|
|
@@ -30,9 +30,11 @@ export interface NeoMenuItemProps extends MenuItemProps {
|
|
|
30
30
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
|
|
31
31
|
*
|
|
32
32
|
* Figma Props Mapping:
|
|
33
|
+
* - Figma "Dropdown - Menu" component uses Type (Avatar|Button|Icon) and Open (True|False)
|
|
34
|
+
* to control the menu trigger. NeoMenuItem is the individual item inside the menu.
|
|
33
35
|
* - Text label → children prop (mapped via figma.children)
|
|
34
|
-
* -
|
|
35
|
-
* -
|
|
36
|
+
* - selected → selected prop (React-controlled)
|
|
37
|
+
* - disabled → disabled prop (React-controlled)
|
|
36
38
|
* - Hover state → CSS :hover (not mapped)
|
|
37
39
|
* - Icon slot → icon prop (not mappable - ReactNode)
|
|
38
40
|
* - Secondary text → secondaryText prop (not mappable - ReactNode/string)
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { type ButtonBaseProps } from '@mui/material/ButtonBase';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
export interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
|
|
4
|
+
/**
|
|
5
|
+
* Icon element to display
|
|
6
|
+
*/
|
|
7
|
+
icon?: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Text label below the icon
|
|
10
|
+
*/
|
|
11
|
+
label?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Whether the item is selected/active
|
|
14
|
+
* @figma State (Selected)
|
|
15
|
+
* @default false
|
|
16
|
+
*/
|
|
17
|
+
selected?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Optional tag badge content (e.g., count)
|
|
20
|
+
* @figma Tag
|
|
21
|
+
*/
|
|
22
|
+
tag?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Additional content
|
|
25
|
+
*/
|
|
26
|
+
children?: ReactNode;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
|
|
30
|
+
*
|
|
31
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
|
|
32
|
+
*/
|
|
33
|
+
export declare const NeoNavigationItem: {
|
|
34
|
+
({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
displayName: string;
|
|
36
|
+
};
|
|
@@ -9,7 +9,7 @@ export interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'var
|
|
|
9
9
|
* @default "success"
|
|
10
10
|
* @figma Status
|
|
11
11
|
*/
|
|
12
|
-
severity?: 'success' | 'error' | 'neutral';
|
|
12
|
+
severity?: 'success' | 'error' | 'neutral' | 'info';
|
|
13
13
|
/**
|
|
14
14
|
* The visual variant style
|
|
15
15
|
* @default "outlined"
|
|
@@ -28,19 +28,20 @@ export interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'var
|
|
|
28
28
|
/**
|
|
29
29
|
* NeoStatusBanner - Status banner component for displaying system status messages
|
|
30
30
|
*
|
|
31
|
-
* Displays status information with different severity levels (success, error, neutral) and
|
|
31
|
+
* Displays status information with different severity levels (success, error, info, neutral) and
|
|
32
32
|
* visual modes (outlined for light backgrounds, filled for emphasis).
|
|
33
33
|
*
|
|
34
34
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
|
|
35
35
|
*
|
|
36
36
|
* Figma Props Mapping:
|
|
37
|
-
* - Status (Success|Error|Offline) → severity ('success'|'error'|'neutral')
|
|
37
|
+
* - Status (Success|Error|Info|Offline) → severity ('success'|'error'|'info'|'neutral')
|
|
38
38
|
* - Mode (Light|Dark) → variant ('outlined'|'filled')
|
|
39
39
|
*
|
|
40
40
|
* Design Tokens Used:
|
|
41
41
|
* - status.success.light, status.success.medium
|
|
42
42
|
* - status.error.light, status.error.medium
|
|
43
43
|
* - status.neutral.light, status.neutral.medium
|
|
44
|
+
* - status.info.light, status.info.medium
|
|
44
45
|
* - typography.tooltip, typography.bodySecondary
|
|
45
46
|
* - grey[800]
|
|
46
47
|
* - fontSize.default, fontSize.sm
|
package/dist/Tag/Tag.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { type ChipProps } from '@mui/material/Chip';
|
|
|
2
2
|
declare module '@mui/material/Chip' {
|
|
3
3
|
interface ChipPropsColorOverrides {
|
|
4
4
|
violet: true;
|
|
5
|
+
beta: true;
|
|
5
6
|
}
|
|
6
7
|
interface ChipPropsSizeOverrides {
|
|
7
8
|
large: true;
|
|
@@ -26,10 +27,10 @@ export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
|
|
|
26
27
|
variant?: 'outlined' | 'filled';
|
|
27
28
|
/**
|
|
28
29
|
* The color/state of the tag
|
|
29
|
-
* @figma state (Neutral|Error|Warning|Success|Info|Violet)
|
|
30
|
+
* @figma state (Neutral|Error|Warning|Success|Info|Violet|Beta)
|
|
30
31
|
* @default "default"
|
|
31
32
|
*/
|
|
32
|
-
color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet';
|
|
33
|
+
color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
|
|
33
34
|
}
|
|
34
35
|
/**
|
|
35
36
|
* NeoTag - Small pill-shaped label component based on MUI Chip
|
|
@@ -39,7 +40,7 @@ export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
|
|
|
39
40
|
* Figma Props Mapping:
|
|
40
41
|
* - m (sm|md|lg) → size (small|medium|large)
|
|
41
42
|
* - type (light|dark) → variant (outlined|filled)
|
|
42
|
-
* - state (Neutral|Error|Warning|Success|Info|Violet) → color (default|error|warning|success|info|violet)
|
|
43
|
+
* - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
|
|
43
44
|
* - Label text → label prop
|
|
44
45
|
*/
|
|
45
46
|
export declare const NeoTag: {
|
package/dist/index.d.ts
CHANGED
|
@@ -184,6 +184,7 @@ interface NeoActivityHeaderProps {
|
|
|
184
184
|
*
|
|
185
185
|
* **Figma Props Mapping:**
|
|
186
186
|
* - `Size` (Figma) → `size` (React): Height variant matching DataGrid sizes
|
|
187
|
+
* - `Type` (Figma) → `color` (React): Activity type (Commit Job → commitJob, Recipe Run → recipeRun, Visualization → visualization)
|
|
187
188
|
*
|
|
188
189
|
* **Design Tokens:**
|
|
189
190
|
* - `semanticColors.activity.commitJob` - Blue dot for commit job events (#2F42FF)
|
|
@@ -563,7 +564,6 @@ interface NeoButtonGroupProps extends Omit<ButtonGroupProps, 'size' | 'variant'>
|
|
|
563
564
|
*
|
|
564
565
|
* Figma Props Mapping:
|
|
565
566
|
* - Size (Sm|Md) → size prop (small|medium)
|
|
566
|
-
* - Icon=False → Icon support not included in this implementation
|
|
567
567
|
* - Active button state → Controlled externally via button props or classes
|
|
568
568
|
*
|
|
569
569
|
* Usage:
|
|
@@ -737,7 +737,7 @@ declare module '@mui/material/ButtonBase' {
|
|
|
737
737
|
}
|
|
738
738
|
}
|
|
739
739
|
type CodeSnippetVariant = 'outlined' | 'filled';
|
|
740
|
-
type CodeSnippetSize = 'xs' | 'small' | 'large';
|
|
740
|
+
type CodeSnippetSize = 'xs' | 'small' | 'large' | 'inline';
|
|
741
741
|
interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
|
|
742
742
|
/**
|
|
743
743
|
* The visual variant of the code snippet
|
|
@@ -750,7 +750,7 @@ interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
750
750
|
* The size of the code snippet
|
|
751
751
|
* @default "small"
|
|
752
752
|
*
|
|
753
|
-
* @figma size (xs|small|large)
|
|
753
|
+
* @figma size (xs|small|large|inline)
|
|
754
754
|
*/
|
|
755
755
|
size?: CodeSnippetSize;
|
|
756
756
|
/**
|
|
@@ -769,7 +769,7 @@ interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
769
769
|
*
|
|
770
770
|
* Figma Props Mapping:
|
|
771
771
|
* - Color (Light|Dark) → variant (outlined|filled)
|
|
772
|
-
* - size (Single line|multiline) → auto-detected
|
|
772
|
+
* - size (Single line|multiline|inline) → size prop + auto-detected multiline
|
|
773
773
|
* - Copy button → endIcon (ReactNode)
|
|
774
774
|
* - Text content → children prop
|
|
775
775
|
*/
|
|
@@ -1095,9 +1095,11 @@ interface NeoMenuItemProps extends MenuItemProps {
|
|
|
1095
1095
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
|
|
1096
1096
|
*
|
|
1097
1097
|
* Figma Props Mapping:
|
|
1098
|
+
* - Figma "Dropdown - Menu" component uses Type (Avatar|Button|Icon) and Open (True|False)
|
|
1099
|
+
* to control the menu trigger. NeoMenuItem is the individual item inside the menu.
|
|
1098
1100
|
* - Text label → children prop (mapped via figma.children)
|
|
1099
|
-
* -
|
|
1100
|
-
* -
|
|
1101
|
+
* - selected → selected prop (React-controlled)
|
|
1102
|
+
* - disabled → disabled prop (React-controlled)
|
|
1101
1103
|
* - Hover state → CSS :hover (not mapped)
|
|
1102
1104
|
* - Icon slot → icon prop (not mappable - ReactNode)
|
|
1103
1105
|
* - Secondary text → secondaryText prop (not mappable - ReactNode/string)
|
|
@@ -1296,6 +1298,48 @@ declare const NeoDot: {
|
|
|
1296
1298
|
displayName: string;
|
|
1297
1299
|
};
|
|
1298
1300
|
|
|
1301
|
+
interface NeoFilterChipProps extends Omit<ChipProps, 'variant' | 'color' | 'label'> {
|
|
1302
|
+
/**
|
|
1303
|
+
* The filter label text
|
|
1304
|
+
*/
|
|
1305
|
+
label: string;
|
|
1306
|
+
/**
|
|
1307
|
+
* Whether the filter has active selections
|
|
1308
|
+
* @default false
|
|
1309
|
+
*/
|
|
1310
|
+
selected?: boolean;
|
|
1311
|
+
/**
|
|
1312
|
+
* Whether the filter dropdown is expanded
|
|
1313
|
+
* @default false
|
|
1314
|
+
*/
|
|
1315
|
+
expanded?: boolean;
|
|
1316
|
+
/**
|
|
1317
|
+
* Value text shown when selected (e.g. "Filter 1, Filter 2")
|
|
1318
|
+
*/
|
|
1319
|
+
selectedLabel?: string;
|
|
1320
|
+
/**
|
|
1321
|
+
* Number of active filter selections (shown as badge when selected)
|
|
1322
|
+
* @default 0
|
|
1323
|
+
*/
|
|
1324
|
+
count?: number;
|
|
1325
|
+
/**
|
|
1326
|
+
* Handler for clearing the filter (shows X icon when provided and selected)
|
|
1327
|
+
*/
|
|
1328
|
+
onClear?: (e: React.MouseEvent) => void;
|
|
1329
|
+
}
|
|
1330
|
+
/**
|
|
1331
|
+
* NeoFilterChip - Filter chip for filtering data, based on MUI Chip.
|
|
1332
|
+
*
|
|
1333
|
+
* @example
|
|
1334
|
+
* <NeoFilterChip label="Status" selected selectedLabel="Active, Pending" count={2} onClear={handleClear} />
|
|
1335
|
+
*
|
|
1336
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8257-239
|
|
1337
|
+
*/
|
|
1338
|
+
declare const NeoFilterChip: {
|
|
1339
|
+
({ label, selected, expanded, selectedLabel, count, onClear, onClick, ...props }: NeoFilterChipProps): react_jsx_runtime.JSX.Element;
|
|
1340
|
+
displayName: string;
|
|
1341
|
+
};
|
|
1342
|
+
|
|
1299
1343
|
type IconButtonSize = 'small' | 'medium';
|
|
1300
1344
|
interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
|
|
1301
1345
|
/**
|
|
@@ -1963,7 +2007,7 @@ interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'variant'>
|
|
|
1963
2007
|
* @default "success"
|
|
1964
2008
|
* @figma Status
|
|
1965
2009
|
*/
|
|
1966
|
-
severity?: 'success' | 'error' | 'neutral';
|
|
2010
|
+
severity?: 'success' | 'error' | 'neutral' | 'info';
|
|
1967
2011
|
/**
|
|
1968
2012
|
* The visual variant style
|
|
1969
2013
|
* @default "outlined"
|
|
@@ -1982,19 +2026,20 @@ interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'variant'>
|
|
|
1982
2026
|
/**
|
|
1983
2027
|
* NeoStatusBanner - Status banner component for displaying system status messages
|
|
1984
2028
|
*
|
|
1985
|
-
* Displays status information with different severity levels (success, error, neutral) and
|
|
2029
|
+
* Displays status information with different severity levels (success, error, info, neutral) and
|
|
1986
2030
|
* visual modes (outlined for light backgrounds, filled for emphasis).
|
|
1987
2031
|
*
|
|
1988
2032
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
|
|
1989
2033
|
*
|
|
1990
2034
|
* Figma Props Mapping:
|
|
1991
|
-
* - Status (Success|Error|Offline) → severity ('success'|'error'|'neutral')
|
|
2035
|
+
* - Status (Success|Error|Info|Offline) → severity ('success'|'error'|'info'|'neutral')
|
|
1992
2036
|
* - Mode (Light|Dark) → variant ('outlined'|'filled')
|
|
1993
2037
|
*
|
|
1994
2038
|
* Design Tokens Used:
|
|
1995
2039
|
* - status.success.light, status.success.medium
|
|
1996
2040
|
* - status.error.light, status.error.medium
|
|
1997
2041
|
* - status.neutral.light, status.neutral.medium
|
|
2042
|
+
* - status.info.light, status.info.medium
|
|
1998
2043
|
* - typography.tooltip, typography.bodySecondary
|
|
1999
2044
|
* - grey[800]
|
|
2000
2045
|
* - fontSize.default, fontSize.sm
|
|
@@ -2060,6 +2105,7 @@ declare const NeoTab: {
|
|
|
2060
2105
|
declare module '@mui/material/Chip' {
|
|
2061
2106
|
interface ChipPropsColorOverrides {
|
|
2062
2107
|
violet: true;
|
|
2108
|
+
beta: true;
|
|
2063
2109
|
}
|
|
2064
2110
|
interface ChipPropsSizeOverrides {
|
|
2065
2111
|
large: true;
|
|
@@ -2084,10 +2130,10 @@ interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
|
|
|
2084
2130
|
variant?: 'outlined' | 'filled';
|
|
2085
2131
|
/**
|
|
2086
2132
|
* The color/state of the tag
|
|
2087
|
-
* @figma state (Neutral|Error|Warning|Success|Info|Violet)
|
|
2133
|
+
* @figma state (Neutral|Error|Warning|Success|Info|Violet|Beta)
|
|
2088
2134
|
* @default "default"
|
|
2089
2135
|
*/
|
|
2090
|
-
color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet';
|
|
2136
|
+
color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
|
|
2091
2137
|
}
|
|
2092
2138
|
/**
|
|
2093
2139
|
* NeoTag - Small pill-shaped label component based on MUI Chip
|
|
@@ -2097,7 +2143,7 @@ interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
|
|
|
2097
2143
|
* Figma Props Mapping:
|
|
2098
2144
|
* - m (sm|md|lg) → size (small|medium|large)
|
|
2099
2145
|
* - type (light|dark) → variant (outlined|filled)
|
|
2100
|
-
* - state (Neutral|Error|Warning|Success|Info|Violet) → color (default|error|warning|success|info|violet)
|
|
2146
|
+
* - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
|
|
2101
2147
|
* - Label text → label prop
|
|
2102
2148
|
*/
|
|
2103
2149
|
declare const NeoTag: {
|
|
@@ -2401,7 +2447,7 @@ interface NeoListItemButtonProps extends ListItemButtonProps {
|
|
|
2401
2447
|
* NeoListItemButton - Selectable list item with icon and text
|
|
2402
2448
|
*
|
|
2403
2449
|
* A selectable list item component that displays an optional icon with primary
|
|
2404
|
-
* and secondary text. Supports active (selected), deselected, and disabled states.
|
|
2450
|
+
* and secondary text. Supports active (selected), deselected, focus, and disabled states.
|
|
2405
2451
|
*
|
|
2406
2452
|
* Uses MUI's ListItemButton as base for proper accessibility and interaction.
|
|
2407
2453
|
* Compose with ListItemIcon and ListItemText for proper structure.
|
|
@@ -2422,9 +2468,10 @@ interface NeoListItemButtonProps extends ListItemButtonProps {
|
|
|
2422
2468
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4925-3764
|
|
2423
2469
|
*
|
|
2424
2470
|
* Figma Props Mapping:
|
|
2425
|
-
* -
|
|
2426
|
-
* -
|
|
2427
|
-
* -
|
|
2471
|
+
* - state="active" → selected={true}
|
|
2472
|
+
* - state="deselected" → selected={false}
|
|
2473
|
+
* - state="focus" → focus-visible CSS state
|
|
2474
|
+
* - state="disabled" → disabled={true}
|
|
2428
2475
|
* - showIcon → Conditional rendering of ListItemIcon child
|
|
2429
2476
|
*
|
|
2430
2477
|
* Design Tokens Used:
|
|
@@ -2757,5 +2804,5 @@ declare module '@mui/x-data-grid-pro' {
|
|
|
2757
2804
|
|
|
2758
2805
|
declare const version: string
|
|
2759
2806
|
|
|
2760
|
-
export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFooter, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
|
|
2761
|
-
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoFooterProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
|
|
2807
|
+
export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
|
|
2808
|
+
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoFilterChipProps, NeoFooterProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
|