@moderneinc/neo-styled-components 2.8.0 → 3.0.0-next.ac08ae

package/dist/Banner/Banner.d.ts

@@ -1,13 +1,22 @@
 import { type AlertProps } from '@mui/material/Alert';
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+type Intent = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type BannerType = 'outlined' | 'filled';
 export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The visual style variant of the banner
-     * @default "light"
+     * The intent/purpose of the banner
+     * @default "info"
      *
-     * @figmaPropMapping color (Dark|Light|Success|Error|Warning) → variant
+     * @figmaPropMapping Intention (Info|Success|Error|Warning|Neutral) → intent
      */
-    variant?: 'dark' | 'light' | 'success' | 'error' | 'warning';
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
+     *
+     * @figmaPropMapping Type (Outlined|Filled) → type
+     */
+    type?: BannerType;
     /**
      * The message text to display
      *
@@ -18,20 +27,20 @@ export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity'
      * Horizontal alignment of the message content
      * @default "left"
      *
-     * @figmaPropMapping messagePosition (Left|Center) → messagePosition
+     * @figmaPropMapping Message Position (Left|Center) → messagePosition
      */
     messagePosition?: 'left' | 'center';
     /**
      * Optional link text to display after the message
      *
-     * @figmaPropMapping link (boolean) → linkText (string)
+     * @figmaPropMapping Show Link (boolean) → linkText (string)
      */
     linkText?: string;
     /**
      * Whether to show the close button
-     * @default true
+     * @default false
      *
-     * @figmaPropMapping closeIcon → showClose
+     * @figmaPropMapping Dismissible → showClose
      */
     showClose?: boolean;
     /**
@@ -48,19 +57,8 @@ export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity'
      */
     onLinkClick?: () => void;
 }
