@moderneinc/neo-styled-components 2.8.0-next.fea0d4 → 3.0.0-next.ac08ae

package/dist/Banner/Banner.d.ts

@@ -1,5 +1,5 @@
 import { type AlertProps } from '@mui/material/Alert';
-import type { ReactNode } from 'react';
+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'> {
@@ -38,7 +38,7 @@ export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity'
     linkText?: string;
     /**
      * Whether to show the close button
-     * @default true
+     * @default false
      *
      * @figmaPropMapping Dismissible → showClose
      */
@@ -58,7 +58,7 @@ export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity'
     onLinkClick?: () => void;
 }
 export declare const NeoBanner: {
-    ({ intent, type, 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 | null;
     displayName: string;
 };
 export {};

package/dist/Tag/Tag.d.ts

@@ -1,4 +1,5 @@
-import { type ChipProps } from '@mui/material/Chip';
+import Chip from '@mui/material/Chip';
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
 declare module '@mui/material/Chip' {
     interface ChipPropsColorOverrides {
         violet: true;
@@ -12,7 +13,7 @@ declare module '@mui/material/Chip' {
         filled: true;
     }
 }
-export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
+type NeoTagOwnProps = {
     /**
      * The size of the tag
      * @figma m (sm|md|lg)
@@ -31,7 +32,10 @@ export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
      * @default "default"
      */
     color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
-}
+};
+export type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps> & {
+    component?: C;
+};
 /**
  * NeoTag - Small pill-shaped label component based on MUI Chip
  *
@@ -43,7 +47,8 @@ export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
  * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
  * - Label text → label prop
  */
-export declare const NeoTag: {
-    ({ size, variant, ...props }: NeoTagProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, ...props }: NeoTagProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace NeoTag {
+    var displayName: string;
+}
+export {};

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType } from 'react';
+import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType, ComponentPropsWithoutRef } from 'react';
 import { GridDensity, GridFilterPanel } from '@mui/x-data-grid';
 import { AvatarProps } from '@mui/material/Avatar';
-import { ChipProps } from '@mui/material/Chip';
+import Chip, { ChipProps } from '@mui/material/Chip';
 import { AlertProps } from '@mui/material/Alert';
 import { LinkProps } from '@mui/material/Link';
 import * as ButtonBase from '@mui/material/ButtonBase';
@@ -400,7 +400,7 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
     linkText?: string;
     /**
      * Whether to show the close button
-     * @default true
+     * @default false
      *
      * @figmaPropMapping Dismissible → showClose
      */
@@ -420,7 +420,7 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
     onLinkClick?: () => void;
 }
 declare const NeoBanner: {
-    ({ intent, type, 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 | null;
     displayName: string;
 };
 
@@ -2218,7 +2218,7 @@ declare module '@mui/material/Chip' {
         filled: true;
     }
 }
-interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
+type NeoTagOwnProps = {
     /**
      * The size of the tag
      * @figma m (sm|md|lg)
@@ -2237,7 +2237,10 @@ interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
      * @default "default"
      */
     color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
-}
+};
+type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps> & {
+    component?: C;
+};
 /**
  * NeoTag - Small pill-shaped label component based on MUI Chip
  *
@@ -2249,10 +2252,10 @@ interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
  * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
  * - Label text → label prop
  */
