@moderneinc/neo-styled-components 2.6.0 → 2.7.0
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/Banner/Banner.d.ts +22 -17
- package/dist/ButtonTab/ButtonTab.d.ts +19 -0
- package/dist/ButtonTabGroup/ButtonTabGroup.d.ts +39 -0
- package/dist/CodeSnippet/CodeSnippet.d.ts +4 -4
- package/dist/GeneralAvatar/GeneralAvatar.d.ts +26 -0
- package/dist/ListItemButton/ListItemButton.d.ts +1 -1
- package/dist/MarketplaceCard/MarketplaceCard.d.ts +2 -2
- package/dist/MarketplaceLargeCard/MarketplaceLargeCard.d.ts +2 -2
- package/dist/NavigationAvatar/NavigationAvatar.d.ts +15 -0
- package/dist/StatusBanner/StatusBanner.d.ts +14 -11
- package/dist/Tabs/Tabs.d.ts +5 -7
- package/dist/Tag/Tag.d.ts +7 -7
- package/dist/Toast/Toast.d.ts +19 -11
- package/dist/Tooltip/Tooltip.d.ts +6 -6
- package/dist/index.d.ts +160 -89
- package/dist/index.esm.js +557 -260
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +560 -260
- package/dist/index.js.map +1 -1
- package/dist/utils/avatarColors.d.ts +7 -0
- package/dist/utils/focusRing.d.ts +3 -3
- package/package.json +1 -1
- package/dist/ButtonGroup/ButtonGroup.d.ts +0 -41
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,9 @@ import { AlertProps } from '@mui/material/Alert';
|
|
|
8
8
|
import { LinkProps } from '@mui/material/Link';
|
|
9
9
|
import * as ButtonBase from '@mui/material/ButtonBase';
|
|
10
10
|
import ButtonBase__default, { ButtonBaseProps } from '@mui/material/ButtonBase';
|
|
11
|
-
import
|
|
11
|
+
import * as _mui_material_ToggleButton from '@mui/material/ToggleButton';
|
|
12
|
+
import { ToggleButtonProps } from '@mui/material/ToggleButton';
|
|
13
|
+
import { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
|
|
12
14
|
import { CheckboxProps } from '@mui/material/Checkbox';
|
|
13
15
|
import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, ToolbarProps, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
|
|
14
16
|
import * as _mui_material_styles from '@mui/material/styles';
|
|
@@ -33,8 +35,6 @@ import Button from '@mui/material/Button';
|
|
|
33
35
|
import { SwitchProps } from '@mui/material/Switch';
|
|
34
36
|
import { ListItemButtonProps } from '@mui/material/ListItemButton';
|
|
35
37
|
import { TooltipProps } from '@mui/material/Tooltip';
|
|
36
|
-
import * as _mui_material_ToggleButton from '@mui/material/ToggleButton';
|
|
37
|
-
import { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
|
|
38
38
|
import { CardProps } from '@mui/material/Card';
|
|
39
39
|
import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
|
|
40
40
|
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
|
|
@@ -364,36 +364,41 @@ declare const NeoBadge: {
|
|
|
364
364
|
|
|
365
365
|
interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
|
|
366
366
|
/**
|
|
367
|
-
* The
|
|
368
|
-
* @default "
|
|
367
|
+
* The intent/color variant of the banner
|
|
368
|
+
* @default "info"
|
|
369
369
|
*
|
|
370
|
-
* @
|
|
370
|
+
* @figma Intention (Info|Success|Error|Warning|Neutral)
|
|
371
371
|
*/
|
|
372
|
-
variant?: '
|
|
372
|
+
variant?: 'info' | 'success' | 'error' | 'warning' | 'neutral' | 'dark' | 'light';
|
|
373
373
|
/**
|
|
374
|
-
* The
|
|
374
|
+
* The visual type: outlined (light bg) or filled (solid bg)
|
|
375
|
+
* Only applies to intent variants. Legacy variants (dark, light) ignore this prop.
|
|
376
|
+
* @default "outlined"
|
|
375
377
|
*
|
|
376
|
-
* @
|
|
378
|
+
* @figma Type (Outlined|Filled)
|
|
379
|
+
*/
|
|
380
|
+
type?: 'outlined' | 'filled';
|
|
381
|
+
/**
|
|
382
|
+
* The message text to display
|
|
377
383
|
*/
|
|
378
384
|
message: string;
|
|
379
385
|
/**
|
|
380
386
|
* Horizontal alignment of the message content
|
|
381
387
|
* @default "left"
|
|
382
388
|
*
|
|
383
|
-
* @
|
|
389
|
+
* @figma Message Position (Left|Center)
|
|
384
390
|
*/
|
|
385
391
|
messagePosition?: 'left' | 'center';
|
|
386
392
|
/**
|
|
387
|
-
* Optional link text to display after the message
|
|
388
|
-
*
|
|
389
|
-
* @figmaPropMapping link (boolean) → linkText (string)
|
|
393
|
+
* Optional link text to display after the message.
|
|
394
|
+
* In Figma, "Show Link" is a boolean toggle; when enabled, this string is rendered.
|
|
390
395
|
*/
|
|
391
396
|
linkText?: string;
|
|
392
397
|
/**
|
|
393
398
|
* Whether to show the close button
|
|
394
399
|
* @default true
|
|
395
400
|
*
|
|
396
|
-
* @
|
|
401
|
+
* @figma Dismissible (boolean)
|
|
397
402
|
*/
|
|
398
403
|
showClose?: boolean;
|
|
399
404
|
/**
|
|
@@ -416,14 +421,14 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
|
|
|
416
421
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4170-2158
|
|
417
422
|
*
|
|
418
423
|
* Figma Props Mapping:
|
|
419
|
-
* -
|
|
420
|
-
* -
|
|
421
|
-
* -
|
|
422
|
-
* -
|
|
423
|
-
* -
|
|
424
|
+
* - Intention (Info|Success|Error|Warning|Neutral) → variant (info|success|error|warning|neutral)
|
|
425
|
+
* - Type (Outlined|Filled) → type ('outlined'|'filled')
|
|
426
|
+
* - Message Position (Left|Center) → messagePosition ('left'|'center')
|
|
427
|
+
* - Dismissible (boolean) → showClose (boolean)
|
|
428
|
+
* - Show Link (boolean) → linkText presence (string when shown)
|
|
424
429
|
*/
|
|
425
430
|
declare const NeoBanner: {
|
|
426
|
-
({ variant, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): react_jsx_runtime.JSX.Element;
|
|
431
|
+
({ variant, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): react_jsx_runtime.JSX.Element;
|
|
427
432
|
displayName: string;
|
|
428
433
|
};
|
|
429
434
|
|
|
@@ -562,43 +567,60 @@ declare namespace NeoButton {
|
|
|
562
567
|
var displayName: string;
|
|
563
568
|
}
|
|
564
569
|
|
|
565
|
-
|
|
566
|
-
interface NeoButtonGroupProps extends Omit<ButtonGroupProps, 'size' | 'variant'> {
|
|
570
|
+
interface NeoButtonTabProps extends Omit<ToggleButtonProps, 'color'> {
|
|
567
571
|
/**
|
|
568
|
-
*
|
|
572
|
+
* Whether the tab is currently selected.
|
|
573
|
+
* When used inside NeoButtonGroup, this is computed automatically from the group's value.
|
|
574
|
+
* @default false
|
|
575
|
+
* @figma Current
|
|
576
|
+
*/
|
|
577
|
+
selected?: boolean;
|
|
578
|
+
}
|
|
579
|
+
/**
|
|
580
|
+
* NeoButtonTab - A tab-style toggle button for use within NeoButtonGroup
|
|
581
|
+
*
|
|
582
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4106-11048
|
|
583
|
+
*/
|
|
584
|
+
declare const NeoButtonTab: {
|
|
585
|
+
({ children, ...props }: NeoButtonTabProps): react_jsx_runtime.JSX.Element;
|
|
586
|
+
displayName: string;
|
|
587
|
+
};
|
|
588
|
+
|
|
589
|
+
type ButtonTabGroupSize = 'small' | 'medium';
|
|
590
|
+
interface NeoButtonTabGroupProps extends Omit<ToggleButtonGroupProps, 'orientation' | 'color' | 'fullWidth'> {
|
|
591
|
+
/**
|
|
592
|
+
* The size of the button tab group
|
|
569
593
|
* @default "medium"
|
|
570
594
|
*
|
|
571
595
|
* @figma Size=Sm → small, Size=Md → medium
|
|
572
596
|
*/
|
|
573
|
-
size?:
|
|
597
|
+
size?: ButtonTabGroupSize;
|
|
574
598
|
/**
|
|
575
|
-
*
|
|
576
|
-
*
|
|
599
|
+
* Whether only one button can be selected at a time
|
|
600
|
+
* @default true
|
|
577
601
|
*/
|
|
578
|
-
|
|
602
|
+
exclusive?: boolean;
|
|
579
603
|
}
|
|
580
604
|
/**
|
|
581
|
-
*
|
|
605
|
+
* NeoButtonTabGroup - Button tab group container
|
|
582
606
|
*
|
|
583
607
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4106-11129
|
|
584
608
|
*
|
|
585
609
|
* Figma Props Mapping:
|
|
586
610
|
* - Size (Sm|Md) → size prop (small|medium)
|
|
587
|
-
* - Active button state → Controlled
|
|
611
|
+
* - Active button state → Controlled via value/onChange props
|
|
588
612
|
*
|
|
589
613
|
* Usage:
|
|
590
614
|
* ```tsx
|
|
591
|
-
* <
|
|
592
|
-
* <
|
|
593
|
-
* <
|
|
594
|
-
* <
|
|
595
|
-
* </
|
|
615
|
+
* <NeoButtonTabGroup value={selected} onChange={(_, val) => setSelected(val)} size="medium">
|
|
616
|
+
* <NeoButtonTab value="tab1">Tab 1</NeoButtonTab>
|
|
617
|
+
* <NeoButtonTab value="tab2">Tab 2</NeoButtonTab>
|
|
618
|
+
* <NeoButtonTab value="tab3">Tab 3</NeoButtonTab>
|
|
619
|
+
* </NeoButtonTabGroup>
|
|
596
620
|
* ```
|
|
597
|
-
*
|
|
598
|
-
* Note: To show active state, add 'active' class to the selected button
|
|
599
621
|
*/
|
|
600
|
-
declare const
|
|
601
|
-
({ size,
|
|
622
|
+
declare const NeoButtonTabGroup: {
|
|
623
|
+
({ size, exclusive, ...props }: NeoButtonTabGroupProps): react_jsx_runtime.JSX.Element;
|
|
602
624
|
displayName: string;
|
|
603
625
|
};
|
|
604
626
|
|
|
@@ -770,7 +792,7 @@ interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
770
792
|
* The size of the code snippet
|
|
771
793
|
* @default "small"
|
|
772
794
|
*
|
|
773
|
-
* @figma
|
|
795
|
+
* @figma Content (Single|Multi|Inline)
|
|
774
796
|
*/
|
|
775
797
|
size?: CodeSnippetSize;
|
|
776
798
|
/**
|
|
@@ -788,9 +810,9 @@ interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
788
810
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4187-30353
|
|
789
811
|
*
|
|
790
812
|
* Figma Props Mapping:
|
|
791
|
-
* -
|
|
792
|
-
* -
|
|
793
|
-
* -
|
|
813
|
+
* - Theme (Dark|Light) → variant (outlined|filled)
|
|
814
|
+
* - Content (Single|Multi|Inline) → size (small|large|inline)
|
|
815
|
+
* - Show icon (boolean) → endIcon (ReactNode, unmappable)
|
|
794
816
|
* - Text content → children prop
|
|
795
817
|
*/
|
|
796
818
|
declare const NeoCodeSnippet: {
|
|
@@ -1360,6 +1382,31 @@ declare const NeoFilterChip: {
|
|
|
1360
1382
|
displayName: string;
|
|
1361
1383
|
};
|
|
1362
1384
|
|
|
1385
|
+
type AvatarSize = 'small' | 'medium';
|
|
1386
|
+
interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
|
|
1387
|
+
/**
|
|
1388
|
+
* The size of the avatar
|
|
1389
|
+
* @default "medium"
|
|
1390
|
+
* @figma Size
|
|
1391
|
+
*/
|
|
1392
|
+
size?: AvatarSize;
|
|
1393
|
+
/**
|
|
1394
|
+
* Color index for initials background (1-7). Use 0 or omit for image mode.
|
|
1395
|
+
* @default 0
|
|
1396
|
+
* @figma Color Index
|
|
1397
|
+
*/
|
|
1398
|
+
colorIndex?: number;
|
|
1399
|
+
}
|
|
1400
|
+
/**
|
|
1401
|
+
* NeoGeneralAvatar - Avatar with image or colored initials display
|
|
1402
|
+
*
|
|
1403
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
|
|
1404
|
+
*/
|
|
1405
|
+
declare const NeoGeneralAvatar: {
|
|
1406
|
+
({ size, colorIndex, children, ...props }: NeoGeneralAvatarProps): react_jsx_runtime.JSX.Element;
|
|
1407
|
+
displayName: string;
|
|
1408
|
+
};
|
|
1409
|
+
|
|
1363
1410
|
type IconButtonSize = 'small' | 'medium';
|
|
1364
1411
|
interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
|
|
1365
1412
|
/**
|
|
@@ -1666,6 +1713,21 @@ declare const NeoModalFooter: {
|
|
|
1666
1713
|
displayName: string;
|
|
1667
1714
|
};
|
|
1668
1715
|
|
|
1716
|
+
interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 'size'> {
|
|
1717
|
+
}
|
|
1718
|
+
/**
|
|
1719
|
+
* NeoNavigationAvatar - Compact avatar for navigation contexts
|
|
1720
|
+
*
|
|
1721
|
+
* Wraps NeoGeneralAvatar (size="small") in a 44px container with 6px padding,
|
|
1722
|
+
* providing a larger interactive area for navigation UI.
|
|
1723
|
+
*
|
|
1724
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
|
|
1725
|
+
*/
|
|
1726
|
+
declare const NeoNavigationAvatar: {
|
|
1727
|
+
({ colorIndex, children, ...props }: NeoNavigationAvatarProps): react_jsx_runtime.JSX.Element;
|
|
1728
|
+
displayName: string;
|
|
1729
|
+
};
|
|
1730
|
+
|
|
1669
1731
|
interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
|
|
1670
1732
|
/**
|
|
1671
1733
|
* Icon element to display
|
|
@@ -2079,13 +2141,15 @@ interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'variant'>
|
|
|
2079
2141
|
/**
|
|
2080
2142
|
* The severity level of the status banner
|
|
2081
2143
|
* @default "success"
|
|
2082
|
-
*
|
|
2144
|
+
*
|
|
2145
|
+
* @figma Intent (Success|Error|Info|Offline|Warning)
|
|
2083
2146
|
*/
|
|
2084
|
-
severity?: 'success' | 'error' | 'neutral' | 'info';
|
|
2147
|
+
severity?: 'success' | 'error' | 'neutral' | 'info' | 'warning';
|
|
2085
2148
|
/**
|
|
2086
2149
|
* The visual variant style
|
|
2087
2150
|
* @default "outlined"
|
|
2088
|
-
*
|
|
2151
|
+
*
|
|
2152
|
+
* @figma Type (Outlined|Filled)
|
|
2089
2153
|
*/
|
|
2090
2154
|
variant?: 'outlined' | 'filled';
|
|
2091
2155
|
/**
|
|
@@ -2100,20 +2164,21 @@ interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'variant'>
|
|
|
2100
2164
|
/**
|
|
2101
2165
|
* NeoStatusBanner - Status banner component for displaying system status messages
|
|
2102
2166
|
*
|
|
2103
|
-
* Displays status information with different severity levels (success, error, info, neutral)
|
|
2104
|
-
* visual modes (outlined for light backgrounds, filled for emphasis).
|
|
2167
|
+
* Displays status information with different severity levels (success, error, info, neutral, warning)
|
|
2168
|
+
* and visual modes (outlined for light backgrounds, filled for emphasis).
|
|
2105
2169
|
*
|
|
2106
2170
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
|
|
2107
2171
|
*
|
|
2108
2172
|
* Figma Props Mapping:
|
|
2109
|
-
* -
|
|
2110
|
-
* -
|
|
2173
|
+
* - Intent (Success|Error|Info|Offline|Warning) → severity ('success'|'error'|'info'|'neutral'|'warning')
|
|
2174
|
+
* - Type (Outlined|Filled) → variant ('outlined'|'filled')
|
|
2111
2175
|
*
|
|
2112
2176
|
* Design Tokens Used:
|
|
2113
|
-
* - status.success.light, status.success.
|
|
2114
|
-
* - status.error.light, status.error.
|
|
2115
|
-
* - status.neutral.light, status.neutral.
|
|
2116
|
-
* - status.info.light, status.info.
|
|
2177
|
+
* - status.success.light, status.success.default
|
|
2178
|
+
* - status.error.light, status.error.default
|
|
2179
|
+
* - status.neutral.light, status.neutral.default
|
|
2180
|
+
* - status.info.light, status.info.default
|
|
2181
|
+
* - status.warning.light, status.warning.default
|
|
2117
2182
|
* - typography.tooltip, typography.bodySecondary
|
|
2118
2183
|
* - grey[800]
|
|
2119
2184
|
* - fontSize.default, fontSize.sm
|
|
@@ -2148,13 +2213,13 @@ interface NeoTabProps extends Omit<TabProps, 'label'> {
|
|
|
2148
2213
|
* Optional count to display in a tag next to the label
|
|
2149
2214
|
* @default undefined
|
|
2150
2215
|
*
|
|
2151
|
-
* @figma
|
|
2216
|
+
* @figma Show tag (boolean)
|
|
2152
2217
|
*/
|
|
2153
2218
|
count?: number | string;
|
|
2154
2219
|
/**
|
|
2155
2220
|
* Tab value identifier
|
|
2156
2221
|
*
|
|
2157
|
-
* @figma
|
|
2222
|
+
* @figma Selected (True|False) — controlled by parent NeoTabs
|
|
2158
2223
|
*/
|
|
2159
2224
|
value: string | number;
|
|
2160
2225
|
}
|
|
@@ -2164,11 +2229,9 @@ interface NeoTabProps extends Omit<TabProps, 'label'> {
|
|
|
2164
2229
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3368-26152
|
|
2165
2230
|
*
|
|
2166
2231
|
* Figma Props Mapping:
|
|
2167
|
-
* -
|
|
2168
|
-
* - State
|
|
2169
|
-
* -
|
|
2170
|
-
* - State=Focus → CSS :focus-visible
|
|
2171
|
-
* - Tag count → count prop (renders NeoTag)
|
|
2232
|
+
* - Selected (True|False) → Controlled by parent NeoTabs value
|
|
2233
|
+
* - State (Default|Hover|Focus|Disabled) → CSS states + disabled prop
|
|
2234
|
+
* - Show tag (boolean) → count prop (renders NeoTag)
|
|
2172
2235
|
* - Text label → label prop
|
|
2173
2236
|
*/
|
|
2174
2237
|
declare const NeoTab: {
|
|
@@ -2192,19 +2255,19 @@ declare module '@mui/material/Chip' {
|
|
|
2192
2255
|
interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
|
|
2193
2256
|
/**
|
|
2194
2257
|
* The size of the tag
|
|
2195
|
-
* @figma
|
|
2258
|
+
* @figma Size (Small|Medium|Large)
|
|
2196
2259
|
* @default "small"
|
|
2197
2260
|
*/
|
|
2198
2261
|
size?: 'small' | 'medium' | 'large';
|
|
2199
2262
|
/**
|
|
2200
2263
|
* The variant style of the tag
|
|
2201
|
-
* @figma
|
|
2264
|
+
* @figma Type (Outline|Filled)
|
|
2202
2265
|
* @default "outlined"
|
|
2203
2266
|
*/
|
|
2204
2267
|
variant?: 'outlined' | 'filled';
|
|
2205
2268
|
/**
|
|
2206
|
-
* The color/
|
|
2207
|
-
* @figma
|
|
2269
|
+
* The color/intent of the tag
|
|
2270
|
+
* @figma Intent (Neutral|Error|Warning|Success|Info|Violet|Beta)
|
|
2208
2271
|
* @default "default"
|
|
2209
2272
|
*/
|
|
2210
2273
|
color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
|
|
@@ -2215,9 +2278,9 @@ interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
|
|
|
2215
2278
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
|
|
2216
2279
|
*
|
|
2217
2280
|
* Figma Props Mapping:
|
|
2218
|
-
* -
|
|
2219
|
-
* -
|
|
2220
|
-
* -
|
|
2281
|
+
* - Size (Small|Medium|Large) → size (small|medium|large)
|
|
2282
|
+
* - Type (Outline|Filled) → variant (outlined|filled)
|
|
2283
|
+
* - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
|
|
2221
2284
|
* - Label text → label prop
|
|
2222
2285
|
*/
|
|
2223
2286
|
declare const NeoTag: {
|
|
@@ -2227,10 +2290,17 @@ declare const NeoTag: {
|
|
|
2227
2290
|
|
|
2228
2291
|
interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
|
|
2229
2292
|
/**
|
|
2230
|
-
* The
|
|
2293
|
+
* The intent/color variant of the toast
|
|
2231
2294
|
* @default "default"
|
|
2232
2295
|
*/
|
|
2233
|
-
variant?: 'default' | '
|
|
2296
|
+
variant?: 'default' | 'error' | 'success' | 'info' | 'warning' | 'dark' | 'brand' | 'download';
|
|
2297
|
+
/**
|
|
2298
|
+
* The visual type: outlined (light bg + border) or filled (solid bg)
|
|
2299
|
+
* Only applies to intent variants (default, error, success, info, warning).
|
|
2300
|
+
* Legacy variants (dark, brand, download) ignore this prop.
|
|
2301
|
+
* @default "outlined"
|
|
2302
|
+
*/
|
|
2303
|
+
type?: 'filled' | 'outlined';
|
|
2234
2304
|
/**
|
|
2235
2305
|
* The title/header text
|
|
2236
2306
|
*/
|
|
@@ -2268,26 +2338,27 @@ interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color
|
|
|
2268
2338
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-37223
|
|
2269
2339
|
*
|
|
2270
2340
|
* Figma Props Mapping:
|
|
2271
|
-
* -
|
|
2272
|
-
* -
|
|
2273
|
-
* -
|
|
2274
|
-
* -
|
|
2275
|
-
* -
|
|
2276
|
-
* -
|
|
2341
|
+
* - Intent (Neutral|Error|Success|Info|Warning) → variant (default|error|success|info|warning)
|
|
2342
|
+
* - Type (Outlined|Filled) → type ('outlined'|'filled')
|
|
2343
|
+
* - Show header → title (string)
|
|
2344
|
+
* - Show supporting text → message (string)
|
|
2345
|
+
* - Show close icon → showClose (boolean)
|
|
2346
|
+
* - Show actions → actions (ReactNode)
|
|
2277
2347
|
*/
|
|
2278
2348
|
declare const NeoToast: {
|
|
2279
|
-
({ variant, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): react_jsx_runtime.JSX.Element;
|
|
2349
|
+
({ variant, type, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): react_jsx_runtime.JSX.Element;
|
|
2280
2350
|
displayName: string;
|
|
2281
2351
|
};
|
|
2282
2352
|
/**
|
|
2283
2353
|
* Helper component for creating toast action buttons with proper styling
|
|
2284
2354
|
*/
|
|
2285
2355
|
declare const NeoToastButton: {
|
|
2286
|
-
({ primary, variant, children, ...props }: {
|
|
2356
|
+
({ primary, variant, type, children, ...props }: {
|
|
2287
2357
|
primary?: boolean;
|
|
2288
2358
|
variant?: NeoToastProps["variant"];
|
|
2359
|
+
type?: NeoToastProps["type"];
|
|
2289
2360
|
children: ReactNode;
|
|
2290
|
-
} & Omit<React.ComponentProps<typeof Button>, "variant">): react_jsx_runtime.JSX.Element;
|
|
2361
|
+
} & Omit<React.ComponentProps<typeof Button>, "variant" | "type">): react_jsx_runtime.JSX.Element;
|
|
2291
2362
|
displayName: string;
|
|
2292
2363
|
};
|
|
2293
2364
|
|
|
@@ -2549,7 +2620,7 @@ interface NeoListItemButtonProps extends ListItemButtonProps {
|
|
|
2549
2620
|
* - showIcon → Conditional rendering of ListItemIcon child
|
|
2550
2621
|
*
|
|
2551
2622
|
* Design Tokens Used:
|
|
2552
|
-
* - semanticColors.
|
|
2623
|
+
* - semanticColors.buttons.primary.default (#2f42ff) - Active border
|
|
2553
2624
|
* - semanticColors.border.primary (#d1d5db) - Default/disabled border
|
|
2554
2625
|
* - semanticColors.icons.default (#1f2937) - Active icon color
|
|
2555
2626
|
* - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color
|
|
@@ -2576,7 +2647,7 @@ interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
|
|
|
2576
2647
|
/**
|
|
2577
2648
|
* The visual style variant
|
|
2578
2649
|
* @default "light"
|
|
2579
|
-
* @figma
|
|
2650
|
+
* @figma Theme (Light mode|Dark mode|Brand color)
|
|
2580
2651
|
*/
|
|
2581
2652
|
variant?: TooltipVariant;
|
|
2582
2653
|
/**
|
|
@@ -2588,7 +2659,7 @@ interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
|
|
|
2588
2659
|
* Optional supporting description text
|
|
2589
2660
|
* When provided, shows a larger tooltip with title (semibold) + description (medium)
|
|
2590
2661
|
* @default undefined
|
|
2591
|
-
* @figma
|
|
2662
|
+
* @figma Show description (boolean)
|
|
2592
2663
|
*/
|
|
2593
2664
|
description?: string;
|
|
2594
2665
|
}
|
|
@@ -2601,10 +2672,10 @@ interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
|
|
|
2601
2672
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-26557&t=Bo58EpFmg6ILJtmv-11
|
|
2602
2673
|
*
|
|
2603
2674
|
* Figma Props Mapping:
|
|
2604
|
-
* -
|
|
2605
|
-
* -
|
|
2606
|
-
* -
|
|
2607
|
-
* -
|
|
2675
|
+
* - Theme (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
|
|
2676
|
+
* - Placement (None|Bottom left|...|Top center) → arrow (boolean) + placement
|
|
2677
|
+
* - Show description (boolean) → description (string|undefined)
|
|
2678
|
+
* - Text → title (string, literal content)
|
|
2608
2679
|
*
|
|
2609
2680
|
* Design Tokens Used:
|
|
2610
2681
|
* - Light: surfaces.tooltip (#4b5563), typography.tooltip (#ffffff)
|
|
@@ -2710,8 +2781,8 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
|
|
|
2710
2781
|
* Design Tokens Used:
|
|
2711
2782
|
* - semanticColors.surfaces.card (#FFFFFF) - Default card background
|
|
2712
2783
|
* - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
|
|
2713
|
-
* - semanticColors.border.
|
|
2714
|
-
* - semanticColors.
|
|
2784
|
+
* - semanticColors.border.primary (#d1d5db) - Default border
|
|
2785
|
+
* - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
|
|
2715
2786
|
* - shadows.focusWhite1 - Inner white focus ring (2px spread)
|
|
2716
2787
|
* - shadows.focusBlue2 - Outer blue focus ring (4px spread)
|
|
2717
2788
|
* - colors.grey[800] (#1F2937) - Text color
|
|
@@ -2919,5 +2990,5 @@ declare module '@mui/x-data-grid-pro' {
|
|
|
2919
2990
|
|
|
2920
2991
|
declare const version: string
|
|
2921
2992
|
|
|
2922
|
-
export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton,
|
|
2923
|
-
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps,
|
|
2993
|
+
export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
|
|
2994
|
+
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
|