@moderneinc/neo-styled-components 5.0.0-next.81f348 → 5.0.0-next.d003a0

package/dist/NavigationItem/NavigationItem.d.ts

@@ -1,5 +1,6 @@
 import ButtonBase, { type ButtonBaseProps } from '@mui/material/ButtonBase';
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import type { NeoTagOwnProps } from '../Tag/Tag';
 type NeoNavigationItemOwnProps = {
     /**
      * Icon element to display
@@ -16,10 +17,20 @@ type NeoNavigationItemOwnProps = {
      */
     selected?: boolean;
     /**
-     * Optional tag badge content (e.g., count)
+     * Optional tag badge content (e.g., "Beta")
      * @figma Tag
      */
     tag?: string;
+    /**
+     * Slot props for internal sub-components.
+     */
+    slotProps?: {
+        /**
+         * Props forwarded to the NeoTag badge rendered when `tag` is set.
+         * Override `intent` to change colour: `'beta'` (periwinkle, default) or `'default'` (grey).
+         */
+        badge?: Pick<NeoTagOwnProps, 'intent'>;
+    };
     /**
      * Additional content
      */
@@ -33,7 +44,7 @@ export type NeoNavigationItemProps<C extends ElementType = typeof ButtonBase> =
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
  */
-export declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, slotProps, children, ...props }: NeoNavigationItemProps<C>): import("react/jsx-runtime").JSX.Element;
 export declare namespace NeoNavigationItem {
     var displayName: string;
 }

package/dist/Tag/Tag.d.ts

@@ -13,7 +13,7 @@ declare module '@mui/material/Chip' {
         filled: true;
     }
 }
