@moderneinc/neo-styled-components 2.0.3 → 2.1.0-next.1c3b0f

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import { type LinkProps } from '@mui/material/Link';
-import type { ReactNode } from 'react';
+import type { ElementType, ReactNode } from 'react';
 /**
  * NeoBreadcrumbs - Navigation breadcrumb component
  *
@@ -26,6 +26,8 @@ export interface NeoBreadcrumbLinkProps extends Omit<LinkProps, 'color'> {
     current?: boolean;
     /** Link content */
     children: ReactNode;
+    /** Custom link component for client-side navigation (e.g., Next.js Link) */
+    component?: ElementType;
 }
 /**
  * NeoBreadcrumbLink - Individual breadcrumb link
@@ -42,7 +44,7 @@ export interface NeoBreadcrumbLinkProps extends Omit<LinkProps, 'color'> {
  * </NeoBreadcrumbs>
  * ```
  */
-export declare function NeoBreadcrumbLink({ current, children, ...props }: NeoBreadcrumbLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function NeoBreadcrumbLink({ current, children, component, ...props }: NeoBreadcrumbLinkProps): import("react/jsx-runtime").JSX.Element;
 /**
  * NeoBreadcrumbs - Navigation breadcrumb component
  *

package/dist/Button/Button.d.ts

@@ -37,6 +37,10 @@ export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
      * Button content
      */
     children?: ReactNode;
+    /**
+     * URL to link to. When provided, the button renders as a link element.
+     */
+    href?: string;
 }
 /**
  * NeoButton - Text button component based on MUI ButtonBase

package/dist/ListItem/ListItem.d.ts

@@ -47,6 +47,12 @@ export interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' |
      * @figma state="link"
      */
     isLink?: boolean;