-/**
- * NeoBanner - Inline banner/alert component based on MUI Alert
- *
- * @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)
- */
 export declare const NeoBanner: {
-    ({ variant, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
+export {};

package/dist/Card/Card.d.ts

@@ -0,0 +1,32 @@
+import { type CardProps } from '@mui/material/Card';
+import type { ReactNode } from 'react';
+export type NeoCardSize = 'small' | 'large';
+export interface NeoCardSmallProps extends Omit<CardProps, 'children' | 'title'> {
+    size: 'small';
+    logo: ReactNode;
+    recipeCount: string;
+    title: ReactNode | string;
+    description: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface NeoCardLargeProps extends Omit<CardProps, 'children' | 'title'> {
+    size: 'large';
+    disabled?: boolean;
+    cardTheme?: 'light' | 'dark';
+    showIcon?: boolean;
+    showGel?: boolean;
+    showButtons?: boolean;
+    icon?: ReactNode;
+    gel?: ReactNode;
+    title?: ReactNode;
+    children?: ReactNode;
+    actions?: ReactNode;
+    onClick?: () => void;
+}
+export type NeoCardProps = NeoCardSmallProps | NeoCardLargeProps;
+export declare const NeoCard: {
+    (props: NeoCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Checkbox/Checkbox.d.ts

@@ -2,7 +2,7 @@ import { type CheckboxProps } from '@mui/material/Checkbox';
 import type { ReactNode } from 'react';
 /**
  * Custom checkbox icons matching Figma design
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-39311
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11487-81
  *
  * Checkbox sizes: xs=12x12, small=16x16, medium=20x20
  * Check/minus paths scaled from Untitled UI (originally 24x24)
@@ -43,7 +43,7 @@ export interface NeoCheckboxProps extends Omit<CheckboxProps, 'size'> {
 /**
  * NeoCheckbox - Checkbox component based on MUI Checkbox
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-39311
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11487-81
  *
  * Figma Props Mapping:
  * - Checked (True|False) → checked prop

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

package/dist/DownloadToast/DownloadToast.d.ts

@@ -0,0 +1,47 @@
+import { type PaperProps } from '@mui/material/Paper';
+import type { ReactNode } from 'react';
+export interface NeoDownloadToastProps extends Omit<PaperProps, 'title'> {
+    /**
+     * The header text
+     */
+    title?: string;
+    /**
+     * The file name being downloaded
+     */
+    fileName?: string;
+    /**
+     * Progress value (0-100)
+     */
+    progress?: number;
+    /**
+     * Whether to show the close button
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Whether to show the pause button
+     * @default true
+     */
+    showPause?: boolean;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Callback when pause button is clicked
+     */
+    onPause?: () => void;
+    /**
+     * Custom actions to override the default pause/close buttons
+     */
+    actions?: ReactNode;
+}
+/**
+ * NeoDownloadToast - Standalone download progress toast notification
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3377-26954
+ */
+export declare const NeoDownloadToast: {
+    ({ title, fileName, progress, showClose, showPause, onClose, onPause, actions, ...props }: NeoDownloadToastProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/MarketplaceCard/MarketplaceCard.d.ts

@@ -1,85 +1,23 @@
-import { type CardProps } from '@mui/material/Card';
-import type { ReactNode } from 'react';
+import type { NeoCardSmallProps } from '../Card/Card';
 /**
  * Props for the NeoMarketplaceCard component
+ * @deprecated Use NeoCardSmallProps with NeoCard instead
  */
-export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'> {
-    /**
-     * The logo to display (48x48px ReactNode)
-     */
-    logo: ReactNode;
-    /**
-     * The recipe count text (e.g., "1,260 recipes")
-     */
-    recipeCount: string;
-    /**
-     * The title text or element
-     */
-    title: ReactNode | string;
-    /**
-     * The description text
-     */
-    description: string;
-    /**
-     * Whether the card is in selected/active state
-     * @default false
-     * @figma State (Active)
-     */
-    selected?: boolean;
-    /**
-     * Whether the card is disabled
-     * @default false
-     * @figma State (Disabled)
-     */
-    disabled?: boolean;
-    /**
-     * Click handler for the card
-     */
-    onClick?: () => void;
+export interface NeoMarketplaceCardProps extends Omit<NeoCardSmallProps, 'size'> {
 }
 /**
- * NeoMarketplaceCard - Selectable card component for marketplace items
- *
- * A fixed-size card (160x160px) displaying a logo, recipe count, title, and description.
- * Supports selected (active), disabled, and focused states.
+ * @deprecated Use `NeoCard` with `size="small"` instead.
  *
  * @example
  * ```tsx
- * <NeoMarketplaceCard
- *   logo={<JavaLogo />}
- *   recipeCount="1,260 recipes"
- *   title="Java"
- *   description="Basic building blocks for transforming Java..."
- *   selected={false}
- *   disabled={false}
- *   onClick={() => console.log('clicked')}
- * />
- * ```
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
+ * // Before
+ * <NeoMarketplaceCard logo={...} title="Java" ... />
  *
- * Figma Props Mapping:
- * - 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.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
- * - typography.fontSize.xxs (10px) - Recipe count
- * - typography.fontSize.xs (12px) - Description
- * - typography.fontSize.h6 (16px) - Title
- * - typography.fontWeight.semiBold (600) - Title and recipe count
- * - typography.fontWeight.regular (400) - Description
+ * // After
+ * <NeoCard size="small" logo={...} title="Java" ... />
+ * ```
  */
 export declare const NeoMarketplaceCard: {
-    ({ logo, recipeCount, title, description, selected, disabled, onClick, ...props }: NeoMarketplaceCardProps): import("react/jsx-runtime").JSX.Element;
+    (props: NeoMarketplaceCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/MarketplaceLargeCard/MarketplaceLargeCard.d.ts

@@ -1,91 +1,23 @@
-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;
+import type { NeoCardLargeProps } from '../Card/Card';
+/**
+ * Props for the NeoMarketplaceLargeCard component
+ * @deprecated Use NeoCardLargeProps with NeoCard instead
+ */
+export interface NeoMarketplaceLargeCardProps extends Omit<NeoCardLargeProps, 'size'> {
 }
 /**
- * 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
+ * @deprecated Use `NeoCard` with `size="large"` instead.
  *
- * Figma Props Mapping:
- * - State → state (Default/Active/Disabled/Focused)
- * - Theme → cardTheme (Dark/Light)
- * - Show Icon → showIcon
- * - Show Gel → showGel
- * - Show Buttons → showButtons
+ * @example
+ * ```tsx
+ * // Before
+ * <NeoMarketplaceLargeCard cardTheme="light" ... />
  *
- * 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
+ * // After
+ * <NeoCard size="large" cardTheme="light" ... />
+ * ```
  */
 export declare const NeoMarketplaceLargeCard: {
-    ({ state, cardTheme, showIcon, showGel, showButtons, icon, gel, title, children, actions, onClick, ...props }: NeoMarketplaceLargeCardProps): import("react/jsx-runtime").JSX.Element;
+    (props: NeoMarketplaceLargeCardProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export {};

package/dist/Radio/Radio.d.ts

@@ -32,7 +32,6 @@ export interface NeoRadioProps extends Omit<RadioProps, 'size'> {
  * NeoRadio - Radio button component based on MUI Radio
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-40039
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-40150
  *
  * Figma Props Mapping:
  * - Checked (True|False) → checked prop

package/dist/Tag/Tag.d.ts

@@ -1,4 +1,5 @@
-import { type ChipProps } from '@mui/material/Chip';
+import Chip from '@mui/material/Chip';
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
 declare module '@mui/material/Chip' {
     interface ChipPropsColorOverrides {
         violet: true;
@@ -12,7 +13,7 @@ declare module '@mui/material/Chip' {
         filled: true;
     }
 }
-export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
+type NeoTagOwnProps = {
     /**
      * The size of the tag
      * @figma m (sm|md|lg)
@@ -31,7 +32,10 @@ export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
      * @default "default"
      */
     color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
-}
+};
+export type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps> & {
+    component?: C;
+};
 /**
  * NeoTag - Small pill-shaped label component based on MUI Chip
  *
@@ -43,7 +47,8 @@ export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
  * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
  * - Label text → label prop
  */
-export declare const NeoTag: {
-    ({ size, variant, ...props }: NeoTagProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, ...props }: NeoTagProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace NeoTag {
+    var displayName: string;
+}
+export {};

package/dist/Toast/Toast.d.ts

@@ -6,7 +6,7 @@ export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' |
      * The visual style variant of the toast
      * @default "default"
      */
-    variant?: 'default' | 'dark' | 'brand' | 'error' | 'success' | 'info' | 'download';
+    variant?: 'default' | 'dark' | 'brand' | 'error' | 'success' | 'info';
     /**
      * The title/header text
      */
@@ -25,14 +25,6 @@ export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' |
      * Pass action buttons as children of this prop
      */
     actions?: ReactNode;
-    /**
-     * Progress value (0-100) for download variant
-     */
-    progress?: number;
-    /**
-     * File name for download variant
-     */
-    fileName?: string;
     /**
      * Callback when close button is clicked
      */
@@ -44,15 +36,14 @@ 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:
- * - type (Light mode|Dark mode|Brand color|Error|Success|Info|Download) → variant (default|dark|brand|error|success|info|download)
+ * - type (Light mode|Dark mode|Brand color|Error|Success|Info) → variant (default|dark|brand|error|success|info)
  * - header → title (string)
  * - supportingText → message (string)
  * - xCloseButton → showClose (boolean)
  * - actions → actions (ReactNode)
- * - Progress bar → progress (number 0-100)
  */
 export declare const NeoToast: {
-    ({ variant, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): import("react/jsx-runtime").JSX.Element;
+    ({ variant, title, message, showClose, actions, onClose, ...props }: NeoToastProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 /**