@moderneinc/neo-styled-components 5.0.0-next.3c20d2 → 5.0.0-next.3dfbc7

package/dist/Dot/Dot.d.ts

@@ -1,8 +1,8 @@
-import { type BadgeProps } from '@mui/material/Badge';
+import type { HTMLAttributes, ReactNode } from 'react';
 type DotSize = 'small' | 'medium' | 'large';
 type DotVariant = 'solid' | 'outline';
 type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
-export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeContent' | 'children'> {
+export interface NeoDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /**
      * The size of the dot
      * @default "medium"
@@ -18,9 +18,16 @@ export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'bad
      * @default "neutral"
      */
     color?: DotColor;
+    /**
+     * Optional icon rendered centered inside the dot. Use to indicate intent within
+     * the dot itself (e.g., a minus icon on a disconnected error dot). SVG children
+     * using `currentColor` inherit a white stroke/fill for contrast against the
+     * colored background, and are scaled to 70% of the dot size.
+     */
+    children?: ReactNode;
 }
 /**
- * NeoDot - Status indicator dot component based on MUI Badge
+ * NeoDot - Status indicator dot.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
  *
@@ -30,7 +37,7 @@ export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'bad
  * - Color is configurable via color prop (success|error|warning|info|neutral)
  */
 export declare const NeoDot: {
-    ({ size, variant, color, ...props }: NeoDotProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, variant, color, children, ...props }: NeoDotProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/index.d.ts

@@ -16,7 +16,6 @@ import * as _mui_material_styles from '@mui/material/styles';
 import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
 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 { InputBaseProps } from '@mui/material/InputBase';
 import { MenuProps } from '@mui/material/Menu';
@@ -1414,7 +1413,7 @@ declare const NeoDownloadToast: {
 type DotSize = 'small' | 'medium' | 'large';
 type DotVariant = 'solid' | 'outline';
 type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
-interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeContent' | 'children'> {
+interface NeoDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /**
      * The size of the dot
      * @default "medium"
@@ -1430,9 +1429,16 @@ interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeConte
      * @default "neutral"
      */
     color?: DotColor;
+    /**
+     * Optional icon rendered centered inside the dot. Use to indicate intent within
+     * the dot itself (e.g., a minus icon on a disconnected error dot). SVG children
+     * using `currentColor` inherit a white stroke/fill for contrast against the
+     * colored background, and are scaled to 70% of the dot size.
+     */
+    children?: ReactNode;
 }
 /**
- * NeoDot - Status indicator dot component based on MUI Badge
+ * NeoDot - Status indicator dot.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
  *
@@ -1442,7 +1448,7 @@ interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeConte
  * - Color is configurable via color prop (success|error|warning|info|neutral)
  */
 declare const NeoDot: {
-    ({ size, variant, color, ...props }: NeoDotProps): react_jsx_runtime.JSX.Element;
+    ({ size, variant, color, children, ...props }: NeoDotProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.esm.js

@@ -36,7 +36,6 @@ import { pickersCalendarHeaderClasses } from '@mui/x-date-pickers/PickersCalenda
 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';
-import Badge, { badgeClasses } from '@mui/material/Badge';
 import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import Paper, { paperClasses } from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
@@ -3788,26 +3787,34 @@ const sizeMap = {
     medium: 10,
     large: 12,
 };
-const StyledBadge = styled(Badge)(({ ownerState }) => {
+const StyledDot = styled('span', {
+    shouldForwardProp: prop => prop !== 'ownerState',
+})(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const color = semanticColors.status[ownerState.color].default;
+    const palette = semanticColors.status[ownerState.color];
     return {
-        [`& .${badgeClasses.badge}`]: {
-            width: size,
-            height: size,
-            minWidth: size,
-            borderRadius: ownerState.variant === 'solid' ? '50%' : 0,
-            padding: 0,
-            backgroundColor: ownerState.variant === 'solid' ? color : 'transparent',
-            // Remove default badge positioning - make it standalone
-            position: 'static',
-            transform: 'none',
-            overflow: 'visible',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: size,
+        height: size,
+        minWidth: size,
+        borderRadius: '50%',
+        flexShrink: 0,
+        boxSizing: 'border-box',
+        backgroundColor: palette.default,
+        color: semanticColors.typography.tooltip,
+        ...(ownerState.variant === 'outline' && {
+            border: `3px solid ${palette.light}`,
+        }),
+        '& > svg': {
+            width: '70%',
+            height: '70%',
         },
     };
 });
 /**
- * NeoDot - Status indicator dot component based on MUI Badge
+ * NeoDot - Status indicator dot.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
  *
@@ -3816,26 +3823,8 @@ const StyledBadge = styled(Badge)(({ ownerState }) => {
  * - outline (False|True) → variant prop (solid|outline)
  * - Color is configurable via color prop (success|error|warning|info|neutral)
  */
-const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...props }) => {
-    const dotSize = sizeMap[size];
-    const mediumColor = semanticColors.status[color].default;
-    const lightColor = semanticColors.status[color].light;
-    // For outline variant, use SVG for precise control
-    const renderDot = () => {
-        if (variant === 'outline') {
-            // SVG approach: outer circle with light fill, inner circle with medium fill
-            // Stroke width of ~3px creates the ring effect
-            const strokeWidth = 3;
-            const radius = dotSize / 2;
-            const innerRadius = radius - strokeWidth;
-            return (jsxs("svg", { width: dotSize, height: dotSize, viewBox: `0 0 ${dotSize} ${dotSize}`, style: {
-                    display: 'block',
-                    borderRadius: '50%',
-                }, role: "img", "aria-label": `${color} status indicator`, children: [jsx("title", { children: `${color} status indicator` }), jsx("circle", { cx: radius, cy: radius, r: radius, fill: lightColor }), jsx("circle", { cx: radius, cy: radius, r: innerRadius, fill: mediumColor })] }));
-        }
-        return jsx("span", { style: { display: 'inline-block', width: 0, height: 0 } });
-    };
-    return (jsx(StyledBadge, { ...props, ownerState: { size, variant, color }, variant: "dot", children: renderDot() }));
+const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', children, ...props }) => {
+    return (jsx(StyledDot, { ...props, ownerState: { size, variant, color }, role: "img", "aria-label": props['aria-label'] ?? `${color} status indicator`, children: children }));
 };
 NeoDot.displayName = 'NeoDot';