@moderneinc/neo-styled-components 2.0.3-next.ba615c → 2.0.3-next.bac2ba

package/dist/index.js

@@ -3984,11 +3984,11 @@ NeoInputField.displayName = 'NeoInputField';
 // Size configuration for consistent styling
 const sizeConfig = {
     small: {
-        height: 36,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_4,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1_1_4,
+        height: neoDesign.spacing.spacing_3_1_2,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_1,
         iconSize: neoDesign.typography.fontSize.h4,
         fontSize: neoDesign.typography.fontSize.sm,
@@ -3996,10 +3996,10 @@ const sizeConfig = {
     },
     medium: {
         height: neoDesign.spacing.spacing_5,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_4,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_1,
         iconSize: neoDesign.typography.fontSize.h4,
         fontSize: neoDesign.typography.fontSize.default,
@@ -4007,10 +4007,10 @@ const sizeConfig = {
     },
     large: {
         height: neoDesign.spacing.spacing_6,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_4,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1_1_4,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_1_1_2,
         iconSize: neoDesign.typography.fontSize.h2,
         fontSize: neoDesign.typography.fontSize.default,
@@ -4019,10 +4019,10 @@ const sizeConfig = {
     },
     xlarge: {
         height: neoDesign.spacing.spacing_8,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_4,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1_1_4,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_2,
         iconSize: neoDesign.typography.fontSize.h2,
         fontSize: neoDesign.typography.fontSize.default,
@@ -4031,10 +4031,10 @@ const sizeConfig = {
     },
     xxlarge: {
         height: neoDesign.spacing.spacing_10,
-        paddingTop: neoDesign.spacing.spacing_1,
-        paddingRight: neoDesign.spacing.spacing_1_1_2,
-        paddingBottom: neoDesign.spacing.spacing_1,
-        paddingLeft: neoDesign.spacing.spacing_1_1_2,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
         gap: neoDesign.spacing.spacing_2,
         iconSize: neoDesign.spacing.spacing_5,
         fontSize: neoDesign.typography.fontSize.h5,
@@ -4079,10 +4079,17 @@ const StyledListItemButton$1 = styles.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: neoDesign.typography.fontWeight.medium,
+            fontWeight: isLink && size === 'xxlarge'
+                ? neoDesign.typography.fontWeight.semiBold
+                : size === 'small' || size === 'medium'
+                    ? neoDesign.typography.fontWeight.regular
+                    : neoDesign.typography.fontWeight.medium,
             color: isLink
                 ? neoDesign.semanticColors.typography.link.primary
                 : neoDesign.semanticColors.typography.navigation.default,
@@ -4114,6 +4121,9 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
             backgroundColor: neoDesign.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
         [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
             backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground,
             '&:hover': {
@@ -4123,11 +4133,15 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
                 color: neoDesign.semanticColors.icons.pressed,
             },
             '& .list-item-primary': {
-                fontWeight: neoDesign.typography.fontWeight.semiBold,
+                fontWeight: size === 'large' || size === 'xlarge'
+                    ? neoDesign.typography.fontWeight.semiBold
+                    : neoDesign.typography.fontWeight.medium,
                 color: neoDesign.semanticColors.typography.navigation.default,
             },
             '& .list-item-secondary': {
-                fontWeight: neoDesign.typography.fontWeight.medium,
+                fontWeight: size === 'large' || size === 'xlarge'
+                    ? neoDesign.typography.fontWeight.medium
+                    : neoDesign.typography.fontWeight.regular,
             },
         },
         // Disabled state
@@ -4315,6 +4329,11 @@ 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 = `${neoDesign.shadows.focusWhite1.x}px ${neoDesign.shadows.focusWhite1.y}px ${neoDesign.shadows.focusWhite1.blur}px ${neoDesign.shadows.focusWhite1.spread}px ${neoDesign.shadows.focusWhite1.shadow}, ${neoDesign.shadows.focusBlue2.x}px ${neoDesign.shadows.focusBlue2.y}px ${neoDesign.shadows.focusBlue2.blur}px ${neoDesign.shadows.focusBlue2.spread}px ${neoDesign.shadows.focusBlue2.shadow}`;
 /**
  * Styled Card component with Neo design tokens
  */
@@ -4327,19 +4346,20 @@ const StyledCard = styles.styled(MuiCard, {
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
-    backgroundColor: neoDesign.semanticColors.surfaces.card,
+    backgroundColor: selected ? neoDesign.semanticColors.status.info.light : neoDesign.semanticColors.surfaces.card,
     border: `1px solid ${selected ? neoDesign.semanticColors.border.tabActive : neoDesign.semanticColors.border.card}`,
     borderRadius: theme.typography.pxToRem(4),
     boxShadow: 'none',
-    transition: theme.transitions.create(['border-color']),
+    transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
         borderColor: selected ? neoDesign.semanticColors.border.tabActive : neoDesign.semanticColors.border.card,
     },
     '&:focus-visible': {
-        outline: `2px solid ${neoDesign.semanticColors.border.tabActive}`,
-        outlineOffset: '2px',
+        backgroundColor: neoDesign.semanticColors.status.info.light,
         borderColor: neoDesign.semanticColors.border.tabActive,
+        boxShadow: focusRingShadow,
+        outline: 'none',
     },
     ...(disabled && {
         opacity: 0.5,
@@ -4434,9 +4454,12 @@ const Description = styles.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
@@ -5678,10 +5701,10 @@ const NeoToastButton = ({ primary, variant = 'default', children, ...props }) =>
 NeoToast.displayName = 'NeoToast';
 NeoToastButton.displayName = 'NeoToastButton';
 
-const ToggleContainer = styles.styled('label')(({ disabled }) => ({
+const ToggleContainer = styles.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',
 }));
@@ -5833,7 +5856,7 @@ const NeoToggle = ({ size = 'medium', label, helperText, disabled, ...props }) =
         return jsxRuntime.jsx(StyledSwitch, { size: size, disabled: disabled, ...props });
     }
     // With label, wrap in container for proper layout
-    return (jsxRuntime.jsxs(ToggleContainer, { disabled: disabled, children: [jsxRuntime.jsx(StyledSwitch, { size: size, disabled: disabled, ...props }), jsxRuntime.jsxs(LabelContainer, { children: [label && jsxRuntime.jsx(Label, { size: size, children: label }), helperText && jsxRuntime.jsx(HelperText, { size: size, children: helperText })] })] }));
+    return (jsxRuntime.jsxs(ToggleContainer, { disabled: disabled, size: size, children: [jsxRuntime.jsx(StyledSwitch, { size: size, disabled: disabled, ...props }), jsxRuntime.jsxs(LabelContainer, { children: [label && jsxRuntime.jsx(Label, { size: size, children: label }), helperText && jsxRuntime.jsx(HelperText, { size: size, children: helperText })] })] }));
 };
 NeoToggle.displayName = 'NeoToggle';