@moderneinc/neo-styled-components 2.5.0-next.3268eb → 2.5.0-next.3473ff
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/Avatar/Avatar.d.ts +2 -1
- package/dist/Button/Button.d.ts +22 -10
- package/dist/MarketplaceCard/MarketplaceCard.d.ts +7 -6
- package/dist/SearchChip/SearchChip.d.ts +19 -0
- package/dist/Tree/Tree.d.ts +31 -15
- package/dist/index.d.ts +130 -20
- package/dist/index.esm.js +288 -32
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +305 -46
- package/dist/index.js.map +1 -1
- package/package.json +24 -2
package/dist/Avatar/Avatar.d.ts
CHANGED
|
@@ -20,8 +20,9 @@ export interface NeoAvatarProps extends Omit<AvatarProps, 'variant'> {
|
|
|
20
20
|
*
|
|
21
21
|
* Figma Props Mapping:
|
|
22
22
|
* - Figma Type "Initials" → variant="initials", size="small" (20px)
|
|
23
|
-
* - Figma Type "Small" → variant="circular", size="small" (
|
|
23
|
+
* - Figma Type "Small" → variant="circular", size="small" (32px with image)
|
|
24
24
|
* - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
|
|
25
|
+
* - State: Focus → CSS :focus-visible ring (2px white inner + 4px blue outer)
|
|
25
26
|
* - State: Hover (tooltip) → Wrap component with MUI Tooltip
|
|
26
27
|
*
|
|
27
28
|
* Usage:
|
package/dist/Button/Button.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import ButtonBase from '@mui/material/ButtonBase';
|
|
2
|
+
import React, { type ElementType, type ReactNode } from 'react';
|
|
3
3
|
declare module '@mui/material/ButtonBase' {
|
|
4
4
|
interface ButtonBasePropsVariantOverrides {
|
|
5
5
|
primary: true;
|
|
@@ -7,11 +7,12 @@ declare module '@mui/material/ButtonBase' {
|
|
|
7
7
|
destructive: true;
|
|
8
8
|
link: true;
|
|
9
9
|
linkColor: true;
|
|
10
|
+
tertiary: true;
|
|
10
11
|
}
|
|
11
12
|
}
|
|
12
|
-
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
|
|
13
|
+
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor' | 'tertiary';
|
|
13
14
|
type ButtonSize = 'small' | 'medium';
|
|
14
|
-
|
|
15
|
+
type NeoButtonOwnProps = {
|
|
15
16
|
/**
|
|
16
17
|
* The visual variant of the button
|
|
17
18
|
* @default "primary"
|
|
@@ -41,14 +42,25 @@ export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
41
42
|
* URL to link to. When provided, the button renders as a link element.
|
|
42
43
|
*/
|
|
43
44
|
href?: string;
|
|
44
|
-
|
|
45
|
+
/**
|
|
46
|
+
* Icon placed before the button label
|
|
47
|
+
*/
|
|
48
|
+
startIcon?: ReactNode;
|
|
49
|
+
/**
|
|
50
|
+
* Icon placed after the button label
|
|
51
|
+
*/
|
|
52
|
+
endIcon?: ReactNode;
|
|
53
|
+
};
|
|
54
|
+
export type NeoButtonProps<C extends ElementType = typeof ButtonBase> = NeoButtonOwnProps & Omit<React.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
|
|
55
|
+
component?: C;
|
|
56
|
+
};
|
|
45
57
|
/**
|
|
46
58
|
* NeoButton - Text button component based on MUI ButtonBase
|
|
47
59
|
*
|
|
48
60
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
|
|
49
61
|
*
|
|
50
62
|
* Figma Props Mapping:
|
|
51
|
-
* - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
|
|
63
|
+
* - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
|
|
52
64
|
* - Size (Small|Medium) → size prop
|
|
53
65
|
* - State=Disabled → disabled prop
|
|
54
66
|
* - State=Loading → loading prop
|
|
@@ -56,8 +68,8 @@ export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
56
68
|
* - State=Pressed → CSS :active
|
|
57
69
|
* - State=Focused → CSS :focus-visible
|
|
58
70
|
*/
|
|
59
|
-
export declare
|
|
60
|
-
|
|
61
|
-
displayName: string;
|
|
62
|
-
}
|
|
71
|
+
export declare function NeoButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: NeoButtonProps<C>): import("react/jsx-runtime").JSX.Element;
|
|
72
|
+
export declare namespace NeoButton {
|
|
73
|
+
var displayName: string;
|
|
74
|
+
}
|
|
63
75
|
export {};
|
|
@@ -23,13 +23,13 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 't
|
|
|
23
23
|
/**
|
|
24
24
|
* Whether the card is in selected/active state
|
|
25
25
|
* @default false
|
|
26
|
-
* @figma
|
|
26
|
+
* @figma State (Active)
|
|
27
27
|
*/
|
|
28
28
|
selected?: boolean;
|
|
29
29
|
/**
|
|
30
30
|
* Whether the card is disabled
|
|
31
31
|
* @default false
|
|
32
|
-
* @figma
|
|
32
|
+
* @figma State (Disabled)
|
|
33
33
|
*/
|
|
34
34
|
disabled?: boolean;
|
|
35
35
|
/**
|
|
@@ -59,10 +59,11 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 't
|
|
|
59
59
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
|
|
60
60
|
*
|
|
61
61
|
* Figma Props Mapping:
|
|
62
|
-
* -
|
|
63
|
-
* -
|
|
64
|
-
* -
|
|
65
|
-
* -
|
|
62
|
+
* - State="Active" → selected={true}
|
|
63
|
+
* - State="Disabled" → disabled={true}
|
|
64
|
+
* - State="Focused" → CSS :focus-visible state (not a prop)
|
|
65
|
+
* - State="Hover" → CSS :hover state (not a prop)
|
|
66
|
+
* - State="Default" → Base state (no props)
|
|
66
67
|
*
|
|
67
68
|
* Design Tokens Used:
|
|
68
69
|
* - semanticColors.surfaces.card (#FFFFFF) - Default card background
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type InputBaseProps } from '@mui/material/InputBase';
|
|
2
|
+
export interface NeoSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
|
|
3
|
+
/**
|
|
4
|
+
* Handler for clearing the search value (shows X icon when provided and value is non-empty)
|
|
5
|
+
*/
|
|
6
|
+
onClear?: () => void;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* NeoSearchChip - Pill-shaped search input for inline search functionality.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* <NeoSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
|
|
13
|
+
*
|
|
14
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8542-921
|
|
15
|
+
*/
|
|
16
|
+
export declare const NeoSearchChip: {
|
|
17
|
+
({ onClear, value, ...props }: NeoSearchChipProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
displayName: string;
|
|
19
|
+
};
|
package/dist/Tree/Tree.d.ts
CHANGED
|
@@ -1,26 +1,42 @@
|
|
|
1
|
-
import type
|
|
1
|
+
import { type TreeItemProps } from '@mui/x-tree-view/TreeItem';
|
|
2
|
+
import { type RichTreeViewProProps } from '@mui/x-tree-view-pro/RichTreeViewPro';
|
|
3
|
+
import { type ReactNode } from 'react';
|
|
2
4
|
/**
|
|
3
|
-
*
|
|
5
|
+
* Extended item data that NeoTreeItem can read from the items array.
|
|
6
|
+
* Consumers pass these via the `items` prop on NeoTreeView.
|
|
4
7
|
*/
|
|
5
|
-
export interface
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
export interface NeoTreeItemData {
|
|
9
|
+
id: string;
|
|
10
|
+
label: string;
|
|
11
|
+
icon?: ReactNode;
|
|
12
|
+
checkbox?: ReactNode;
|
|
13
|
+
secondaryLabel?: ReactNode;
|
|
14
|
+
endAction?: ReactNode;
|
|
15
|
+
statusIcon?: ReactNode;
|
|
16
|
+
children?: NeoTreeItemData[];
|
|
10
17
|
}
|
|
18
|
+
export type NeoTreeItemProps = TreeItemProps;
|
|
11
19
|
/**
|
|
12
|
-
*
|
|
20
|
+
* NeoTreeItem - Styled tree item row with optional icon, checkbox,
|
|
21
|
+
* secondaryLabel, endAction, and statusIcon slots.
|
|
22
|
+
*
|
|
23
|
+
* Slot data is read from the item model (passed via `items` on NeoTreeView).
|
|
13
24
|
*
|
|
14
25
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
|
|
26
|
+
*/
|
|
27
|
+
export declare const NeoTreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & import("react").RefAttributes<HTMLLIElement>>;
|
|
28
|
+
export interface NeoTreeViewProps extends Omit<RichTreeViewProProps<NeoTreeItemData, false>, 'slots'> {
|
|
29
|
+
slots?: RichTreeViewProProps<NeoTreeItemData, false>['slots'];
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* NeoTreeView - Styled tree container wrapping MUI RichTreeViewPro.
|
|
15
33
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
* - FigmaProp → reactProp
|
|
34
|
+
* Provides neo-design token styling, default expand/collapse icons,
|
|
35
|
+
* and NeoTreeItem as the default item slot.
|
|
19
36
|
*
|
|
20
|
-
*
|
|
21
|
-
* - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
|
|
37
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
|
|
22
38
|
*/
|
|
23
|
-
export declare const
|
|
24
|
-
({
|
|
39
|
+
export declare const NeoTreeView: {
|
|
40
|
+
({ slots, ...props }: NeoTreeViewProps): import("react/jsx-runtime").JSX.Element;
|
|
25
41
|
displayName: string;
|
|
26
42
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -6,8 +6,8 @@ import { AvatarProps } from '@mui/material/Avatar';
|
|
|
6
6
|
import { ChipProps } from '@mui/material/Chip';
|
|
7
7
|
import { AlertProps } from '@mui/material/Alert';
|
|
8
8
|
import { LinkProps } from '@mui/material/Link';
|
|
9
|
-
import * as
|
|
10
|
-
import { ButtonBaseProps } from '@mui/material/ButtonBase';
|
|
9
|
+
import * as ButtonBase from '@mui/material/ButtonBase';
|
|
10
|
+
import ButtonBase__default, { ButtonBaseProps } from '@mui/material/ButtonBase';
|
|
11
11
|
import { ButtonGroupProps } from '@mui/material/ButtonGroup';
|
|
12
12
|
import { CheckboxProps } from '@mui/material/Checkbox';
|
|
13
13
|
import { GridDensity as GridDensity$1, DataGridProProps, GridSlots, ToolbarProps, GridColumnsPanelProps } from '@mui/x-data-grid-pro';
|
|
@@ -40,6 +40,8 @@ import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
|
|
|
40
40
|
import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
|
|
41
41
|
import { DateRangePickerProps } from '@mui/x-date-pickers-pro/DateRangePicker';
|
|
42
42
|
import { DateRange } from '@mui/x-date-pickers-pro/models';
|
|
43
|
+
import { TreeItemProps } from '@mui/x-tree-view/TreeItem';
|
|
44
|
+
import { RichTreeViewProProps } from '@mui/x-tree-view-pro/RichTreeViewPro';
|
|
43
45
|
|
|
44
46
|
interface NeoFooterProps {
|
|
45
47
|
/**
|
|
@@ -302,8 +304,9 @@ interface NeoAvatarProps extends Omit<AvatarProps, 'variant'> {
|
|
|
302
304
|
*
|
|
303
305
|
* Figma Props Mapping:
|
|
304
306
|
* - Figma Type "Initials" → variant="initials", size="small" (20px)
|
|
305
|
-
* - Figma Type "Small" → variant="circular", size="small" (
|
|
307
|
+
* - Figma Type "Small" → variant="circular", size="small" (32px with image)
|
|
306
308
|
* - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
|
|
309
|
+
* - State: Focus → CSS :focus-visible ring (2px white inner + 4px blue outer)
|
|
307
310
|
* - State: Hover (tooltip) → Wrap component with MUI Tooltip
|
|
308
311
|
*
|
|
309
312
|
* Usage:
|
|
@@ -488,11 +491,12 @@ declare module '@mui/material/ButtonBase' {
|
|
|
488
491
|
destructive: true;
|
|
489
492
|
link: true;
|
|
490
493
|
linkColor: true;
|
|
494
|
+
tertiary: true;
|
|
491
495
|
}
|
|
492
496
|
}
|
|
493
|
-
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
|
|
497
|
+
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor' | 'tertiary';
|
|
494
498
|
type ButtonSize = 'small' | 'medium';
|
|
495
|
-
|
|
499
|
+
type NeoButtonOwnProps = {
|
|
496
500
|
/**
|
|
497
501
|
* The visual variant of the button
|
|
498
502
|
* @default "primary"
|
|
@@ -522,14 +526,25 @@ interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
522
526
|
* URL to link to. When provided, the button renders as a link element.
|
|
523
527
|
*/
|
|
524
528
|
href?: string;
|
|
525
|
-
|
|
529
|
+
/**
|
|
530
|
+
* Icon placed before the button label
|
|
531
|
+
*/
|
|
532
|
+
startIcon?: ReactNode;
|
|
533
|
+
/**
|
|
534
|
+
* Icon placed after the button label
|
|
535
|
+
*/
|
|
536
|
+
endIcon?: ReactNode;
|
|
537
|
+
};
|
|
538
|
+
type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoButtonOwnProps & Omit<React__default.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
|
|
539
|
+
component?: C;
|
|
540
|
+
};
|
|
526
541
|
/**
|
|
527
542
|
* NeoButton - Text button component based on MUI ButtonBase
|
|
528
543
|
*
|
|
529
544
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
|
|
530
545
|
*
|
|
531
546
|
* Figma Props Mapping:
|
|
532
|
-
* - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
|
|
547
|
+
* - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
|
|
533
548
|
* - Size (Small|Medium) → size prop
|
|
534
549
|
* - State=Disabled → disabled prop
|
|
535
550
|
* - State=Loading → loading prop
|
|
@@ -537,10 +552,10 @@ interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
|
|
|
537
552
|
* - State=Pressed → CSS :active
|
|
538
553
|
* - State=Focused → CSS :focus-visible
|
|
539
554
|
*/
|
|
540
|
-
declare
|
|
541
|
-
|
|
542
|
-
displayName: string;
|
|
543
|
-
}
|
|
555
|
+
declare function NeoButton<C extends ElementType = typeof ButtonBase__default>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: NeoButtonProps<C>): react_jsx_runtime.JSX.Element;
|
|
556
|
+
declare namespace NeoButton {
|
|
557
|
+
var displayName: string;
|
|
558
|
+
}
|
|
544
559
|
|
|
545
560
|
type ButtonGroupSize = 'small' | 'medium';
|
|
546
561
|
interface NeoButtonGroupProps extends Omit<ButtonGroupProps, 'size' | 'variant'> {
|
|
@@ -1646,6 +1661,41 @@ declare const NeoModalFooter: {
|
|
|
1646
1661
|
displayName: string;
|
|
1647
1662
|
};
|
|
1648
1663
|
|
|
1664
|
+
interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
|
|
1665
|
+
/**
|
|
1666
|
+
* Icon element to display
|
|
1667
|
+
*/
|
|
1668
|
+
icon?: ReactNode;
|
|
1669
|
+
/**
|
|
1670
|
+
* Text label below the icon
|
|
1671
|
+
*/
|
|
1672
|
+
label?: string;
|
|
1673
|
+
/**
|
|
1674
|
+
* Whether the item is selected/active
|
|
1675
|
+
* @figma State (Selected)
|
|
1676
|
+
* @default false
|
|
1677
|
+
*/
|
|
1678
|
+
selected?: boolean;
|
|
1679
|
+
/**
|
|
1680
|
+
* Optional tag badge content (e.g., count)
|
|
1681
|
+
* @figma Tag
|
|
1682
|
+
*/
|
|
1683
|
+
tag?: string;
|
|
1684
|
+
/**
|
|
1685
|
+
* Additional content
|
|
1686
|
+
*/
|
|
1687
|
+
children?: ReactNode;
|
|
1688
|
+
}
|
|
1689
|
+
/**
|
|
1690
|
+
* NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
|
|
1691
|
+
*
|
|
1692
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
|
|
1693
|
+
*/
|
|
1694
|
+
declare const NeoNavigationItem: {
|
|
1695
|
+
({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps): react_jsx_runtime.JSX.Element;
|
|
1696
|
+
displayName: string;
|
|
1697
|
+
};
|
|
1698
|
+
|
|
1649
1699
|
/**
|
|
1650
1700
|
* Breadcrumb item configuration
|
|
1651
1701
|
*/
|
|
@@ -1962,6 +2012,25 @@ declare const NeoRadio: {
|
|
|
1962
2012
|
displayName: string;
|
|
1963
2013
|
};
|
|
1964
2014
|
|
|
2015
|
+
interface NeoSearchChipProps extends Omit<InputBaseProps, 'startAdornment' | 'endAdornment' | 'type'> {
|
|
2016
|
+
/**
|
|
2017
|
+
* Handler for clearing the search value (shows X icon when provided and value is non-empty)
|
|
2018
|
+
*/
|
|
2019
|
+
onClear?: () => void;
|
|
2020
|
+
}
|
|
2021
|
+
/**
|
|
2022
|
+
* NeoSearchChip - Pill-shaped search input for inline search functionality.
|
|
2023
|
+
*
|
|
2024
|
+
* @example
|
|
2025
|
+
* <NeoSearchChip placeholder="Search titles" value={query} onChange={handleChange} onClear={handleClear} />
|
|
2026
|
+
*
|
|
2027
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8542-921
|
|
2028
|
+
*/
|
|
2029
|
+
declare const NeoSearchChip: {
|
|
2030
|
+
({ onClear, value, ...props }: NeoSearchChipProps): react_jsx_runtime.JSX.Element;
|
|
2031
|
+
displayName: string;
|
|
2032
|
+
};
|
|
2033
|
+
|
|
1965
2034
|
/**
|
|
1966
2035
|
* Extended props for NeoSkeleton component
|
|
1967
2036
|
*/
|
|
@@ -2544,7 +2613,7 @@ declare const NeoTooltip: {
|
|
|
2544
2613
|
displayName: string;
|
|
2545
2614
|
};
|
|
2546
2615
|
|
|
2547
|
-
declare const StyledToggleButton: StyledComponent<_mui_material_ToggleButton.ToggleButtonOwnProps & Omit<
|
|
2616
|
+
declare const StyledToggleButton: StyledComponent<_mui_material_ToggleButton.ToggleButtonOwnProps & Omit<ButtonBase.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "size" | "children" | "sx" | "className" | "tabIndex" | "onChange" | "onClick" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "fullWidth" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme>, {}, {}>;
|
|
2548
2617
|
interface NeoTypologyControlProps extends Omit<ToggleButtonGroupProps, 'orientation'> {
|
|
2549
2618
|
}
|
|
2550
2619
|
/**
|
|
@@ -2591,13 +2660,13 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
|
|
|
2591
2660
|
/**
|
|
2592
2661
|
* Whether the card is in selected/active state
|
|
2593
2662
|
* @default false
|
|
2594
|
-
* @figma
|
|
2663
|
+
* @figma State (Active)
|
|
2595
2664
|
*/
|
|
2596
2665
|
selected?: boolean;
|
|
2597
2666
|
/**
|
|
2598
2667
|
* Whether the card is disabled
|
|
2599
2668
|
* @default false
|
|
2600
|
-
* @figma
|
|
2669
|
+
* @figma State (Disabled)
|
|
2601
2670
|
*/
|
|
2602
2671
|
disabled?: boolean;
|
|
2603
2672
|
/**
|
|
@@ -2627,10 +2696,11 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
|
|
|
2627
2696
|
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
|
|
2628
2697
|
*
|
|
2629
2698
|
* Figma Props Mapping:
|
|
2630
|
-
* -
|
|
2631
|
-
* -
|
|
2632
|
-
* -
|
|
2633
|
-
* -
|
|
2699
|
+
* - State="Active" → selected={true}
|
|
2700
|
+
* - State="Disabled" → disabled={true}
|
|
2701
|
+
* - State="Focused" → CSS :focus-visible state (not a prop)
|
|
2702
|
+
* - State="Hover" → CSS :hover state (not a prop)
|
|
2703
|
+
* - State="Default" → Base state (no props)
|
|
2634
2704
|
*
|
|
2635
2705
|
* Design Tokens Used:
|
|
2636
2706
|
* - semanticColors.surfaces.card (#FFFFFF) - Default card background
|
|
@@ -2785,6 +2855,46 @@ declare const NeoDatePicker: {
|
|
|
2785
2855
|
displayName: string;
|
|
2786
2856
|
};
|
|
2787
2857
|
|
|
2858
|
+
/**
|
|
2859
|
+
* Extended item data that NeoTreeItem can read from the items array.
|
|
2860
|
+
* Consumers pass these via the `items` prop on NeoTreeView.
|
|
2861
|
+
*/
|
|
2862
|
+
interface NeoTreeItemData {
|
|
2863
|
+
id: string;
|
|
2864
|
+
label: string;
|
|
2865
|
+
icon?: ReactNode;
|
|
2866
|
+
checkbox?: ReactNode;
|
|
2867
|
+
secondaryLabel?: ReactNode;
|
|
2868
|
+
endAction?: ReactNode;
|
|
2869
|
+
statusIcon?: ReactNode;
|
|
2870
|
+
children?: NeoTreeItemData[];
|
|
2871
|
+
}
|
|
2872
|
+
type NeoTreeItemProps = TreeItemProps;
|
|
2873
|
+
/**
|
|
2874
|
+
* NeoTreeItem - Styled tree item row with optional icon, checkbox,
|
|
2875
|
+
* secondaryLabel, endAction, and statusIcon slots.
|
|
2876
|
+
*
|
|
2877
|
+
* Slot data is read from the item model (passed via `items` on NeoTreeView).
|
|
2878
|
+
*
|
|
2879
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
|
|
2880
|
+
*/
|
|
2881
|
+
declare const NeoTreeItem: React$1.ForwardRefExoticComponent<TreeItemProps & React$1.RefAttributes<HTMLLIElement>>;
|
|
2882
|
+
interface NeoTreeViewProps extends Omit<RichTreeViewProProps<NeoTreeItemData, false>, 'slots'> {
|
|
2883
|
+
slots?: RichTreeViewProProps<NeoTreeItemData, false>['slots'];
|
|
2884
|
+
}
|
|
2885
|
+
/**
|
|
2886
|
+
* NeoTreeView - Styled tree container wrapping MUI RichTreeViewPro.
|
|
2887
|
+
*
|
|
2888
|
+
* Provides neo-design token styling, default expand/collapse icons,
|
|
2889
|
+
* and NeoTreeItem as the default item slot.
|
|
2890
|
+
*
|
|
2891
|
+
* @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
|
|
2892
|
+
*/
|
|
2893
|
+
declare const NeoTreeView: {
|
|
2894
|
+
({ slots, ...props }: NeoTreeViewProps): react_jsx_runtime.JSX.Element;
|
|
2895
|
+
displayName: string;
|
|
2896
|
+
};
|
|
2897
|
+
|
|
2788
2898
|
/**
|
|
2789
2899
|
* @moderneinc/neo-styled-components
|
|
2790
2900
|
*
|
|
@@ -2804,5 +2914,5 @@ declare module '@mui/x-data-grid-pro' {
|
|
|
2804
2914
|
|
|
2805
2915
|
declare const version: string
|
|
2806
2916
|
|
|
2807
|
-
export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
|
|
2808
|
-
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoFilterChipProps, NeoFooterProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
|
|
2917
|
+
export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
|
|
2918
|
+
export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonGroupProps, NeoButtonProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoFilterChipProps, NeoFooterProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
|