@moderneinc/neo-styled-components 5.0.0-next.bd2a49 → 5.0.0-next.cd1d8d

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 (51) 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/DataGrid/DataGrid.d.ts +1 -1
  7. package/dist/DataGrid/DataGrid.styles.d.ts +3 -0
  8. package/dist/DataGridCell/DataGridCell.d.ts +0 -16
  9. package/dist/DataGridHeaderCell/DataGridHeaderCell.d.ts +0 -37
  10. package/dist/DatePickerListItem/DatePickerListItem.d.ts +2 -22
  11. package/dist/DatePickerMenu/DatePickerMenu.d.ts +2 -22
  12. package/dist/Dot/Dot.d.ts +11 -4
  13. package/dist/FilledStatusIcons/FilledStatusIcons.d.ts +41 -0
  14. package/dist/GeneralAvatar/GeneralAvatar.d.ts +1 -7
  15. package/dist/InputField/InputField.d.ts +12 -1
  16. package/dist/ListItemButton/ListItemButton.d.ts +12 -1
  17. package/dist/MenuItem/MenuItem.d.ts +31 -9
  18. package/dist/NavigationAvatar/NavigationAvatar.d.ts +3 -3
  19. package/dist/NavigationItem/NavigationItem.d.ts +21 -2
  20. package/dist/NeoActionsCell/NeoActionsCell.d.ts +9 -0
  21. package/dist/NeoAvatarCell/NeoAvatarCell.d.ts +25 -0
  22. package/dist/NeoIconCell/NeoIconCell.d.ts +14 -0
  23. package/dist/NeoLogoCell/NeoLogoCell.d.ts +24 -0
  24. package/dist/NeoProgressCell/NeoProgressCell.d.ts +21 -0
  25. package/dist/NeoStatusCell/NeoStatusCell.d.ts +30 -0
  26. package/dist/PageContent/PageContent.d.ts +12 -1
  27. package/dist/RadioButtonWithText/RadioButtonWithText.d.ts +2 -22
  28. package/dist/RipplingDot/RipplingDot.d.ts +12 -0
  29. package/dist/SelectField/SelectField.d.ts +64 -0
  30. package/dist/SideNav/NeoSideNavContext.d.ts +5 -0
  31. package/dist/SideNav/SideNav.d.ts +18 -25
  32. package/dist/TabPanel/TabPanel.d.ts +47 -0
  33. package/dist/Table/Table.d.ts +64 -0
  34. package/dist/Tabs/Tabs.d.ts +1 -1
  35. package/dist/Tag/Tag.d.ts +1 -2
  36. package/dist/ToggleButton/ToggleButton.d.ts +13 -18
  37. package/dist/ToggleButtonGroup/ToggleButtonGroup.d.ts +26 -0
  38. package/dist/ToggleButtonWithText/ToggleButtonWithText.d.ts +2 -22
  39. package/dist/Tooltip/Tooltip.d.ts +8 -5
  40. package/dist/TopNav/TopNav.d.ts +2 -22
  41. package/dist/TourModal/TourModal.d.ts +2 -22
  42. package/dist/TypologyControl/TypologyControl.d.ts +1 -1
  43. package/dist/VibratingDot/VibratingDot.d.ts +12 -0
  44. package/dist/index.d.ts +660 -143
  45. package/dist/index.esm.js +1376 -609
  46. package/dist/index.esm.js.map +1 -1
  47. package/dist/index.js +1400 -604
  48. package/dist/index.js.map +1 -1
  49. package/dist/utils/colorHelpers.d.ts +6 -0
  50. package/package.json +5 -5
  51. package/dist/utils/avatarColors.d.ts +0 -7
