@moderneinc/neo-styled-components 5.0.0-next.e88b47 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/Alert/Alert.d.ts +15 -1
  2. package/dist/Badge/Badge.d.ts +16 -2
  3. package/dist/Breadcrumbs/Breadcrumbs.d.ts +0 -10
  4. package/dist/CanceledIcon/CanceledIcon.d.ts +11 -0
  5. package/dist/Checkbox/Checkbox.d.ts +5 -4
  6. package/dist/DatePickerListItem/DatePickerListItem.d.ts +2 -22
  7. package/dist/DatePickerMenu/DatePickerMenu.d.ts +2 -22
  8. package/dist/Dot/Dot.d.ts +11 -4
  9. package/dist/FilledStatusIcons/FilledStatusIcons.d.ts +41 -0
  10. package/dist/GeneralAvatar/GeneralAvatar.d.ts +1 -7
  11. package/dist/InputField/InputField.d.ts +12 -1
  12. package/dist/ListItemButton/ListItemButton.d.ts +12 -1
  13. package/dist/MenuItem/MenuItem.d.ts +31 -9
  14. package/dist/NavigationAvatar/NavigationAvatar.d.ts +1 -1
  15. package/dist/NavigationItem/NavigationItem.d.ts +21 -2
  16. package/dist/NeoAvatarCell/NeoAvatarCell.d.ts +1 -3
  17. package/dist/PageContent/PageContent.d.ts +12 -1
  18. package/dist/RadioButtonWithText/RadioButtonWithText.d.ts +2 -22
  19. package/dist/RipplingDot/RipplingDot.d.ts +12 -0
  20. package/dist/SelectField/SelectField.d.ts +64 -0
  21. package/dist/SideNav/NeoSideNavContext.d.ts +5 -0
  22. package/dist/SideNav/SideNav.d.ts +18 -25
  23. package/dist/TabPanel/TabPanel.d.ts +47 -0
  24. package/dist/Table/Table.d.ts +64 -0
  25. package/dist/Tabs/Tabs.d.ts +1 -1
  26. package/dist/Tag/Tag.d.ts +1 -2
  27. package/dist/ToggleButton/ToggleButton.d.ts +13 -18
  28. package/dist/ToggleButtonGroup/ToggleButtonGroup.d.ts +26 -0
  29. package/dist/ToggleButtonWithText/ToggleButtonWithText.d.ts +2 -22
  30. package/dist/Tooltip/Tooltip.d.ts +8 -5
  31. package/dist/TopNav/TopNav.d.ts +2 -22
  32. package/dist/TourModal/TourModal.d.ts +2 -22
  33. package/dist/TypologyControl/TypologyControl.d.ts +1 -1
  34. package/dist/VibratingDot/VibratingDot.d.ts +12 -0
  35. package/dist/index.d.ts +533 -106
  36. package/dist/index.esm.js +1042 -453
  37. package/dist/index.esm.js.map +1 -1
  38. package/dist/index.js +1060 -449
  39. package/dist/index.js.map +1 -1
  40. package/dist/utils/colorHelpers.d.ts +6 -0
  41. package/package.json +5 -5
  42. package/dist/utils/avatarColors.d.ts +0 -7
package/dist/index.d.ts CHANGED
@@ -1,35 +1,34 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React$1 from 'react';
3
- import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType, ComponentPropsWithoutRef } from 'react';
3
+ import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentPropsWithoutRef, ComponentType, FunctionComponent } from 'react';
4
4
  import { GridDensity, GridRenderCellParams, GridFilterPanel, ToolbarProps } from '@mui/x-data-grid';
5
5
  import Chip, { ChipProps } from '@mui/material/Chip';
6
6
  import { AlertProps } from '@mui/material/Alert';
7
7
  import { LinkProps } from '@mui/material/Link';
8
- import * as ButtonBase from '@mui/material/ButtonBase';
9
- import ButtonBase__default, { ButtonBaseProps } from '@mui/material/ButtonBase';
10
- import * as _mui_material_ToggleButton from '@mui/material/ToggleButton';
8
+ import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase';
11
9
  import { ToggleButtonProps } from '@mui/material/ToggleButton';
12
10
  import { ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
11
+ import { SvgIconProps } from '@mui/material/SvgIcon';
13
12
  import { CheckboxProps } from '@mui/material/Checkbox';
14
13
  import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
15
- import * as _mui_material_styles from '@mui/material/styles';
16
14
  import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
17
15
  import { DividerProps } from '@mui/material/Divider';
18
16
  import { PaperProps } from '@mui/material/Paper';
19
- import { BadgeProps } from '@mui/material/Badge';
20
17
  import { AvatarProps } from '@mui/material/Avatar';
21
18
  import { InputBaseProps } from '@mui/material/InputBase';
22
19
  import { MenuProps } from '@mui/material/Menu';
23
- import { MenuItemProps } from '@mui/material/MenuItem';
20
+ import MenuItem from '@mui/material/MenuItem';
24
21
  import { DialogProps } from '@mui/material/Dialog';
25
22
  import { BoxProps } from '@mui/material/Box';
26
23
  import { LinearProgressProps } from '@mui/material/LinearProgress';
27
24
  import { RadioProps } from '@mui/material/Radio';
28
- import { SelectProps } from '@mui/material/Select';
29
- import { SkeletonProps } from '@mui/material/Skeleton';
30
25
  import * as _mui_system from '@mui/system';
26
+ import * as _mui_material from '@mui/material';
27
+ import { BoxProps as BoxProps$1 } from '@mui/material';
28
+ import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
29
+ import { SkeletonProps } from '@mui/material/Skeleton';
30
+ import { TableProps } from '@mui/material/Table';
31
31
  import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
32
- import * as _mui_material_Tabs from '@mui/material/Tabs';
33
32
  import { TabProps } from '@mui/material/Tab';
34
33
  import Button from '@mui/material/Button';
35
34
  import { SwitchProps } from '@mui/material/Switch';
@@ -288,12 +287,25 @@ declare const NeoActivityIndicatorCell: {
288
287
  displayName: string;
289
288
  };
290
289
 
290
+ type BadgeSize = 'small' | 'medium';
291
+ type BadgeVariant = 'filled' | 'outlined';
291
292
  interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
292
293
  /**
293
- * The color/state of the badge
294
+ * The color/state of the badge. Ignored when `variant="outlined"`.
294
295
  * @default "default"
295
296
  */
296
297
  color?: 'default' | 'error' | 'warning' | 'success' | 'info';
298
+ /**
299
+ * Visual density of the badge. `small` is 20px tall, `medium` is 24px tall.
300
+ * @default "medium"
301
+ */
302
+ size?: BadgeSize;
303
+ /**
304
+ * Visual treatment. `filled` uses a per-color tinted background;
305
+ * `outlined` uses a transparent background with a neutral secondary border.
306
+ * @default "filled"
307
+ */
308
+ variant?: BadgeVariant;
297
309
  }
