@moderneinc/neo-styled-components 4.1.2-next.d146c6 → 4.1.2-next.f98de9

package/dist/IconButton/IconButton.d.ts

@@ -1,7 +1,8 @@
-import { type IconButtonProps } from '@mui/material/IconButton';
+import type { ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ReactNode } from 'react';
 type IconButtonSize = 'small' | 'medium';
-type IconButtonVariant = 'default' | 'nav';
-export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
+type IconButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'nav';
+export interface NeoIconButtonProps extends Omit<ButtonBaseProps, 'children' | 'size'> {
     /**
      * The size of the icon button
      * @default "medium"
@@ -10,10 +11,10 @@ export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'siz
      */
     size?: IconButtonSize;
     /**
-     * The visual variant of the icon button
-     * - `default`: Transparent neutral style
+     * The visual variant of the icon button.
+     * - `primary`, `secondary`, `destructive`, `tertiary`: Uses NeoButton's hierarchy styling
      * - `nav`: White background with border, used in global navigation
-     * @default "default"
+     * @default "tertiary"
      */
     variant?: IconButtonVariant;
     /**
@@ -22,25 +23,34 @@ export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'siz
      * @default false
      */
     active?: boolean;
+    /**
+     * Show loading spinner instead of icon.
+     * Only applies to hierarchy variants (not `nav`).
+     * @default false
+     */
+    loading?: boolean;
+    children?: ReactNode;
 }
 /**
- * NeoIconButton - Icon-only button component based on MUI IconButton
+ * NeoIconButton - Icon-only button component
  *
- * Simple, neutral icon button with transparent background and icon color states.
- * Use `variant="nav"` for the global navigation pill-shaped button style.
+ * For hierarchy variants (primary/secondary/destructive/tertiary), wraps NeoButton with
+ * icon-only sizing. For the `nav` variant, uses a standalone MUI IconButton with custom styling.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4086-7590
  *
  * Figma Props Mapping:
+ * - Hierarchy (Primary|Secondary|Destructive|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
+ * - Show text = false → always (this is the icon-only variant of NeoButton)
  * - State=Disabled → disabled prop
+ * - State=Loading → loading prop
  * - State=Hover → CSS :hover
- * - State=Active → CSS :active
+ * - State=Pressed → CSS :active
  * - State=Focus → CSS :focus-visible
- * - State=Loading → not yet implemented
  */
 export declare const NeoIconButton: {
-    ({ size, variant, active, ...props }: NeoIconButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, variant, active, loading, children, ...props }: NeoIconButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/index.d.ts

@@ -18,7 +18,6 @@ import { DividerProps } from '@mui/material/Divider';
 import { PaperProps } from '@mui/material/Paper';
 import { BadgeProps } from '@mui/material/Badge';
 import { AvatarProps } from '@mui/material/Avatar';
-import { IconButtonProps } from '@mui/material/IconButton';
 import { InputBaseProps } from '@mui/material/InputBase';
 import { MenuProps } from '@mui/material/Menu';
 import { MenuItemProps } from '@mui/material/MenuItem';
@@ -1421,8 +1420,8 @@ declare const NeoGeneralAvatar: {
 };
 
 type IconButtonSize = 'small' | 'medium';
-type IconButtonVariant = 'default' | 'nav';
-interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
+type IconButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary' | 'nav';
+interface NeoIconButtonProps extends Omit<ButtonBaseProps, 'children' | 'size'> {
     /**
      * The size of the icon button
      * @default "medium"
@@ -1431,10 +1430,10 @@ interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
      */
     size?: IconButtonSize;
     /**
-     * The visual variant of the icon button
-     * - `default`: Transparent neutral style
+     * The visual variant of the icon button.
+     * - `primary`, `secondary`, `destructive`, `tertiary`: Uses NeoButton's hierarchy styling
      * - `nav`: White background with border, used in global navigation
-     * @default "default"
+     * @default "tertiary"
      */
     variant?: IconButtonVariant;
     /**
@@ -1443,25 +1442,34 @@ interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
      * @default false
      */
     active?: boolean;
+    /**
+     * Show loading spinner instead of icon.
+     * Only applies to hierarchy variants (not `nav`).
+     * @default false
+     */
+    loading?: boolean;
+    children?: ReactNode;
 }
 /**
- * NeoIconButton - Icon-only button component based on MUI IconButton
+ * NeoIconButton - Icon-only button component
  *
- * Simple, neutral icon button with transparent background and icon color states.
- * Use `variant="nav"` for the global navigation pill-shaped button style.
+ * For hierarchy variants (primary/secondary/destructive/tertiary), wraps NeoButton with
+ * icon-only sizing. For the `nav` variant, uses a standalone MUI IconButton with custom styling.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4086-7590
  *
  * Figma Props Mapping:
+ * - Hierarchy (Primary|Secondary|Destructive|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
+ * - Show text = false → always (this is the icon-only variant of NeoButton)
  * - State=Disabled → disabled prop
+ * - State=Loading → loading prop
  * - State=Hover → CSS :hover
- * - State=Active → CSS :active
+ * - State=Pressed → CSS :active
  * - State=Focus → CSS :focus-visible
- * - State=Loading → not yet implemented
  */
 declare const NeoIconButton: {
-    ({ size, variant, active, ...props }: NeoIconButtonProps): react_jsx_runtime.JSX.Element;
+    ({ size, variant, active, loading, children, ...props }: NeoIconButtonProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.esm.js

@@ -1084,7 +1084,7 @@ const LinkText = styled('span')(({ bannerType = 'outlined' }) => ({
         textDecoration: 'underline',
     },
 }));
-const StyledIconButton$1 = styled(IconButton)(({ closeIconColor }) => ({
+const StyledIconButton = styled(IconButton)(({ closeIconColor }) => ({
     padding: 0,
     color: closeIconColor,
     '&:hover': {
@@ -1101,7 +1101,7 @@ const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
         return null;
     }
     const closeIconColor = type === 'filled' ? semanticColors.surfaces.white : intentColors$1[intent].default;
-    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton$1, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
+    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -1171,7 +1171,7 @@ function NeoBreadcrumbs({ children, className }) {
 }
 
 // Props that should not be forwarded to ButtonBase (Button-specific props that ButtonBase doesn't support)
-const buttonOnlyProps$1 = [
+const buttonOnlyProps = [
     'variant',
     'size',
     'loading',
@@ -1181,7 +1181,7 @@ const buttonOnlyProps$1 = [
     'disableElevation',
 ];
 const StyledButtonBase$1 = styled(ButtonBase, {
-    shouldForwardProp: prop => !buttonOnlyProps$1.includes(prop),
+    shouldForwardProp: prop => !buttonOnlyProps.includes(prop),
 })(({ theme, variant = 'primary', size = 'medium', loading = false }) => {
     // Size configurations using theme.spacing()
     const sizeConfig = {
@@ -3414,20 +3414,24 @@ function subMonths(date, amount, options) {
   return addMonths(date, -1);
 }
 
-// Props that should not be forwarded to IconButton (Button-specific props that IconButton doesn't support)
-const buttonOnlyProps = [
-    'size',
-    'startIcon',
-    'endIcon',
-    'fullWidth',
-    'disableElevation',
-    'variant',
-    'active',
-];
-const StyledIconButton = styled(IconButton, {
-    shouldForwardProp: prop => !buttonOnlyProps.includes(prop),
-})(({ theme, size = 'medium', variant = 'default', active = false }) => {
-    // Size configurations using theme.spacing()
+// Cast NeoButton to a simpler type for styled() compatibility (avoids generic inference issues)
+const NeoButtonBase = NeoButton;
+// Icon-only wrapper around NeoButton for hierarchy variants
+const StyledIconOnlyButton = styled(NeoButtonBase)(({ size = 'medium' }) => {
+    const dimension = size === 'small' ? 32 : spacing.spacing_5;
+    return {
+        '&&': {
+            minWidth: 'unset',
+            padding: 0,
+            width: dimension,
+        },
+    };
+});
+// Nav variant - standalone styled MUI IconButton (not backed by Figma)
+const navOnlyProps = ['size', 'variant', 'active'];
+const StyledNavButton = styled(IconButton, {
+    shouldForwardProp: prop => !navOnlyProps.includes(prop),
+})(({ theme, size = 'medium', active = false }) => {
     const sizeConfig = {
         small: {
             width: 32,
@@ -3441,50 +3445,24 @@ const StyledIconButton = styled(IconButton, {
         },
     };
     const sizeStyles = sizeConfig[size];
-    // Base styles shared by all variants
-    const baseStyles = {
+    const activeNavStyles = {
+        backgroundColor: semanticColors.icons.pressedBackground,
+        borderColor: 'transparent',
+        color: semanticColors.buttons.primary.pressed,
+    };
+    return {
         width: sizeStyles.width,
         height: sizeStyles.height,
         padding: sizeStyles.padding,
-        borderRadius: borderRadius.button, // Fully rounded/circular
+        borderRadius: borderRadius.button,
         transition: theme.transitions.create(['background-color', 'border-color', 'color'], {
             duration: theme.transitions.duration.short,
         }),
-        // Disabled state
-        [`&.${iconButtonClasses.disabled}`]: {
-            cursor: 'not-allowed',
-            pointerEvents: 'auto',
-        },
-        // Focus visible for keyboard navigation
         '&:focus-visible': {
             outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
-    };
-    // Default variant - transparent neutral style
-    const defaultStyles = {
-        backgroundColor: 'transparent',
-        color: semanticColors.icons.default,
-        border: 'none',
-        '&:hover': {
-            backgroundColor: semanticColors.icons.hoverBackground,
-            color: semanticColors.icons.hover,
-        },
-        '&:active': {
-            color: semanticColors.icons.pressed,
-        },
-        [`&.${iconButtonClasses.disabled}`]: {
-            backgroundColor: 'transparent',
-            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 = {
+        // Nav styles
         backgroundColor: semanticColors.surfaces.white,
         color: semanticColors.icons.default,
         border: `1px solid ${semanticColors.border.secondary}`,
@@ -3495,6 +3473,8 @@ const StyledIconButton = styled(IconButton, {
         },
         '&:active': activeNavStyles,
         [`&.${iconButtonClasses.disabled}`]: {
+            cursor: 'not-allowed',
+            pointerEvents: 'auto',
             backgroundColor: semanticColors.surfaces.white,
             borderColor: semanticColors.border.secondary,
             color: semanticColors.icons.disabled,
@@ -3502,33 +3482,30 @@ const StyledIconButton = styled(IconButton, {
         },
         ...(active ? activeNavStyles : {}),
     };
-    const variantStyles = {
-        default: defaultStyles,
-        nav: navStyles,
-    };
-    return {
-        ...baseStyles,
-        ...variantStyles[variant],
-    };
 });
 /**
- * NeoIconButton - Icon-only button component based on MUI IconButton
+ * NeoIconButton - Icon-only button component
  *
- * Simple, neutral icon button with transparent background and icon color states.
- * Use `variant="nav"` for the global navigation pill-shaped button style.
+ * For hierarchy variants (primary/secondary/destructive/tertiary), wraps NeoButton with
+ * icon-only sizing. For the `nav` variant, uses a standalone MUI IconButton with custom styling.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11126-21344
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4086-7590
  *
  * Figma Props Mapping:
+ * - Hierarchy (Primary|Secondary|Destructive|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
+ * - Show text = false → always (this is the icon-only variant of NeoButton)
  * - State=Disabled → disabled prop
+ * - State=Loading → loading prop
  * - State=Hover → CSS :hover
- * - State=Active → CSS :active
+ * - State=Pressed → CSS :active
  * - State=Focus → CSS :focus-visible
- * - State=Loading → not yet implemented
  */
-const NeoIconButton = ({ size = 'medium', variant = 'default', active = false, ...props }) => {
-    return (jsx(StyledIconButton, { size: size, variant: variant, active: active, disableRipple: variant === 'nav', ...props }));
+const NeoIconButton = ({ size = 'medium', variant = 'tertiary', active = false, loading, children, ...props }) => {
+    if (variant === 'nav') {
+        return (jsx(StyledNavButton, { size: size, active: active, disableRipple: true, ...props, children: children }));
+    }
+    return (jsx(StyledIconOnlyButton, { variant: variant, size: size, loading: loading, ...props, children: children }));
 };
 NeoIconButton.displayName = 'NeoIconButton';