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

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/index.d.ts

@@ -515,6 +515,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
@@ -2319,6 +2323,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
@@ -2334,6 +2344,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
@@ -2351,7 +2362,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;
 };
 
@@ -2561,9 +2572,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

package/dist/index.esm.js

@@ -3982,11 +3982,11 @@ NeoInputField.displayName = 'NeoInputField';
 // Size configuration for consistent styling
 const sizeConfig = {
     small: {
-        height: 36,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_4,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1_1_4,
+        height: spacing.spacing_3_1_2,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_1,
         iconSize: typography.fontSize.h4,
         fontSize: typography.fontSize.sm,
@@ -3994,10 +3994,10 @@ const sizeConfig = {
     },
     medium: {
         height: spacing.spacing_5,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_4,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_1,
         iconSize: typography.fontSize.h4,
         fontSize: typography.fontSize.default,
@@ -4005,10 +4005,10 @@ const sizeConfig = {
     },
     large: {
         height: spacing.spacing_6,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_4,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1_1_4,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_1_1_2,
         iconSize: typography.fontSize.h2,
         fontSize: typography.fontSize.default,
@@ -4017,10 +4017,10 @@ const sizeConfig = {
     },
     xlarge: {
         height: spacing.spacing_8,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_4,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1_1_4,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_2,
         iconSize: typography.fontSize.h2,
         fontSize: typography.fontSize.default,
@@ -4029,10 +4029,10 @@ const sizeConfig = {
     },
     xxlarge: {
         height: spacing.spacing_10,
-        paddingTop: spacing.spacing_1,
-        paddingRight: spacing.spacing_1_1_2,
-        paddingBottom: spacing.spacing_1,
-        paddingLeft: spacing.spacing_1_1_2,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
         gap: spacing.spacing_2,
         iconSize: spacing.spacing_5,
         fontSize: typography.fontSize.h5,
@@ -4048,7 +4048,8 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         prop !== 'badge' &&
         prop !== 'icon' &&
         prop !== 'isLink' &&
-        prop !== 'hasSecondaryText',
+        prop !== 'hasSecondaryText' &&
+        prop !== 'trailingElement',
 })(({ theme, size = 'medium', isLink, hasSecondaryText }) => {
     const config = sizeConfig[size];
     return {
@@ -4077,17 +4078,32 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             }),
         },
         // Primary text styling
+        // Font weight varies by size per Figma:
+        // - Default: small/medium use 400, large/xlarge/xxlarge use 500
+        // - Link: xxlarge uses 600, others use their default weight
         '& .list-item-primary': {
             fontSize: theme.typography.pxToRem(config.fontSize),
             lineHeight: config.lineHeight,
-            fontWeight: typography.fontWeight.medium,
+            fontWeight: isLink && size === 'xxlarge'
+                ? typography.fontWeight.semiBold
+                : size === 'small' || size === 'medium'
+                    ? typography.fontWeight.regular
+                    : typography.fontWeight.medium,
             color: isLink
                 ? semanticColors.typography.link.primary
                 : semanticColors.typography.navigation.default,
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
+            ...(isLink && size === 'xxlarge' && { textDecoration: 'none' }),
         },
+        // Link hover styling (underline on hover for xxlarge)
+        ...(isLink &&
+            size === 'xxlarge' && {
+            '&:hover .list-item-primary': {
+                textDecoration: 'underline',
+            },
+        }),
         // Badge styling (for xxlarge link variant)
         '& .list-item-badge': {
             fontSize: theme.typography.pxToRem(size === 'xxlarge' ? config.badgeFontSize || 12 : 12),
@@ -4107,11 +4123,22 @@ const StyledListItemButton$1 = styled(ListItemButton, {
                 marginBottom: -2,
             }),
         },
+        // Trailing element styling (e.g., chevron icon)
+        '& .list-item-trailing': {
+            display: 'flex',
+            alignItems: 'center',
+            flexShrink: 0,
+            marginLeft: spacing.spacing_1,
+            color: semanticColors.icons.default,
+        },
         // Hover state
         '&:hover': {
             backgroundColor: semanticColors.input.background,
         },
         // Selected/Active state
+        // Font weights per Figma:
+        // - Primary: small/medium/xxlarge use 500, large/xlarge use 600
+        // - Secondary: large/xlarge use 500, xxlarge uses 400
         [`&.${listItemButtonClasses.selected}`]: {
             backgroundColor: semanticColors.buttons.secondary.hoverBackground,
             '&:hover': {
@@ -4121,11 +4148,15 @@ const StyledListItemButton$1 = styled(ListItemButton, {
                 color: semanticColors.icons.pressed,
             },
             '& .list-item-primary': {
-                fontWeight: typography.fontWeight.semiBold,
+                fontWeight: size === 'large' || size === 'xlarge'
+                    ? typography.fontWeight.semiBold
+                    : typography.fontWeight.medium,
                 color: semanticColors.typography.navigation.default,
             },
             '& .list-item-secondary': {
-                fontWeight: typography.fontWeight.medium,
+                fontWeight: size === 'large' || size === 'xlarge'
+                    ? typography.fontWeight.medium
+                    : typography.fontWeight.regular,
             },
         },
         // Disabled state
@@ -4144,17 +4175,10 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             '& .list-item-badge': {
                 color: semanticColors.buttons.tertiary.disabled,
             },
-        },
-        // Link-specific styling (underline on hover for xxlarge)
-        ...(isLink &&
-            size === 'xxlarge' && {
-            '& .list-item-primary': {
-                textDecoration: 'none',
-            },
-            '&:hover .list-item-primary': {
-                textDecoration: 'underline',
+            '& .list-item-trailing': {
+                color: semanticColors.icons.disabled,
             },
-        }),
+        },
     };
 });
 /**
@@ -4171,6 +4195,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
  * - 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
@@ -4187,7 +4212,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
  * - semanticColors.surface.input.disabled-background (disabled background)
  * - semanticColors.buttons.tertiary.disabled (disabled text color)
  */
-const NeoListItem = ({ size = 'medium', primaryText, secondaryText, badge, icon, isLink = false, component, ...props }) => {
+const NeoListItem = ({ size = 'medium', primaryText, secondaryText, badge, icon, isLink = false, trailingElement, component, ...props }) => {
     // Determine if secondary text should be shown based on size
     const showSecondaryText = secondaryText && (size === 'large' || size === 'xlarge' || size === 'xxlarge');
     // Determine if badge should be shown (only for xxlarge)
@@ -4197,7 +4222,7 @@ const NeoListItem = ({ size = 'medium', primaryText, secondaryText, badge, icon,
     return (jsxs(StyledListItemButton$1, { size: size, isLink: isLink, hasSecondaryText: !!showSecondaryText, ...(component && { component }), ...props, children: [icon && jsx(ListItemIcon, { children: icon }), jsx(ListItemText, { primary: primaryContent, secondary: showSecondaryText ? secondaryText : undefined, sx: { minWidth: 0, flex: 1 }, slotProps: {
                     primary: { className: 'list-item-primary' },
                     secondary: { className: 'list-item-secondary' },
-                } })] }));
+                } }), trailingElement && jsx(Box, { className: "list-item-trailing", children: trailingElement })] }));
 };
 NeoListItem.displayName = 'NeoListItem';
 