298
310
  /**
299
311
  * NeoBadge - Status badge component based on MUI Chip
@@ -307,7 +319,7 @@ interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
307
319
  * - Label → label prop
308
320
  */
309
321
  declare const NeoBadge: {
310
- (props: NeoBadgeProps): react_jsx_runtime.JSX.Element;
322
+ ({ size, variant, ...props }: NeoBadgeProps): react_jsx_runtime.JSX.Element;
311
323
  displayName: string;
312
324
  };
313
325
 
@@ -376,16 +388,6 @@ declare const NeoBanner: {
376
388
  /**
377
389
  * NeoBreadcrumbs - Navigation breadcrumb component
378
390
  *
379
- * Figma Mapping:
380
- * - Base component uses MuiBreadcrumbs with custom styled Links
381
- * - Uses chevron separator (ChevronRight from lucide-react)
382
- * - Typography: 14px Medium (500 weight)
383
- * - Colors:
384
- * - Non-current: semanticColors.typography.bodySecondary (#6b7280)
385
- * - Current: semanticColors.buttons.primary.default (#2f42ff)
386
- * - Hover: semanticColors.icons.hover (#1f2937) or buttons.tertiary.hover (#1e2ec2)
387
- * - Focus: 2px outline with buttons.primary.focus
388
- *
389
391
  * @see https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4563-122872
390
392
  */
391
393
  interface NeoBreadcrumbsProps {
@@ -484,7 +486,7 @@ type NeoButtonOwnProps = {
484
486
  */
485
487
  endIcon?: ReactNode;
486
488
  };
487
- type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoButtonOwnProps & Omit<React__default.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
489
+ type NeoButtonProps<C extends ElementType = typeof ButtonBase> = NeoButtonOwnProps & Omit<React__default.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
488
490
  component?: C;
489
491
  };
490
492
  /**
@@ -501,7 +503,7 @@ type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoBut
501
503
  * - State=Pressed → CSS :active
502
504
  * - State=Focused → CSS :focus-visible
503
505
  */
504
- declare function NeoButton<C extends ElementType = typeof ButtonBase__default>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: NeoButtonProps<C>): react_jsx_runtime.JSX.Element;
506
+ declare function NeoButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: NeoButtonProps<C>): react_jsx_runtime.JSX.Element;
505
507
  declare namespace NeoButton {
506
508
  var displayName: string;
507
509
  }
@@ -563,6 +565,17 @@ declare const NeoButtonTabGroup: {
563
565
  displayName: string;
564
566
  };
565
567
 
568
+ /**
569
+ * NeoCanceledIcon - Outlined circle struck through by a horizontal line.
570
+ *
571
+ * Marks a CANCELED state. Color comes entirely from `currentColor` (stroke plus
572
+ * a 10% fill tint); set it via the `color`/`sx` prop or a parent.
573
+ */
574
+ declare const NeoCanceledIcon: {
575
+ (props: SvgIconProps): react_jsx_runtime.JSX.Element;
576
+ displayName: string;
577
+ };
578
+
566
579
  interface ComponentSelector {
567
580
  __emotion_styles: any;
568
581
  }
@@ -627,11 +640,12 @@ interface StyledComponent<ComponentProps extends {}, SpecificComponentProps exte
627
640
  }
628
641
 
629
642
  /**
630
- * Custom checkbox icons matching Figma design
631
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11487-81
643
+ * NeoCheckbox uses Lucide icons (square / square-check / square-minus): a rounded
644
+ * outline drawn in `currentColor`, with the check/minus mark sharing that stroke —
645
+ * so a single per-state `color` (set in StyledCheckbox) drives every variant.
632
646
  *
647
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11487-81
633
648
  * Checkbox sizes: xs=12x12, small=16x16, medium=20x20
634
- * Check/minus paths scaled from Untitled UI (originally 24x24)
635
649
  */
636
650
  type CheckboxSize = 'xs' | 'small' | 'medium';
637
651
  declare module '@mui/material/Checkbox' {
@@ -1069,14 +1083,12 @@ type NeoAvatarCellEmpty = NeoAvatarCellBase & {
1069
1083
  empty: true;
1070
1084
  name?: never;
1071
1085
  src?: never;
1072
- colorIndex?: never;
1073
1086
  label?: never;
1074
1087
  };
1075
1088
  type NeoAvatarCellContent = NeoAvatarCellBase & {
1076
1089
  empty?: false;
1077
1090
  name?: string;
1078
1091
  src?: string;
1079
- colorIndex?: number;
1080
1092
  label?: string;
1081
1093
  };
1082
1094
  type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
@@ -1085,7 +1097,7 @@ type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
1085
1097
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
1086
1098
  */
1087
1099
  declare const NeoAvatarCell: {
1088
- ({ name, src, colorIndex, label, disabled, empty, }: NeoAvatarCellProps): react_jsx_runtime.JSX.Element;
1100
+ ({ name, src, label, disabled, empty, }: NeoAvatarCellProps): react_jsx_runtime.JSX.Element;
1089
1101
  displayName: string;
1090
1102
  };
1091
1103
 
@@ -1210,7 +1222,7 @@ declare namespace NeoDataGridFiltersButton {
1210
1222
  var displayName: string;
1211
1223
  }
1212
1224
 
1213
- interface NeoMenuItemProps extends MenuItemProps {
1225
+ type NeoMenuItemOwnProps = {
1214
1226
  /**
1215
1227
  * Optional icon to display on the left side
1216
1228
  * Note: Cannot be directly mapped from Figma (ReactNode)
@@ -1228,16 +1240,26 @@ interface NeoMenuItemProps extends MenuItemProps {
1228
1240
  * Note: Cannot be directly mapped from Figma (ReactNode/string)
1229
1241
  */
1230
1242
  secondaryText?: string;
1243
+ /**
1244
+ * URL to navigate to. When provided, the menu item renders as an anchor
1245
+ * element (via MUI ButtonBase) so users can middle-click or right-click
1246
+ * to open in a new tab. For client-side routing, also pass
1247
+ * `component={NextLink}` (or your router's link component).
1248
+ */
1249
+ href?: string;
1231
1250
  /**
1232
1251
  * Menu item content (text label)
1233
1252
  * @figma children mapped from Figma layer content
1234
1253
  */
1235
1254
  children?: ReactNode;
1236
- }
1255
+ };
1256
+ type NeoMenuItemProps<C extends ElementType = typeof MenuItem> = NeoMenuItemOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof NeoMenuItemOwnProps> & {
1257
+ component?: C;
1258
+ };
1237
1259
  /**
1238
1260
  * NeoMenuItem - Menu item component based on MUI MenuItem
1239
1261
  *
1240
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8584
1262
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025-26?node-id=4159-8714
1241
1263
  *
1242
1264
  * @example
1243
1265
  * ```tsx
@@ -1252,12 +1274,23 @@ interface NeoMenuItemProps extends MenuItemProps {
1252
1274
  *
1253
1275
  * // Disabled state
1254
1276
  * <NeoMenuItem disabled>Disabled item</NeoMenuItem>
1277
+ *
1278
+ * // As an anchor — middle-click/right-click open in a new tab
1279
+ * <NeoMenuItem href="/api-explorer">API explorer</NeoMenuItem>
1280
+ *
1281
+ * // External link
1282
+ * <NeoMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
1283
+ * Documentation
1284
+ * </NeoMenuItem>
1285
+ *
1286
+ * // Client-side routing (Next.js)
1287
+ * <NeoMenuItem component={NextLink} href="/api-explorer">API explorer</NeoMenuItem>
1255
1288
  * ```
1256
1289
  */
1257
- declare const NeoMenuItem: {
1258
- ({ icon, shortcut, secondaryText, children, ...props }: NeoMenuItemProps): react_jsx_runtime.JSX.Element;
1259
- displayName: string;
1260
- };
1290
+ declare function NeoMenuItem<C extends ElementType = typeof MenuItem>({ icon, shortcut, secondaryText, children, ...rest }: NeoMenuItemProps<C>): react_jsx_runtime.JSX.Element;
1291
+ declare namespace NeoMenuItem {
1292
+ var displayName: string;
1293
+ }
1261
1294
 
1262
1295
  type NeoSelectProps = SelectProps;
1263
1296
  /**
@@ -1410,7 +1443,7 @@ declare const NeoDownloadToast: {
1410
1443
  type DotSize = 'small' | 'medium' | 'large';
1411
1444
  type DotVariant = 'solid' | 'outline';
1412
1445
  type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
1413
- interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeContent' | 'children'> {
1446
+ interface NeoDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
1414
1447
  /**
1415
1448
  * The size of the dot
1416
1449
  * @default "medium"
@@ -1426,9 +1459,16 @@ interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeConte
1426
1459
  * @default "neutral"
1427
1460
  */
1428
1461
  color?: DotColor;
1462
+ /**
1463
+ * Optional icon rendered centered inside the dot. Use to indicate intent within
1464
+ * the dot itself (e.g., a minus icon on a disconnected error dot). SVG children
1465
+ * using `currentColor` inherit a white stroke/fill for contrast against the
1466
+ * colored background, and are scaled to 70% of the dot size.
1467
+ */
1468
+ children?: ReactNode;
1429
1469
  }
