@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.
- package/dist/Alert/Alert.d.ts +9 -1
- package/dist/Badge/Badge.d.ts +16 -2
- package/dist/DatePickerListItem/DatePickerListItem.d.ts +2 -22
- package/dist/DatePickerMenu/DatePickerMenu.d.ts +2 -22
- package/dist/InputField/InputField.d.ts +12 -1
- package/dist/ListItemButton/ListItemButton.d.ts +12 -1
- package/dist/NavigationItem/NavigationItem.d.ts +3 -2
- package/dist/PageContent/PageContent.d.ts +12 -1
- package/dist/RadioButtonWithText/RadioButtonWithText.d.ts +2 -22
- package/dist/SelectField/SelectField.d.ts +64 -0
- package/dist/SideNav/SideNav.d.ts +2 -22
- package/dist/TabPanel/TabPanel.d.ts +47 -0
- package/dist/Table/Table.d.ts +64 -0
- package/dist/ToggleButton/ToggleButton.d.ts +13 -18
- package/dist/ToggleButtonGroup/ToggleButtonGroup.d.ts +26 -0
- package/dist/ToggleButtonWithText/ToggleButtonWithText.d.ts +2 -22
- package/dist/TopNav/TopNav.d.ts +2 -22
- package/dist/TourModal/TourModal.d.ts +2 -22
- package/dist/index.d.ts +315 -10
- package/dist/index.esm.js +450 -148
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +460 -146
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/Alert/Alert.d.ts
CHANGED
|
@@ -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 {};
|
package/dist/Badge/Badge.d.ts
CHANGED
|
@@ -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
|
-
*
|
|
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
|
-
*
|
|
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`
|
|
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?:
|
|
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
|
-
*
|
|
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
|
-
*
|
|
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
|
|
2
|
-
|
|
3
|
-
|
|
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
|
-
*
|
|
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
|
-
|
|
9
|
+
size?: ToggleButtonSize;
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
|
-
* NeoToggleButton
|
|
13
|
-
*
|
|
14
|
-
*
|
|
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
|
-
*
|
|
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>, {}>;
|
package/dist/TopNav/TopNav.d.ts
CHANGED
|
@@ -1,26 +1,6 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
1
|
/**
|
|
3
|
-
*
|
|
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
|
-
*
|
|
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>, {}>;
|