@@ -0,0 +1,21 @@
1
+ type NeoProgressCellBase = {
2
+ disabled?: boolean;
3
+ };
4
+ type NeoProgressCellEmpty = NeoProgressCellBase & {
5
+ empty: true;
6
+ value?: never;
7
+ };
8
+ type NeoProgressCellContent = NeoProgressCellBase & {
9
+ empty?: false;
10
+ value?: number;
11
+ };
12
+ export type NeoProgressCellProps = NeoProgressCellEmpty | NeoProgressCellContent;
13
+ /**
14
+ * NeoProgressCell — DataGrid cell displaying a linear progress indicator.
15
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13425-5378
16
+ */
17
+ export declare const NeoProgressCell: {
18
+ ({ value, disabled, empty, }: NeoProgressCellProps): import("react/jsx-runtime").JSX.Element;
19
+ displayName: string;
20
+ };
21
+ export {};
@@ -0,0 +1,30 @@
1
+ import type { ReactNode } from 'react';
2
+ export type NeoStatusCellVariant = 'success' | 'error' | 'warning' | 'info' | 'neutral';
3
+ type NeoStatusCellBase = {
4
+ disabled?: boolean;
5
+ };
6
+ type NeoStatusCellEmpty = NeoStatusCellBase & {
7
+ empty: true;
8
+ label?: never;
9
+ icon?: never;
10
+ variant?: never;
11
+ details?: never;
12
+ };
13
+ type NeoStatusCellContent = NeoStatusCellBase & {
14
+ empty?: false;
15
+ label: string;
16
+ icon?: ReactNode;
17
+ variant?: NeoStatusCellVariant;
18
+ /** Error details shown in a hover tooltip. Clipboard actions should be handled by the consuming app. */
19
+ details?: string;
20
+ };
21
+ export type NeoStatusCellProps = NeoStatusCellEmpty | NeoStatusCellContent;
22
+ /**
23
+ * NeoStatusCell — DataGrid cell displaying an icon + label chip with optional error tooltip.
24
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13272-8705
25
+ */
26
+ export declare const NeoStatusCell: {
27
+ ({ icon, label, details, disabled, variant, empty, }: NeoStatusCellProps): import("react/jsx-runtime").JSX.Element;
28
+ displayName: string;
29
+ };
30
+ export {};
@@ -73,6 +73,17 @@ export interface NeoPageContentProps extends BoxProps {
73
73
  * @default false
74
74
  */
75
75
  disableGutters?: boolean;
76
+ /**
77
+ * Page layout mode.
78
+ * - `default`: standard centered/max-width-constrained content with
79
+ * gutters. Best for content-driven pages (settings, forms, lists).
80
+ * - `fullBleed`: removes max-width and horizontal/bottom padding, lets
81
+ * the content area flex-fill the viewport. Best for full-height
82
+ * layouts (sidebar + panel canvases, builders, explorers). Title
83
+ * and breadcrumbs still render — they sit at the leading edge.
84
+ * @default 'default'
85
+ */
86
+ layout?: 'default' | 'fullBleed';
76
87
  /**
77
88
  * Loading state - shows spinner while content loads
78
89
  * @default false
@@ -143,7 +154,7 @@ export interface NeoPageContentProps extends BoxProps {
143
154
  * </NeoPageContent>
144
155
  * ```
145
156
  */
146
- export declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
157
+ export declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth: contentMaxWidthProp, centerContent, disableGutters: disableGuttersProp, isLoading, showBackToTop, layout, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
147
158
  export declare namespace NeoPageContent {
148
159
  var displayName: string;
149
160
  }
@@ -1,26 +1,6 @@
1
- import type { ReactNode } from 'react';
2
1
  /**
3
- * Props for the NeoRadioButtonWithText component
4
- */
5
- export interface NeoRadioButtonWithTextProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
10
- }
11
- /**
12
- * NeoRadioButtonWithText - TODO: Add component description
2
+ * NeoRadioButtonWithText
13
3
  *
14
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11565-7682
15
- *
16
- * Figma Props Mapping:
17
- * - TODO: Document Figma property mappings
18
- * - FigmaProp → reactProp
19
- *
20
- * Design Tokens Used:
21
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
22
5
  */
