@moderneinc/neo-styled-components 4.0.0-next.e5eac5 → 4.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.
- package/dist/Button/Button.d.ts +2 -4
- package/dist/Checkbox/Checkbox.d.ts +1 -1
- package/dist/CheckboxWithText/CheckboxWithText.d.ts +40 -0
- package/dist/DataGridCell/DataGridCell.d.ts +1 -1
- package/dist/DatePickerListItem/DatePickerListItem.d.ts +26 -0
- package/dist/DatePickerMenu/DatePickerMenu.d.ts +26 -0
- package/dist/Dot/Dot.d.ts +1 -1
- package/dist/RadioButtonWithText/RadioButtonWithText.d.ts +26 -0
- package/dist/Toast/Toast.d.ts +1 -1
- package/dist/ToggleButton/ToggleButton.d.ts +26 -0
- package/dist/ToggleButtonWithText/ToggleButtonWithText.d.ts +26 -0
- package/dist/TourModal/TourModal.d.ts +26 -0
- package/dist/index.d.ts +105 -62
- package/dist/index.esm.js +88 -228
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +88 -227
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/Avatar/Avatar.d.ts +0 -51
package/dist/Button/Button.d.ts
CHANGED
|
@@ -5,12 +5,10 @@ declare module '@mui/material/ButtonBase' {
|
|
|
5
5
|
primary: true;
|
|
6
6
|
secondary: true;
|
|
7
7
|
destructive: true;
|
|
8
|
-
link: true;
|
|
9
|
-
linkColor: true;
|
|
10
8
|
tertiary: true;
|
|
11
9
|
}
|
|
12
10
|
}
|
|
13
|
-
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | '
|
|
11
|
+
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary';
|
|
14
12
|
type ButtonSize = 'small' | 'medium';
|
|
15
13
|
type NeoButtonOwnProps = {
|
|
16
14
|
/**
|
|
@@ -60,7 +58,7 @@ export type NeoButtonProps<C extends ElementType = typeof ButtonBase> = NeoButto
|
|
|
60
58
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
|
|
61
59
|
*
|
|
62
60
|
* Figma Props Mapping:
|
|
63
|
-
* - Hierarchy (Primary|Secondary|Destructive|
|
|
61
|
+
* - Hierarchy (Primary|Secondary|Destructive|Tertiary) → variant prop
|
|
64
62
|
* - Size (Small|Medium) → size prop
|
|
65
63
|
* - State=Disabled → disabled prop
|
|
66
64
|
* - State=Loading → loading prop
|
|
@@ -48,7 +48,7 @@ export interface NeoCheckboxProps extends Omit<CheckboxProps, 'size'> {
|
|
|
48
48
|
* Figma Props Mapping:
|
|
49
49
|
* - Checked (True|False) → checked prop
|
|
50
50
|
* - Indeterminate (True|False) → indeterminate prop
|
|
51
|
-
* - Size (
|
|
51
|
+
* - Size (Extra Small|Small|Medium) → size prop (xs|small|medium)
|
|
52
52
|
* - State=Default → default state
|
|
53
53
|
* - State=Hover → CSS :hover
|
|
54
54
|
* - State=Focused → CSS :focus-visible
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type NeoCheckboxProps } from '../Checkbox/Checkbox';
|
|
3
|
+
type CheckboxWithTextSize = 'small' | 'medium';
|
|
4
|
+
/**
|
|
5
|
+
* Props for the NeoCheckboxWithText component
|
|
6
|
+
*/
|
|
7
|
+
export interface NeoCheckboxWithTextProps extends Omit<NeoCheckboxProps, 'size'> {
|
|
8
|
+
/**
|
|
9
|
+
* The size of the checkbox with text
|
|
10
|
+
* @default "small"
|
|
11
|
+
* @figma Property 1
|
|
12
|
+
*/
|
|
13
|
+
size?: CheckboxWithTextSize;
|
|
14
|
+
/**
|
|
15
|
+
* The label text displayed next to the checkbox
|
|
16
|
+
* @figma Text (label)
|
|
17
|
+
*/
|
|
18
|
+
label?: ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* The helper text displayed below the label
|
|
21
|
+
* @figma Text (supporting text)
|
|
22
|
+
*/
|
|
23
|
+
helperText?: ReactNode;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* NeoCheckboxWithText - Checkbox with label and supporting text
|
|
27
|
+
*
|
|
28
|
+
* Thin wrapper around NeoCheckbox that maps the Figma "Checkbox with text"
|
|
29
|
+
* component to the existing NeoCheckbox with label + helperText.
|
|
30
|
+
*
|
|
31
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=12125-162
|
|
32
|
+
*
|
|
33
|
+
* Figma Props Mapping:
|
|
34
|
+
* - Property 1 (Medium|Small) → size ('medium'|'small')
|
|
35
|
+
*/
|
|
36
|
+
export declare const NeoCheckboxWithText: {
|
|
37
|
+
({ size, ...props }: NeoCheckboxWithTextProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
displayName: string;
|
|
39
|
+
};
|
|
40
|
+
export {};
|
|
@@ -27,7 +27,7 @@ export interface NeoDataGridCellContentProps extends HTMLAttributes<HTMLDivEleme
|
|
|
27
27
|
* // Avatar with text
|
|
28
28
|
* renderCell: (params) => (
|
|
29
29
|
* <NeoDataGridCellContent>
|
|
30
|
-
* <
|
|
30
|
+
* <NeoGeneralAvatar src={params.row.avatarUrl} />
|
|
31
31
|
* <span>{params.row.name}</span>
|
|
32
32
|
* </NeoDataGridCellContent>
|
|
33
33
|
* )
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
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
|
|
13
|
+
*
|
|
14
|
+
* @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
|
+
*/
|
|
23
|
+
export declare const NeoDatePickerListItem: {
|
|
24
|
+
({ children, ...props }: NeoDatePickerListItemProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
displayName: string;
|
|
26
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
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
|
|
13
|
+
*
|
|
14
|
+
* @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
|
+
*/
|
|
23
|
+
export declare const NeoDatePickerMenu: {
|
|
24
|
+
({ children, ...props }: NeoDatePickerMenuProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
displayName: string;
|
|
26
|
+
};
|
package/dist/Dot/Dot.d.ts
CHANGED
|
@@ -25,7 +25,7 @@ export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'bad
|
|
|
25
25
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
|
|
26
26
|
*
|
|
27
27
|
* Figma Props Mapping:
|
|
28
|
-
* -
|
|
28
|
+
* - Size (Small|Medium|Large) → size prop (small|medium|large)
|
|
29
29
|
* - outline (False|True) → variant prop (solid|outline)
|
|
30
30
|
* - Color is configurable via color prop (success|error|warning|info|neutral)
|
|
31
31
|
*/
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
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
|
|
13
|
+
*
|
|
14
|
+
* @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
|
+
*/
|
|
23
|
+
export declare const NeoRadioButtonWithText: {
|
|
24
|
+
({ children, ...props }: NeoRadioButtonWithTextProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
displayName: string;
|
|
26
|
+
};
|
package/dist/Toast/Toast.d.ts
CHANGED
|
@@ -59,7 +59,7 @@ export declare const NeoToastButton: {
|
|
|
59
59
|
intent?: Intent;
|
|
60
60
|
type?: ToastType;
|
|
61
61
|
children: ReactNode;
|
|
62
|
-
} & Omit<React.ComponentProps<typeof Button>, "variant">): import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
} & Omit<React.ComponentProps<typeof Button>, "variant" | "type">): import("react/jsx-runtime").JSX.Element;
|
|
63
63
|
displayName: string;
|
|
64
64
|
};
|
|
65
65
|
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Props for the NeoToggleButton component
|
|
4
|
+
*/
|
|
5
|
+
export interface NeoToggleButtonProps {
|
|
6
|
+
/**
|
|
7
|
+
* The content to display inside the component
|
|
8
|
+
*/
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
}
|
|
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)
|
|
22
|
+
*/
|
|
23
|
+
export declare const NeoToggleButton: {
|
|
24
|
+
({ children, ...props }: NeoToggleButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
displayName: string;
|
|
26
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
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
|
|
13
|
+
*
|
|
14
|
+
* @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
|
+
*/
|
|
23
|
+
export declare const NeoToggleButtonWithText: {
|
|
24
|
+
({ children, ...props }: NeoToggleButtonWithTextProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
displayName: string;
|
|
26
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
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
|
|
13
|
+
*
|
|
14
|
+
* @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
|
+
*/
|
|
23
|
+
export declare const NeoTourModal: {
|
|
24
|
+
({ children, ...props }: NeoTourModalProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
displayName: string;
|
|
26
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React$1 from 'react';
|
|
3
3
|
import React__default, { ReactNode, ElementType, HTMLAttributes, ComponentType, ComponentPropsWithoutRef } from 'react';
|
|
4
4
|
import { GridDensity, GridFilterPanel } from '@mui/x-data-grid';
|
|
5
|
-
import { AvatarProps } from '@mui/material/Avatar';
|
|
6
5
|
import Chip, { ChipProps } from '@mui/material/Chip';
|
|
7
6
|
import { AlertProps } from '@mui/material/Alert';
|
|
8
7
|
import { LinkProps } from '@mui/material/Link';
|
|
@@ -16,7 +15,9 @@ import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, ToolbarProps
|
|
|
16
15
|
import * as _mui_material_styles from '@mui/material/styles';
|
|
17
16
|
import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
|
|
18
17
|
import { DividerProps } from '@mui/material/Divider';
|
|
18
|
+
import { PaperProps } from '@mui/material/Paper';
|
|
19
19
|
import { BadgeProps } from '@mui/material/Badge';
|
|
20
|
+
import { AvatarProps } from '@mui/material/Avatar';
|
|
20
21
|
import { IconButtonProps } from '@mui/material/IconButton';
|
|
21
22
|
import { InputBaseProps } from '@mui/material/InputBase';
|
|
22
23
|
import { MenuProps } from '@mui/material/Menu';
|
|
@@ -288,57 +289,6 @@ declare const NeoActivityIndicatorCell: {
|
|
|
288
289
|
displayName: string;
|
|
289
290
|
};
|
|
290
291
|
|
|
291
|
-
interface NeoAvatarProps extends Omit<AvatarProps, 'variant'> {
|
|
292
|
-
/**
|
|
293
|
-
* The size of the avatar
|
|
294
|
-
* @default "medium"
|
|
295
|
-
*/
|
|
296
|
-
size?: 'small' | 'medium';
|
|
297
|
-
/**
|
|
298
|
-
* The variant of the avatar
|
|
299
|
-
* - "circular": Image avatar with white surface container (medium only)
|
|
300
|
-
* - "initials": Text/initials avatar with violet background (no container)
|
|
301
|
-
* @default "circular"
|
|
302
|
-
*/
|
|
303
|
-
variant?: 'circular' | 'initials';
|
|
304
|
-
}
|
|
305
|
-
/**
|
|
306
|
-
* NeoAvatar - User avatar component based on MUI Avatar
|
|
307
|
-
*
|
|
308
|
-
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=9600-185
|
|
309
|
-
*
|
|
310
|
-
* Figma Props Mapping:
|
|
311
|
-
* - Figma Type "Initials" → variant="initials", size="small" (20px)
|
|
312
|
-
* - Figma Type "Small" → variant="circular", size="small" (32px with image)
|
|
313
|
-
* - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
|
|
314
|
-
* - State: Focus → CSS :focus-visible ring (2px white inner + 4px blue outer)
|
|
315
|
-
* - State: Hover (tooltip) → Wrap component with MUI Tooltip
|
|
316
|
-
*
|
|
317
|
-
* Usage:
|
|
318
|
-
* ```tsx
|
|
319
|
-
* // Medium image avatar (with white container)
|
|
320
|
-
* <NeoAvatar variant="circular" size="medium" src="/avatar.jpg" alt="User" />
|
|
321
|
-
*
|
|
322
|
-
* // Small image avatar (no container)
|
|
323
|
-
* <NeoAvatar variant="circular" size="small" src="/avatar.jpg" alt="User" />
|
|
324
|
-
*
|
|
325
|
-
* // Small initials avatar
|
|
326
|
-
* <NeoAvatar variant="initials" size="small">A</NeoAvatar>
|
|
327
|
-
*
|
|
328
|
-
* // Medium initials avatar
|
|
329
|
-
* <NeoAvatar variant="initials" size="medium">AB</NeoAvatar>
|
|
330
|
-
*
|
|
331
|
-
* // With tooltip (user wraps)
|
|
332
|
-
* <Tooltip title="This is a tooltip" arrow placement="top">
|
|
333
|
-
* <NeoAvatar variant="initials">A</NeoAvatar>
|
|
334
|
-
* </Tooltip>
|
|
335
|
-
* ```
|
|
336
|
-
*/
|
|
337
|
-
declare const NeoAvatar: {
|
|
338
|
-
({ size, variant, ...props }: NeoAvatarProps): react_jsx_runtime.JSX.Element;
|
|
339
|
-
displayName: string;
|
|
340
|
-
};
|
|
341
|
-
|
|
342
292
|
interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
|
|
343
293
|
/**
|
|
344
294
|
* The color/state of the badge
|
|
@@ -491,12 +441,10 @@ declare module '@mui/material/ButtonBase' {
|
|
|
491
441
|
primary: true;
|
|
492
442
|
secondary: true;
|
|
493
443
|
destructive: true;
|
|
494
|
-
link: true;
|
|
495
|
-
linkColor: true;
|
|
496
444
|
tertiary: true;
|
|
497
445
|
}
|
|
498
446
|
}
|
|
499
|
-
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | '
|
|
447
|
+
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary';
|
|
500
448
|
type ButtonSize = 'small' | 'medium';
|
|
501
449
|
type NeoButtonOwnProps = {
|
|
502
450
|
/**
|
|
@@ -546,7 +494,7 @@ type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoBut
|
|
|
546
494
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
|
|
547
495
|
*
|
|
548
496
|
* Figma Props Mapping:
|
|
549
|
-
* - Hierarchy (Primary|Secondary|Destructive|
|
|
497
|
+
* - Hierarchy (Primary|Secondary|Destructive|Tertiary) → variant prop
|
|
550
498
|
* - Size (Small|Medium) → size prop
|
|
551
499
|
* - State=Disabled → disabled prop
|
|
552
500
|
* - State=Loading → loading prop
|
|
@@ -723,7 +671,7 @@ interface NeoCheckboxProps extends Omit<CheckboxProps, 'size'> {
|
|
|
723
671
|
* Figma Props Mapping:
|
|
724
672
|
* - Checked (True|False) → checked prop
|
|
725
673
|
* - Indeterminate (True|False) → indeterminate prop
|
|
726
|
-
* - Size (
|
|
674
|
+
* - Size (Extra Small|Small|Medium) → size prop (xs|small|medium)
|
|
727
675
|
* - State=Default → default state
|
|
728
676
|
* - State=Hover → CSS :hover
|
|
729
677
|
* - State=Focused → CSS :focus-visible
|
|
@@ -764,6 +712,44 @@ declare const NeoCheckbox: {
|
|
|
764
712
|
displayName: string;
|
|
765
713
|
};
|
|
766
714
|
|
|
715
|
+
type CheckboxWithTextSize = 'small' | 'medium';
|
|
716
|
+
/**
|
|
717
|
+
* Props for the NeoCheckboxWithText component
|
|
718
|
+
*/
|
|
719
|
+
interface NeoCheckboxWithTextProps extends Omit<NeoCheckboxProps, 'size'> {
|
|
720
|
+
/**
|
|
721
|
+
* The size of the checkbox with text
|
|
722
|
+
* @default "small"
|
|
723
|
+
* @figma Property 1
|
|
724
|
+
*/
|
|
725
|
+
size?: CheckboxWithTextSize;
|
|
726
|
+
/**
|
|
727
|
+
* The label text displayed next to the checkbox
|
|
728
|
+
* @figma Text (label)
|
|
729
|
+
*/
|
|
730
|
+
label?: ReactNode;
|
|
731
|
+
/**
|
|
732
|
+
* The helper text displayed below the label
|
|
733
|
+
* @figma Text (supporting text)
|
|
734
|
+
*/
|
|
735
|
+
helperText?: ReactNode;
|
|
736
|
+
}
|
|
737
|
+
/**
|
|
738
|
+
* NeoCheckboxWithText - Checkbox with label and supporting text
|
|
739
|
+
*
|
|
740
|
+
* Thin wrapper around NeoCheckbox that maps the Figma "Checkbox with text"
|
|
741
|
+
* component to the existing NeoCheckbox with label + helperText.
|
|
742
|
+
*
|
|
743
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=12125-162
|
|
744
|
+
*
|
|
745
|
+
* Figma Props Mapping:
|
|
746
|
+
* - Property 1 (Medium|Small) → size ('medium'|'small')
|
|
747
|
+
*/
|
|
748
|
+
declare const NeoCheckboxWithText: {
|
|
749
|
+
({ size, ...props }: NeoCheckboxWithTextProps): react_jsx_runtime.JSX.Element;
|
|
750
|
+
displayName: string;
|
|
751
|
+
};
|
|
752
|
+
|
|
767
753
|
declare module '@mui/material/ButtonBase' {
|
|
768
754
|
interface ButtonBasePropsVariantOverrides {
|
|
769
755
|
outlined: true;
|
|
@@ -979,7 +965,7 @@ interface NeoDataGridCellContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
979
965
|
* // Avatar with text
|
|
980
966
|
* renderCell: (params) => (
|
|
981
967
|
* <NeoDataGridCellContent>
|
|
982
|
-
* <
|
|
968
|
+
* <NeoGeneralAvatar src={params.row.avatarUrl} />
|
|
983
969
|
* <span>{params.row.name}</span>
|
|
984
970
|
* </NeoDataGridCellContent>
|
|
985
971
|
* )
|
|
@@ -1286,6 +1272,52 @@ declare const NeoDivider: {
|
|
|
1286
1272
|
displayName: string;
|
|
1287
1273
|
};
|
|
1288
1274
|
|
|
1275
|
+
interface NeoDownloadToastProps extends Omit<PaperProps, 'title'> {
|
|
1276
|
+
/**
|
|
1277
|
+
* The header text
|
|
1278
|
+
*/
|
|
1279
|
+
title?: string;
|
|
1280
|
+
/**
|
|
1281
|
+
* The file name being downloaded
|
|
1282
|
+
*/
|
|
1283
|
+
fileName?: string;
|
|
1284
|
+
/**
|
|
1285
|
+
* Progress value (0-100)
|
|
1286
|
+
*/
|
|
1287
|
+
progress?: number;
|
|
1288
|
+
/**
|
|
1289
|
+
* Whether to show the close button
|
|
1290
|
+
* @default true
|
|
1291
|
+
*/
|
|
1292
|
+
showClose?: boolean;
|
|
1293
|
+
/**
|
|
1294
|
+
* Whether to show the pause button
|
|
1295
|
+
* @default true
|
|
1296
|
+
*/
|
|
1297
|
+
showPause?: boolean;
|
|
1298
|
+
/**
|
|
1299
|
+
* Callback when close button is clicked
|
|
1300
|
+
*/
|
|
1301
|
+
onClose?: () => void;
|
|
1302
|
+
/**
|
|
1303
|
+
* Callback when pause button is clicked
|
|
1304
|
+
*/
|
|
1305
|
+
onPause?: () => void;
|
|
1306
|
+
/**
|
|
1307
|
+
* Custom actions to override the default pause/close buttons
|
|
1308
|
+
*/
|
|
1309
|
+
actions?: ReactNode;
|
|
1310
|
+
}
|
|
1311
|
+
/**
|
|
1312
|
+
* NeoDownloadToast - Standalone download progress toast notification
|
|
1313
|
+
*
|
|
1314
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3377-26954
|
|
1315
|
+
*/
|
|
1316
|
+
declare const NeoDownloadToast: {
|
|
1317
|
+
({ title, fileName, progress, showClose, showPause, onClose, onPause, actions, ...props }: NeoDownloadToastProps): react_jsx_runtime.JSX.Element;
|
|
1318
|
+
displayName: string;
|
|
1319
|
+
};
|
|
1320
|
+
|
|
1289
1321
|
type DotSize = 'small' | 'medium' | 'large';
|
|
1290
1322
|
type DotVariant = 'solid' | 'outline';
|
|
1291
1323
|
type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
|
|
@@ -1312,7 +1344,7 @@ interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeConte
|
|
|
1312
1344
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
|
|
1313
1345
|
*
|
|
1314
1346
|
* Figma Props Mapping:
|
|
1315
|
-
* -
|
|
1347
|
+
* - Size (Small|Medium|Large) → size prop (small|medium|large)
|
|
1316
1348
|
* - outline (False|True) → variant prop (solid|outline)
|
|
1317
1349
|
* - Color is configurable via color prop (success|error|warning|info|neutral)
|
|
1318
1350
|
*/
|
|
@@ -2309,7 +2341,7 @@ declare const NeoToastButton: {
|
|
|
2309
2341
|
intent?: Intent;
|
|
2310
2342
|
type?: ToastType;
|
|
2311
2343
|
children: ReactNode;
|
|
2312
|
-
} & Omit<React.ComponentProps<typeof Button>, "variant">): react_jsx_runtime.JSX.Element;
|
|
2344
|
+
} & Omit<React.ComponentProps<typeof Button>, "variant" | "type">): react_jsx_runtime.JSX.Element;
|
|
2313
2345
|
displayName: string;
|
|
2314
2346
|
};
|
|
2315
2347
|
|
|
@@ -2867,6 +2899,17 @@ declare const NeoTreeView: {
|
|
|
2867
2899
|
displayName: string;
|
|
2868
2900
|
};
|
|
2869
2901
|
|
|
2902
|
+
/**
|
|
2903
|
+
* Outline-based focus ring styles derived from Neo border tokens.
|
|
2904
|
+
* Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
|
|
2905
|
+
*
|
|
2906
|
+
* Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
|
|
2907
|
+
*/
|
|
2908
|
+
declare const focusRingStyles: {
|
|
2909
|
+
readonly outline: "2px solid #3bcca6";
|
|
2910
|
+
readonly outlineOffset: "2px";
|
|
2911
|
+
};
|
|
2912
|
+
|
|
2870
2913
|
/**
|
|
2871
2914
|
* @moderneinc/neo-styled-components
|
|
2872
2915
|
*
|
|
@@ -2886,5 +2929,5 @@ declare module '@mui/x-data-grid-pro' {
|
|
|
2886
2929
|
|
|
2887
2930
|
declare const version: string
|
|
2888
2931
|
|
|
2889
|
-
export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert,
|
|
2890
|
-
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps,
|
|
2932
|
+
export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, 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, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, version };
|
|
2933
|
+
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps, 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, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
|