@moderneinc/neo-styled-components 2.5.0-next.f8ed7e → 2.5.0-next.fbda18

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/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/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/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 Property 1
+     */
+    state?: LargeCardState;
+    /**
+     * The theme variant of the card
+     * @default "light"
+     * @figma Property 2
+     */
+    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:
+ * - Property 1 → state (default/active/disabled/focused)
+ * - Property 2 → cardTheme (light/dark)
+ * - 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.card (#d1d5db) - Default border (50% opacity on dark)
+ * - semanticColors.border.tabActive (#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/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/Tag/Tag.d.ts

@@ -2,6 +2,7 @@ import { type ChipProps } from '@mui/material/Chip';
 declare module '@mui/material/Chip' {
     interface ChipPropsColorOverrides {
         violet: true;
+        beta: true;
     }
     interface ChipPropsSizeOverrides {
         large: true;
@@ -26,10 +27,10 @@ export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
     variant?: 'outlined' | 'filled';
     /**
      * The color/state of the tag
-     * @figma state (Neutral|Error|Warning|Success|Info|Violet)
+     * @figma state (Neutral|Error|Warning|Success|Info|Violet|Beta)
      * @default "default"
      */
-    color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet';
+    color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
 }
 /**
  * NeoTag - Small pill-shaped label component based on MUI Chip
@@ -39,7 +40,7 @@ export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
  * Figma Props Mapping:
  * - m (sm|md|lg) → size (small|medium|large)
  * - type (light|dark) → variant (outlined|filled)
- * - state (Neutral|Error|Warning|Success|Info|Violet) → color (default|error|warning|success|info|violet)
+ * - 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/index.d.ts

@@ -302,8 +302,9 @@ 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:
@@ -1298,38 +1299,45 @@ declare const NeoDot: {
     displayName: string;
 };
 
-interface NeoFilterChipsProps {
+interface NeoFilterChipProps extends Omit<ChipProps, 'variant' | 'color' | 'label'> {
     /**
      * The filter label text
-     * @figma Text content in Figma
      */
     label: string;
     /**
      * Whether the filter has active selections
      * @default false
-     * @figma Property 1 (Active | active focused)
      */
-    active?: boolean;
+    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 active)
+     * Number of active filter selections (shown as badge when selected)
      * @default 0
      */
     count?: number;
     /**
-     * Click handler for opening the filter dropdown
+     * Handler for clearing the filter (shows X icon when provided and selected)
      */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClear?: (e: React.MouseEvent) => void;
 }
 /**
- * NeoFilterChips - Filter chip button used for filtering data
+ * NeoFilterChip - Filter chip for filtering data, based on MUI Chip.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8257-239
+ * @example
+ * <NeoFilterChip label="Status" selected selectedLabel="Active, Pending" count={2} onClear={handleClear} />
  *
- * Figma Props Mapping:
- * - Property 1 (default|hover ope|focused|Active|active focused) → active boolean + CSS states
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8257-239
  */
-declare const NeoFilterChips: {
-    ({ label, active, count, onClick, ...props }: NeoFilterChipsProps): react_jsx_runtime.JSX.Element;
+declare const NeoFilterChip: {
+    ({ label, selected, expanded, selectedLabel, count, onClear, onClick, ...props }: NeoFilterChipProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -2098,6 +2106,7 @@ declare const NeoTab: {
 declare module '@mui/material/Chip' {
     interface ChipPropsColorOverrides {
         violet: true;
+        beta: true;
     }
     interface ChipPropsSizeOverrides {
         large: true;
@@ -2122,10 +2131,10 @@ interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
     variant?: 'outlined' | 'filled';
     /**
      * The color/state of the tag
-     * @figma state (Neutral|Error|Warning|Success|Info|Violet)
+     * @figma state (Neutral|Error|Warning|Success|Info|Violet|Beta)
      * @default "default"
      */
-    color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet';
+    color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
 }
 /**
  * NeoTag - Small pill-shaped label component based on MUI Chip
@@ -2135,7 +2144,7 @@ interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
  * Figma Props Mapping:
  * - m (sm|md|lg) → size (small|medium|large)
  * - type (light|dark) → variant (outlined|filled)
- * - state (Neutral|Error|Warning|Success|Info|Violet) → color (default|error|warning|success|info|violet)
+ * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
  * - Label text → label prop
  */
 declare const NeoTag: {
@@ -2796,5 +2805,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, NeoFilterChips, NeoFooter, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, 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, NeoFilterChipsProps, NeoFooterProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
+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, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, 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, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTypologyControlProps, NeoUserAvatarCellProps };