1430
1470
  /**
1431
- * NeoDot - Status indicator dot component based on MUI Badge
1471
+ * NeoDot - Status indicator dot.
1432
1472
  *
1433
1473
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
1434
1474
  *
@@ -1438,7 +1478,48 @@ interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeConte
1438
1478
  * - Color is configurable via color prop (success|error|warning|info|neutral)
1439
1479
  */
1440
1480
  declare const NeoDot: {
1441
- ({ size, variant, color, ...props }: NeoDotProps): react_jsx_runtime.JSX.Element;
1481
+ ({ size, variant, color, children, ...props }: NeoDotProps): react_jsx_runtime.JSX.Element;
1482
+ displayName: string;
1483
+ };
1484
+
1485
+ /**
1486
+ * Filled status icons — sourced from the published Figma library components
1487
+ * Filled_Success / Filled_Queued / Filled_Info / Filled_Warning / Filled_Error /
1488
+ * Filled_Neutral / Filled_Canceled.
1489
+ *
1490
+ * Designed at 16px; size via `fontSize` like any MUI `SvgIcon`. Each ships its
1491
+ * intent's status color baked into the silhouette with a white inner glyph — the
1492
+ * fill is fixed, so `color`/`htmlColor` are omitted from the props. There is no
1493
+ * Filled_Active (the open-arc spinner cannot fill). Use below 18px; above that,
1494
+ * prefer the Lucide outline glyph.
1495
+ */
1496
+ type NeoFilledStatusIconProps = Omit<SvgIconProps, 'color' | 'htmlColor'>;
1497
+ declare const NeoFilledSuccess: {
1498
+ (props: NeoFilledStatusIconProps): react_jsx_runtime.JSX.Element;
1499
+ displayName: string;
1500
+ };
1501
+ declare const NeoFilledQueued: {
1502
+ (props: NeoFilledStatusIconProps): react_jsx_runtime.JSX.Element;
1503
+ displayName: string;
1504
+ };
1505
+ declare const NeoFilledInfo: {
1506
+ (props: NeoFilledStatusIconProps): react_jsx_runtime.JSX.Element;
1507
+ displayName: string;
1508
+ };
1509
+ declare const NeoFilledWarning: {
1510
+ (props: NeoFilledStatusIconProps): react_jsx_runtime.JSX.Element;
1511
+ displayName: string;
1512
+ };
1513
+ declare const NeoFilledError: {
1514
+ (props: NeoFilledStatusIconProps): react_jsx_runtime.JSX.Element;
1515
+ displayName: string;
1516
+ };
1517
+ declare const NeoFilledNeutral: {
1518
+ (props: NeoFilledStatusIconProps): react_jsx_runtime.JSX.Element;
1519
+ displayName: string;
1520
+ };
1521
+ declare const NeoFilledCanceled: {
1522
+ (props: NeoFilledStatusIconProps): react_jsx_runtime.JSX.Element;
1442
1523
  displayName: string;
1443
1524
  };
1444
1525
 
@@ -1492,12 +1573,6 @@ interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
1492
1573
  * @figma Size
1493
1574
  */
1494
1575
  size?: AvatarSize;
1495
- /**
1496
- * Color index for initials background (1-7). Use 0 or omit for image mode.
1497
- * @default 0
1498
- * @figma Color Index
1499
- */
1500
- colorIndex?: number;
1501
1576
  }
1502
1577
  /**
1503
1578
  * NeoGeneralAvatar - Avatar with image or colored initials display
@@ -1505,7 +1580,7 @@ interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
1505
1580
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
1506
1581
  */
1507
1582
  declare const NeoGeneralAvatar: {
1508
- ({ size, colorIndex, children, ...props }: NeoGeneralAvatarProps): react_jsx_runtime.JSX.Element;
1583
+ ({ size, alt, children, ...props }: NeoGeneralAvatarProps): react_jsx_runtime.JSX.Element;
1509
1584
  displayName: string;
1510
1585
  };
1511
1586
 
@@ -1564,6 +1639,7 @@ declare const NeoIconButton: {
1564
1639
  };
1565
1640
 
1566
1641
  type InputFieldSize = 'small' | 'medium';
