@moderneinc/neo-styled-components 2.8.0-next.22110f → 2.8.0-next.4df497

package/dist/Banner/Banner.d.ts

@@ -1,13 +1,22 @@
 import { type AlertProps } from '@mui/material/Alert';
 import type { ReactNode } from 'react';
+type Intent = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type BannerType = 'outlined' | 'filled';
 export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The visual style variant of the banner
-     * @default "light"
+     * The intent/purpose of the banner
+     * @default "info"
      *
-     * @figmaPropMapping color (Dark|Light|Success|Error|Warning) → variant
+     * @figmaPropMapping Intention (Info|Success|Error|Warning|Neutral) → intent
      */
-    variant?: 'dark' | 'light' | 'success' | 'error' | 'warning';
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
+     *
+     * @figmaPropMapping Type (Outlined|Filled) → type
+     */
+    type?: BannerType;
     /**
      * The message text to display
      *
@@ -18,20 +27,20 @@ export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity'
      * Horizontal alignment of the message content
      * @default "left"
      *
-     * @figmaPropMapping messagePosition (Left|Center) → messagePosition
+     * @figmaPropMapping Message Position (Left|Center) → messagePosition
      */
     messagePosition?: 'left' | 'center';
     /**
      * Optional link text to display after the message
      *
-     * @figmaPropMapping link (boolean) → linkText (string)
+     * @figmaPropMapping Show Link (boolean) → linkText (string)
      */
     linkText?: string;
     /**
      * Whether to show the close button
      * @default true
      *
-     * @figmaPropMapping closeIcon → showClose
+     * @figmaPropMapping Dismissible → showClose
      */
     showClose?: boolean;
     /**
@@ -48,19 +57,8 @@ export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity'
      */
     onLinkClick?: () => void;
 }
