@moderneinc/neo-styled-components 2.5.0-next.f787ac → 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/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:
@@ -2105,6 +2106,7 @@ declare const NeoTab: {
 declare module '@mui/material/Chip' {
     interface ChipPropsColorOverrides {
         violet: true;
+        beta: true;
     }
     interface ChipPropsSizeOverrides {
         large: true;
@@ -2129,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
@@ -2142,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: {