@moderneinc/neo-styled-components 4.0.1-next.ee3643 → 4.1.0

package/dist/IconButton/IconButton.d.ts

@@ -1,5 +1,6 @@
 import { type IconButtonProps } from '@mui/material/IconButton';
 type IconButtonSize = 'small' | 'medium';
+type IconButtonVariant = 'default' | 'nav';
 export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
     /**
      * The size of the icon button
@@ -8,11 +9,25 @@ export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'siz
      * @figma Size
      */
     size?: IconButtonSize;
+    /**
+     * The visual variant of the icon button
+     * - `default`: Transparent neutral style
+     * - `nav`: White background with border, used in global navigation
+     * @default "default"
+     */
+    variant?: IconButtonVariant;
+    /**
+     * Whether the button is in an active/selected state (e.g., popover is open).
+     * Only applies to the `nav` variant.
+     * @default false
+     */
+    active?: boolean;
 }
 /**
  * NeoIconButton - Icon-only button component based on MUI IconButton
  *
  * Simple, neutral icon button with transparent background and icon color states.
+ * Use `variant="nav"` for the global navigation pill-shaped button style.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
  *
@@ -25,7 +40,7 @@ export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'siz
  * - State=Loading → not yet implemented
  */
 export declare const NeoIconButton: {
-    ({ size, ...props }: NeoIconButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, variant, active, ...props }: NeoIconButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/index.d.ts

@@ -1421,6 +1421,7 @@ declare const NeoGeneralAvatar: {
 };
 
 type IconButtonSize = 'small' | 'medium';
+type IconButtonVariant = 'default' | 'nav';
 interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
     /**
      * The size of the icon button
@@ -1429,11 +1430,25 @@ interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
      * @figma Size
      */
     size?: IconButtonSize;
+    /**
+     * The visual variant of the icon button
+     * - `default`: Transparent neutral style
+     * - `nav`: White background with border, used in global navigation
+     * @default "default"
+     */
+    variant?: IconButtonVariant;
+    /**
+     * Whether the button is in an active/selected state (e.g., popover is open).
+     * Only applies to the `nav` variant.
+     * @default false
+     */
+    active?: boolean;
 }
 /**
  * NeoIconButton - Icon-only button component based on MUI IconButton
  *
  * Simple, neutral icon button with transparent background and icon color states.
+ * Use `variant="nav"` for the global navigation pill-shaped button style.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
  *
@@ -1446,7 +1461,7 @@ interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
  * - State=Loading → not yet implemented
  */
 declare const NeoIconButton: {
-    ({ size, ...props }: NeoIconButtonProps): react_jsx_runtime.JSX.Element;
+    ({ size, variant, active, ...props }: NeoIconButtonProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.esm.js

@@ -3409,10 +3409,18 @@ function subMonths(date, amount, options) {
 }
 
 // Props that should not be forwarded to IconButton (Button-specific props that IconButton doesn't support)
-const buttonOnlyProps = ['size', 'startIcon', 'endIcon', 'fullWidth', 'disableElevation', 'variant'];
+const buttonOnlyProps = [
+    'size',
+    'startIcon',
+    'endIcon',
+    'fullWidth',
+    'disableElevation',
+    'variant',
+    'active',
+];
 const StyledIconButton = styled(IconButton, {
     shouldForwardProp: prop => !buttonOnlyProps.includes(prop),
-})(({ theme, size = 'medium' }) => {
+})(({ theme, size = 'medium', variant = 'default', active = false }) => {
     // Size configurations using theme.spacing()
     const sizeConfig = {
         small: {
@@ -3447,8 +3455,8 @@ const StyledIconButton = styled(IconButton, {
             outlineOffset: 2,
         },
     };
-    // Icon button styling - single neutral style
-    const iconButtonStyles = {
+    // Default variant - transparent neutral style
+    const defaultStyles = {
         backgroundColor: 'transparent',
         color: semanticColors.icons.default,
         border: 'none',
@@ -3464,15 +3472,44 @@ const StyledIconButton = styled(IconButton, {
             color: semanticColors.icons.disabled,
         },
     };
+    // Nav variant - 44px pill with border, used in global navigation
+    const activeNavStyles = {
+        backgroundColor: semanticColors.icons.pressedBackground,
+        borderColor: 'transparent',
+        color: semanticColors.buttons.primary.pressed,
+    };
+    const navStyles = {
+        backgroundColor: semanticColors.surfaces.white,
+        color: semanticColors.icons.default,
+        border: `1px solid ${semanticColors.border.secondary}`,
+        '&:hover': {
+            backgroundColor: semanticColors.input.hoverBackground,
+            borderColor: semanticColors.border.primary,
+            color: semanticColors.icons.default,
+        },
+        '&:active': activeNavStyles,
+        [`&.${iconButtonClasses.disabled}`]: {
+            backgroundColor: semanticColors.surfaces.white,
+            borderColor: semanticColors.border.secondary,
+            color: semanticColors.icons.disabled,
+            opacity: 0.5,
+        },
+        ...(active ? activeNavStyles : {}),
+    };
+    const variantStyles = {
+        default: defaultStyles,
+        nav: navStyles,
+    };
     return {
         ...baseStyles,
-        ...iconButtonStyles,
+        ...variantStyles[variant],
     };
 });
 /**
  * NeoIconButton - Icon-only button component based on MUI IconButton
  *
  * Simple, neutral icon button with transparent background and icon color states.
+ * Use `variant="nav"` for the global navigation pill-shaped button style.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
  *
@@ -3484,8 +3521,8 @@ const StyledIconButton = styled(IconButton, {
  * - State=Focus → CSS :focus-visible
  * - State=Loading → not yet implemented
  */
-const NeoIconButton = ({ size = 'medium', ...props }) => {
-    return jsx(StyledIconButton, { size: size, ...props });
+const NeoIconButton = ({ size = 'medium', variant = 'default', active = false, ...props }) => {
+    return (jsx(StyledIconButton, { size: size, variant: variant, active: active, disableRipple: variant === 'nav', ...props }));
 };
 NeoIconButton.displayName = 'NeoIconButton';