@moderneinc/neo-styled-components 4.0.0-next.557dc6 → 4.0.0-next.86aaff

package/dist/ListItem/ListItem.d.ts

@@ -2,7 +2,7 @@ import { type ListItemButtonProps } from '@mui/material/ListItemButton';
 import type { ReactNode } from 'react';
 declare module '@mui/material/ListItemButton' {
     interface ListItemButtonPropsVariantOverrides {
-        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }
 }
 /**
@@ -14,19 +14,19 @@ export interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' |
      * @default "medium"
      * @figma size
      */
-    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     /**
      * Primary text content (required)
      * @figma Placeholder (primary text)
      */
     primaryText: ReactNode;
     /**
-     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge/xxxlarge)
+     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge)
      * @figma Recipe name (secondary text)
      */
     secondaryText?: ReactNode;
     /**
-     * Badge content for count display (optional, for xxlarge/xxxlarge link variant)
+     * Badge content for count display (optional, for xxlarge link variant)
      * @figma (# recipes)
      */
     badge?: ReactNode;
@@ -57,14 +57,14 @@ export interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' |
 /**
  * NeoListItem - Flexible list item component with multiple size variants and states
  *
- * A versatile list item component built on MUI's ListItemButton that supports six size variants
- * (small to xxxlarge), interactive states (default, selected, disabled, link), and optional
+ * A versatile list item component built on MUI's ListItemButton that supports five size variants
+ * (small to xxlarge), interactive states (default, selected, disabled, link), and optional
  * icons/logos, secondary text, and badges.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4205-36442
  *
  * Figma Props Mapping:
- * - size (Small|Medium|Large|Extra Large|XX Large|TripleExtraLarge) → size (small|medium|large|xlarge|xxlarge|xxxlarge)
+ * - size (small|medium|large|xlarge|XXL) → size (small|medium|large|xlarge|xxlarge)
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)

package/dist/index.d.ts

@@ -2429,7 +2429,7 @@ declare const NeoToolbar: {
 
 declare module '@mui/material/ListItemButton' {
     interface ListItemButtonPropsVariantOverrides {
-        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     }
 }
 /**
@@ -2441,19 +2441,19 @@ interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' | 'size'
      * @default "medium"
      * @figma size
      */
-    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
     /**
      * Primary text content (required)
      * @figma Placeholder (primary text)
      */
     primaryText: ReactNode;
     /**
-     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge/xxxlarge)
+     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge)
      * @figma Recipe name (secondary text)
      */
     secondaryText?: ReactNode;
     /**
-     * Badge content for count display (optional, for xxlarge/xxxlarge link variant)
+     * Badge content for count display (optional, for xxlarge link variant)
      * @figma (# recipes)
      */
     badge?: ReactNode;
