@moderneinc/neo-styled-components 2.6.0 → 2.7.0

package/dist/Banner/Banner.d.ts

@@ -2,36 +2,41 @@ import { type AlertProps } from '@mui/material/Alert';
 import type { ReactNode } from 'react';
 export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The visual style variant of the banner
-     * @default "light"
+     * The intent/color variant of the banner
+     * @default "info"
      *
-     * @figmaPropMapping color (Dark|Light|Success|Error|Warning) → variant
+     * @figma Intention (Info|Success|Error|Warning|Neutral)
      */
-    variant?: 'dark' | 'light' | 'success' | 'error' | 'warning';
+    variant?: 'info' | 'success' | 'error' | 'warning' | 'neutral' | 'dark' | 'light';
     /**
-     * The message text to display
+     * The visual type: outlined (light bg) or filled (solid bg)
+     * Only applies to intent variants. Legacy variants (dark, light) ignore this prop.
+     * @default "outlined"
      *
-     * @figmaPropMapping {Message} → message
+     * @figma Type (Outlined|Filled)
+     */
+    type?: 'outlined' | 'filled';
+    /**
+     * The message text to display
      */
     message: string;
     /**
      * Horizontal alignment of the message content
      * @default "left"
      *
-     * @figmaPropMapping messagePosition (Left|Center) → messagePosition
+     * @figma Message Position (Left|Center)
      */
     messagePosition?: 'left' | 'center';
     /**
-     * Optional link text to display after the message
-     *
-     * @figmaPropMapping link (boolean) → linkText (string)
+     * Optional link text to display after the message.
+     * In Figma, "Show Link" is a boolean toggle; when enabled, this string is rendered.
      */
     linkText?: string;
     /**
      * Whether to show the close button
      * @default true
      *
-     * @figmaPropMapping closeIcon → showClose
+     * @figma Dismissible (boolean)
      */
     showClose?: boolean;
     /**
@@ -54,13 +59,13 @@ export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity'
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4170-2158
  *
  * Figma Props Mapping:
- * - color (Dark|Light|Success|Error|Warning) → variant (dark|light|success|error|warning)
- * - messagePosition (Left|Center) → messagePosition ("left"|"center")
- * - closeIcon (boolean) → showClose (boolean)
- * - link (boolean) → linkText (string)
- * - {Message} → message (string)
+ * - Intention (Info|Success|Error|Warning|Neutral) → variant (info|success|error|warning|neutral)
+ * - Type (Outlined|Filled) → type ('outlined'|'filled')
+ * - Message Position (Left|Center) → messagePosition ('left'|'center')
+ * - Dismissible (boolean) → showClose (boolean)
+ * - Show Link (boolean) → linkText presence (string when shown)
  */
 export declare const NeoBanner: {
-    ({ variant, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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/CodeSnippet/CodeSnippet.d.ts

@@ -20,7 +20,7 @@ export interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
      * The size of the code snippet
      * @default "small"
      *
-     * @figma Size (Single line|multiline|inline)
+     * @figma Content (Single|Multi|Inline)
      */
     size?: CodeSnippetSize;
     /**
@@ -38,9 +38,9 @@ export interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4187-30353
  *
  * Figma Props Mapping:
- * - Color (Light|Dark) → variant (outlined|filled)
- * - size (Single line|multiline|inline) → size prop + auto-detected multiline
- * - Copy button → endIcon (ReactNode)
+ * - Theme (Dark|Light) → variant (outlined|filled)
+ * - Content (Single|Multi|Inline) → size (small|large|inline)
+ * - Show icon (boolean) → endIcon (ReactNode, unmappable)
  * - Text content → children prop
  */
 export declare const NeoCodeSnippet: {

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

@@ -7,13 +7,15 @@ export interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'var
     /**
      * The severity level of the status banner
      * @default "success"
-     * @figma Intent
+     *
+     * @figma Intent (Success|Error|Info|Offline|Warning)
      */
-    severity?: 'success' | 'error' | 'neutral' | 'info';
+    severity?: 'success' | 'error' | 'neutral' | 'info' | 'warning';
     /**
      * The visual variant style
      * @default "outlined"
-     * @figma Theme
+     *
+     * @figma Type (Outlined|Filled)
      */
     variant?: 'outlined' | 'filled';
     /**
@@ -28,20 +30,21 @@ export interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'var
 /**
  * NeoStatusBanner - Status banner component for displaying system status messages
  *
- * Displays status information with different severity levels (success, error, info, neutral) and
- * visual modes (outlined for light backgrounds, filled for emphasis).
+ * Displays status information with different severity levels (success, error, info, neutral, warning)
+ * and visual modes (outlined for light backgrounds, filled for emphasis).
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
  *
  * Figma Props Mapping:
- * - Status (Success|Error|Info|Offline) → severity ('success'|'error'|'info'|'neutral')
- * - Mode (Light|Dark) → variant ('outlined'|'filled')
+ * - Intent (Success|Error|Info|Offline|Warning) → severity ('success'|'error'|'info'|'neutral'|'warning')
+ * - Type (Outlined|Filled) → 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
+ * - status.warning.light, status.warning.default
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm

package/dist/Tabs/Tabs.d.ts

@@ -22,13 +22,13 @@ export interface NeoTabProps extends Omit<TabProps, 'label'> {
      * Optional count to display in a tag next to the label
      * @default undefined
      *
-     * @figma Tag with number (999)
+     * @figma Show tag (boolean)
      */
     count?: number | string;
     /**
      * Tab value identifier
      *
-     * @figma Used for Current=True/False state
+     * @figma Selected (True|False) — controlled by parent NeoTabs
      */
     value: string | number;
 }
@@ -38,11 +38,9 @@ export interface NeoTabProps extends Omit<TabProps, 'label'> {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3368-26152
  *
  * Figma Props Mapping:
- * - Current=True/False → Controlled by parent NeoTabs value
- * - State=Default → default styling
- * - State=Hover → CSS :hover
- * - State=Focus → CSS :focus-visible
- * - Tag count → count prop (renders NeoTag)
+ * - Selected (True|False) → Controlled by parent NeoTabs value
+ * - State (Default|Hover|Focus|Disabled) → CSS states + disabled prop
+ * - Show tag (boolean) → count prop (renders NeoTag)
  * - Text label → label prop
  */
 export declare const NeoTab: {

package/dist/Tag/Tag.d.ts

@@ -15,19 +15,19 @@ declare module '@mui/material/Chip' {
 export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
     /**
      * The size of the tag
-     * @figma m (sm|md|lg)
+     * @figma Size (Small|Medium|Large)
      * @default "small"
      */
     size?: 'small' | 'medium' | 'large';
     /**
      * The variant style of the tag
-     * @figma type (light|dark)
+     * @figma Type (Outline|Filled)
      * @default "outlined"
      */
     variant?: 'outlined' | 'filled';
     /**
-     * The color/state of the tag
-     * @figma state (Neutral|Error|Warning|Success|Info|Violet|Beta)
+     * The color/intent of the tag
+     * @figma Intent (Neutral|Error|Warning|Success|Info|Violet|Beta)
      * @default "default"
      */
     color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
@@ -38,9 +38,9 @@ export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
  *
  * Figma Props Mapping:
- * - m (sm|md|lg) → size (small|medium|large)
- * - type (light|dark) → variant (outlined|filled)
- * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
+ * - Size (Small|Medium|Large) → size (small|medium|large)
+ * - Type (Outline|Filled) → variant (outlined|filled)
+ * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
  * - Label text → label prop
  */
 export declare const NeoTag: {

package/dist/Toast/Toast.d.ts

@@ -3,10 +3,17 @@ import Button from '@mui/material/Button';
 import type { ReactNode } from 'react';
 export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The visual style variant of the toast
+     * The intent/color variant of the toast
      * @default "default"
      */
-    variant?: 'default' | 'dark' | 'brand' | 'error' | 'success' | 'info' | 'download';
+    variant?: 'default' | 'error' | 'success' | 'info' | 'warning' | 'dark' | 'brand' | 'download';
+    /**
+     * The visual type: outlined (light bg + border) or filled (solid bg)
+     * Only applies to intent variants (default, error, success, info, warning).
+     * Legacy variants (dark, brand, download) ignore this prop.
+     * @default "outlined"
+     */
+    type?: 'filled' | 'outlined';
     /**
      * The title/header text
      */
@@ -44,25 +51,26 @@ export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' |
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-37223
  *
  * Figma Props Mapping:
- * - type (Light mode|Dark mode|Brand color|Error|Success|Info|Download) → variant (default|dark|brand|error|success|info|download)
- * - header → title (string)
- * - supportingText → message (string)
- * - xCloseButton → showClose (boolean)
- * - actions → actions (ReactNode)
- * - Progress bar → progress (number 0-100)
+ * - Intent (Neutral|Error|Success|Info|Warning) → variant (default|error|success|info|warning)
+ * - Type (Outlined|Filled) → type ('outlined'|'filled')
+ * - Show header → title (string)
+ * - Show supporting text → message (string)
+ * - Show close icon → showClose (boolean)
+ * - Show actions → actions (ReactNode)
  */
 export declare const NeoToast: {
-    ({ variant, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, type, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**
  * Helper component for creating toast action buttons with proper styling
  */
 export declare const NeoToastButton: {
-    ({ primary, variant, children, ...props }: {
+    ({ primary, variant, type, children, ...props }: {
         primary?: boolean;
         variant?: NeoToastProps["variant"];
+        type?: NeoToastProps["type"];
         children: ReactNode;
-    } & Omit<React.ComponentProps<typeof Button>, "variant">): import("react/jsx-runtime").JSX.Element;
+    } & Omit<React.ComponentProps<typeof Button>, "variant" | "type">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/Tooltip/Tooltip.d.ts

@@ -10,7 +10,7 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
     /**
      * The visual style variant
      * @default "light"
-     * @figma Type
+     * @figma Theme (Light mode|Dark mode|Brand color)
      */
     variant?: TooltipVariant;
     /**
@@ -22,7 +22,7 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
      * Optional supporting description text
      * When provided, shows a larger tooltip with title (semibold) + description (medium)
      * @default undefined
-     * @figma Supporting text
+     * @figma Show description (boolean)
      */
     description?: string;
 }
@@ -35,10 +35,10 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-26557&t=Bo58EpFmg6ILJtmv-11
  *
  * Figma Props Mapping:
- * - Type (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
- * - Arrow → arrow (boolean) + placement (top/bottom/left/right/etc)
- * - Supporting text (True|False) → description (string|undefined)
- * - text → title (string, literal content)
+ * - Theme (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
+ * - Placement (None|Bottom left|...|Top center) → arrow (boolean) + placement
+ * - Show description (boolean) → description (string|undefined)
+ * - Text → title (string, literal content)
  *
  * Design Tokens Used:
  * - Light: surfaces.tooltip (#4b5563), typography.tooltip (#ffffff)