@moderneinc/neo-styled-components 2.5.0 → 2.6.0-next.162b98

package/dist/ActivityHeader/ActivityHeader.d.ts

@@ -34,6 +34,7 @@ export interface NeoActivityHeaderProps {
  *
  * **Figma Props Mapping:**
  * - `Size` (Figma) → `size` (React): Height variant matching DataGrid sizes
+ * - `Type` (Figma) → `color` (React): Activity type (Commit Job → commitJob, Recipe Run → recipeRun, Visualization → visualization)
  *
  * **Design Tokens:**
  * - `semanticColors.activity.commitJob` - Blue dot for commit job events (#2F42FF)

package/dist/Avatar/Avatar.d.ts

@@ -20,8 +20,9 @@ export interface NeoAvatarProps extends Omit<AvatarProps, 'variant'> {
  *
  * Figma Props Mapping:
  * - Figma Type "Initials" → variant="initials", size="small" (20px)
- * - Figma Type "Small" → variant="circular", size="small" (20px with image)
+ * - Figma Type "Small" → variant="circular", size="small" (32px with image)
  * - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
+ * - State: Focus → CSS :focus-visible ring (2px white inner + 4px blue outer)
  * - State: Hover (tooltip) → Wrap component with MUI Tooltip
  *
  * Usage:

package/dist/Badge/Badge.d.ts

@@ -12,9 +12,9 @@ export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230
  *
  * Figma Props Mapping:
- * - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)
- * - iconLeading → icon prop (pass React element)
- * - iconTrailing → deleteIcon prop (pass React element)
+ * - Intent (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)
+ * - LeadingIcon → icon prop (pass React element)
+ * - TrailingIcon → deleteIcon prop (pass React element)
  * - Label → label prop
  */
 export declare const NeoBadge: {

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

@@ -1,5 +1,5 @@
-import { type ButtonBaseProps } from '@mui/material/ButtonBase';
-import type { ReactNode } from 'react';
+import ButtonBase from '@mui/material/ButtonBase';
+import React, { type ElementType, type ReactNode } from 'react';
 declare module '@mui/material/ButtonBase' {
     interface ButtonBasePropsVariantOverrides {
         primary: true;
@@ -7,11 +7,12 @@ declare module '@mui/material/ButtonBase' {
         destructive: true;
         link: true;
         linkColor: true;
+        tertiary: true;
     }
 }
-type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor' | 'tertiary';
 type ButtonSize = 'small' | 'medium';
-export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
+type NeoButtonOwnProps = {
     /**
      * The visual variant of the button
      * @default "primary"
@@ -41,14 +42,25 @@ export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
      * URL to link to. When provided, the button renders as a link element.
      */
     href?: string;
-}
+    /**
+     * Icon placed before the button label
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon placed after the button label
+     */
+    endIcon?: ReactNode;
+};
+export type NeoButtonProps<C extends ElementType = typeof ButtonBase> = NeoButtonOwnProps & Omit<React.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
+    component?: C;
+};
 /**
  * NeoButton - Text button component based on MUI ButtonBase
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
  *
  * Figma Props Mapping:
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
  * - State=Disabled → disabled prop
  * - State=Loading → loading prop
@@ -56,8 +68,8 @@ export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
  * - State=Pressed → CSS :active
  * - State=Focused → CSS :focus-visible
  */
-export declare const NeoButton: {
-    ({ variant, size, loading, children, disabled, ...props }: NeoButtonProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function NeoButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: NeoButtonProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace NeoButton {
+    var displayName: string;
+}
 export {};

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

@@ -7,20 +7,20 @@ declare module '@mui/material/ButtonBase' {
     }
 }
 type CodeSnippetVariant = 'outlined' | 'filled';
-type CodeSnippetSize = 'xs' | 'small' | 'large';
+type CodeSnippetSize = 'xs' | 'small' | 'large' | 'inline';
 export interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
     /**
      * The visual variant of the code snippet
      * @default "outlined"
      *
-     * @figma Color (Light|Dark)
+     * @figma Theme (Dark|Light)
      */
     variant?: CodeSnippetVariant;
     /**
      * The size of the code snippet
      * @default "small"
      *
-     * @figma size (xs|small|large)
+     * @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) → auto-detected from children
- * - 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/FilterChip/FilterChip.d.ts

@@ -0,0 +1,42 @@
+import { type ChipProps } from '@mui/material/Chip';
+export interface NeoFilterChipProps extends Omit<ChipProps, 'variant' | 'color' | 'label'> {
+    /**
+     * The filter label text
+     */
+    label: string;
+    /**
+     * Whether the filter has active selections
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the filter dropdown is expanded
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Value text shown when selected (e.g. "Filter 1, Filter 2")
+     */
+    selectedLabel?: string;
+    /**
+     * Number of active filter selections (shown as badge when selected)
+     * @default 0
+     */
+    count?: number;
+    /**
+     * Handler for clearing the filter (shows X icon when provided and selected)
+     */
+    onClear?: (e: React.MouseEvent) => void;
+}
+/**
+ * NeoFilterChip - Filter chip for filtering data, based on MUI Chip.
+ *
+ * @example
+ * <NeoFilterChip label="Status" selected selectedLabel="Active, Pending" count={2} onClear={handleClear} />
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8257-239
+ */
+export declare const NeoFilterChip: {
+    ({ label, selected, expanded, selectedLabel, count, onClear, onClick, ...props }: NeoFilterChipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Footer/Footer.d.ts

@@ -54,6 +54,11 @@ export interface NeoFooterProps {
      * If not provided, will attempt to use DataGrid's pagination state
      */
     hasNextPage?: boolean;
+    /**
+     * Whether to show the selected row count on the left side (pagination variant)
+     * @default true
+     */
+    showSelected?: boolean;
     /**
      * Custom content to render in the footer
      */
@@ -103,6 +108,6 @@ export interface NeoFooterProps {
  * />
  */
 export declare const NeoFooter: {
-    ({ variant, showShadow, loading, resultCount, onLoadMore, hasMore, paginationInfo, onPreviousPage, onNextPage, hasPreviousPage, hasNextPage, children, }: NeoFooterProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, showShadow, loading, resultCount, onLoadMore, hasMore, paginationInfo, onPreviousPage, onNextPage, hasPreviousPage, hasNextPage, showSelected, children, }: NeoFooterProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type IconWrapperSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | 128 | 160 | 192;
+export interface NeoIconWrapperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+    /**
+     * The size of the icon wrapper in pixels
+     * @figma Size (8px|12px|...|192px)
+     * @default 20
+     */
+    size?: IconWrapperSize;
+    /**
+     * Icon element to render inside the wrapper
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoIconWrapper - Flex-centered container that sizes icons
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4061-9955
+ */
+export declare const NeoIconWrapper: {
+    ({ size, children, ...props }: NeoIconWrapperProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/ListItemButton/ListItemButton.d.ts

@@ -20,7 +20,7 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
  * NeoListItemButton - Selectable list item with icon and text
  *
  * A selectable list item component that displays an optional icon with primary
- * and secondary text. Supports active (selected), deselected, and disabled states.
+ * and secondary text. Supports active (selected), deselected, focus, and disabled states.
  *
  * Uses MUI's ListItemButton as base for proper accessibility and interaction.
  * Compose with ListItemIcon and ListItemText for proper structure.
@@ -41,13 +41,14 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4925-3764
  *
  * Figma Props Mapping:
- * - property1="Active" → selected={true}
- * - property1="Deselected" → selected={false}
- * - property1="Disabled" → disabled={true}
+ * - state="active" → selected={true}
+ * - state="deselected" → selected={false}
+ * - state="focus" → focus-visible CSS state
+ * - state="disabled" → disabled={true}
  * - 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

@@ -23,13 +23,13 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 't
     /**
      * Whether the card is in selected/active state
      * @default false
-     * @figma Property 1 (Active)
+     * @figma State (Active)
      */
     selected?: boolean;
     /**
      * Whether the card is disabled
      * @default false
-     * @figma Property 1 (Disabled)
+     * @figma State (Disabled)
      */
     disabled?: boolean;
     /**
@@ -59,16 +59,17 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 't
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
  *
  * Figma Props Mapping:
- * - Property 1="Active" → selected={true}
- * - Property 1="Disabled" → disabled={true}
- * - Property 1="Focused" → CSS :focus-visible state (not a prop)
- * - Property 1="Default" → Base state (no props)
+ * - State="Active" → selected={true}
+ * - State="Disabled" → disabled={true}
+ * - State="Focused" → CSS :focus-visible state (not a prop)
+ * - State="Hover" → CSS :hover state (not a prop)
+ * - State="Default" → Base state (no props)
  *
  * 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

@@ -0,0 +1,91 @@
+import { type CardProps } from '@mui/material/Card';
+import type { ReactNode } from 'react';
+type LargeCardState = 'default' | 'active' | 'disabled' | 'focused';
+type LargeCardTheme = 'light' | 'dark';
+export interface NeoMarketplaceLargeCardProps extends Omit<CardProps, 'children' | 'title'> {
+    /**
+     * The visual state of the card
+     * @default "default"
+     * @figma State
+     */
+    state?: LargeCardState;
+    /**
+     * The theme variant of the card
+     * @default "light"
+     * @figma Theme
+     */
+    cardTheme?: LargeCardTheme;
+    /**
+     * Whether to show the icon
+     * @default true
+     * @figma Show Icon
+     */
+    showIcon?: boolean;
+    /**
+     * Whether to show the gel brand icon
+     * @default true
+     * @figma Show Gel
+     */
+    showGel?: boolean;
+    /**
+     * Whether to show the button area
+     * @default true
+     * @figma Show Buttons
+     */
+    showButtons?: boolean;
+    /**
+     * Icon element to display in the header row (rendered at 20x20)
+     */
+    icon?: ReactNode;
+    /**
+     * Gel/brand icon to display in the header row (rendered at 20x20)
+     */
+    gel?: ReactNode;
+    /**
+     * Title text displayed inline in the header row with icon and gel
+     */
+    title?: ReactNode;
+    /**
+     * Description text displayed below the header row
+     */
+    children?: ReactNode;
+    /**
+     * Button/action elements for the footer row
+     */
+    actions?: ReactNode;
+    /**
+     * Click handler for the card
+     */
+    onClick?: () => void;
+}
+/**
+ * NeoMarketplaceLargeCard - A large marketplace card with state and theme variants
+ *
+ * A 340x162px card with optional icon, gel brand icon, title, description, and action buttons.
+ * Icon, gel, and title display inline in a header row.
+ * Supports 4 states (default, active, disabled, focused) and 2 themes (light, dark).
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=5925-11
+ *
+ * Figma Props Mapping:
+ * - State → state (Default/Active/Disabled/Focused)
+ * - Theme → cardTheme (Dark/Light)
+ * - Show Icon → showIcon
+ * - Show Gel → showGel
+ * - Show Buttons → showButtons
+ *
+ * Design Tokens Used:
+ * - semanticColors.surfaces.card (#ffffff) - Light theme background
+ * - colors.grey[800] (#1f2937) - Dark theme background
+ * - 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
+ * - shadows.card - Active state shadow
+ */
+export declare const NeoMarketplaceLargeCard: {
+    ({ state, cardTheme, showIcon, showGel, showButtons, icon, gel, title, children, actions, onClick, ...props }: NeoMarketplaceLargeCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/MenuItem/MenuItem.d.ts

@@ -30,9 +30,11 @@ export interface NeoMenuItemProps extends MenuItemProps {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
  *
  * Figma Props Mapping:
+ * - Figma "Dropdown - Menu" component uses Type (Avatar|Button|Icon) and Open (True|False)
+ *   to control the menu trigger. NeoMenuItem is the individual item inside the menu.
  * - Text label → children prop (mapped via figma.children)
- * - State=Selected → selected prop (mapped via figma.enum)
- * - State=Disabled → disabled prop (mapped via figma.enum)
+ * - selected → selected prop (React-controlled)
+ * - disabled → disabled prop (React-controlled)
  * - Hover state → CSS :hover (not mapped)
  * - Icon slot → icon prop (not mappable - ReactNode)
  * - Secondary text → secondaryText prop (not mappable - ReactNode/string)

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

@@ -0,0 +1,36 @@
+import { type ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ReactNode } from 'react';
+export interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
+    /**
+     * Icon element to display
+     */
+    icon?: ReactNode;
+    /**
+     * Text label below the icon
+     */
+    label?: string;
+    /**
+     * Whether the item is selected/active
+     * @figma State (Selected)
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Optional tag badge content (e.g., count)
+     * @figma Tag
+     */
+    tag?: string;
+    /**
+     * Additional content
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
+ */
+export declare const NeoNavigationItem: {
+    ({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/SearchChip/SearchChip.d.ts

@@ -0,0 +1,19 @@
+import { type InputBaseProps } from '@mui/material/InputBase';
+export interface NeoSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
+    /**
+     * Handler for clearing the search value (shows X icon when provided and value is non-empty)
+     */
+    onClear?: () => void;
+}
+/**
+ * NeoSearchChip - Pill-shaped search input for inline search functionality.
+ *
+ * @example
+ * <NeoSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8542-921
+ */
+export declare const NeoSearchChip: {
+    ({ onClear, value, ...props }: NeoSearchChipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};