@moderneinc/neo-styled-components 2.6.0 → 2.7.0-next.b4c3dc

package/dist/ButtonTab/ButtonTab.d.ts

@@ -0,0 +1,19 @@
+import { type ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';
+export interface NeoButtonTabProps extends Omit<MuiToggleButtonProps, 'color'> {
+    /**
+     * Whether the tab is currently selected.
+     * When used inside NeoButtonGroup, this is computed automatically from the group's value.
+     * @default false
+     * @figma Current
+     */
+    selected?: boolean;
+}
+/**
+ * NeoButtonTab - A tab-style toggle button for use within NeoButtonGroup
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4106-11048
+ */
+export declare const NeoButtonTab: {
+    ({ children, ...props }: NeoButtonTabProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/ButtonTabGroup/ButtonTabGroup.d.ts

@@ -0,0 +1,39 @@
+import { type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
+type ButtonTabGroupSize = 'small' | 'medium';
+export interface NeoButtonTabGroupProps extends Omit<MuiToggleButtonGroupProps, 'orientation' | 'color' | 'fullWidth'> {
+    /**
+     * The size of the button tab group
+     * @default "medium"
+     *
+     * @figma Size=Sm → small, Size=Md → medium
+     */
+    size?: ButtonTabGroupSize;
+    /**
+     * Whether only one button can be selected at a time
+     * @default true
+     */
+    exclusive?: boolean;
+}
+/**
+ * NeoButtonTabGroup - Button tab group container
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4106-11129
+ *
+ * Figma Props Mapping:
+ * - Size (Sm|Md) → size prop (small|medium)
+ * - Active button state → Controlled via value/onChange props
+ *
+ * Usage:
+ * ```tsx
+ * <NeoButtonTabGroup value={selected} onChange={(_, val) => setSelected(val)} size="medium">
+ *   <NeoButtonTab value="tab1">Tab 1</NeoButtonTab>
+ *   <NeoButtonTab value="tab2">Tab 2</NeoButtonTab>
+ *   <NeoButtonTab value="tab3">Tab 3</NeoButtonTab>
+ * </NeoButtonTabGroup>
+ * ```
+ */
+export declare const NeoButtonTabGroup: {
+    ({ size, exclusive, ...props }: NeoButtonTabGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/GeneralAvatar/GeneralAvatar.d.ts

@@ -0,0 +1,26 @@
+import { type AvatarProps } from '@mui/material/Avatar';
+type AvatarSize = 'small' | 'medium';
+export interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
+    /**
+     * The size of the avatar
+     * @default "medium"
+     * @figma Size
+     */
+    size?: AvatarSize;
+    /**
+     * Color index for initials background (1-7). Use 0 or omit for image mode.
+     * @default 0
+     * @figma Color Index
+     */
+    colorIndex?: number;
+}
+/**
+ * NeoGeneralAvatar - Avatar with image or colored initials display
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
+ */
+export declare const NeoGeneralAvatar: {
+    ({ size, colorIndex, children, ...props }: NeoGeneralAvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ListItemButton/ListItemButton.d.ts

@@ -48,7 +48,7 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
  * - showIcon → Conditional rendering of ListItemIcon child
  *
  * Design Tokens Used:
- * - semanticColors.border.tabActive (#2f42ff) - Active border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active border
  * - semanticColors.border.primary (#d1d5db) - Default/disabled border
  * - semanticColors.icons.default (#1f2937) - Active icon color
  * - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color

package/dist/MarketplaceCard/MarketplaceCard.d.ts

@@ -68,8 +68,8 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 't
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
  * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
- * - semanticColors.border.card (#d1d5db) - Default border
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - semanticColors.border.primary (#d1d5db) - Default border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
  * - shadows.focusWhite1 - Inner white focus ring (2px spread)
  * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color

package/dist/MarketplaceLargeCard/MarketplaceLargeCard.d.ts

@@ -77,8 +77,8 @@ export interface NeoMarketplaceLargeCardProps extends Omit<CardProps, 'children'
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#ffffff) - Light theme background
  * - colors.grey[800] (#1f2937) - Dark theme background
- * - semanticColors.border.card (#d1d5db) - Default border (50% opacity on dark)
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border (light theme)
+ * - semanticColors.border.primary (#d1d5db) - Default border (50% opacity on dark)
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border (light theme)
  * - colors.digitalGreen[300] (#88fe9b) - Active/focused border (dark theme)
  * - borderRadius.xS (4px) - Corner radius
  * - shadows.focusWhite1 + shadows.focusBlue2 - Focus ring

package/dist/NavigationAvatar/NavigationAvatar.d.ts

@@ -0,0 +1,15 @@
+import { type NeoGeneralAvatarProps } from '../GeneralAvatar/GeneralAvatar';
+export interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 'size'> {
+}
+/**
+ * NeoNavigationAvatar - Compact avatar for navigation contexts
+ *
+ * Wraps NeoGeneralAvatar (size="small") in a 44px container with 6px padding,
+ * providing a larger interactive area for navigation UI.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
+ */
+export declare const NeoNavigationAvatar: {
+    ({ colorIndex, children, ...props }: NeoNavigationAvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/StatusBanner/StatusBanner.d.ts

@@ -38,10 +38,10 @@ export interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'var
  * - Mode (Light|Dark) → variant ('outlined'|'filled')
  *
  * Design Tokens Used:
- * - status.success.light, status.success.medium
- * - status.error.light, status.error.medium
- * - status.neutral.light, status.neutral.medium
- * - status.info.light, status.info.medium
+ * - status.success.light, status.success.default
+ * - status.error.light, status.error.default
+ * - status.neutral.light, status.neutral.default
+ * - status.info.light, status.info.default
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm

package/dist/index.d.ts

@@ -8,7 +8,9 @@ import { AlertProps } from '@mui/material/Alert';
 import { LinkProps } from '@mui/material/Link';
 import * as ButtonBase from '@mui/material/ButtonBase';
 import ButtonBase__default, { ButtonBaseProps } from '@mui/material/ButtonBase';
-import { ButtonGroupProps } from '@mui/material/ButtonGroup';
+import * as _mui_material_ToggleButton from '@mui/material/ToggleButton';
+import { ToggleButtonProps } from '@mui/material/ToggleButton';
+import { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
 import { CheckboxProps } from '@mui/material/Checkbox';
 import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, ToolbarProps, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
 import * as _mui_material_styles from '@mui/material/styles';
@@ -33,8 +35,6 @@ import Button from '@mui/material/Button';
 import { SwitchProps } from '@mui/material/Switch';
 import { ListItemButtonProps } from '@mui/material/ListItemButton';
 import { TooltipProps } from '@mui/material/Tooltip';
-import * as _mui_material_ToggleButton from '@mui/material/ToggleButton';
-import { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
 import { CardProps } from '@mui/material/Card';
 import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
@@ -562,43 +562,60 @@ declare namespace NeoButton {
     var displayName: string;
 }
 
-type ButtonGroupSize = 'small' | 'medium';
-interface NeoButtonGroupProps extends Omit<ButtonGroupProps, 'size' | 'variant'> {
+interface NeoButtonTabProps extends Omit<ToggleButtonProps, 'color'> {
+    /**
+     * Whether the tab is currently selected.
+     * When used inside NeoButtonGroup, this is computed automatically from the group's value.
+     * @default false
+     * @figma Current
+     */
+    selected?: boolean;
+}
+/**
+ * NeoButtonTab - A tab-style toggle button for use within NeoButtonGroup
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4106-11048
+ */
+declare const NeoButtonTab: {
+    ({ children, ...props }: NeoButtonTabProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type ButtonTabGroupSize = 'small' | 'medium';
+interface NeoButtonTabGroupProps extends Omit<ToggleButtonGroupProps, 'orientation' | 'color' | 'fullWidth'> {
     /**
-     * The size of the button group
+     * The size of the button tab group
      * @default "medium"
      *
      * @figma Size=Sm → small, Size=Md → medium
      */
-    size?: ButtonGroupSize;
+    size?: ButtonTabGroupSize;
     /**
-     * The visual variant of the buttons
-     * ButtonGroup uses a fixed outlined style from the design
+     * Whether only one button can be selected at a time
+     * @default true
      */
-    variant?: 'outlined';
+    exclusive?: boolean;
 }
 /**
- * NeoButtonGroup - Button group component based on MUI ButtonGroup
+ * NeoButtonTabGroup - Button tab group container
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4106-11129
  *
  * Figma Props Mapping:
  * - Size (Sm|Md) → size prop (small|medium)
- * - Active button state → Controlled externally via button props or classes
+ * - Active button state → Controlled via value/onChange props
  *
  * Usage:
  * ```tsx
- * <NeoButtonGroup size="medium">
- *   <NeoButton>Button 1</NeoButton>
- *   <NeoButton>Button 2</NeoButton>
- *   <NeoButton>Button 3</NeoButton>
- * </NeoButtonGroup>
+ * <NeoButtonTabGroup value={selected} onChange={(_, val) => setSelected(val)} size="medium">
+ *   <NeoButtonTab value="tab1">Tab 1</NeoButtonTab>
+ *   <NeoButtonTab value="tab2">Tab 2</NeoButtonTab>
+ *   <NeoButtonTab value="tab3">Tab 3</NeoButtonTab>
+ * </NeoButtonTabGroup>
  * ```
- *
- * Note: To show active state, add 'active' class to the selected button
  */
-declare const NeoButtonGroup: {
-    ({ size, variant, ...props }: NeoButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare const NeoButtonTabGroup: {
+    ({ size, exclusive, ...props }: NeoButtonTabGroupProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1360,6 +1377,31 @@ declare const NeoFilterChip: {
     displayName: string;
 };
 
+type AvatarSize = 'small' | 'medium';
+interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
+    /**
+     * The size of the avatar
+     * @default "medium"
+     * @figma Size
+     */
+    size?: AvatarSize;
+    /**
+     * Color index for initials background (1-7). Use 0 or omit for image mode.
+     * @default 0
+     * @figma Color Index
+     */
+    colorIndex?: number;
+}
+/**
+ * NeoGeneralAvatar - Avatar with image or colored initials display
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
+ */
+declare const NeoGeneralAvatar: {
+    ({ size, colorIndex, children, ...props }: NeoGeneralAvatarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type IconButtonSize = 'small' | 'medium';
 interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
     /**
@@ -1666,6 +1708,21 @@ declare const NeoModalFooter: {
     displayName: string;
 };
 
+interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 'size'> {
+}
+/**
+ * NeoNavigationAvatar - Compact avatar for navigation contexts
+ *
+ * Wraps NeoGeneralAvatar (size="small") in a 44px container with 6px padding,
+ * providing a larger interactive area for navigation UI.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
+ */
+declare const NeoNavigationAvatar: {
+    ({ colorIndex, children, ...props }: NeoNavigationAvatarProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
     /**
      * Icon element to display
@@ -2110,10 +2167,10 @@ interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'variant'>
  * - Mode (Light|Dark) → variant ('outlined'|'filled')
  *
  * Design Tokens Used:
- * - status.success.light, status.success.medium
- * - status.error.light, status.error.medium
- * - status.neutral.light, status.neutral.medium
- * - status.info.light, status.info.medium
+ * - status.success.light, status.success.default
+ * - status.error.light, status.error.default
+ * - status.neutral.light, status.neutral.default
+ * - status.info.light, status.info.default
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm
@@ -2549,7 +2606,7 @@ interface NeoListItemButtonProps extends ListItemButtonProps {
  * - showIcon → Conditional rendering of ListItemIcon child
  *
  * Design Tokens Used:
- * - semanticColors.border.tabActive (#2f42ff) - Active border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active border
  * - semanticColors.border.primary (#d1d5db) - Default/disabled border
  * - semanticColors.icons.default (#1f2937) - Active icon color
  * - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color
@@ -2710,8 +2767,8 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
  * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
- * - semanticColors.border.card (#d1d5db) - Default border
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - semanticColors.border.primary (#d1d5db) - Default border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
  * - shadows.focusWhite1 - Inner white focus ring (2px spread)
  * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color
@@ -2919,5 +2976,5 @@ declare module '@mui/x-data-grid-pro' {
 
 declare const version: string
 
-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, 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 };
-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, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
+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 };
+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 };