1642
+
1567
1643
  interface NeoInputFieldProps extends Omit<InputBaseProps, 'size'> {
1568
1644
  /**
1569
1645
  * The size of the input field
@@ -1837,10 +1913,62 @@ interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 'size'> {
1837
1913
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
1838
1914
  */
1839
1915
  declare const NeoNavigationAvatar: {
1840
- ({ colorIndex, children, ...props }: NeoNavigationAvatarProps): react_jsx_runtime.JSX.Element;
1916
+ ({ children, ...props }: NeoNavigationAvatarProps): react_jsx_runtime.JSX.Element;
1841
1917
  displayName: string;
1842
1918
  };
1843
1919
 
1920
+ declare module '@mui/material/Chip' {
1921
+ interface ChipPropsColorOverrides {
1922
+ violet: true;
1923
+ beta: true;
1924
+ }
1925
+ interface ChipPropsSizeOverrides {
1926
+ large: true;
1927
+ }
1928
+ interface ChipPropsVariantOverrides {
1929
+ outlined: true;
1930
+ filled: true;
1931
+ }
1932
+ }
1933
+ type NeoTagOwnProps = {
1934
+ /**
1935
+ * The size of the tag
1936
+ * @figma Size (Small|Medium|Large)
1937
+ * @default "small"
1938
+ */
1939
+ size?: 'small' | 'medium' | 'large';
1940
+ /**
1941
+ * The variant style of the tag
1942
+ * @figma Variant (Subtle|Filled)
1943
+ * @default "outlined"
1944
+ */
1945
+ variant?: 'outlined' | 'filled';
1946
+ /**
1947
+ * The intent/purpose of the tag
1948
+ * @figma Intent (Neutral|Error|Warning|Success|Info|Violet)
1949
+ * @default "default"
1950
+ */
1951
+ intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
1952
+ };
1953
+ type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ChipProps, keyof NeoTagOwnProps | 'component' | 'color'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps | keyof ChipProps> & {
1954
+ component?: C;
1955
+ };
1956
+ /**
1957
+ * NeoTag - Small pill-shaped label component based on MUI Chip
1958
+ *
1959
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
1960
+ *
1961
+ * Figma Props Mapping:
1962
+ * - Size (Small|Medium|Large) → size (small|medium|large)
1963
+ * - Variant (Subtle|Filled) → variant (outlined|filled)
1964
+ * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → intent (default|error|warning|success|info|violet|beta)
1965
+ * - TEXT Label → label prop
1966
+ */
1967
+ declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, intent, ...props }: NeoTagProps<C>): react_jsx_runtime.JSX.Element;
1968
+ declare namespace NeoTag {
1969
+ var displayName: string;
1970
+ }
1971
+
1844
1972
  type NeoNavigationItemOwnProps = {
1845
1973
  /**
1846
1974
  * Icon element to display
@@ -1857,16 +1985,34 @@ type NeoNavigationItemOwnProps = {
1857
1985
  */
1858
1986
  selected?: boolean;
1859
1987
  /**
1860
- * Optional tag badge content (e.g., count)
1988
+ * Optional tag badge content (e.g., "Beta")
1861
1989
  * @figma Tag
1862
1990
  */
1863
1991
  tag?: string;
1992
+ /**
1993
+ * Hover tooltip shown only when the surrounding NeoSideNav is collapsed
1994
+ * (and the label is therefore hidden).
1995
+ */
1996
+ tooltip?: ReactNode;
1997
+ /**
1998
+ * Slot props for internal sub-components.
1999
+ */
2000
+ slotProps?: {
2001
+ /**
2002
+ * Props forwarded to the NeoTag badge rendered when `tag` is set.
2003
+ * Override `intent`, `variant`, or `size` to change appearance — e.g.
2004
+ * `{ variant: 'outlined', intent: 'default' }` for a calmer grey badge.
2005
+ */
2006
+ badge?: NeoTagOwnProps & {
2007
+ sx?: Record<string, unknown>;
2008
+ };
2009
+ };
1864
2010
  /**
1865
2011
  * Additional content
1866
2012
  */
1867
2013
  children?: ReactNode;
1868
2014
  };
1869
- type NeoNavigationItemProps<C extends ElementType = typeof ButtonBase__default> = NeoNavigationItemOwnProps & Omit<ButtonBaseProps, keyof NeoNavigationItemOwnProps | 'component'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoNavigationItemOwnProps | keyof ButtonBaseProps> & {
2015
+ type NeoNavigationItemProps<C extends ElementType = typeof ButtonBase> = NeoNavigationItemOwnProps & Omit<ButtonBaseProps, keyof NeoNavigationItemOwnProps | 'component'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoNavigationItemOwnProps | keyof ButtonBaseProps> & {
1870
2016
  component?: C;
1871
2017
  };
1872
2018
  /**
@@ -1874,7 +2020,7 @@ type NeoNavigationItemProps<C extends ElementType = typeof ButtonBase__default>
1874
2020
  *
1875
2021
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
1876
2022
  */
1877
- declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase__default>({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps<C>): react_jsx_runtime.JSX.Element;
2023
+ declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, tooltip, slotProps, children, ...props }: NeoNavigationItemProps<C>): react_jsx_runtime.JSX.Element;
1878
2024
  declare namespace NeoNavigationItem {
1879
2025
  var displayName: string;
1880
2026
  }
@@ -1951,6 +2097,17 @@ interface NeoPageContentProps extends BoxProps {
1951
2097
  * @default false
1952
2098
  */
1953
2099
  disableGutters?: boolean;
2100
+ /**
2101
+ * Page layout mode.
2102
+ * - `default`: standard centered/max-width-constrained content with
2103
+ * gutters. Best for content-driven pages (settings, forms, lists).
2104
+ * - `fullBleed`: removes max-width and horizontal/bottom padding, lets
2105
+ * the content area flex-fill the viewport. Best for full-height
2106
+ * layouts (sidebar + panel canvases, builders, explorers). Title
2107
+ * and breadcrumbs still render — they sit at the leading edge.
2108
+ * @default 'default'
2109
+ */
2110
+ layout?: 'default' | 'fullBleed';
1954
2111
  /**
1955
2112
  * Loading state - shows spinner while content loads
1956
2113
  * @default false
@@ -2021,7 +2178,7 @@ interface NeoPageContentProps extends BoxProps {
2021
2178
  * </NeoPageContent>
2022
2179
  * ```
2023
2180
  */
2024
- declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): react_jsx_runtime.JSX.Element;
2181
+ declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth: contentMaxWidthProp, centerContent, disableGutters: disableGuttersProp, isLoading, showBackToTop, layout, children, sx, ...boxProps }: NeoPageContentProps): react_jsx_runtime.JSX.Element;
2025
2182
  declare namespace NeoPageContent {
2026
2183
  var displayName: string;
2027
2184
  }