-/**
- * NeoBanner - Inline banner/alert component based on MUI Alert
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4170-2158
- *
- * Figma Props Mapping:
- * - color (Dark|Light|Success|Error|Warning) → variant (dark|light|success|error|warning)
- * - messagePosition (Left|Center) → messagePosition ("left"|"center")
- * - closeIcon (boolean) → showClose (boolean)
- * - link (boolean) → linkText (string)
- * - {Message} → message (string)
- */
 export declare const NeoBanner: {
-    ({ variant, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/dist/index.d.ts

@@ -362,14 +362,23 @@ declare const NeoBadge: {
     displayName: string;
 };
 
+type Intent = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type BannerType = 'outlined' | 'filled';
 interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The visual style variant of the banner
-     * @default "light"
+     * The intent/purpose of the banner
+     * @default "info"
+     *
+     * @figmaPropMapping Intention (Info|Success|Error|Warning|Neutral) → intent
+     */
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
      *
-     * @figmaPropMapping color (Dark|Light|Success|Error|Warning) → variant
+     * @figmaPropMapping Type (Outlined|Filled) → type
      */
-    variant?: 'dark' | 'light' | 'success' | 'error' | 'warning';
+    type?: BannerType;
     /**
      * The message text to display
      *
@@ -380,20 +389,20 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
      * Horizontal alignment of the message content
      * @default "left"
      *
-     * @figmaPropMapping messagePosition (Left|Center) → messagePosition
+     * @figmaPropMapping Message Position (Left|Center) → messagePosition
      */
     messagePosition?: 'left' | 'center';
     /**
      * Optional link text to display after the message
      *
-     * @figmaPropMapping link (boolean) → linkText (string)
+     * @figmaPropMapping Show Link (boolean) → linkText (string)
      */
     linkText?: string;
     /**
      * Whether to show the close button
      * @default true
      *
-     * @figmaPropMapping closeIcon → showClose
+     * @figmaPropMapping Dismissible → showClose
      */
     showClose?: boolean;
     /**
@@ -410,20 +419,8 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
      */
     onLinkClick?: () => void;
 }
-/**
- * NeoBanner - Inline banner/alert component based on MUI Alert
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4170-2158
- *
- * Figma Props Mapping:
- * - color (Dark|Light|Success|Error|Warning) → variant (dark|light|success|error|warning)
- * - messagePosition (Left|Center) → messagePosition ("left"|"center")
- * - closeIcon (boolean) → showClose (boolean)
- * - link (boolean) → linkText (string)
- * - {Message} → message (string)
- */
 declare const NeoBanner: {
-    ({ variant, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): react_jsx_runtime.JSX.Element;
+    ({ intent, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.esm.js

@@ -955,33 +955,27 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
+const intentColors = {
+    info: semanticColors.status.info,
+    success: semanticColors.status.success,
+    error: semanticColors.status.error,
+    warning: semanticColors.status.warning,
+    neutral: semanticColors.status.neutral,
+};
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert$2 = styled(Alert, {
-    shouldForwardProp: prop => prop !== 'messagePosition' && prop !== 'variant',
-})(({ variant = 'light', messagePosition = 'left' }) => {
-    // Variant-specific styles
-    const variantStyles = {
-        dark: {
-            backgroundColor: semanticColors.surfaces.snackbarBrand,
+    shouldForwardProp: prop => prop !== 'messagePosition' && prop !== 'intent' && prop !== 'bannerType',
+})(({ intent = 'info', bannerType = 'outlined', messagePosition = 'left' }) => {
+    const palette = intentColors[intent];
+    const typeStyles = bannerType === 'filled'
+        ? {
+            backgroundColor: palette.dark,
             color: semanticColors.surfaces.white,
-        },
-        light: {
-            backgroundColor: semanticColors.status.info.light,
-            color: colors.grey['800'],
-        },
-        success: {
-            backgroundColor: semanticColors.status.success.light,
-            color: colors.grey['800'],
-        },
-        error: {
-            backgroundColor: semanticColors.status.error.light,
-            color: colors.grey['800'],
-        },
-        warning: {
-            backgroundColor: semanticColors.status.warning.light,
+        }
+        : {
+            backgroundColor: palette.light,
             color: colors.grey['800'],
-        },
-    };
+        };
     return {
         width: '100%',
         minHeight: 52,
@@ -995,9 +989,9 @@ const StyledAlert$2 = styled(Alert, {
         ...(messagePosition === 'center' && { position: 'relative' }),
         boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
         fontSize: typography.fontSize.default,
-        fontWeight: typography.fontWeight.regular,
+        fontWeight: typography.fontWeight.medium,
         lineHeight: 1.5,
-        ...variantStyles[variant],
+        ...typeStyles,
         [`& .${alertClasses.icon}`]: {
             padding: 0,
             opacity: 1,
@@ -1020,26 +1014,18 @@ const StyledAlert$2 = styled(Alert, {
         },
     };
 });
-const LinkText = styled('span')(({ variant = 'light' }) => {
-    const getLinkColor = () => {
-        if (variant === 'dark') {
-            return semanticColors.typography.link.default; // #f9fafb (light gray/white)
-        }
-        if (variant === 'light') {
-            return semanticColors.typography.link.primary; // #2f42ff (blue)
-        }
-        // For success, error, warning - use dark body color #1f2937
-        return colors.grey['800'];
-    };
-    return {
-        fontWeight: typography.fontWeight.semiBold,
-        color: getLinkColor(),
-        cursor: 'pointer',
-        '&:hover': {
-            textDecoration: 'underline',
-        },
-    };
-});
+const LinkText = styled('span')(({ bannerType = 'outlined' }) => ({
+    marginLeft: 'auto',
+    fontWeight: typography.fontWeight.semiBold,
+    color: bannerType === 'filled'
+        ? semanticColors.typography.link.white
+        : semanticColors.typography.link.primary,
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+        textDecoration: 'underline',
+    },
+}));
 const StyledIconButton$1 = styled(IconButton)(({ closeIconColor }) => ({
     padding: 0,
     color: closeIconColor,
@@ -1047,35 +1033,9 @@ const StyledIconButton$1 = styled(IconButton)(({ closeIconColor }) => ({
         backgroundColor: 'transparent',
     },
 }));
-/**
- * NeoBanner - Inline banner/alert component based on MUI Alert
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4170-2158
- *
- * Figma Props Mapping:
- * - color (Dark|Light|Success|Error|Warning) → variant (dark|light|success|error|warning)
- * - messagePosition (Left|Center) → messagePosition ("left"|"center")
- * - closeIcon (boolean) → showClose (boolean)
- * - link (boolean) → linkText (string)
- * - {Message} → message (string)
- */
-const NeoBanner = ({ variant = 'light', message, messagePosition = 'left', linkText, showClose = true, icon, onClose, onLinkClick, ...props }) => {
-    const getCloseIconColor = () => {
-        if (variant === 'dark') {
-            return semanticColors.surfaces.white;
-        }
-        if (variant === 'success') {
-            return semanticColors.status.success.default;
-        }
-        if (variant === 'error') {
-            return semanticColors.status.error.default;
-        }
-        if (variant === 'warning') {
-            return semanticColors.status.warning.default;
-        }
-        return colors.grey['800'];
-    };
-    return (jsx(StyledAlert$2, { ...props, variant: variant, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton$1, { size: "small", onClick: onClose, closeIconColor: getCloseIconColor(), children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { variant: variant, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { variant: variant, onClick: onLinkClick, children: linkText }))] })) }));
+const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePosition = 'left', linkText, showClose = true, icon, onClose, onLinkClick, ...props }) => {
+    const closeIconColor = type === 'filled' ? semanticColors.surfaces.white : intentColors[intent].default;
+    return (jsx(StyledAlert$2, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton$1, { size: "small", onClick: onClose, 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';