-declare const NeoTag: {
-    ({ size, variant, ...props }: NeoTagProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
+declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, ...props }: NeoTagProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace NeoTag {
+    var displayName: string;
+}
 
 interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import Chip, { chipClasses } from '@mui/material/Chip';
 import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-import React, { forwardRef, createElement, useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import React, { forwardRef, createElement, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
@@ -136,7 +136,7 @@ const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
-        boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
+        boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
     }),
     '&:focus-within': {
         ...focusRingStyles,
@@ -998,7 +998,7 @@ const StyledAlert$2 = styled(Alert, {
         alignItems: 'center',
         justifyContent: messagePosition === 'center' ? 'center' : 'flex-start',
         ...(messagePosition === 'center' && { position: 'relative' }),
-        boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
+        boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
         fontSize: typography.fontSize.default,
         fontWeight: typography.fontWeight.medium,
         lineHeight: 1.5,
@@ -1044,9 +1044,17 @@ const StyledIconButton$1 = styled(IconButton)(({ closeIconColor }) => ({
         backgroundColor: 'transparent',
     },
 }));
-const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePosition = 'left', linkText, showClose = true, icon, onClose, onLinkClick, ...props }) => {
+const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePosition = 'left', linkText, showClose = false, icon, onClose, onLinkClick, ...props }) => {
+    const [dismissed, setDismissed] = useState(false);
+    const handleClose = () => {
+        setDismissed(true);
+        onClose?.();
+    };
+    if (dismissed) {
+        return null;
+    }
     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 }))] })) }));
+    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: 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';
 
@@ -2839,9 +2847,9 @@ const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
  * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
  * - Label text → label prop
  */
-const NeoTag = ({ size = 'small', variant = 'outlined', ...props }) => {
+function NeoTag({ size = 'small', variant = 'outlined', ...props }) {
     return jsx(StyledChip$1, { size: size, variant: variant, ...props });
-};
+}
 NeoTag.displayName = 'NeoTag';
 
 /**
@@ -4063,11 +4071,11 @@ const StyledFooter = styled(Box, {
     '&::before': {
         content: showShadow ? '""' : 'none',
         position: 'absolute',
-        top: `-${shadows.neutralRegular.blur}px`, // -4px
+        top: `-${shadows.neutral.regular.blur}px`, // -4px
         left: 0,
         right: 0,
-        height: `${shadows.neutralRegular.blur}px`, // 4px
-        background: `linear-gradient(to top, ${shadows.neutralRegular.shadow}, transparent)`, // rgba(31, 41, 55, 0.1)
+        height: `${shadows.neutral.regular.blur}px`, // 4px
+        background: `linear-gradient(to top, ${shadows.neutral.regular.shadow}, transparent)`, // rgba(31, 41, 55, 0.1)
         pointerEvents: 'none',
     },
     [theme.breakpoints.down('sm')]: {
@@ -4486,7 +4494,7 @@ const InfoIconWrapper = styled('span')({
 });
 const StyledInputBase = styled(InputBase, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'destructive',
-})(({ theme, size = 'medium', destructive, startAdornment }) => {
+})(({ theme, size = 'medium', destructive, startAdornment, multiline }) => {
     const sizeConfig = {
         small: {
             height: spacing.spacing_5,
@@ -4503,7 +4511,7 @@ const StyledInputBase = styled(InputBase, {
     };
     const sizeStyles = sizeConfig[size];
     return {
-        height: sizeStyles.height,
+        height: multiline ? 'auto' : sizeStyles.height,
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
         backgroundColor: semanticColors.input.background,
@@ -6427,7 +6435,7 @@ const StyledSwitch = styled(Switch, {
         [`& .${switchClasses.thumb}`]: {
             width: config.thumbSize,
             height: config.thumbSize,
-            boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
+            boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
             transition: theme.transitions.create(['width'], {
                 duration: theme.transitions.duration.shortest,
             }),
@@ -6596,7 +6604,7 @@ const StyledTooltip = styled(Tooltip, {
                 justifyContent: 'center',
             }),
             // Apply shadow
-            boxShadow: `${shadows.neutralMedium.x}px ${shadows.neutralMedium.y}px ${shadows.neutralMedium.blur}px ${shadows.neutralMedium.spread}px ${shadows.neutralMedium.shadow}`,
+            boxShadow: `${shadows.neutral.medium.x}px ${shadows.neutral.medium.y}px ${shadows.neutral.medium.blur}px ${shadows.neutral.medium.spread}px ${shadows.neutral.medium.shadow}`,
         },
         // Style the arrow
         [`& .${tooltipClasses.arrow}`]: {