@@ -2194,6 +2351,24 @@ declare const NeoRadio: {
2194
2351
  displayName: string;
2195
2352
  };
2196
2353
 
2354
+ /**
2355
+ * NeoRadioButtonWithText
2356
+ *
2357
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11565-7682
2358
+ */
2359
+ declare const NeoRadioButtonWithText: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
2360
+
2361
+ interface NeoRipplingDotProps extends BoxProps$1 {
2362
+ }
2363
+ /**
2364
+ * NeoRipplingDot - Animated status dot with an expanding ripple ring.
2365
+ *
2366
+ * Indicates an in-progress, indeterminate state (RUNNING / SYNCING / PROCESSING).
2367
+ * Color is inherited from `currentColor`; set it via the `color`/`sx` prop or a
2368
+ * parent. Sized to the lowercase-letter height regardless of parent fontSize.
2369
+ */
2370
+ declare const NeoRipplingDot: FunctionComponent<NeoRipplingDotProps>;
2371
+
2197
2372
  interface NeoSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
2198
2373
  /**
2199
2374
  * Handler for clearing the search value (shows X icon when provided and value is non-empty)
@@ -2213,6 +2388,86 @@ declare const NeoSearchChip: {
2213
2388
  displayName: string;
2214
2389
  };
2215
2390
 
2391
+ interface NeoSelectFieldOption {
2392
+ value: string | number;
2393
+ label: ReactNode;
2394
+ disabled?: boolean;
2395
+ }
2396
+ interface NeoSelectFieldProps extends Omit<SelectProps, 'size' | 'variant' | 'error' | 'children'> {
2397
+ /**
2398
+ * Form-control size.
2399
+ * @default 'medium'
2400
+ */
2401
+ size?: InputFieldSize;
2402
+ /**
2403
+ * Show error/destructive state with red label + helper text styling.
2404
+ * @default false
2405
+ */
2406
+ destructive?: boolean;
2407
+ /** Label text rendered above the select. */
2408
+ label?: string;
2409
+ /** Show required indicator (asterisk) next to the label. @default false */
2410
+ required?: boolean;
2411
+ /** Optional info icon rendered next to the label. */
2412
+ infoIcon?: ReactNode;
2413
+ /** Helper text rendered below the select (normal state). */
2414
+ helperText?: string;
2415
+ /**
2416
+ * Error message rendered below the select when `destructive` is true.
2417
+ * Takes precedence over helperText when destructive.
2418
+ */
2419
+ errorMessage?: string;
2420
+ /**
2421
+ * Convenience option list. Each entry becomes a NeoSelectOption.
2422
+ * Use `children` instead for custom option content.
2423
+ */
2424
+ options?: NeoSelectFieldOption[];
2425
+ /** Custom option content. Overrides `options` if both are provided. */
2426
+ children?: ReactNode;
2427
+ }
2428
+ /**
2429
+ * NeoSelectField — composite of NeoInputField's form chrome (label,
2430
+ * helper text, error state) wrapped around NeoSelect. Mirrors the
2431
+ * MUI `<TextField select>` ergonomics with Neo design tokens, so
2432
+ * consumers don't have to compose the two manually.
2433
+ *
2434
+ * @example
2435
+ * <NeoSelectField
2436
+ * label="Response format"
2437
+ * value={format}
2438
+ * onChange={e => setFormat(e.target.value)}
2439
+ * options={[
2440
+ * { value: 'json', label: 'JSON' },
2441
+ * { value: 'plain', label: 'Plain text' },
2442
+ * ]}
2443
+ * />
2444
+ */
2445
+ declare const NeoSelectField: {
2446
+ ({ size, destructive, label, required, infoIcon, helperText, errorMessage, options, children, disabled, id, ...selectProps }: NeoSelectFieldProps): react_jsx_runtime.JSX.Element;
2447
+ displayName: string;
2448
+ };
2449
+
2450
+ type NeoSelectFieldChangeEvent<T = unknown> = SelectChangeEvent<T>;
2451
+
2452
+ type NeoSideNavProps = {
2453
+ /** Controlled collapsed state. */
2454
+ collapsed: boolean;
2455
+ /** Called with the next collapsed value when the toggle is activated. */
2456
+ onCollapsedChange: (next: boolean) => void;
2457
+ /** Fixed top slot (e.g. product logo). */
2458
+ header?: ReactNode;
2459
+ /** Fixed bottom slot (e.g. tenant branding), rendered above the toggle. */
2460
+ footer?: ReactNode;
2461
+ /** Scrolling content slot — the nav items. */
2462
+ children: ReactNode;
2463
+ /** Toggle label shown when expanded. Default "Less". */
2464
+ collapseLabel?: string;
2465
+ } & Pick<ComponentPropsWithoutRef<'nav'>, 'className' | 'id' | 'aria-label'>;
2466
+ declare function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, collapseLabel, ...rest }: NeoSideNavProps): react_jsx_runtime.JSX.Element;
2467
+ declare namespace NeoSideNav {
2468
+ var displayName: string;
2469
+ }
2470
+
2216
2471
  /**
2217
2472
  * Extended props for NeoSkeleton component
2218
2473
  */
@@ -2251,6 +2506,7 @@ declare const NeoSkeleton: {
2251
2506
 
2252
2507
  type Intent$1 = 'success' | 'error' | 'warning' | 'offline' | 'info';
2253
2508
  type AlertType = 'outlined' | 'filled';
2509
+ type AlertSize = 'default' | 'compact';
2254
2510
  interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
2255
2511
  /**
2256
2512
  * The intent/purpose of the alert
@@ -2264,6 +2520,13 @@ interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color
2264
2520
  * @figma Type
2265
2521
  */
2266
2522
  type?: AlertType;
2523
+ /**
2524
+ * Vertical density. `default` is page-level (64px fixed height,
2525
+ * supports title + description). `compact` is inline-panel use
2526
+ * (auto height, 40px min, single-line optimized for terse messages).
2527
+ * @default "default"
2528
+ */
2529
+ size?: AlertSize;
2267
2530
  /**
2268
2531
  * The title text displayed in the alert
2269
2532
  */
@@ -2280,6 +2543,12 @@ interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color
2280
2543
  * Optional action element (typically a button) displayed on the right
2281
2544
  */
2282
2545
  action?: ReactNode;
2546
+ /**
2547
+ * Optional content rendered below the title inside the alert container.
2548
+ * Use for rich content like stack traces or code blocks. When present,
2549
+ * the alert expands to auto height and top-aligns its icon and action.
2550
+ */
2551
+ children?: ReactNode;
2283
2552
  }
2284
2553
  /**
2285
2554
  * NeoAlert - Alert component for displaying contextual status messages
@@ -2293,7 +2562,69 @@ interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color
2293
2562
  * - Show Button → action prop presence
2294
2563
  */
