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

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/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/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/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