@moderneinc/neo-styled-components 2.7.0 → 2.8.0

package/dist/Avatar/Avatar.d.ts

@@ -16,7 +16,7 @@ export interface NeoAvatarProps extends Omit<AvatarProps, 'variant'> {
 /**
  * NeoAvatar - User avatar component based on MUI Avatar
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4214-58134
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=9600-185
  *
  * Figma Props Mapping:
  * - Figma Type "Initials" → variant="initials", size="small" (20px)

package/dist/Banner/Banner.d.ts

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

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 Content (Single|Multi|Inline)
+     * @figma Size (Single line|multiline|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:
- * - Theme (Dark|Light) → variant (outlined|filled)
- * - Content (Single|Multi|Inline) → size (small|large|inline)
- * - Show icon (boolean) → endIcon (ReactNode, unmappable)
+ * - Color (Light|Dark) → variant (outlined|filled)
+ * - size (Single line|multiline|inline) → size prop + auto-detected multiline
+ * - Copy button → endIcon (ReactNode)
  * - Text content → children prop
  */
 export declare const NeoCodeSnippet: {

package/dist/DataGridFilterPanel/DataGridFilterPanel.d.ts

@@ -1,6 +1,6 @@
 import { GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
 import type React from 'react';
-import { NeoSelect } from '../Select/Select';
+import { NeoDropdown } from '../Dropdown/Dropdown';
 export type { GridFilterItem as FilterItem, GridFilterOperator as FilterOperator, } from '@mui/x-data-grid';
 /**
  * Icon components for DataGrid filter panel slots
@@ -50,7 +50,7 @@ export declare const NeoDataGridFilterPanelRemoveAllIcon: {
  * />
  * ```
  */
-export { NeoSelect as NeoDataGridSelect };
+export { NeoDropdown as NeoDataGridSelect };
 export declare const NeoDataGridFilterPanel: {
     (props: React.ComponentProps<typeof MuiGridFilterPanel>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Divider/Divider.d.ts

@@ -7,16 +7,16 @@ export interface NeoDividerProps extends DividerProps {
  * Generic divider component that can be used in menus, lists, cards, or any layout
  * that needs visual separation between content sections.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4633-39807
  *
  * @example
  * ```tsx
  * // In a menu
- * <NeoMenu>
- *   <NeoMenuItem>Settings</NeoMenuItem>
+ * <NeoDropdownMenu>
+ *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
  *   <NeoDivider />
- *   <NeoMenuItem>Sign out</NeoMenuItem>
- * </NeoMenu>
+ *   <NeoDropdownMenuItem>Sign out</NeoDropdownMenuItem>
+ * </NeoDropdownMenu>
  *
  * // In a card
  * <Card>

package/dist/Dropdown/Dropdown.d.ts

@@ -0,0 +1,24 @@
+import { type SelectProps as MuiSelectProps } from '@mui/material/Select';
+import { NeoDropdownMenuItem } from '../DropdownMenuItem/DropdownMenuItem';
+export type NeoDropdownProps = MuiSelectProps;
+/**
+ * NeoDropdown - Dropdown select component with Neo design system styling
+ *
+ * A styled version of MUI's Select that uses Neo design tokens, Lucide ChevronDown icon,
+ * and NeoDropdownMenu/NeoDropdownMenuItem for the dropdown list.
+ *
+ * @example
+ * ```tsx
+ * import { NeoDropdown, NeoDropdownOption } from '@moderneinc/neo-styled-components'
+ *
+ * <NeoDropdown value={value} onChange={handleChange}>
+ *   <NeoDropdownOption value="option1">Option 1</NeoDropdownOption>
+ *   <NeoDropdownOption value="option2">Option 2</NeoDropdownOption>
+ * </NeoDropdown>
+ * ```
+ */
+export declare const NeoDropdown: {
+    (props: NeoDropdownProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { NeoDropdownMenuItem as NeoDropdownOption };

package/dist/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,32 @@
+import { type MenuProps } from '@mui/material/Menu';
+export interface NeoDropdownMenuProps extends MenuProps {
+    /**
+     * Menu content (typically NeoDropdownMenuItem components)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * NeoDropdownMenu - Dropdown menu component based on MUI Menu
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11141-4980
+ *
+ * @example
+ * ```tsx
+ * const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+ * const open = Boolean(anchorEl);
+ *
+ * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
+ * <NeoDropdownMenu
+ *   open={open}
+ *   anchorEl={anchorEl}
+ *   onClose={() => setAnchorEl(null)}
+ * >
+ *   <NeoDropdownMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoDropdownMenuItem>
+ *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
+ * </NeoDropdownMenu>
+ * ```
+ */
+export declare const NeoDropdownMenu: {
+    ({ children, ...props }: NeoDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/DropdownMenuItem/DropdownMenuItem.d.ts

@@ -0,0 +1,50 @@
+import { type MenuItemProps } from '@mui/material/MenuItem';
+import type { ReactNode } from 'react';
+export interface NeoDropdownMenuItemProps extends MenuItemProps {
+    /**
+     * Optional icon to display on the left side
+     * Note: Cannot be directly mapped from Figma (ReactNode)
+     */
+    icon?: ReactNode;
+    /**
+     * Optional keyboard shortcut to display on the right side
+     * @example "⌘+P" or "Ctrl+K"
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     */
+    shortcut?: string;
+    /**
+     * Optional secondary text to display next to the primary label
+     * @example "@username" or supporting text
+     * Note: Cannot be directly mapped from Figma (ReactNode/string)
+     */
+    secondaryText?: string;
+    /**
+     * Menu item content (text label)
+     * @figma children mapped from Figma layer content
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoDropdownMenuItem - Dropdown menu item component based on MUI MenuItem
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8584
+ *
+ * @example
+ * ```tsx
+ * // With icon and shortcut
+ * <NeoDropdownMenuItem icon={<UserIcon />} shortcut="⌘+P">
+ *   View profile
+ * </NeoDropdownMenuItem>
+ *
+ * // With secondary text (user list pattern from Figma node 4305:41844)
+ * <NeoDropdownMenuItem secondaryText="@phoenix">Phoenix Baker</NeoDropdownMenuItem>
+ * <NeoDropdownMenuItem secondaryText="@olivia">Olivia Rhye</NeoDropdownMenuItem>
+ *
+ * // Disabled state
+ * <NeoDropdownMenuItem disabled>Disabled item</NeoDropdownMenuItem>
+ * ```
+ */
+export declare const NeoDropdownMenuItem: {
+    ({ icon, shortcut, secondaryText, children, ...props }: NeoDropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/IconButton/IconButton.d.ts

@@ -14,15 +14,15 @@ export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'siz
  *
  * Simple, neutral icon button with transparent background and icon color states.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
  *
  * Figma Props Mapping:
- * - Hierarchy=Icon → Single default style (no variant prop)
  * - Size (Small|Medium) → size prop
  * - State=Disabled → disabled prop
  * - State=Hover → CSS :hover
- * - State=Pressed → CSS :active
- * - State=Focused → CSS :focus-visible
+ * - State=Active → CSS :active
+ * - State=Focus → CSS :focus-visible
+ * - State=Loading → not yet implemented
  */
 export declare const NeoIconButton: {
     ({ size, ...props }: NeoIconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/StatusBanner/StatusBanner.d.ts

@@ -7,15 +7,13 @@ export interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'var
     /**
      * The severity level of the status banner
      * @default "success"
-     *
-     * @figma Intent (Success|Error|Info|Offline|Warning)
+     * @figma Intent
      */
-    severity?: 'success' | 'error' | 'neutral' | 'info' | 'warning';
+    severity?: 'success' | 'error' | 'neutral' | 'info';
     /**
      * The visual variant style
      * @default "outlined"
-     *
-     * @figma Type (Outlined|Filled)
+     * @figma Theme
      */
     variant?: 'outlined' | 'filled';
     /**
@@ -30,21 +28,20 @@ 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, warning)
- * and visual modes (outlined for light backgrounds, filled for emphasis).
+ * Displays status information with different severity levels (success, error, info, neutral) 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:
- * - Intent (Success|Error|Info|Offline|Warning) → severity ('success'|'error'|'info'|'neutral'|'warning')
- * - Type (Outlined|Filled) → variant ('outlined'|'filled')
+ * - Status (Success|Error|Info|Offline) → severity ('success'|'error'|'info'|'neutral')
+ * - Mode (Light|Dark) → variant ('outlined'|'filled')
  *
  * Design Tokens Used:
  * - 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 Show tag (boolean)
+     * @figma Tag with number (999)
      */
     count?: number | string;
     /**
      * Tab value identifier
      *
-     * @figma Selected (True|False) — controlled by parent NeoTabs
+     * @figma Used for Current=True/False state
      */
     value: string | number;
 }
@@ -38,9 +38,11 @@ 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:
- * - Selected (True|False) → Controlled by parent NeoTabs value
- * - State (Default|Hover|Focus|Disabled) → CSS states + disabled prop
- * - Show tag (boolean) → count prop (renders NeoTag)
+ * - 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)
  * - 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 Size (Small|Medium|Large)
+     * @figma m (sm|md|lg)
      * @default "small"
      */
     size?: 'small' | 'medium' | 'large';
     /**
      * The variant style of the tag
-     * @figma Type (Outline|Filled)
+     * @figma type (light|dark)
      * @default "outlined"
      */
     variant?: 'outlined' | 'filled';
     /**
-     * The color/intent of the tag
-     * @figma Intent (Neutral|Error|Warning|Success|Info|Violet|Beta)
+     * The color/state of the tag
+     * @figma state (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:
- * - 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)
+ * - 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)
  * - Label text → label prop
  */
 export declare const NeoTag: {

package/dist/Toast/Toast.d.ts

@@ -3,17 +3,10 @@ import Button from '@mui/material/Button';
 import type { ReactNode } from 'react';
 export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The intent/color variant of the toast
+     * The visual style variant of the toast
      * @default "default"
      */
-    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';
+    variant?: 'default' | 'dark' | 'brand' | 'error' | 'success' | 'info' | 'download';
     /**
      * The title/header text
      */
@@ -51,26 +44,25 @@ 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:
- * - 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)
+ * - 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)
  */
 export declare const NeoToast: {
-    ({ variant, type, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, 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, type, children, ...props }: {
+    ({ primary, variant, children, ...props }: {
         primary?: boolean;
         variant?: NeoToastProps["variant"];
-        type?: NeoToastProps["type"];
         children: ReactNode;
-    } & Omit<React.ComponentProps<typeof Button>, "variant" | "type">): import("react/jsx-runtime").JSX.Element;
+    } & Omit<React.ComponentProps<typeof Button>, "variant">): 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 Theme (Light mode|Dark mode|Brand color)
+     * @figma Type
      */
     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 Show description (boolean)
+     * @figma Supporting text
      */
     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:
- * - 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)
+ * - 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)
  *
  * Design Tokens Used:
  * - Light: surfaces.tooltip (#4b5563), typography.tooltip (#ffffff)