2295
2564
  declare const NeoAlert: {
2296
- ({ intent, type, title, description, icon, action, ...props }: NeoAlertProps): react_jsx_runtime.JSX.Element;
2565
+ ({ intent, type, size, title, description, icon, action, children, ...props }: NeoAlertProps): react_jsx_runtime.JSX.Element;
2566
+ displayName: string;
2567
+ };
2568
+
2569
+ type TableSize = 'small' | 'medium';
2570
+ type TableVariant = 'bordered' | 'plain';
2571
+ type CellAlign = 'left' | 'center' | 'right';
2572
+ interface NeoTableColumn {
2573
+ /** Unique key — looked up against each row to find the cell value. */
2574
+ key: string;
2575
+ /** Header label rendered in the thead. */
2576
+ header: ReactNode;
2577
+ /** Cell text alignment. @default 'left' */
2578
+ align?: CellAlign;
2579
+ /** Column width — any CSS length (e.g. '120px', '20%'). */
2580
+ width?: string;
2581
+ }
2582
+ interface NeoTableProps extends Omit<TableProps, 'size'> {
2583
+ /** Column definitions. Order in the array determines render order. */
2584
+ columns: NeoTableColumn[];
2585
+ /**
2586
+ * Row data. Each row is a record keyed by `column.key`. Cell values
2587
+ * may be any ReactNode (strings, badges, icons, etc.).
2588
+ */
2589
+ rows: Array<Record<string, ReactNode>>;
2590
+ /**
2591
+ * Cell density.
2592
+ * - 'small': tight padding for dense lists.
2593
+ * - 'medium': comfortable padding for read-heavy tables.
2594
+ * @default 'small'
2595
+ */
2596
+ size?: TableSize;
2597
+ /**
2598
+ * Container chrome.
2599
+ * - 'bordered': container border + borderRadius.card.
2600
+ * - 'plain': no container chrome — for embedding inside an existing surface.
2601
+ * @default 'bordered'
2602
+ */
2603
+ variant?: TableVariant;
2604
+ /** Optional accessible label for the table. */
2605
+ ariaLabel?: string;
2606
+ }
2607
+ /**
2608
+ * NeoTable — lightweight read-only table for static data (schema rows,
2609
+ * key/value summaries, response metadata). For interactive grids with
2610
+ * sorting / filtering / pagination, use NeoDataGrid instead.
2611
+ *
2612
+ * @example
2613
+ * <NeoTable
2614
+ * columns={[
2615
+ * { key: 'name', header: 'Property' },
2616
+ * { key: 'type', header: 'Type', align: 'center', width: '120px' },
2617
+ * { key: 'description', header: 'Description' },
2618
+ * ]}
2619
+ * rows={[
2620
+ * { name: 'id', type: 'string', description: 'Resource identifier' },
2621
+ * { name: 'count', type: 'number', description: 'Item count' },
2622
+ * ]}
2623
+ * size="small"
2624
+ * />
2625
+ */
2626
+ declare const NeoTable: {
2627
+ ({ columns, rows, size, variant, ariaLabel, ...tableProps }: NeoTableProps): react_jsx_runtime.JSX.Element;
2297
2628
  displayName: string;
2298
2629
  };
2299
2630
 
@@ -2307,7 +2638,7 @@ declare const NeoAlert: {
2307
2638
  * - Tab selection → value prop + onChange
2308
2639
  * - Active indicator → styled via indicator slot
2309
2640
  */
2310
- declare const NeoTabs: StyledComponent<_mui_material_Tabs.TabsOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children" | "sx" | "className" | "aria-label" | "aria-labelledby" | "onChange" | "classes" | "action" | "value" | "variant" | "orientation" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme>, {}, {}>;
2641
+ declare const NeoTabs: StyledComponent<_mui_material.TabsOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children" | "sx" | "className" | "aria-label" | "aria-labelledby" | "onChange" | "classes" | "action" | "value" | "variant" | "orientation" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
2311
2642
  interface NeoTabProps extends Omit<TabProps, 'label'> {
2312
2643
  /**
2313
2644
  * The label for the tab
@@ -2344,57 +2675,50 @@ declare const NeoTab: {
2344
2675
  displayName: string;
2345
2676
  };
2346
2677
 
2347
- declare module '@mui/material/Chip' {
2348
- interface ChipPropsColorOverrides {
2349
- violet: true;
2350
- beta: true;
2351
- }
2352
- interface ChipPropsSizeOverrides {
2353
- large: true;
2354
- }
2355
- interface ChipPropsVariantOverrides {
2356
- outlined: true;
2357
- filled: true;
2358
- }
2359
- }
2360
- type NeoTagOwnProps = {
2361
- /**
2362
- * The size of the tag
2363
- * @figma Size (Small|Medium|Large)
2364
- * @default "small"
2365
- */
2366
- size?: 'small' | 'medium' | 'large';
2678
+ type TabPanelVariant = 'default' | 'flush';
2679
+ interface NeoTabPanelProps extends Omit<BoxProps, 'role'> {
2680
+ /** This panel's identity — must match `currentValue` for the panel to render. */
2681
+ value: string | number;
2367
2682
  /**
2368
- * The variant style of the tag
2369
- * @figma Variant (Subtle|Filled)
2370
- * @default "outlined"
2683
+ * The currently selected tab value. When equal to `value`, this panel
2684
+ * renders its children. Otherwise the panel is hidden (and removed from
2685
+ * the accessibility tree via `hidden`).
2371
2686
  */
2372
- variant?: 'outlined' | 'filled';
2687
+ currentValue: string | number;
2373
2688
  /**
2374
- * The intent/purpose of the tag
2375
- * @figma Intent (Neutral|Error|Warning|Success|Info|Violet)
2376
- * @default "default"
2689
+ * Layout density.
2690
+ * - `default`: 16px top padding — for standard content tabs.
2691
+ * - `flush`: zero padding — for full-bleed sidebar/panel/canvas layouts
2692
+ * where content must sit flush against the tab bar's bottom border.
2693
+ * @default 'default'
2377
2694
  */
2378
- intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
2379
- };
2380
- type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ChipProps, keyof NeoTagOwnProps | 'component' | 'color'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps | keyof ChipProps> & {
2381
- component?: C;
2382
- };
2695
+ variant?: TabPanelVariant;
2696
+ /** Panel content. */
2697
+ children?: ReactNode;
2698
+ }
2383
2699
  /**
2384
- * NeoTag - Small pill-shaped label component based on MUI Chip
2700
+ * NeoTabPanel completes the NeoTabs + NeoTab + NeoTabPanel set.
2385
2701
  *
2386
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
2702
+ * Lightweight ARIA-compliant tab panel that renders children when its
2703
+ * `value` matches `currentValue`. No MUI Lab / TabContext dependency.
2387
2704
  *
2388
- * Figma Props Mapping:
2389
- * - Size (Small|Medium|Large) size (small|medium|large)
2390
- * - Variant (Subtle|Filled) → variant (outlined|filled)
2391
- * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → intent (default|error|warning|success|info|violet|beta)
2392
- * - TEXT Label label prop
2705
+ * @example
2706
+ * const [tab, setTab] = useState('overview')
2707
+ * return (
2708
+ * <>
2709
+ * <NeoTabs value={tab} onChange={(_, v) => setTab(v)}>
2710
+ * <NeoTab value="overview" label="Overview" />
2711
+ * <NeoTab value="details" label="Details" />
2712
+ * </NeoTabs>
2713
+ * <NeoTabPanel value="overview" currentValue={tab}>...</NeoTabPanel>
2714
+ * <NeoTabPanel value="details" currentValue={tab} variant="flush">...</NeoTabPanel>
2715
+ * </>
2716
+ * )
2393
2717
  */
2394
- declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, intent, ...props }: NeoTagProps<C>): react_jsx_runtime.JSX.Element;
2395
- declare namespace NeoTag {
2396
- var displayName: string;
2397
- }
2718
+ declare const NeoTabPanel: {
2719
+ ({ value, currentValue, variant, children, ...boxProps }: NeoTabPanelProps): react_jsx_runtime.JSX.Element;
2720
+ displayName: string;
2721
+ };
2398
2722
 
