@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.
@@ -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.border.tabActive (#2f42ff) - Active border
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.card (#d1d5db) - Default border
72
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
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.card (#d1d5db) - Default border (50% opacity on dark)
81
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border (light theme)
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.medium
42
- * - status.error.light, status.error.medium
43
- * - status.neutral.light, status.neutral.medium
44
- * - status.info.light, status.info.medium
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.medium
2131
- * - status.error.light, status.error.medium
2132
- * - status.neutral.light, status.neutral.medium
2133
- * - status.info.light, status.info.medium
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.border.tabActive (#2f42ff) - Active border
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.card (#d1d5db) - Default border
2731
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
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 };