@moderneinc/neo-styled-components 2.8.0 → 3.0.0

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType } from 'react';
+import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType, ComponentPropsWithoutRef } from 'react';
 import { GridDensity, GridFilterPanel } from '@mui/x-data-grid';
 import { AvatarProps } from '@mui/material/Avatar';
-import { ChipProps } from '@mui/material/Chip';
+import Chip, { ChipProps } from '@mui/material/Chip';
 import { AlertProps } from '@mui/material/Alert';
 import { LinkProps } from '@mui/material/Link';
 import * as ButtonBase from '@mui/material/ButtonBase';
@@ -362,14 +362,23 @@ declare const NeoBadge: {
     displayName: string;
 };
 
+type Intent = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type BannerType = 'outlined' | 'filled';
 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 Intention (Info|Success|Error|Warning|Neutral) → intent
+     */
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
      *
-     * @figmaPropMapping color (Dark|Light|Success|Error|Warning) → variant
+     * @figmaPropMapping Type (Outlined|Filled) → type
      */
-    variant?: 'dark' | 'light' | 'success' | 'error' | 'warning';
+    type?: BannerType;
     /**
      * The message text to display
      *
@@ -380,20 +389,20 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
      * 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;
     /**
@@ -410,20 +419,8 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
      */
     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)
- */
 declare const NeoBanner: {
-    ({ variant, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): react_jsx_runtime.JSX.Element;
+    ({ intent, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): react_jsx_runtime.JSX.Element | null;
     displayName: string;
 };
 
@@ -684,7 +681,7 @@ interface StyledComponent<ComponentProps extends {}, SpecificComponentProps exte
 
 /**
  * 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)
@@ -721,7 +718,7 @@ 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
@@ -787,7 +784,7 @@ 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;
     /**
@@ -805,9 +802,9 @@ 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
  */
 declare const NeoCodeSnippet: {
@@ -2006,7 +2003,6 @@ 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
@@ -2222,7 +2218,7 @@ declare module '@mui/material/Chip' {
         filled: true;
     }
 }
-interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
+type NeoTagOwnProps = {
     /**
      * The size of the tag
      * @figma m (sm|md|lg)
@@ -2241,7 +2237,10 @@ interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
      * @default "default"
      */
     color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
-}
+};
+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
  *
@@ -2253,17 +2252,17 @@ 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
  */
-declare const NeoTag: {
-    ({ size, variant, ...props }: NeoTagProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, ...props }: NeoTagProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace NeoTag {
+    var displayName: string;
+}
 
 interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
      * 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
      */
@@ -2282,14 +2281,6 @@ interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color
      * 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
      */
@@ -2301,15 +2292,14 @@ interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color
  * @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)
  */
 declare const NeoToast: {
-    ({ variant, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): react_jsx_runtime.JSX.Element;
+    ({ variant, title, message, showClose, actions, onClose, ...props }: NeoToastProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 /**
@@ -2675,87 +2665,80 @@ declare const NeoTypologyControl: {
     displayName: string;
 };
 
-/**
- * Props for the NeoMarketplaceCard component
- */
-interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'> {
-    /**
-     * The logo to display (48x48px ReactNode)
-     */
+type NeoCardSize = 'small' | 'large';
+interface NeoCardSmallProps extends Omit<CardProps, 'children' | 'title'> {
+    size: 'small';
     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;
 }
+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;
+}
+type NeoCardProps = NeoCardSmallProps | NeoCardLargeProps;
+declare const NeoCard: {
+    (props: NeoCardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 /**
- * 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.
+ * Props for the NeoMarketplaceCard component
+ * @deprecated Use NeoCardSmallProps with NeoCard instead
+ */
+interface NeoMarketplaceCardProps extends Omit<NeoCardSmallProps, 'size'> {
+}
+/**
+ * @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')}
- * />
- * ```
+ * // Before
+ * <NeoMarketplaceCard logo={...} title="Java" ... />
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
+ * // After
+ * <NeoCard size="small" logo={...} title="Java" ... />
+ * ```
+ */
+declare const NeoMarketplaceCard: {
+    (props: NeoMarketplaceCardProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Props for the NeoMarketplaceLargeCard component
+ * @deprecated Use NeoCardLargeProps with NeoCard instead
+ */
+interface NeoMarketplaceLargeCardProps extends Omit<NeoCardLargeProps, 'size'> {
+}
+/**
+ * @deprecated Use `NeoCard` with `size="large"` instead.
  *
- * 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)
+ * @example
+ * ```tsx
+ * // Before
+ * <NeoMarketplaceLargeCard cardTheme="light" ... />
  *
- * 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="large" cardTheme="light" ... />
+ * ```
  */
-declare const NeoMarketplaceCard: {
-    ({ logo, recipeCount, title, description, selected, disabled, onClick, ...props }: NeoMarketplaceCardProps): react_jsx_runtime.JSX.Element;
+declare const NeoMarketplaceLargeCard: {
+    (props: NeoMarketplaceLargeCardProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -2952,5 +2935,5 @@ declare module '@mui/x-data-grid-pro' {
 
 declare const version: string
 
-export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoDropdown as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDropdown, NeoDropdownMenu, NeoDropdownMenuItem, NeoDropdownMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoDropdownMenu as NeoMenu, NeoDropdownMenuItem as NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoDropdown as NeoSelect, NeoDropdownMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
-export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDropdownMenuItemProps, NeoDropdownMenuProps, NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoDropdownMenuItemProps as NeoMenuItemProps, NeoDropdownMenuProps as NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoDropdownProps as NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
+export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoDropdown as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDropdown, NeoDropdownMenu, NeoDropdownMenuItem, NeoDropdownMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoDropdownMenu as NeoMenu, NeoDropdownMenuItem as NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoDropdown as NeoSelect, NeoDropdownMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
+export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDropdownMenuItemProps, NeoDropdownMenuProps, NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMarketplaceLargeCardProps, NeoDropdownMenuItemProps as NeoMenuItemProps, NeoDropdownMenuProps as NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoDropdownProps as NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };