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

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.
@@ -2,6 +2,7 @@ import { type AlertProps } from '@mui/material/Alert';
2
2
  import type { ReactNode } from 'react';
3
3
  type Intent = 'success' | 'error' | 'warning' | 'offline' | 'info';
4
4
  type AlertType = 'outlined' | 'filled';
5
+ type AlertSize = 'default' | 'compact';
5
6
  export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
6
7
  /**
7
8
  * The intent/purpose of the alert
@@ -15,6 +16,13 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
15
16
  * @figma Type
16
17
  */
17
18
  type?: AlertType;
19
+ /**
20
+ * Vertical density. `default` is page-level (64px fixed height,
21
+ * supports title + description). `compact` is inline-panel use
22
+ * (auto height, 40px min, single-line optimized for terse messages).
23
+ * @default "default"
24
+ */
25
+ size?: AlertSize;
18
26
  /**
19
27
  * The title text displayed in the alert
20
28
  */
@@ -44,7 +52,7 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
44
52
  * - Show Button → action prop presence
45
53
  */
46
54
  export declare const NeoAlert: {
47
- ({ intent, type, title, description, icon, action, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
55
+ ({ intent, type, size, title, description, icon, action, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
48
56
  displayName: string;
49
57
  };
50
58
  export {};
@@ -1,10 +1,23 @@
1
1
  import { type ChipProps } from '@mui/material/Chip';
2
+ type BadgeSize = 'small' | 'medium';
3
+ type BadgeVariant = 'filled' | 'outlined';
2
4
  export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
3
5
  /**
4
- * The color/state of the badge
6
+ * The color/state of the badge. Ignored when `variant="outlined"`.
5
7
  * @default "default"
6
8
  */
7
9
  color?: 'default' | 'error' | 'warning' | 'success' | 'info';
10
+ /**
11
+ * Visual density of the badge. `small` is 20px tall, `medium` is 24px tall.
12
+ * @default "medium"
13
+ */
14
+ size?: BadgeSize;
15
+ /**
16
+ * Visual treatment. `filled` uses a per-color tinted background;
17
+ * `outlined` uses a transparent background with a neutral secondary border.
18
+ * @default "filled"
19
+ */
20
+ variant?: BadgeVariant;
8
21
  }
9
22
  /**
10
23
  * NeoBadge - Status badge component based on MUI Chip
@@ -18,6 +31,7 @@ export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
18
31
  * - Label → label prop
19
32
  */
20
33
  export declare const NeoBadge: {
21
- (props: NeoBadgeProps): import("react/jsx-runtime").JSX.Element;
34
+ ({ size, variant, ...props }: NeoBadgeProps): import("react/jsx-runtime").JSX.Element;
22
35
  displayName: string;
23
36
  };
37
+ export {};
@@ -1,26 +1,6 @@
1
- import type { ReactNode } from 'react';
2
1
  /**
3
- * Props for the NeoDatePickerListItem component
4
- */
5
- export interface NeoDatePickerListItemProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
10
- }
11
- /**
12
- * NeoDatePickerListItem - TODO: Add component description
2
+ * NeoDatePickerListItem
13
3
  *
14
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8521
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 NeoDatePickerListItem: {
24
- ({ children, ...props }: NeoDatePickerListItemProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
6
+ export declare const NeoDatePickerListItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").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 NeoDatePickerMenu component
4
- */
5
- export interface NeoDatePickerMenuProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
10
- }
11
- /**
12
- * NeoDatePickerMenu - TODO: Add component description
2
+ * NeoDatePickerMenu
13
3
  *
14
4
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8593
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 NeoDatePickerMenu: {
24
- ({ children, ...props }: NeoDatePickerMenuProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
6
+ export declare const NeoDatePickerMenu: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -1,6 +1,18 @@
1
1
  import { type InputBaseProps } from '@mui/material/InputBase';
2
2
  import type { ReactNode } from 'react';
3
3
  type InputFieldSize = 'small' | 'medium';
4
+ export type { InputFieldSize as NeoInputFieldSize };
5
+ export declare const StyledFormControl: import("@emotion/styled").StyledComponent<import("@mui/material/FormControl").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "color" | "margin" | "size" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "error" | "fullWidth" | "required" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
6
+ size?: InputFieldSize;
7
+ }, {}, {}>;
8
+ export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material/InputLabel").InputLabelOwnProps & Pick<import("@mui/material/FormLabel").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style" | "color" | "margin" | "size" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "filled" | "error" | "required" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
9
+ size?: InputFieldSize;
10
+ infoIcon?: boolean;
11
+ }, {}, {}>;
12
+ export declare const InfoIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
13
+ export declare const StyledFormHelperText: import("@emotion/styled").StyledComponent<import("@mui/material/FormHelperText").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style" | "margin" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "filled" | "error" | "required" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
14
+ size?: InputFieldSize;
15
+ }, {}, {}>;
4
16
  export interface NeoInputFieldProps extends Omit<InputBaseProps, 'size'> {
5
17
  /**
6
18
  * The size of the input field
@@ -87,4 +99,3 @@ export declare const NeoInputField: {
87
99
  ({ size, destructive, label, required, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }: NeoInputFieldProps): import("react/jsx-runtime").JSX.Element;
88
100
  displayName: string;
89
101
  };
90
- export {};
@@ -1,4 +1,5 @@
1
1
  import type { ListItemButtonProps } from '@mui/material/ListItemButton';
2
+ type ListItemButtonVariant = 'card' | 'nav';
2
3
  /**
3
4
  * Props for the NeoListItemButton component
4
5
  */
@@ -15,6 +16,15 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
15
16
  * @figma property1="Disabled"
16
17
  */
17
18
  disabled?: boolean;
19
+ /**
20
+ * Visual treatment.
21
+ * - `card` (default): bordered card-style for settings/radio-list patterns.
22
+ * Expects ListItemIcon + ListItemText children for full styling support.
23
+ * - `nav`: borderless sidebar nav style with subtle hover/selected
24
+ * highlights. Renders children inline; works with plain text.
25
+ * @default 'card'
26
+ */
27
+ variant?: ListItemButtonVariant;
18
28
  }