23
- export declare const NeoRadioButtonWithText: {
24
- ({ children, ...props }: NeoRadioButtonWithTextProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
6
+ export declare const NeoRadioButtonWithText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -0,0 +1,12 @@
1
+ import { type BoxProps } from '@mui/material';
2
+ import type { FunctionComponent } from 'react';
3
+ export interface NeoRipplingDotProps extends BoxProps {
4
+ }
5
+ /**
6
+ * NeoRipplingDot - Animated status dot with an expanding ripple ring.
7
+ *
8
+ * Indicates an in-progress, indeterminate state (RUNNING / SYNCING / PROCESSING).
9
+ * Color is inherited from `currentColor`; set it via the `color`/`sx` prop or a
10
+ * parent. Sized to the lowercase-letter height regardless of parent fontSize.
11
+ */
12
+ export declare const NeoRipplingDot: FunctionComponent<NeoRipplingDotProps>;
@@ -0,0 +1,64 @@
1
+ import type { SelectChangeEvent, SelectProps } from '@mui/material/Select';
2
+ import type { ReactNode } from 'react';
3
+ import { type NeoInputFieldSize } from '../InputField/InputField';
4
+ import { NeoSelectOption } from '../Select/Select';
5
+ export interface NeoSelectFieldOption {
6
+ value: string | number;
7
+ label: ReactNode;
8
+ disabled?: boolean;
9
+ }
10
+ export interface NeoSelectFieldProps extends Omit<SelectProps, 'size' | 'variant' | 'error' | 'children'> {
11
+ /**
12
+ * Form-control size.
13
+ * @default 'medium'
14
+ */
15
+ size?: NeoInputFieldSize;
16
+ /**
17
+ * Show error/destructive state with red label + helper text styling.
18
+ * @default false
19
+ */
20
+ destructive?: boolean;
21
+ /** Label text rendered above the select. */
22
+ label?: string;
23
+ /** Show required indicator (asterisk) next to the label. @default false */
24
+ required?: boolean;
25
+ /** Optional info icon rendered next to the label. */
26
+ infoIcon?: ReactNode;
27
+ /** Helper text rendered below the select (normal state). */
28
+ helperText?: string;
29
+ /**
30
+ * Error message rendered below the select when `destructive` is true.
31
+ * Takes precedence over helperText when destructive.
32
+ */
33
+ errorMessage?: string;
34
+ /**
35
+ * Convenience option list. Each entry becomes a NeoSelectOption.
36
+ * Use `children` instead for custom option content.
37
+ */
38
+ options?: NeoSelectFieldOption[];
39
+ /** Custom option content. Overrides `options` if both are provided. */
40
+ children?: ReactNode;
41
+ }
42
+ /**
43
+ * NeoSelectField — composite of NeoInputField's form chrome (label,
44
+ * helper text, error state) wrapped around NeoSelect. Mirrors the
45
+ * MUI `<TextField select>` ergonomics with Neo design tokens, so
46
+ * consumers don't have to compose the two manually.
47
+ *
48
+ * @example
49
+ * <NeoSelectField
50
+ * label="Response format"
51
+ * value={format}
52
+ * onChange={e => setFormat(e.target.value)}
53
+ * options={[
54
+ * { value: 'json', label: 'JSON' },
55
+ * { value: 'plain', label: 'Plain text' },
56
+ * ]}
57
+ * />
58
+ */
59
+ export declare const NeoSelectField: {
60
+ ({ size, destructive, label, required, infoIcon, helperText, errorMessage, options, children, disabled, id, ...selectProps }: NeoSelectFieldProps): import("react/jsx-runtime").JSX.Element;
61
+ displayName: string;
62
+ };
63
+ export { NeoSelectOption };
64
+ export type NeoSelectFieldChangeEvent<T = unknown> = SelectChangeEvent<T>;
@@ -0,0 +1,5 @@
1
+ export type NeoSideNavContextValue = {
2
+ collapsed: boolean;
3
+ };
4
+ export declare const NeoSideNavContext: import("react").Context<NeoSideNavContextValue>;
5
+ export declare const useNeoSideNav: () => NeoSideNavContextValue;
@@ -1,26 +1,19 @@
1
- import type { ReactNode } from 'react';
2
- /**
3
- * Props for the NeoSideNav component
4
- */
5
- export interface NeoSideNavProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
1
+ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
+ export type NeoSideNavProps = {
3
+ /** Controlled collapsed state. */
4
+ collapsed: boolean;
5
+ /** Called with the next collapsed value when the toggle is activated. */
6
+ onCollapsedChange: (next: boolean) => void;
7
+ /** Fixed top slot (e.g. product logo). */
8
+ header?: ReactNode;
9
+ /** Fixed bottom slot (e.g. tenant branding), rendered above the toggle. */
10
+ footer?: ReactNode;
11
+ /** Scrolling content slot — the nav items. */
12
+ children: ReactNode;
13
+ /** Toggle label shown when expanded. Default "Less". */
14
+ collapseLabel?: string;
15
+ } & Pick<ComponentPropsWithoutRef<'nav'>, 'className' | 'id' | 'aria-label'>;
16
+ export declare function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, collapseLabel, ...rest }: NeoSideNavProps): import("react/jsx-runtime").JSX.Element;
17
+ export declare namespace NeoSideNav {
18
+ var displayName: string;
10
19
  }