2399
2723
  type Intent = 'neutral' | 'info' | 'success' | 'error' | 'warning';
2400
2724
  type ToastType = 'outlined' | 'filled';
@@ -2525,6 +2849,58 @@ declare const NeoToggle: {
2525
2849
  displayName: string;
2526
2850
  };
2527
2851
 
2852
+ type ToggleButtonSize = 'small' | 'medium';
2853
+ interface NeoToggleButtonProps extends Omit<ToggleButtonProps, 'color' | 'size'> {
2854
+ /**
2855
+ * Size of the toggle button. Set automatically by NeoToggleButtonGroup
2856
+ * when used as a child; set explicitly only for standalone use.
2857
+ * @default 'medium'
2858
+ */
2859
+ size?: ToggleButtonSize;
2860
+ }
2861
+ /**
2862
+ * NeoToggleButton — a single button in a segmented control. Use inside
2863
+ * NeoToggleButtonGroup; the group manages selection state and forwards
2864
+ * size to its children. Suitable for inline toolbar mode switches
2865
+ * ("Table" / "Raw"). For page-level tabs, prefer NeoButtonTab.
2866
+ */
2867
+ declare const NeoToggleButton: {
2868
+ ({ children, size, ...props }: NeoToggleButtonProps): react_jsx_runtime.JSX.Element;
2869
+ displayName: string;
2870
+ };
2871
+
2872
+ type ToggleButtonGroupSize = 'small' | 'medium';
2873
+ interface NeoToggleButtonGroupProps extends Omit<ToggleButtonGroupProps, 'orientation' | 'color' | 'size' | 'fullWidth'> {
2874
+ /**
2875
+ * Size of the buttons in the group. Forwarded to each NeoToggleButton child.
2876
+ * @default 'medium'
2877
+ */
2878
+ size?: ToggleButtonGroupSize;
2879
+ }
2880
+ /**
2881
+ * NeoToggleButtonGroup — pill-shaped segmented control wrapping
2882
+ * MUI ToggleButtonGroup with Neo tokens. Use for inline toolbar mode
2883
+ * switches (e.g. "Table" / "Raw" in a panel header). For page-level
2884
+ * tab navigation, prefer NeoButtonTabGroup.
2885
+ *
2886
+ * @example
2887
+ * <NeoToggleButtonGroup value={mode} exclusive onChange={(_, v) => v && setMode(v)} size="small">
2888
+ * <NeoToggleButton value="table">Table</NeoToggleButton>
2889
+ * <NeoToggleButton value="raw">Raw</NeoToggleButton>
2890
+ * </NeoToggleButtonGroup>
2891
+ */
2892
+ declare const NeoToggleButtonGroup: {
2893
+ ({ size, children, ...props }: NeoToggleButtonGroupProps): react_jsx_runtime.JSX.Element;
2894
+ displayName: string;
2895
+ };
2896
+
2897
+ /**
2898
+ * NeoToggleButtonWithText
2899
+ *
2900
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11565-10485
2901
+ */
2902
+ declare const NeoToggleButtonWithText: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
2903
+
2528
2904
  interface NeoToolbarProps extends ToolbarProps {
2529
2905
  /**
2530
2906
  * Toolbar content (typically NeoQuickFilter, NeoButton, NeoToggle, etc.)
@@ -2667,6 +3043,7 @@ declare const NeoListItem: {
2667
3043
  displayName: string;
2668
3044
  };
2669
3045
 
3046
+ type ListItemButtonVariant = 'card' | 'nav';
2670
3047
  /**
2671
3048
  * Props for the NeoListItemButton component
2672
3049
  */
@@ -2683,6 +3060,15 @@ interface NeoListItemButtonProps extends ListItemButtonProps {
2683
3060
  * @figma property1="Disabled"
2684
3061
  */
2685
3062
  disabled?: boolean;
3063
+ /**
3064
+ * Visual treatment.
3065
+ * - `card` (default): bordered card-style for settings/radio-list patterns.
3066
+ * Expects ListItemIcon + ListItemText children for full styling support.
3067
+ * - `nav`: borderless sidebar nav style with subtle hover/selected
3068
+ * highlights. Renders children inline; works with plain text.
3069
+ * @default 'card'
3070
+ */
3071
+ variant?: ListItemButtonVariant;
2686
3072
  }
2687
3073
  /**
2688
3074
  * NeoListItemButton - Selectable list item with icon and text
@@ -2728,10 +3114,21 @@ interface NeoListItemButtonProps extends ListItemButtonProps {
2728
3114
  * - colors.grey[50] (#f9fafb) - Disabled background
2729
3115
  */
2730
3116
  declare const NeoListItemButton: {
2731
- ({ children, selected, disabled, ...props }: NeoListItemButtonProps): react_jsx_runtime.JSX.Element;
3117
+ ({ children, selected, disabled, variant, ...props }: NeoListItemButtonProps): react_jsx_runtime.JSX.Element;
2732
3118
  displayName: string;
2733
3119
  };
2734
3120
 
3121
+ interface NeoVibratingDotProps extends BoxProps$1 {
3122
+ }
3123
+ /**
3124
+ * NeoVibratingDot - Animated status dot with a breathing pulse halo.
3125
+ *
3126
+ * Indicates a waiting/pending state (QUEUED / CREATED). Color is inherited from
3127
+ * `currentColor`; set it via the `color`/`sx` prop or a parent. Sized to the
3128
+ * lowercase-letter height regardless of parent fontSize.
3129
+ */
3130
+ declare const NeoVibratingDot: FunctionComponent<NeoVibratingDotProps>;
3131
+
2735
3132
  /**
2736
3133
  * Variant type for NeoTooltip
2737
3134
  */
@@ -2747,13 +3144,15 @@ interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
2747
3144
  */
2748
3145
  variant?: TooltipVariant;
2749
3146
  /**
2750
- * The main tooltip text
3147
+ * The main tooltip content. Accepts a string or any ReactNode, so callers can
3148
+ * compose richer content when the `description` variant isn't enough.
2751
3149
  * @figma text (literal content, not a variant property)
2752
3150
  */
2753
- title: string;
3151
+ title: ReactNode;
2754
3152
  /**
2755
- * Optional supporting description text
2756
- * When provided, shows a larger tooltip with title (semibold) + description (medium)
3153
+ * Optional supporting description text. When provided, shows a larger tooltip
3154
+ * with a heading + body hierarchy: title (13px semibold) above a muted
3155
+ * description (12px medium).
2757
3156
  * @default undefined
2758
3157
  * @figma Supporting text
2759
3158
  */
@@ -2778,14 +3177,28 @@ interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
2778
3177
  * - Dark: grey[50] (#f9fafb), grey[800] (#1f2937)
2779
3178
  * - Brand: digitalBlue[800] (#131e7a), typography.tooltip (#ffffff)
2780
3179
  * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
2781
- * - Typography: fontSize.xs (12), fontWeight.medium (500), fontWeight.semiBold (600)
3180
+ * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
2782
3181
  */
2783
3182
  declare const NeoTooltip: {
2784
3183
  ({ variant, title, description, children, arrow, placement, ...props }: NeoTooltipProps): react_jsx_runtime.JSX.Element;
2785
3184
  displayName: string;
2786
3185
  };
2787
3186
 
2788
- declare const StyledToggleButton: StyledComponent<_mui_material_ToggleButton.ToggleButtonOwnProps & Omit<ButtonBase.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "size" | "children" | "sx" | "className" | "tabIndex" | "onChange" | "onClick" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "fullWidth" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme>, {}, {}>;
3187
+ /**
3188
+ * NeoTopNav
3189
+ *
3190
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4618-185228
3191
+ */
3192
+ declare const NeoTopNav: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
3193
+
3194
+ /**
3195
+ * NeoTourModal
3196
+ *
3197
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=12408-1800
3198
+ */
3199
+ declare const NeoTourModal: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
3200
+
3201
+ declare const StyledToggleButton: StyledComponent<_mui_material.ToggleButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "size" | "children" | "sx" | "className" | "tabIndex" | "onChange" | "onClick" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "fullWidth" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
2789
3202
  interface NeoTypologyControlProps extends Omit<ToggleButtonGroupProps, 'orientation'> {
2790
3203
  }
2791
3204
  /**
@@ -2972,6 +3385,20 @@ declare const NeoDatePicker: {
2972
3385
  displayName: string;
2973
3386
  };
2974
3387
 
3388
+ /**
3389
+ * NeoDatePickerListItem
3390
+ *
3391
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8521
3392
+ */
3393
+ declare const NeoDatePickerListItem: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
3394
+
3395
+ /**
3396
+ * NeoDatePickerMenu
3397
+ *
3398
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8593
3399
+ */
3400
+ declare const NeoDatePickerMenu: StyledComponent<_mui_system.MUIStyledCommonProps<_mui_material.Theme>, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
3401
+
2975
3402
  /**
2976
3403
  * Extended item data that NeoTreeItem can read from the items array.
2977
3404
  * Consumers pass these via the `items` prop on NeoTreeView.
@@ -3042,5 +3469,5 @@ declare module '@mui/x-data-grid-pro' {
3042
3469
 
3043
3470
  declare const version: string
3044
3471
 
3045
- export { ActivityScene, CIRCLE_RADIUS, NeoActionsCell, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoAvatarCell, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCheckboxWithText, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDownloadToast, NeoSelect as NeoDropdown, NeoMenu as NeoDropdownMenu, NeoMenuItem as NeoDropdownMenuItem, NeoMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconCell, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoLogoCell, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressCell, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusCell, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, version };
3046
- export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActionsCellProps, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps, NeoAvatarCellProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCheckboxWithTextProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDownloadToastProps, NeoMenuItemProps as NeoDropdownMenuItemProps, NeoMenuProps as NeoDropdownMenuProps, NeoSelectProps as NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoIconCellProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoLogoCellProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressCellProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusCellProps, NeoStatusCellVariant, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
3472
+ export { ActivityScene, CIRCLE_RADIUS, NeoActionsCell, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoAvatarCell, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCanceledIcon, NeoCard, NeoCheckbox, NeoCheckboxWithText, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDatePickerListItem, NeoDatePickerMenu, NeoDivider, NeoDot, NeoDownloadToast, NeoSelect as NeoDropdown, NeoMenu as NeoDropdownMenu, NeoMenuItem as NeoDropdownMenuItem, NeoMenuItem as NeoDropdownOption, NeoFilledCanceled, NeoFilledError, NeoFilledInfo, NeoFilledNeutral, NeoFilledQueued, NeoFilledSuccess, NeoFilledWarning, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconCell, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoLogoCell, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressCell, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoRadioButtonWithText, NeoRipplingDot, NeoSearchChip, NeoSelect, NeoSelectField, NeoMenuItem as NeoSelectOption, NeoSideNav, NeoSkeleton, NeoStatusBadgeCell, NeoStatusCell, NeoTab, NeoTabPanel, NeoTable, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToggleButton, NeoToggleButtonGroup, NeoToggleButtonWithText, NeoToolbar, NeoTooltip, NeoTopNav, NeoTourModal, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, NeoVibratingDot, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, version };
3473
+ export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActionsCellProps, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps, NeoAvatarCellProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCheckboxWithTextProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDownloadToastProps, NeoMenuItemProps as NeoDropdownMenuItemProps, NeoMenuProps as NeoDropdownMenuProps, NeoSelectProps as NeoDropdownProps, NeoFilledStatusIconProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoIconCellProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoLogoCellProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressCellProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoRipplingDotProps, NeoSearchChipProps, NeoSelectFieldChangeEvent, NeoSelectFieldOption, NeoSelectFieldProps, NeoSelectProps, NeoSideNavProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusCellProps, NeoStatusCellVariant, NeoTabPanelProps, NeoTabProps, NeoTableColumn, NeoTableProps, NeoTagProps, NeoToastProps, NeoToggleButtonGroupProps, NeoToggleButtonProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps, NeoVibratingDotProps };