+    /**
+     * Trailing element (optional, e.g., chevron icon for navigation)
+     * Renders at the end of the list item, typically used for navigation indicators.
+     * @figma Chevron icon for link variant
+     */
+    trailingElement?: ReactNode;
 }
 /**
  * NeoListItem - Flexible list item component with multiple size variants and states
@@ -62,6 +68,7 @@ export interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' |
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)
+ * - showChevron → trailingElement prop (pass ReactNode, e.g., ChevronRight icon)
  * - Placeholder → primaryText prop
  * - Recipe name → secondaryText prop
  * - (# recipes) → badge prop
@@ -79,6 +86,6 @@ export interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' |
  * - semanticColors.buttons.tertiary.disabled (disabled text color)
  */
 export declare const NeoListItem: {
-    ({ size, primaryText, secondaryText, badge, icon, isLink, component, ...props }: NeoListItemProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, primaryText, secondaryText, badge, icon, isLink, trailingElement, component, ...props }: NeoListItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/MarketplaceCard/MarketplaceCard.d.ts

@@ -65,9 +65,12 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children'> {
  * - Property 1="Default" → Base state (no props)
  *
  * Design Tokens Used:
- * - semanticColors.surfaces.card (#FFFFFF) - Card background
+ * - semanticColors.surfaces.card (#FFFFFF) - Default card background
+ * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
  * - semanticColors.border.card (#d1d5db) - Default border
  * - semanticColors.border.tabActive (#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

package/dist/PageContent/PageContent.d.ts

@@ -1,6 +1,24 @@
 import type { BoxProps } from '@mui/material/Box';
 import type { Breakpoint } from '@mui/material/styles';
-import { type ReactNode } from 'react';
+import type { ElementType, ReactNode } from 'react';
+/**
+ * Breadcrumb item configuration
+ */
+export interface BreadcrumbItem {
+    /** Link label */
+    label: ReactNode;
+    /** Link href (omit for current/last item) */
+    href?: string;
+}
+/**
+ * Breadcrumb configuration with link component and items
+ */
+export interface BreadcrumbConfig {
+    /** Custom link component for client-side navigation (e.g., Next.js Link) */
+    linkComponent?: ElementType;
+    /** Breadcrumb items */
+    items: BreadcrumbItem[];
+}
 export interface NeoPageContentProps extends BoxProps {
     /**
      * Main heading displayed on the page
@@ -12,6 +30,23 @@ export interface NeoPageContentProps extends BoxProps {
      * Optional subtitle displayed below the page title
      */
     subtitle?: ReactNode | string;
+    /**
+     * Optional breadcrumbs navigation displayed above the page title.
+     * Last item is automatically marked as current.
+     *
+     * @example
+     * ```tsx
+     * breadcrumbs={{
+     *   linkComponent: NextLink,
+     *   items: [
+     *     { label: 'Settings', href: '/settings' },
+     *     { label: 'Team', href: '/team' },
+     *     { label: 'Team Details' },
+     *   ]
+     * }}
+     * ```
+     */
+    breadcrumbs?: BreadcrumbConfig;
     /**
      * Action button displayed in the top-right corner
      *
@@ -28,6 +63,11 @@ export interface NeoPageContentProps extends BoxProps {
      * @default false
      */
     contentMaxWidth?: Breakpoint | false;
+    /**
+     * Center content when using contentMaxWidth
+     * @default true
+     */
+    centerContent?: boolean;
     /**
      * Disable gutters/padding
      * @default false
@@ -103,7 +143,7 @@ export interface NeoPageContentProps extends BoxProps {
  * </NeoPageContent>
  * ```
  */
-export declare function NeoPageContent({ pageTitle, subtitle, action, sticky, contentMaxWidth, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NeoPageContent {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, HTMLAttributes, ComponentType } from 'react';
+import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType } from 'react';
 import { GridDensity, GridFilterPanel } from '@mui/x-data-grid';
 import { AvatarProps } from '@mui/material/Avatar';
 import { ChipProps } from '@mui/material/Chip';
@@ -444,6 +444,8 @@ interface NeoBreadcrumbLinkProps extends Omit<LinkProps, 'color'> {
     current?: boolean;
     /** Link content */
     children: ReactNode;
+    /** Custom link component for client-side navigation (e.g., Next.js Link) */
+    component?: ElementType;
 }
 /**
  * NeoBreadcrumbLink - Individual breadcrumb link
@@ -460,7 +462,7 @@ interface NeoBreadcrumbLinkProps extends Omit<LinkProps, 'color'> {
  * </NeoBreadcrumbs>
  * ```
  */
-declare function NeoBreadcrumbLink({ current, children, ...props }: NeoBreadcrumbLinkProps): react_jsx_runtime.JSX.Element;
+declare function NeoBreadcrumbLink({ current, children, component, ...props }: NeoBreadcrumbLinkProps): react_jsx_runtime.JSX.Element;
 /**
  * NeoBreadcrumbs - Navigation breadcrumb component
  *
@@ -515,6 +517,10 @@ interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
      * Button content
      */
     children?: ReactNode;
+    /**
+     * URL to link to. When provided, the button renders as a link element.
+     */
+    href?: string;
 }
 /**
  * NeoButton - Text button component based on MUI ButtonBase
@@ -1596,6 +1602,24 @@ declare const NeoModalFooter: {
     displayName: string;
 };
 
+/**
+ * Breadcrumb item configuration
+ */
+interface BreadcrumbItem {
+    /** Link label */
+    label: ReactNode;
+    /** Link href (omit for current/last item) */
+    href?: string;
+}
+/**
+ * Breadcrumb configuration with link component and items
+ */
+interface BreadcrumbConfig {
+    /** Custom link component for client-side navigation (e.g., Next.js Link) */
+    linkComponent?: ElementType;
+    /** Breadcrumb items */
+    items: BreadcrumbItem[];
+}
 interface NeoPageContentProps extends BoxProps {
     /**
      * Main heading displayed on the page
@@ -1607,6 +1631,23 @@ interface NeoPageContentProps extends BoxProps {
      * Optional subtitle displayed below the page title
      */
     subtitle?: ReactNode | string;
+    /**
+     * Optional breadcrumbs navigation displayed above the page title.
+     * Last item is automatically marked as current.
+     *
+     * @example
+     * ```tsx
+     * breadcrumbs={{
+     *   linkComponent: NextLink,
+     *   items: [
+     *     { label: 'Settings', href: '/settings' },
+     *     { label: 'Team', href: '/team' },
+     *     { label: 'Team Details' },
+     *   ]
+     * }}
+     * ```
+     */
+    breadcrumbs?: BreadcrumbConfig;
     /**
      * Action button displayed in the top-right corner
      *
@@ -1623,6 +1664,11 @@ interface NeoPageContentProps extends BoxProps {
      * @default false
      */
     contentMaxWidth?: Breakpoint | false;
+    /**
+     * Center content when using contentMaxWidth
+     * @default true
+     */
+    centerContent?: boolean;
     /**
      * Disable gutters/padding
      * @default false
@@ -1698,7 +1744,7 @@ interface NeoPageContentProps extends BoxProps {
  * </NeoPageContent>
  * ```
  */
-declare function NeoPageContent({ pageTitle, subtitle, action, sticky, contentMaxWidth, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): react_jsx_runtime.JSX.Element;
+declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): react_jsx_runtime.JSX.Element;
 declare namespace NeoPageContent {
     var displayName: string;
 }
@@ -2291,6 +2337,12 @@ interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' | 'size'
      * @figma state="link"
      */
     isLink?: boolean;
+    /**
+     * Trailing element (optional, e.g., chevron icon for navigation)
+     * Renders at the end of the list item, typically used for navigation indicators.
+     * @figma Chevron icon for link variant
+     */
+    trailingElement?: ReactNode;
 }
 /**
  * NeoListItem - Flexible list item component with multiple size variants and states
@@ -2306,6 +2358,7 @@ interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' | 'size'
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)
+ * - showChevron → trailingElement prop (pass ReactNode, e.g., ChevronRight icon)
  * - Placeholder → primaryText prop
  * - Recipe name → secondaryText prop
  * - (# recipes) → badge prop
@@ -2323,7 +2376,7 @@ interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' | 'size'
  * - semanticColors.buttons.tertiary.disabled (disabled text color)
  */
 declare const NeoListItem: {
-    ({ size, primaryText, secondaryText, badge, icon, isLink, component, ...props }: NeoListItemProps): react_jsx_runtime.JSX.Element;
+    ({ size, primaryText, secondaryText, badge, icon, isLink, trailingElement, component, ...props }: NeoListItemProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -2533,9 +2586,12 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children'> {
  * - Property 1="Default" → Base state (no props)
  *
  * Design Tokens Used:
- * - semanticColors.surfaces.card (#FFFFFF) - Card background
+ * - semanticColors.surfaces.card (#FFFFFF) - Default card background
+ * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
  * - semanticColors.border.card (#d1d5db) - Default border
  * - semanticColors.border.tabActive (#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
@@ -2702,4 +2758,4 @@ 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, 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, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, 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 type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, 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 };