-type NeoTagOwnProps = {
+export type NeoTagOwnProps = {
     /**
      * The size of the tag
      * @figma Size (Small|Medium|Large)
@@ -51,4 +51,3 @@ export declare function NeoTag<C extends ElementType = typeof Chip>({ size, vari
 export declare namespace NeoTag {
     var displayName: string;
 }
-export {};

package/dist/index.d.ts

@@ -1841,6 +1841,58 @@ declare const NeoNavigationAvatar: {
     displayName: string;
 };
 
+declare module '@mui/material/Chip' {
+    interface ChipPropsColorOverrides {
+        violet: true;
+        beta: true;
+    }
+    interface ChipPropsSizeOverrides {
+        large: true;
+    }
+    interface ChipPropsVariantOverrides {
+        outlined: true;
+        filled: true;
+    }
+}
+type NeoTagOwnProps = {
+    /**
+     * The size of the tag
+     * @figma Size (Small|Medium|Large)
+     * @default "small"
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant style of the tag
+     * @figma Variant (Subtle|Filled)
+     * @default "outlined"
+     */
+    variant?: 'outlined' | 'filled';
+    /**
+     * The intent/purpose of the tag
+     * @figma Intent (Neutral|Error|Warning|Success|Info|Violet)
+     * @default "default"
+     */
+    intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
+};
+type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ChipProps, keyof NeoTagOwnProps | 'component' | 'color'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps | keyof ChipProps> & {
+    component?: C;
+};
+/**
+ * NeoTag - Small pill-shaped label component based on MUI Chip
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
+ *
+ * Figma Props Mapping:
+ * - Size (Small|Medium|Large) → size (small|medium|large)
+ * - Variant (Subtle|Filled) → variant (outlined|filled)
+ * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → intent (default|error|warning|success|info|violet|beta)
+ * - TEXT Label → label prop
+ */
+declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, intent, ...props }: NeoTagProps<C>): react_jsx_runtime.JSX.Element;
+declare namespace NeoTag {
+    var displayName: string;
+}
+
 type NeoNavigationItemOwnProps = {
     /**
      * Icon element to display
@@ -1857,10 +1909,20 @@ type NeoNavigationItemOwnProps = {
      */
     selected?: boolean;
     /**
-     * Optional tag badge content (e.g., count)
+     * Optional tag badge content (e.g., "Beta")
      * @figma Tag
      */
     tag?: string;
+    /**
+     * Slot props for internal sub-components.
+     */
+    slotProps?: {
+        /**
+         * Props forwarded to the NeoTag badge rendered when `tag` is set.
+         * Override `intent` to change colour: `'beta'` (periwinkle, default) or `'default'` (grey).
+         */
+        badge?: Pick<NeoTagOwnProps, 'intent'>;
+    };
     /**
      * Additional content
      */
@@ -1874,7 +1936,7 @@ type NeoNavigationItemProps<C extends ElementType = typeof ButtonBase__default>
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
  */
-declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase__default>({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps<C>): react_jsx_runtime.JSX.Element;
+declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase__default>({ icon, label, selected, tag, slotProps, children, ...props }: NeoNavigationItemProps<C>): react_jsx_runtime.JSX.Element;
 declare namespace NeoNavigationItem {
     var displayName: string;
 }
@@ -2344,58 +2406,6 @@ declare const NeoTab: {
     displayName: string;
 };
 
-declare module '@mui/material/Chip' {
-    interface ChipPropsColorOverrides {
-        violet: true;
-        beta: true;
-    }
-    interface ChipPropsSizeOverrides {
-        large: true;
-    }
-    interface ChipPropsVariantOverrides {
-        outlined: true;
-        filled: true;
-    }
-}
-type NeoTagOwnProps = {
-    /**
-     * The size of the tag
-     * @figma Size (Small|Medium|Large)
-     * @default "small"
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * The variant style of the tag
-     * @figma Variant (Subtle|Filled)
-     * @default "outlined"
-     */
-    variant?: 'outlined' | 'filled';
-    /**
-     * The intent/purpose of the tag
-     * @figma Intent (Neutral|Error|Warning|Success|Info|Violet)
-     * @default "default"
-     */
-    intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
-};
-type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ChipProps, keyof NeoTagOwnProps | 'component' | 'color'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps | keyof ChipProps> & {
-    component?: C;
-};
-/**
- * NeoTag - Small pill-shaped label component based on MUI Chip
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
- *
- * Figma Props Mapping:
- * - Size (Small|Medium|Large) → size (small|medium|large)
- * - Variant (Subtle|Filled) → variant (outlined|filled)
- * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → intent (default|error|warning|success|info|violet|beta)
- * - TEXT Label → label prop
- */
-declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, intent, ...props }: NeoTagProps<C>): react_jsx_runtime.JSX.Element;
-declare namespace NeoTag {
-    var displayName: string;
-}
-
 type Intent = 'neutral' | 'info' | 'success' | 'error' | 'warning';
 type ToastType = 'outlined' | 'filled';
 interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {

package/dist/index.esm.js

@@ -2167,7 +2167,7 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
     gap: theme.spacing(2),
     borderRadius: 0,
     color: semanticColors.icons.default,
-    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    fontSize: theme.typography.pxToRem(typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: `${typography.lineHeight.s}px`,
     transition: theme.transitions.create(['background-color'], {
@@ -5245,28 +5245,13 @@ const Label$2 = styled('span')(({ theme }) => ({
     width: '100%',
     transition: 'color 150ms',
 }));
-const TagPill = styled('span')(({ theme }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 18,
-    paddingLeft: spacing.spacing_3_4, // 6px
-    paddingRight: spacing.spacing_3_4, // 6px
-    borderRadius: borderRadius.full,
-    backgroundColor: colors.digitalBlue[300], // #8D99FF
-    color: semanticColors.typography.tooltip, // white
-    fontFamily: typography.fontFamily.body,
-    fontWeight: typography.fontWeight.medium,
-    fontSize: theme.typography.pxToRem(typography.fontSize.xs), // 12px
-    lineHeight: 1,
-}));
 /**
  * NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
  */
-function NeoNavigationItem({ icon, label, selected = false, tag, children, ...props }) {
-    return (jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsx(Label$2, { className: "neo-nav-label", children: label }), tag && jsx(TagPill, { children: tag }), children] }));
+function NeoNavigationItem({ icon, label, selected = false, tag, slotProps, children, ...props }) {
+    return (jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsx(Label$2, { className: "neo-nav-label", children: label }), tag && (jsx(NeoTag, { size: "medium", variant: "filled", intent: "beta", label: tag, ...slotProps?.badge })), children] }));
 }
 NeoNavigationItem.displayName = 'NeoNavigationItem';