@@ -4313,6 +4338,15 @@ const NeoListItemButton = ({ children, selected = false, disabled = false, ...pr
 };
 NeoListItemButton.displayName = 'NeoListItemButton';
 
+/**
+ * Focus ring box-shadow using Neo design tokens
+ * Combines focusWhite1 (inner white ring) and focusBlue2 (outer blue ring)
+ */
+const focusRingShadow = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
+/**
+ * Card box-shadow using Neo design tokens for hover and selected states
+ */
+const activeShadow = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blur}px ${shadows.card.spread}px ${shadows.card.shadow}`;
 /**
  * Styled Card component with Neo design tokens
  */
@@ -4328,16 +4362,17 @@ const StyledCard = styled(MuiCard, {
     backgroundColor: semanticColors.surfaces.card,
     border: `1px solid ${selected ? semanticColors.border.tabActive : semanticColors.border.card}`,
     borderRadius: theme.typography.pxToRem(4),
-    boxShadow: 'none',
-    transition: theme.transitions.create(['border-color']),
+    boxShadow: selected ? activeShadow : 'none',
+    transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: selected ? semanticColors.border.tabActive : semanticColors.border.card,
+        borderColor: semanticColors.border.tabActive,
+        boxShadow: activeShadow,
     },
     '&:focus-visible': {
-        outline: `2px solid ${semanticColors.border.tabActive}`,
-        outlineOffset: '2px',
         borderColor: semanticColors.border.tabActive,
+        boxShadow: focusRingShadow,
+        outline: 'none',
     },
     ...(disabled && {
         opacity: 0.5,
@@ -4403,6 +4438,11 @@ const Description = styled('p')(({ theme }) => ({
     lineHeight: 1.5,
     color: colors.grey[800],
     width: '100%',
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
 }));
 /**
  * NeoMarketplaceCard - Selectable card component for marketplace items
@@ -4432,9 +4472,12 @@ const Description = styled('p')(({ theme }) => ({
  * - 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
@@ -4826,7 +4869,19 @@ function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
                         pb: `${spacing.spacing_2_1_2}px`,
                         height: '100%',
                         overflow: 'auto',
-                    }, children: [sticky ? (jsx(StickyHeader, { ref: headerRef, sx: { pt: `${spacing.spacing_2}px` }, children: headerContent })) : (jsx(Box, { ref: headerRef, sx: { mb: `${spacing.spacing_1}px` }, children: headerContent })), jsx(Box, { sx: {
+                    }, children: [sticky ? (jsx(StickyHeader, { ref: headerRef, sx: {
+                                pt: `${spacing.spacing_2}px`,
+                                ...(contentMaxWidth !== false && {
+                                    maxWidth: theme => theme.breakpoints.values[contentMaxWidth],
+                                    width: '100%',
+                                }),
+                            }, children: headerContent })) : (jsx(Box, { ref: headerRef, sx: {
+                                mb: `${spacing.spacing_1}px`,
+                                ...(contentMaxWidth !== false && {
+                                    maxWidth: theme => theme.breakpoints.values[contentMaxWidth],
+                                    width: '100%',
+                                }),
+                            }, children: headerContent })), jsx(Box, { sx: {
                                 flexGrow: 1,
                                 minHeight: 0,
                                 display: 'flex',
@@ -5664,10 +5719,10 @@ const NeoToastButton = ({ primary, variant = 'default', children, ...props }) =>
 NeoToast.displayName = 'NeoToast';
 NeoToastButton.displayName = 'NeoToastButton';
 
-const ToggleContainer = styled('label')(({ disabled }) => ({
+const ToggleContainer = styled('label')(({ disabled, size = 'medium' }) => ({
     display: 'inline-flex',
     alignItems: 'flex-start',
-    gap: 12,
+    gap: size === 'small' ? 8 : 12,
     cursor: disabled ? 'not-allowed' : 'pointer',
     userSelect: 'none',
 }));
@@ -5819,7 +5874,7 @@ const NeoToggle = ({ size = 'medium', label, helperText, disabled, ...props }) =
         return jsx(StyledSwitch, { size: size, disabled: disabled, ...props });
     }
     // With label, wrap in container for proper layout
-    return (jsxs(ToggleContainer, { disabled: disabled, children: [jsx(StyledSwitch, { size: size, disabled: disabled, ...props }), jsxs(LabelContainer, { children: [label && jsx(Label, { size: size, children: label }), helperText && jsx(HelperText, { size: size, children: helperText })] })] }));
+    return (jsxs(ToggleContainer, { disabled: disabled, size: size, children: [jsx(StyledSwitch, { size: size, disabled: disabled, ...props }), jsxs(LabelContainer, { children: [label && jsx(Label, { size: size, children: label }), helperText && jsx(HelperText, { size: size, children: helperText })] })] }));
 };
 NeoToggle.displayName = 'NeoToggle';