@moderneinc/neo-styled-components 2.8.0-next.6d340c → 2.8.0-next.eb01a5

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';
+    state?: 'default' | 'active' | 'disabled' | 'focused';
+    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/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/index.d.ts

@@ -2675,87 +2675,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';
+    state?: 'default' | 'active' | 'disabled' | 'focused';
+    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;
+};
+
+/**
+ * Props for the NeoMarketplaceCard component
+ * @deprecated Use NeoCardSmallProps with NeoCard instead
+ */
+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')}
- * />
- * ```
+ * // 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 +2945,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 };