@moderneinc/neo-styled-components 2.5.0-next.2238f1 → 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.
@@ -7,9 +7,10 @@ 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
  /**
@@ -59,7 +60,7 @@ export type NeoButtonProps<C extends ElementType = typeof ButtonBase> = NeoButto
59
60
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
60
61
  *
61
62
  * Figma Props Mapping:
62
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
63
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
63
64
  * - Size (Small|Medium) → size prop
64
65
  * - State=Disabled → disabled prop
65
66
  * - State=Loading → loading prop
@@ -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 Property 1 (Active)
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 Property 1 (Disabled)
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
- * - Property 1="Active" → selected={true}
63
- * - Property 1="Disabled" → disabled={true}
64
- * - Property 1="Focused" → CSS :focus-visible state (not a prop)
65
- * - Property 1="Default" → Base state (no props)
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
@@ -1,26 +1,42 @@
1
- import type { ReactNode } from 'react';
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
- * Props for the NeoTree component
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 NeoTreeProps {
6
- /**
7
- * The content to display inside the component
8
- */
9
- children?: ReactNode;
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
- * NeoTree - TODO: Add component description
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
- * Figma Props Mapping:
17
- * - TODO: Document Figma property mappings
18
- * - FigmaProp → reactProp
34
+ * Provides neo-design token styling, default expand/collapse icons,
35
+ * and NeoTreeItem as the default item slot.
19
36
  *
20
- * Design Tokens Used:
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 NeoTree: {
24
- ({ children, ...props }: NeoTreeProps): import("react/jsx-runtime").JSX.Element;
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
@@ -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
  /**
@@ -489,9 +491,10 @@ declare module '@mui/material/ButtonBase' {
489
491
  destructive: true;
490
492
  link: true;
491
493
  linkColor: true;
494
+ tertiary: true;
492
495
  }
493
496
  }
494
- type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
497
+ type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor' | 'tertiary';
495
498
  type ButtonSize = 'small' | 'medium';
496
499
  type NeoButtonOwnProps = {
497
500
  /**
@@ -541,7 +544,7 @@ type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoBut
541
544
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
542
545
  *
543
546
  * Figma Props Mapping:
544
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
547
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
545
548
  * - Size (Small|Medium) → size prop
546
549
  * - State=Disabled → disabled prop
547
550
  * - State=Loading → loading prop
@@ -1658,6 +1661,41 @@ declare const NeoModalFooter: {
1658
1661
  displayName: string;
1659
1662
  };
1660
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
+
1661
1699
  /**
1662
1700
  * Breadcrumb item configuration
1663
1701
  */
@@ -2622,13 +2660,13 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
2622
2660
  /**
2623
2661
  * Whether the card is in selected/active state
2624
2662
  * @default false
2625
- * @figma Property 1 (Active)
2663
+ * @figma State (Active)
2626
2664
  */
2627
2665
  selected?: boolean;
2628
2666
  /**
2629
2667
  * Whether the card is disabled
2630
2668
  * @default false
2631
- * @figma Property 1 (Disabled)
2669
+ * @figma State (Disabled)
2632
2670
  */
2633
2671
  disabled?: boolean;
2634
2672
  /**
@@ -2658,10 +2696,11 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
2658
2696
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
2659
2697
  *
2660
2698
  * Figma Props Mapping:
2661
- * - Property 1="Active" → selected={true}
2662
- * - Property 1="Disabled" → disabled={true}
2663
- * - Property 1="Focused" → CSS :focus-visible state (not a prop)
2664
- * - Property 1="Default" → Base state (no props)
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)
2665
2704
  *
2666
2705
  * Design Tokens Used:
2667
2706
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
@@ -2816,6 +2855,46 @@ declare const NeoDatePicker: {
2816
2855
  displayName: string;
2817
2856
  };
2818
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
+
2819
2898
  /**
2820
2899
  * @moderneinc/neo-styled-components
2821
2900
  *
@@ -2835,5 +2914,5 @@ declare module '@mui/x-data-grid-pro' {
2835
2914
 
2836
2915
  declare const version: string
2837
2916
 
2838
- 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, NeoSearchChip, 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 };
2839
- 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, NeoSearchChipProps, 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 };