@moderneinc/neo-styled-components 3.0.0-next.ff608c → 4.0.0-next.557dc6

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';
+        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
     }
 }
 /**
@@ -14,19 +14,19 @@ export interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' |
      * @default "medium"
      * @figma size
      */
-    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
     /**
      * Primary text content (required)
      * @figma Placeholder (primary text)
      */
     primaryText: ReactNode;
     /**
-     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge)
+     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge/xxxlarge)
      * @figma Recipe name (secondary text)
      */
     secondaryText?: ReactNode;
     /**
-     * Badge content for count display (optional, for xxlarge link variant)
+     * Badge content for count display (optional, for xxlarge/xxxlarge 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 five size variants
- * (small to xxlarge), interactive states (default, selected, disabled, link), and optional
+ * 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
  * 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|xlarge|XXL) → size (small|medium|large|xlarge|xxlarge)
+ * - size (Small|Medium|Large|Extra Large|XX Large|TripleExtraLarge) → size (small|medium|large|xlarge|xxlarge|xxxlarge)
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)

package/dist/Tabs/Tabs.d.ts

@@ -39,10 +39,7 @@ export interface NeoTabProps extends Omit<TabProps, 'label'> {
  *
  * Figma Props Mapping:
  * - Current=True/False → Controlled by parent NeoTabs value
- * - State=Default → default styling
- * - State=Hover → CSS :hover
- * - State=Focus → CSS :focus-visible
- * - Tag count → count prop (renders NeoTag)
+ * - Show tag → count prop (renders NeoTag)
  * - Text label → label prop
  */
 export declare const NeoTab: {

package/dist/index.d.ts

@@ -2191,10 +2191,7 @@ interface NeoTabProps extends Omit<TabProps, 'label'> {
  *
  * Figma Props Mapping:
  * - Current=True/False → Controlled by parent NeoTabs value
- * - State=Default → default styling
- * - State=Hover → CSS :hover
- * - State=Focus → CSS :focus-visible
- * - Tag count → count prop (renders NeoTag)
+ * - Show tag → count prop (renders NeoTag)
  * - Text label → label prop
  */
 declare const NeoTab: {
@@ -2432,7 +2429,7 @@ declare const NeoToolbar: {
 
 declare module '@mui/material/ListItemButton' {
     interface ListItemButtonPropsVariantOverrides {
-        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
     }
 }
 /**
@@ -2444,19 +2441,19 @@ interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' | 'size'
      * @default "medium"
      * @figma size
      */
-    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
     /**
      * Primary text content (required)
      * @figma Placeholder (primary text)
      */
     primaryText: ReactNode;
     /**
-     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge)
+     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge/xxxlarge)
      * @figma Recipe name (secondary text)
      */
     secondaryText?: ReactNode;
     /**
-     * Badge content for count display (optional, for xxlarge link variant)
+     * Badge content for count display (optional, for xxlarge/xxxlarge link variant)
      * @figma (# recipes)
      */
     badge?: ReactNode;
@@ -2487,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 five size variants
- * (small to xxlarge), interactive states (default, selected, disabled, link), and optional
+ * 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
  * 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|xlarge|XXL) → size (small|medium|large|xlarge|xxlarge)
+ * - size (Small|Medium|Large|Extra Large|XX Large|TripleExtraLarge) → size (small|medium|large|xlarge|xxlarge|xxxlarge)
  * - 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,6 +4778,19 @@ 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' &&
@@ -4822,7 +4835,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         '& .list-item-primary': {
             fontSize: theme.typography.pxToRem(config.fontSize),
             lineHeight: config.lineHeight,
-            fontWeight: isLink && size === 'xxlarge'
+            fontWeight: isLink && (size === 'xxlarge' || size === 'xxxlarge')
                 ? typography.fontWeight.semiBold
                 : size === 'small' || size === 'medium'
                     ? typography.fontWeight.regular
@@ -4833,18 +4846,20 @@ const StyledListItemButton$1 = styled(ListItemButton, {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
-            ...(isLink && size === 'xxlarge' && { textDecoration: 'none' }),
+            ...(isLink && (size === 'xxlarge' || size === 'xxxlarge') && { textDecoration: 'none' }),
         },
-        // Link hover styling (underline on hover for xxlarge)
+        // Link hover styling (underline on hover for xxlarge/xxxlarge)
         ...(isLink &&
-            size === 'xxlarge' && {
+            (size === 'xxlarge' || size === 'xxxlarge') && {
             '&:hover .list-item-primary': {
                 textDecoration: 'underline',
             },
         }),
-        // Badge styling (for xxlarge link variant)
+        // Badge styling (for xxlarge/xxxlarge link variant)
         '& .list-item-badge': {
-            fontSize: theme.typography.pxToRem(size === 'xxlarge' ? config.badgeFontSize || 12 : 12),
+            fontSize: theme.typography.pxToRem(size === 'xxlarge' || size === 'xxxlarge'
+                ? config.badgeFontSize || 12
+                : 12),
             lineHeight: 1.5,
             fontWeight: typography.fontWeight.regular,
             color: semanticColors.typography.bodySecondary,
@@ -4922,14 +4937,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 five size variants
- * (small to xxlarge), interactive states (default, selected, disabled, link), and optional
+ * 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
  * 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|xlarge|XXL) → size (small|medium|large|xlarge|xxlarge)
+ * - size (Small|Medium|Large|Extra Large|XX Large|TripleExtraLarge) → size (small|medium|large|xlarge|xxlarge|xxxlarge)
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)
@@ -4952,9 +4967,10 @@ 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');
-    // Determine if badge should be shown (only for xxlarge)
-    const showBadge = badge && size === 'xxlarge';
+    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');
     // 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: {
@@ -6129,7 +6145,20 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         color: semanticColors.typography.tab.active,
         fontWeight: typography.fontWeight.semiBold,
     },
+    '&:hover': {
+        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+        [`&.${tabClasses.selected}::after`]: {
+            content: '""',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 2,
+            backgroundColor: semanticColors.buttons.primary.hover,
+        },
+    },
     [`&.${buttonBaseClasses.focusVisible}`]: {
+        color: semanticColors.typography.tab.active,
         outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: -2,
     },
@@ -6137,6 +6166,21 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         color: semanticColors.typography.button.disabled,
         cursor: 'not-allowed',
         pointerEvents: 'auto',
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+        [`&.${tabClasses.selected}`]: {
+            color: semanticColors.typography.button.disabled,
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: 2,
+                backgroundColor: semanticColors.buttons.tertiary.disabled,
+            },
+        },
     },
 }));
 const TabLabelContainer = styled('span')(({ theme }) => ({
@@ -6151,10 +6195,7 @@ const TabLabelContainer = styled('span')(({ theme }) => ({
  *
  * Figma Props Mapping:
  * - Current=True/False → Controlled by parent NeoTabs value
- * - State=Default → default styling
- * - State=Hover → CSS :hover
- * - State=Focus → CSS :focus-visible
- * - Tag count → count prop (renders NeoTag)
+ * - Show tag → count prop (renders NeoTag)
  * - Text label → label prop
  */
 const NeoTab = ({ label, count, ...props }) => {