19
29
  /**
20
30
  * NeoListItemButton - Selectable list item with icon and text
@@ -60,6 +70,7 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
60
70
  * - colors.grey[50] (#f9fafb) - Disabled background
61
71
  */
62
72
  export declare const NeoListItemButton: {
63
- ({ children, selected, disabled, ...props }: NeoListItemButtonProps): import("react/jsx-runtime").JSX.Element;
73
+ ({ children, selected, disabled, variant, ...props }: NeoListItemButtonProps): import("react/jsx-runtime").JSX.Element;
64
74
  displayName: string;
65
75
  };
76
+ export {};
@@ -27,9 +27,10 @@ type NeoNavigationItemOwnProps = {
27
27
  slotProps?: {
28
28
  /**
29
29
  * Props forwarded to the NeoTag badge rendered when `tag` is set.
30
- * Override `intent` to change colour: `'beta'` (periwinkle, default) or `'default'` (grey).
30
+ * Override `intent`, `variant`, or `size` to change appearance e.g.
31
+ * `{ variant: 'outlined', intent: 'default' }` for a calmer grey badge.
31
32
  */
32
- badge?: Pick<NeoTagOwnProps, 'intent'>;
33
+ badge?: NeoTagOwnProps;
33
34
  };
34
35
  /**
35
36
  * Additional content
@@ -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/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -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>;
@@ -1,26 +1,6 @@
1
- import type { ReactNode } from 'react';
2
1
  /**
3
- * Props for the NeoSideNav component
4
- */
5
- export interface NeoSideNavProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
10
- }
11
- /**
12
- * NeoSideNav - TODO: Add component description
2
+ * NeoSideNav
13
3
  *
14
4
  * @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
5
  */
23
- export declare const NeoSideNav: {
24
- ({ children, ...props }: NeoSideNavProps): import("react/jsx-runtime").JSX.Element;
25
- displayName: string;
26
- };
6
+ export declare const NeoSideNav: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -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 {};
@@ -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/styles").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 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/styles").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/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;