@@ -2484,14 +2484,14 @@ interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' | 'size'
 /**
  * NeoListItem - Flexible list item component with multiple size variants and states
  *
- * A versatile list item component built on MUI's ListItemButton that supports six size variants
- * (small to xxxlarge), interactive states (default, selected, disabled, link), and optional
+ * A versatile list item component built on MUI's ListItemButton that supports five size variants
+ * (small to xxlarge), interactive states (default, selected, disabled, link), and optional
  * icons/logos, secondary text, and badges.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4205-36442
  *
  * Figma Props Mapping:
- * - size (Small|Medium|Large|Extra Large|XX Large|TripleExtraLarge) → size (small|medium|large|xlarge|xxlarge|xxxlarge)
+ * - size (small|medium|large|xlarge|XXL) → size (small|medium|large|xlarge|xxlarge)
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)

package/dist/index.esm.js

@@ -4778,19 +4778,6 @@ const sizeConfig = {
         badgeFontSize: typography.fontSize.xs,
         lineHeight: 1.5,
     },
-    xxxlarge: {
-        height: spacing.spacing_10,
-        paddingTop: 1,
-        paddingRight: spacing.spacing_3_4,
-        paddingBottom: 1,
-        paddingLeft: spacing.spacing_3_4,
-        gap: spacing.spacing_2,
-        iconSize: spacing.spacing_6,
-        fontSize: typography.fontSize.h5,
-        secondaryFontSize: typography.fontSize.sm,
-        badgeFontSize: typography.fontSize.xs,
-        lineHeight: 1.5,
-    },
 };
 const StyledListItemButton$1 = styled(ListItemButton, {
     shouldForwardProp: prop => prop !== 'size' &&
@@ -4835,7 +4822,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         '& .list-item-primary': {
             fontSize: theme.typography.pxToRem(config.fontSize),
             lineHeight: config.lineHeight,
-            fontWeight: isLink && (size === 'xxlarge' || size === 'xxxlarge')
+            fontWeight: isLink && size === 'xxlarge'
                 ? typography.fontWeight.semiBold
                 : size === 'small' || size === 'medium'
                     ? typography.fontWeight.regular
@@ -4846,20 +4833,18 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
-            ...(isLink && (size === 'xxlarge' || size === 'xxxlarge') && { textDecoration: 'none' }),
+            ...(isLink && size === 'xxlarge' && { textDecoration: 'none' }),
         },
-        // Link hover styling (underline on hover for xxlarge/xxxlarge)
+        // Link hover styling (underline on hover for xxlarge)
         ...(isLink &&
-            (size === 'xxlarge' || size === 'xxxlarge') && {
+            size === 'xxlarge' && {
             '&:hover .list-item-primary': {
                 textDecoration: 'underline',
             },
         }),
-        // Badge styling (for xxlarge/xxxlarge link variant)
+        // Badge styling (for xxlarge link variant)
         '& .list-item-badge': {
-            fontSize: theme.typography.pxToRem(size === 'xxlarge' || size === 'xxxlarge'
-                ? config.badgeFontSize || 12
-                : 12),
+            fontSize: theme.typography.pxToRem(size === 'xxlarge' ? config.badgeFontSize || 12 : 12),
             lineHeight: 1.5,
             fontWeight: typography.fontWeight.regular,
             color: semanticColors.typography.bodySecondary,
@@ -4937,14 +4922,14 @@ const StyledListItemButton$1 = styled(ListItemButton, {
 /**
  * NeoListItem - Flexible list item component with multiple size variants and states
  *
- * A versatile list item component built on MUI's ListItemButton that supports six size variants
- * (small to xxxlarge), interactive states (default, selected, disabled, link), and optional
+ * A versatile list item component built on MUI's ListItemButton that supports five size variants
+ * (small to xxlarge), interactive states (default, selected, disabled, link), and optional
  * icons/logos, secondary text, and badges.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4205-36442
  *
  * Figma Props Mapping:
- * - size (Small|Medium|Large|Extra Large|XX Large|TripleExtraLarge) → size (small|medium|large|xlarge|xxlarge|xxxlarge)
+ * - size (small|medium|large|xlarge|XXL) → size (small|medium|large|xlarge|xxlarge)
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)
@@ -4967,10 +4952,9 @@ const StyledListItemButton$1 = styled(ListItemButton, {
  */
 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' || size === 'xxxlarge');
-    // Determine if badge should be shown (for xxlarge/xxxlarge)
-    const showBadge = badge && (size === 'xxlarge' || size === 'xxxlarge');
+    const showSecondaryText = secondaryText && (size === 'large' || size === 'xlarge' || size === 'xxlarge');
+    // Determine if badge should be shown (only for xxlarge)
+    const showBadge = badge && size === 'xxlarge';
     // Prepare primary text with badge if needed
     const primaryContent = showBadge ? (jsxs(Fragment, { children: [primaryText, ' ', jsx(Typography, { component: "span", className: "list-item-badge", children: badge })] })) : (primaryText);
     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: {