@moderneinc/neo-styled-components 4.1.2-next.d146c6 → 5.0.0-next.0fa9b3

package/dist/DatePicker/DatePicker.d.ts

@@ -71,11 +71,11 @@ export interface NeoDatePickerProps {
     /**
      * Additional props passed to single DatePicker
      */
-    datePickerProps?: Omit<Partial<DatePickerProps<false>>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+    datePickerProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
     /**
      * Additional props passed to DateRangePicker
      */
-    dateRangePickerProps?: Omit<Partial<DateRangePickerProps<false>>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+    dateRangePickerProps?: Omit<Partial<DateRangePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
 }
 /**
  * NeoDatePicker - Moderne design system date picker component

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;
 };
 
@@ -2844,11 +2852,11 @@ interface NeoDatePickerProps {
     /**
      * Additional props passed to single DatePicker
      */
-    datePickerProps?: Omit<Partial<DatePickerProps<false>>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+    datePickerProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
     /**
      * Additional props passed to DateRangePicker
      */
-    dateRangePickerProps?: Omit<Partial<DateRangePickerProps<false>>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
+    dateRangePickerProps?: Omit<Partial<DateRangePickerProps>, 'value' | 'onChange' | 'open' | 'onOpen' | 'onClose' | 'label'>;
 }
 /**
  * NeoDatePicker - Moderne design system date picker component

package/dist/index.esm.js

@@ -31,8 +31,8 @@ import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
 import { dayCalendarClasses } from '@mui/x-date-pickers/DateCalendar';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { pickerPopperClasses } from '@mui/x-date-pickers/internals';
+import { pickerDayClasses } from '@mui/x-date-pickers/PickerDay';
 import { pickersCalendarHeaderClasses } from '@mui/x-date-pickers/PickersCalendarHeader';
-import { pickersDayClasses } from '@mui/x-date-pickers/PickersDay';
 import { PickersShortcuts } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { dateRangePickerDayClasses } from '@mui/x-date-pickers-pro/DateRangePickerDay';
@@ -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 = {
@@ -2785,18 +2785,21 @@ NeoDataGridColumnsButton.displayName = 'NeoDataGridColumnsButton';
 const sizeStyles = {
     small: {
         height: 16,
+        minWidth: 16,
         paddingLeft: spacing.spacing_1_2, // 4px
         paddingRight: spacing.spacing_1_2, // 4px
     },
     medium: {
         height: 18,
+        minWidth: 18,
         paddingLeft: spacing.spacing_3_4, // 6px
         paddingRight: spacing.spacing_3_4, // 6px
     },
     large: {
         height: 20,
-        paddingLeft: spacing.spacing_3_4, // 6px
-        paddingRight: spacing.spacing_3_4, // 6px
+        minWidth: 20,
+        paddingLeft: spacing.spacing_1, // 8px
+        paddingRight: spacing.spacing_1, // 8px
     },
 };
 const outlinedColorStyles = {
@@ -2847,8 +2850,10 @@ const filledColorStyles = {
 };
 const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
     padding: 0,
+    boxSizing: 'border-box',
     borderRadius: borderRadius.full,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    lineHeight: 1,
     fontWeight: typography.fontWeight.medium,
     ...(size && sizeStyles[size]),
     [`& .${chipClasses.label}`]: {
@@ -3414,20 +3419,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 +3450,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 +3478,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 +3487,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';
 
@@ -3596,7 +3578,7 @@ const StyledDatePicker = styled(DatePicker)(({ theme }) => ({
         fontWeight: typography.fontWeight.medium,
         color: semanticColors.typography.bodySecondary,
     },
-    [`& .${pickersDayClasses.root}`]: {
+    [`& .${pickerDayClasses.root}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         color: semanticColors.typography.bodySecondary,
         borderRadius: borderRadius.l,
@@ -3610,7 +3592,7 @@ const StyledDatePicker = styled(DatePicker)(({ theme }) => ({
                 backgroundColor: colors.grey[800],
             },
         },
-        [`&.${pickersDayClasses.today}`]: {
+        [`&.${pickerDayClasses.today}`]: {
             border: `2px solid ${colors.grey[800]}`,
             backgroundColor: 'transparent',
         },
@@ -3636,8 +3618,6 @@ const StyledDateRangePicker = styled(DateRangePicker)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         color: semanticColors.typography.bodySecondary,
         borderRadius: borderRadius.l,
-    },
-    [`& .${dateRangePickerDayClasses.day}`]: {
         '&:hover': {
             backgroundColor: semanticColors.icons.hoverBackground,
         },
@@ -3646,15 +3626,13 @@ const StyledDateRangePicker = styled(DateRangePicker)(({ theme }) => ({
             color: semanticColors.surfaces.white,
         },
     },
-    [`& .${dateRangePickerDayClasses.rangeIntervalDayHighlight}`]: {
+    [`& .${dateRangePickerDayClasses.insideSelection}`]: {
         backgroundColor: semanticColors.icons.hoverBackground,
+        color: semanticColors.typography.input.default,
     },
-    [`& .${dateRangePickerDayClasses.rangeIntervalDayHighlightStart}, & .${dateRangePickerDayClasses.rangeIntervalDayHighlightEnd}`]: {
+    [`& .${dateRangePickerDayClasses.selectionStart}, & .${dateRangePickerDayClasses.selectionEnd}`]: {
         backgroundColor: colors.grey[800],
     },
-    [`& .${dateRangePickerDayClasses.dayInsideRangeInterval}`]: {
-        color: semanticColors.typography.input.default,
-    },
     [`& .${pickersCalendarHeaderClasses.label}`]: {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.semiBold,
@@ -6577,7 +6555,11 @@ const ItemEndAction = styled('span')({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
  */
 const NeoTreeView = ({ slots, ...props }) => {
-    return (jsx(StyledTreeView, { slots: {
+    return (jsx(StyledTreeView
+    // v9 enables virtualization by default; disabled to preserve current layout behavior
+    , { 
+        // v9 enables virtualization by default; disabled to preserve current layout behavior
+        disableVirtualization: true, slots: {
             item: NeoTreeItem,
             collapseIcon: CollapseIcon,
             expandIcon: ExpandIcon,
@@ -6598,17 +6580,14 @@ const StyledTreeView = styled(RichTreeViewPro)({
     [`& .${treeItemClasses.content}:hover`]: {
         backgroundColor: semanticColors.surfaces.listHover,
     },
-    [`& .${treeItemClasses.content}.Mui-focused`]: {
+    [`& .${treeItemClasses.content}[data-focused]`]: {
         boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
         backgroundColor: 'transparent',
     },
-    [`& .${treeItemClasses.content}.Mui-selected`]: {
-        backgroundColor: semanticColors.surfaces.listHover,
-    },
-    [`& .${treeItemClasses.content}.Mui-selected:hover`]: {
+    [`& .${treeItemClasses.content}[data-selected]`]: {
         backgroundColor: semanticColors.surfaces.listHover,
     },
-    [`& .${treeItemClasses.content}.Mui-selected.Mui-focused`]: {
+    [`& .${treeItemClasses.content}[data-selected][data-focused]`]: {
         backgroundColor: semanticColors.surfaces.listHover,
         boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
     },