@moderneinc/neo-styled-components 2.6.0-next.c43566 → 2.6.0-next.e7eb6e
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/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 +4 -4
- package/dist/index.d.ts +49 -9
- package/dist/index.esm.js +161 -85
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +161 -83
- package/dist/index.js.map +1 -1
- package/dist/utils/avatarColors.d.ts +8 -0
- package/dist/utils/focusRing.d.ts +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { type AvatarProps } from '@mui/material/Avatar';
|
|
2
|
+
type AvatarSize = 'small' | 'medium';
|
|
3
|
+
export interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
|
|
4
|
+
/**
|
|
5
|
+
* The size of the avatar
|
|
6
|
+
* @default "medium"
|
|
7
|
+
* @figma Size
|
|
8
|
+
*/
|
|
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
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* NeoGeneralAvatar - Avatar with image or colored initials display
|
|
19
|
+
*
|
|
20
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
|
|
21
|
+
*/
|
|
22
|
+
export declare const NeoGeneralAvatar: {
|
|
23
|
+
({ size, colorIndex, children, ...props }: NeoGeneralAvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
displayName: string;
|
|
25
|
+
};
|
|
26
|
+
export {};
|
|
@@ -48,7 +48,7 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
|
|
|
48
48
|
* - showIcon → Conditional rendering of ListItemIcon child
|
|
49
49
|
*
|
|
50
50
|
* Design Tokens Used:
|
|
51
|
-
* - semanticColors.
|
|
51
|
+
* - semanticColors.buttons.primary.default (#2f42ff) - Active border
|
|
52
52
|
* - semanticColors.border.primary (#d1d5db) - Default/disabled border
|
|
53
53
|
* - semanticColors.icons.default (#1f2937) - Active icon color
|
|
54
54
|
* - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color
|
|
@@ -68,8 +68,8 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 't
|
|
|
68
68
|
* Design Tokens Used:
|
|
69
69
|
* - semanticColors.surfaces.card (#FFFFFF) - Default card background
|
|
70
70
|
* - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
|
|
71
|
-
* - semanticColors.border.
|
|
72
|
-
* - semanticColors.
|
|
71
|
+
* - semanticColors.border.primary (#d1d5db) - Default border
|
|
72
|
+
* - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
|
|
73
73
|
* - shadows.focusWhite1 - Inner white focus ring (2px spread)
|
|
74
74
|
* - shadows.focusBlue2 - Outer blue focus ring (4px spread)
|
|
75
75
|
* - colors.grey[800] (#1F2937) - Text color
|
|
@@ -77,8 +77,8 @@ export interface NeoMarketplaceLargeCardProps extends Omit<CardProps, 'children'
|
|
|
77
77
|
* Design Tokens Used:
|
|
78
78
|
* - semanticColors.surfaces.card (#ffffff) - Light theme background
|
|
79
79
|
* - colors.grey[800] (#1f2937) - Dark theme background
|
|
80
|
-
* - semanticColors.border.
|
|
81
|
-
* - semanticColors.
|
|
80
|
+
* - semanticColors.border.primary (#d1d5db) - Default border (50% opacity on dark)
|
|
81
|
+
* - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border (light theme)
|
|
82
82
|
* - colors.digitalGreen[300] (#88fe9b) - Active/focused border (dark theme)
|
|
83
83
|
* - borderRadius.xS (4px) - Corner radius
|
|
84
84
|
* - shadows.focusWhite1 + shadows.focusBlue2 - Focus ring
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type NeoGeneralAvatarProps } from '../GeneralAvatar/GeneralAvatar';
|
|
2
|
+
export interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 'size'> {
|
|
3
|
+
}
|
|
4
|
+
/**
|
|
5
|
+
* NeoNavigationAvatar - Compact avatar for navigation contexts
|
|
6
|
+
*
|
|
7
|
+
* Wraps NeoGeneralAvatar (size="small") in a 44px container with 6px padding,
|
|
8
|
+
* providing a larger interactive area for navigation UI.
|
|
9
|
+
*
|
|
10
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
|
|
11
|
+
*/
|
|
12
|
+
export declare const NeoNavigationAvatar: {
|
|
13
|
+
({ colorIndex, children, ...props }: NeoNavigationAvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
@@ -38,10 +38,10 @@ export interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'var
|
|
|
38
38
|
* - Mode (Light|Dark) → variant ('outlined'|'filled')
|
|
39
39
|
*
|
|
40
40
|
* Design Tokens Used:
|
|
41
|
-
* - status.success.light, status.success.
|
|
42
|
-
* - status.error.light, status.error.
|
|
43
|
-
* - status.neutral.light, status.neutral.
|
|
44
|
-
* - status.info.light, status.info.
|
|
41
|
+
* - status.success.light, status.success.default
|
|
42
|
+
* - status.error.light, status.error.default
|
|
43
|
+
* - status.neutral.light, status.neutral.default
|
|
44
|
+
* - status.info.light, status.info.default
|
|
45
45
|
* - typography.tooltip, typography.bodySecondary
|
|
46
46
|
* - grey[800]
|
|
47
47
|
* - fontSize.default, fontSize.sm
|
package/dist/index.d.ts
CHANGED
|
@@ -1377,6 +1377,31 @@ declare const NeoFilterChip: {
|
|
|
1377
1377
|
displayName: string;
|
|
1378
1378
|
};
|
|
1379
1379
|
|
|
1380
|
+
type AvatarSize = 'small' | 'medium';
|
|
1381
|
+
interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
|
|
1382
|
+
/**
|
|
1383
|
+
* The size of the avatar
|
|
1384
|
+
* @default "medium"
|
|
1385
|
+
* @figma Size
|
|
1386
|
+
*/
|
|
1387
|
+
size?: AvatarSize;
|
|
1388
|
+
/**
|
|
1389
|
+
* Color index for initials background (1-7). Use 0 or omit for image mode.
|
|
1390
|
+
* @default 0
|
|
1391
|
+
* @figma Color Index
|
|
1392
|
+
*/
|
|
1393
|
+
colorIndex?: number;
|
|
1394
|
+
}
|
|
1395
|
+
/**
|
|
1396
|
+
* NeoGeneralAvatar - Avatar with image or colored initials display
|
|
1397
|
+
*
|
|
1398
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
|
|
1399
|
+
*/
|
|
1400
|
+
declare const NeoGeneralAvatar: {
|
|
1401
|
+
({ size, colorIndex, children, ...props }: NeoGeneralAvatarProps): react_jsx_runtime.JSX.Element;
|
|
1402
|
+
displayName: string;
|
|
1403
|
+
};
|
|
1404
|
+
|
|
1380
1405
|
type IconButtonSize = 'small' | 'medium';
|
|
1381
1406
|
interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
|
|
1382
1407
|
/**
|
|
@@ -1683,6 +1708,21 @@ declare const NeoModalFooter: {
|
|
|
1683
1708
|
displayName: string;
|
|
1684
1709
|
};
|
|
1685
1710
|
|
|
1711
|
+
interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 'size'> {
|
|
1712
|
+
}
|
|
1713
|
+
/**
|
|
1714
|
+
* NeoNavigationAvatar - Compact avatar for navigation contexts
|
|
1715
|
+
*
|
|
1716
|
+
* Wraps NeoGeneralAvatar (size="small") in a 44px container with 6px padding,
|
|
1717
|
+
* providing a larger interactive area for navigation UI.
|
|
1718
|
+
*
|
|
1719
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
|
|
1720
|
+
*/
|
|
1721
|
+
declare const NeoNavigationAvatar: {
|
|
1722
|
+
({ colorIndex, children, ...props }: NeoNavigationAvatarProps): react_jsx_runtime.JSX.Element;
|
|
1723
|
+
displayName: string;
|
|
1724
|
+
};
|
|
1725
|
+
|
|
1686
1726
|
interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
|
|
1687
1727
|
/**
|
|
1688
1728
|
* Icon element to display
|
|
@@ -2127,10 +2167,10 @@ interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'variant'>
|
|
|
2127
2167
|
* - Mode (Light|Dark) → variant ('outlined'|'filled')
|
|
2128
2168
|
*
|
|
2129
2169
|
* Design Tokens Used:
|
|
2130
|
-
* - status.success.light, status.success.
|
|
2131
|
-
* - status.error.light, status.error.
|
|
2132
|
-
* - status.neutral.light, status.neutral.
|
|
2133
|
-
* - status.info.light, status.info.
|
|
2170
|
+
* - status.success.light, status.success.default
|
|
2171
|
+
* - status.error.light, status.error.default
|
|
2172
|
+
* - status.neutral.light, status.neutral.default
|
|
2173
|
+
* - status.info.light, status.info.default
|
|
2134
2174
|
* - typography.tooltip, typography.bodySecondary
|
|
2135
2175
|
* - grey[800]
|
|
2136
2176
|
* - fontSize.default, fontSize.sm
|
|
@@ -2566,7 +2606,7 @@ interface NeoListItemButtonProps extends ListItemButtonProps {
|
|
|
2566
2606
|
* - showIcon → Conditional rendering of ListItemIcon child
|
|
2567
2607
|
*
|
|
2568
2608
|
* Design Tokens Used:
|
|
2569
|
-
* - semanticColors.
|
|
2609
|
+
* - semanticColors.buttons.primary.default (#2f42ff) - Active border
|
|
2570
2610
|
* - semanticColors.border.primary (#d1d5db) - Default/disabled border
|
|
2571
2611
|
* - semanticColors.icons.default (#1f2937) - Active icon color
|
|
2572
2612
|
* - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color
|
|
@@ -2727,8 +2767,8 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
|
|
|
2727
2767
|
* Design Tokens Used:
|
|
2728
2768
|
* - semanticColors.surfaces.card (#FFFFFF) - Default card background
|
|
2729
2769
|
* - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
|
|
2730
|
-
* - semanticColors.border.
|
|
2731
|
-
* - semanticColors.
|
|
2770
|
+
* - semanticColors.border.primary (#d1d5db) - Default border
|
|
2771
|
+
* - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
|
|
2732
2772
|
* - shadows.focusWhite1 - Inner white focus ring (2px spread)
|
|
2733
2773
|
* - shadows.focusBlue2 - Outer blue focus ring (4px spread)
|
|
2734
2774
|
* - colors.grey[800] (#1F2937) - Text color
|
|
@@ -2936,5 +2976,5 @@ declare module '@mui/x-data-grid-pro' {
|
|
|
2936
2976
|
|
|
2937
2977
|
declare const version: string
|
|
2938
2978
|
|
|
2939
|
-
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, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, 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 };
|
|
2940
|
-
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, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
|
|
2979
|
+
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 };
|
|
2980
|
+
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 };
|