11
- /**
12
- * NeoSideNav - TODO: Add component description
13
- *
14
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4065-3425
15
- *
16
- * Figma Props Mapping:
17
- * - TODO: Document Figma property mappings
18
- * - FigmaProp → reactProp
19
- *
20
- * Design Tokens Used:
21
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
22
- */
23
- export declare const NeoSideNav: {
24
- ({ children, ...props }: NeoSideNavProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
@@ -0,0 +1,47 @@
1
+ import { type BoxProps } from '@mui/material/Box';
2
+ import type { ReactNode } from 'react';
3
+ type TabPanelVariant = 'default' | 'flush';
4
+ export interface NeoTabPanelProps extends Omit<BoxProps, 'role'> {
5
+ /** This panel's identity — must match `currentValue` for the panel to render. */
6
+ value: string | number;
7
+ /**
8
+ * The currently selected tab value. When equal to `value`, this panel
9
+ * renders its children. Otherwise the panel is hidden (and removed from
10
+ * the accessibility tree via `hidden`).
11
+ */
12
+ currentValue: string | number;
13
+ /**
14
+ * Layout density.
15
+ * - `default`: 16px top padding — for standard content tabs.
16
+ * - `flush`: zero padding — for full-bleed sidebar/panel/canvas layouts
17
+ * where content must sit flush against the tab bar's bottom border.
18
+ * @default 'default'
19
+ */
20
+ variant?: TabPanelVariant;
21
+ /** Panel content. */
22
+ children?: ReactNode;
23
+ }
24
+ /**
25
+ * NeoTabPanel — completes the NeoTabs + NeoTab + NeoTabPanel set.
26
+ *
27
+ * Lightweight ARIA-compliant tab panel that renders children when its
28
+ * `value` matches `currentValue`. No MUI Lab / TabContext dependency.
29
+ *
30
+ * @example
31
+ * const [tab, setTab] = useState('overview')
32
+ * return (
33
+ * <>
34
+ * <NeoTabs value={tab} onChange={(_, v) => setTab(v)}>
35
+ * <NeoTab value="overview" label="Overview" />
36
+ * <NeoTab value="details" label="Details" />
37
+ * </NeoTabs>
38
+ * <NeoTabPanel value="overview" currentValue={tab}>...</NeoTabPanel>
39
+ * <NeoTabPanel value="details" currentValue={tab} variant="flush">...</NeoTabPanel>
40
+ * </>
41
+ * )
42
+ */
43
+ export declare const NeoTabPanel: {
44
+ ({ value, currentValue, variant, children, ...boxProps }: NeoTabPanelProps): import("react/jsx-runtime").JSX.Element;
45
+ displayName: string;
46
+ };
47
+ export {};
@@ -0,0 +1,64 @@
1
+ import { type TableProps } from '@mui/material/Table';
2
+ import type { ReactNode } from 'react';
3
+ type TableSize = 'small' | 'medium';
4
+ type TableVariant = 'bordered' | 'plain';
5
+ type CellAlign = 'left' | 'center' | 'right';
6
+ export interface NeoTableColumn {
7
+ /** Unique key — looked up against each row to find the cell value. */
8
+ key: string;
9
+ /** Header label rendered in the thead. */
10
+ header: ReactNode;
11
+ /** Cell text alignment. @default 'left' */
12
+ align?: CellAlign;
13
+ /** Column width — any CSS length (e.g. '120px', '20%'). */
14
+ width?: string;
15
+ }
16
+ export interface NeoTableProps extends Omit<TableProps, 'size'> {
17
+ /** Column definitions. Order in the array determines render order. */
18
+ columns: NeoTableColumn[];
19
+ /**
20
+ * Row data. Each row is a record keyed by `column.key`. Cell values
21
+ * may be any ReactNode (strings, badges, icons, etc.).
22
+ */
23
+ rows: Array<Record<string, ReactNode>>;
24
+ /**
25
+ * Cell density.
26
+ * - 'small': tight padding for dense lists.
27
+ * - 'medium': comfortable padding for read-heavy tables.
28
+ * @default 'small'
29
+ */
30
+ size?: TableSize;
31
+ /**
32
+ * Container chrome.
33
+ * - 'bordered': container border + borderRadius.card.
34
+ * - 'plain': no container chrome — for embedding inside an existing surface.
35
+ * @default 'bordered'
36
+ */
37
+ variant?: TableVariant;
38
+ /** Optional accessible label for the table. */
39
+ ariaLabel?: string;
40
+ }
41
+ /**
42
+ * NeoTable — lightweight read-only table for static data (schema rows,
43
+ * key/value summaries, response metadata). For interactive grids with
44
+ * sorting / filtering / pagination, use NeoDataGrid instead.
45
+ *
46
+ * @example
47
+ * <NeoTable
48
+ * columns={[
49
+ * { key: 'name', header: 'Property' },
50
+ * { key: 'type', header: 'Type', align: 'center', width: '120px' },
51
+ * { key: 'description', header: 'Description' },
52
+ * ]}
53
+ * rows={[
54
+ * { name: 'id', type: 'string', description: 'Resource identifier' },
55
+ * { name: 'count', type: 'number', description: 'Item count' },
56
+ * ]}
57
+ * size="small"
58
+ * />
59
+ */
60
+ export declare const NeoTable: {
61
+ ({ columns, rows, size, variant, ariaLabel, ...tableProps }: NeoTableProps): import("react/jsx-runtime").JSX.Element;
62
+ displayName: string;
63
+ };
64
+ export {};
@@ -10,7 +10,7 @@ import type { ReactNode } from 'react';
10
10
  * - Tab selection → value prop + onChange
11
11
  * - Active indicator → styled via indicator slot
12
12
  */
13
- export declare const NeoTabs: import("@emotion/styled").StyledComponent<import("@mui/material/Tabs").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
13
+ export declare const NeoTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
14
14
  export interface NeoTabProps extends Omit<TabProps, 'label'> {
15
15
  /**
16
16
  * The label for the tab
package/dist/Tag/Tag.d.ts CHANGED
@@ -13,7 +13,7 @@ declare module '@mui/material/Chip' {
13
13
  filled: true;
14
14
  }
15
15
  }
16
- type NeoTagOwnProps = {
16
+ export type NeoTagOwnProps = {
17
17
  /**
18
18
  * The size of the tag
19
19
  * @figma Size (Small|Medium|Large)
@@ -51,4 +51,3 @@ export declare function NeoTag<C extends ElementType = typeof Chip>({ size, vari
51
51
  export declare namespace NeoTag {
52
52
  var displayName: string;
53
53
  }
54
- export {};
@@ -1,26 +1,21 @@
1
- import type { ReactNode } from 'react';
2
- /**
3
- * Props for the NeoToggleButton component
4
- */
5
- export interface NeoToggleButtonProps {
1
+ import { type ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';
2
+ type ToggleButtonSize = 'small' | 'medium';
3
+ export interface NeoToggleButtonProps extends Omit<MuiToggleButtonProps, 'color' | 'size'> {
6
4
  /**
7
- * The content to display inside the component
5
+ * Size of the toggle button. Set automatically by NeoToggleButtonGroup
6
+ * when used as a child; set explicitly only for standalone use.
7
+ * @default 'medium'
8
8
  */
9
- children?: ReactNode;
9
+ size?: ToggleButtonSize;
10
10
  }
11
11
  /**
12
- * NeoToggleButton - TODO: Add component description
13
- *
14
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4163-5777
15
- *
16
- * Figma Props Mapping:
17
- * - TODO: Document Figma property mappings
18
- * - FigmaProp → reactProp
19
- *
20
- * Design Tokens Used:
21
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
12
+ * NeoToggleButton a single button in a segmented control. Use inside
13
+ * NeoToggleButtonGroup; the group manages selection state and forwards
14
+ * size to its children. Suitable for inline toolbar mode switches
15
+ * ("Table" / "Raw"). For page-level tabs, prefer NeoButtonTab.
22
16
  */
23
17
  export declare const NeoToggleButton: {
24
- ({ children, ...props }: NeoToggleButtonProps): import("react/jsx-runtime").JSX.Element;
18
+ ({ children, size, ...props }: NeoToggleButtonProps): import("react/jsx-runtime").JSX.Element;
25
19
  displayName: string;
26
20
  };
21
+ export {};
@@ -0,0 +1,26 @@
1
+ import { type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
2
+ type ToggleButtonGroupSize = 'small' | 'medium';
3
+ export interface NeoToggleButtonGroupProps extends Omit<MuiToggleButtonGroupProps, 'orientation' | 'color' | 'size' | 'fullWidth'> {
4
+ /**
5
+ * Size of the buttons in the group. Forwarded to each NeoToggleButton child.
6
+ * @default 'medium'
7
+ */
8
+ size?: ToggleButtonGroupSize;
9
+ }
10
+ /**
11
+ * NeoToggleButtonGroup — pill-shaped segmented control wrapping
12
+ * MUI ToggleButtonGroup with Neo tokens. Use for inline toolbar mode
13
+ * switches (e.g. "Table" / "Raw" in a panel header). For page-level
14
+ * tab navigation, prefer NeoButtonTabGroup.
15
+ *
16
+ * @example
17
+ * <NeoToggleButtonGroup value={mode} exclusive onChange={(_, v) => v && setMode(v)} size="small">
18
+ * <NeoToggleButton value="table">Table</NeoToggleButton>
19
+ * <NeoToggleButton value="raw">Raw</NeoToggleButton>
20
+ * </NeoToggleButtonGroup>
21
+ */
22
+ export declare const NeoToggleButtonGroup: {
23
+ ({ size, children, ...props }: NeoToggleButtonGroupProps): import("react/jsx-runtime").JSX.Element;
24
+ displayName: string;
25
+ };
26
+ export {};
@@ -1,26 +1,6 @@
1
- import type { ReactNode } from 'react';
2
1
  /**
3
- * Props for the NeoToggleButtonWithText component
4
- */
5
- export interface NeoToggleButtonWithTextProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
10
- }
11
- /**
12
- * NeoToggleButtonWithText - TODO: Add component description
2
+ * NeoToggleButtonWithText
13
3
  *
14
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11565-10485
15
- *
16
- * Figma Props Mapping:
17
- * - TODO: Document Figma property mappings
18
- * - FigmaProp → reactProp
19
- *
20
- * Design Tokens Used:
21
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
22
5
  */
23
- export declare const NeoToggleButtonWithText: {
24
- ({ children, ...props }: NeoToggleButtonWithTextProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
6
+ export declare const NeoToggleButtonWithText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,4 +1,5 @@
1
1
  import { type TooltipProps } from '@mui/material/Tooltip';
2
+ import type { ReactNode } from 'react';
2
3
  /**
3
4
  * Variant type for NeoTooltip
4
5
  */
@@ -14,13 +15,15 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
14
15
  */
15
16
  variant?: TooltipVariant;
16
17
  /**
17
- * The main tooltip text
18
+ * The main tooltip content. Accepts a string or any ReactNode, so callers can
19
+ * compose richer content when the `description` variant isn't enough.
18
20
  * @figma text (literal content, not a variant property)
19
21
  */
20
- title: string;
22
+ title: ReactNode;
21
23
  /**
22
- * Optional supporting description text
23
- * When provided, shows a larger tooltip with title (semibold) + description (medium)
24
+ * Optional supporting description text. When provided, shows a larger tooltip
25
+ * with a heading + body hierarchy: title (13px semibold) above a muted
26
+ * description (12px medium).
24
27
  * @default undefined
25
28
  * @figma Supporting text
26
29
  */
@@ -45,7 +48,7 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
45
48
  * - Dark: grey[50] (#f9fafb), grey[800] (#1f2937)
46
49
  * - Brand: digitalBlue[800] (#131e7a), typography.tooltip (#ffffff)
47
50
  * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
48
- * - Typography: fontSize.xs (12), fontWeight.medium (500), fontWeight.semiBold (600)
51
+ * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
49
52
  */
50
53
  export declare const NeoTooltip: {
51
54
  ({ variant, title, description, children, arrow, placement, ...props }: NeoTooltipProps): import("react/jsx-runtime").JSX.Element;
@@ -1,26 +1,6 @@
1
- import type { ReactNode } from 'react';
2
1
  /**
3
- * Props for the NeoTopNav component
4
- */
5
- export interface NeoTopNavProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
10
- }
11
- /**
12
- * NeoTopNav - TODO: Add component description
2
+ * NeoTopNav
13
3
  *
14
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4618-185228
15
- *
16
- * Figma Props Mapping:
17
- * - TODO: Document Figma property mappings
18
- * - FigmaProp → reactProp
19
- *
20
- * Design Tokens Used:
21
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
22
5
  */
23
- export declare const NeoTopNav: {
24
- ({ children, ...props }: NeoTopNavProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
6
+ export declare const NeoTopNav: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,26 +1,6 @@
1
- import type { ReactNode } from 'react';
2
1
  /**
3
- * Props for the NeoTourModal component
4
- */
5
- export interface NeoTourModalProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
10
- }
11
- /**
12
- * NeoTourModal - TODO: Add component description
2
+ * NeoTourModal
13
3
  *
14
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=12408-1800
15
- *
16
- * Figma Props Mapping:
17
- * - TODO: Document Figma property mappings
18
- * - FigmaProp → reactProp
19
- *
20
- * Design Tokens Used:
21
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
22
5
  */
23
- export declare const NeoTourModal: {
24
- ({ children, ...props }: NeoTourModalProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
6
+ export declare const NeoTourModal: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,5 +1,5 @@
1
1
  import { type ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
2
- declare const StyledToggleButton: import("@emotion/styled").StyledComponent<import("@mui/material/ToggleButton").ToggleButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
2
+ declare const StyledToggleButton: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
3
3
  export interface NeoTypologyControlProps extends Omit<ToggleButtonGroupProps, 'orientation'> {
4
4
  }
5
5
  /**
@@ -0,0 +1,12 @@
1
+ import { type BoxProps } from '@mui/material';
2
+ import type { FunctionComponent } from 'react';
3
+ export interface NeoVibratingDotProps extends BoxProps {
4
+ }
5
+ /**
6
+ * NeoVibratingDot - Animated status dot with a breathing pulse halo.
7
+ *
8
+ * Indicates a waiting/pending state (QUEUED / CREATED). Color is inherited from
9
+ * `currentColor`; set it via the `color`/`sx` prop or a parent. Sized to the
10
+ * lowercase-letter height regardless of parent fontSize.
11
+ */
12
+ export declare const NeoVibratingDot: FunctionComponent<NeoVibratingDotProps>;