@moderneinc/neo-styled-components 2.5.0-next.80ef49 → 2.5.0-next.a04193

package/dist/Button/Button.d.ts

@@ -1,5 +1,5 @@
 import ButtonBase from '@mui/material/ButtonBase';
-import type { ElementType, ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 declare module '@mui/material/ButtonBase' {
     interface ButtonBasePropsVariantOverrides {
         primary: true;
@@ -7,9 +7,10 @@ declare module '@mui/material/ButtonBase' {
         destructive: true;
         link: true;
         linkColor: true;
+        tertiary: true;
     }
 }
-type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor' | 'tertiary';
 type ButtonSize = 'small' | 'medium';
 type NeoButtonOwnProps = {
     /**
@@ -41,6 +42,14 @@ type NeoButtonOwnProps = {
      * URL to link to. When provided, the button renders as a link element.
      */
     href?: string;
+    /**
+     * Icon placed before the button label
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon placed after the button label
+     */
+    endIcon?: ReactNode;
 };
 export type NeoButtonProps<C extends ElementType = typeof ButtonBase> = NeoButtonOwnProps & Omit<React.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
     component?: C;
@@ -51,7 +60,7 @@ export type NeoButtonProps<C extends ElementType = typeof ButtonBase> = NeoButto
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
  *
  * Figma Props Mapping:
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
  * - State=Disabled → disabled prop
  * - State=Loading → loading prop
@@ -59,7 +68,7 @@ export type NeoButtonProps<C extends ElementType = typeof ButtonBase> = NeoButto
  * - State=Pressed → CSS :active
  * - State=Focused → CSS :focus-visible
  */
-export declare function NeoButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, disabled, ...rest }: NeoButtonProps<C>): import("react/jsx-runtime").JSX.Element;
+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;
 export declare namespace NeoButton {
     var displayName: string;
 }

package/dist/Tree/Tree.d.ts

@@ -1,26 +1,42 @@
-import type { ReactNode } from 'react';
+import { type TreeItemProps } from '@mui/x-tree-view/TreeItem';
+import { type RichTreeViewProProps } from '@mui/x-tree-view-pro/RichTreeViewPro';
+import { type ReactNode } from 'react';
 /**
- * Props for the NeoTree component
+ * Extended item data that NeoTreeItem can read from the items array.
+ * Consumers pass these via the `items` prop on NeoTreeView.
  */
-export interface NeoTreeProps {
-    /**
-     * The content to display inside the component
-     */
-    children?: ReactNode;
+export interface NeoTreeItemData {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    checkbox?: ReactNode;
+    secondaryLabel?: ReactNode;
+    endAction?: ReactNode;
+    statusIcon?: ReactNode;
+    children?: NeoTreeItemData[];
 }
+export type NeoTreeItemProps = TreeItemProps;
 /**
- * NeoTree - TODO: Add component description
+ * NeoTreeItem - Styled tree item row with optional icon, checkbox,
+ * secondaryLabel, endAction, and statusIcon slots.
+ *
+ * Slot data is read from the item model (passed via `items` on NeoTreeView).
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
+ */
+export declare const NeoTreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export interface NeoTreeViewProps extends Omit<RichTreeViewProProps<NeoTreeItemData, false>, 'slots'> {
+    slots?: RichTreeViewProProps<NeoTreeItemData, false>['slots'];
+}
+/**
+ * NeoTreeView - Styled tree container wrapping MUI RichTreeViewPro.
  *
- * Figma Props Mapping:
- * - TODO: Document Figma property mappings
- * - FigmaProp → reactProp
+ * Provides neo-design token styling, default expand/collapse icons,
+ * and NeoTreeItem as the default item slot.
  *
- * Design Tokens Used:
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
  */
-export declare const NeoTree: {
-    ({ children, ...props }: NeoTreeProps): import("react/jsx-runtime").JSX.Element;
+export declare const NeoTreeView: {
+    ({ slots, ...props }: NeoTreeViewProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/index.d.ts

@@ -40,6 +40,8 @@ import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePickerProps } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { DateRange } from '@mui/x-date-pickers-pro/models';
+import { TreeItemProps } from '@mui/x-tree-view/TreeItem';
+import { RichTreeViewProProps } from '@mui/x-tree-view-pro/RichTreeViewPro';
 
 interface NeoFooterProps {
     /**
@@ -489,9 +491,10 @@ declare module '@mui/material/ButtonBase' {
         destructive: true;
         link: true;
         linkColor: true;
+        tertiary: true;
     }
 }
-type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor' | 'tertiary';
 type ButtonSize = 'small' | 'medium';
 type NeoButtonOwnProps = {
     /**
@@ -523,8 +526,16 @@ type NeoButtonOwnProps = {
      * URL to link to. When provided, the button renders as a link element.
      */
     href?: string;
+    /**
+     * Icon placed before the button label
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon placed after the button label
+     */
+    endIcon?: ReactNode;
 };
-type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoButtonOwnProps & Omit<React.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
+type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoButtonOwnProps & Omit<React__default.ComponentPropsWithoutRef<C>, keyof NeoButtonOwnProps> & {
     component?: C;
 };
 /**
@@ -533,7 +544,7 @@ type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoBut
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
  *
  * Figma Props Mapping:
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
  * - State=Disabled → disabled prop
  * - State=Loading → loading prop
@@ -541,7 +552,7 @@ type NeoButtonProps<C extends ElementType = typeof ButtonBase__default> = NeoBut
  * - State=Pressed → CSS :active
  * - State=Focused → CSS :focus-visible
  */
-declare function NeoButton<C extends ElementType = typeof ButtonBase__default>({ variant, size, loading, children, disabled, ...rest }: NeoButtonProps<C>): react_jsx_runtime.JSX.Element;
+declare function NeoButton<C extends ElementType = typeof ButtonBase__default>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: NeoButtonProps<C>): react_jsx_runtime.JSX.Element;
 declare namespace NeoButton {
     var displayName: string;
 }
@@ -1650,6 +1661,41 @@ declare const NeoModalFooter: {
     displayName: string;
 };
 
+interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
+    /**
+     * Icon element to display
+     */
+    icon?: ReactNode;
+    /**
+     * Text label below the icon
+     */
+    label?: string;
+    /**
+     * Whether the item is selected/active
+     * @figma State (Selected)
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Optional tag badge content (e.g., count)
+     * @figma Tag
+     */
+    tag?: string;
+    /**
+     * Additional content
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
+ */
+declare const NeoNavigationItem: {
+    ({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 /**
  * Breadcrumb item configuration
  */
@@ -2808,6 +2854,46 @@ declare const NeoDatePicker: {
     displayName: string;
 };
 
+/**
+ * Extended item data that NeoTreeItem can read from the items array.
+ * Consumers pass these via the `items` prop on NeoTreeView.
+ */
+interface NeoTreeItemData {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    checkbox?: ReactNode;
+    secondaryLabel?: ReactNode;
+    endAction?: ReactNode;
+    statusIcon?: ReactNode;
+    children?: NeoTreeItemData[];
+}
+type NeoTreeItemProps = TreeItemProps;
+/**
+ * NeoTreeItem - Styled tree item row with optional icon, checkbox,
+ * secondaryLabel, endAction, and statusIcon slots.
+ *
+ * Slot data is read from the item model (passed via `items` on NeoTreeView).
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
+ */
+declare const NeoTreeItem: React$1.ForwardRefExoticComponent<TreeItemProps & React$1.RefAttributes<HTMLLIElement>>;
+interface NeoTreeViewProps extends Omit<RichTreeViewProProps<NeoTreeItemData, false>, 'slots'> {
+    slots?: RichTreeViewProProps<NeoTreeItemData, false>['slots'];
+}
+/**
+ * NeoTreeView - Styled tree container wrapping MUI RichTreeViewPro.
+ *
+ * Provides neo-design token styling, default expand/collapse icons,
+ * and NeoTreeItem as the default item slot.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
+ */
+declare const NeoTreeView: {
+    ({ slots, ...props }: NeoTreeViewProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 /**
  * @moderneinc/neo-styled-components
  *
@@ -2827,5 +2913,5 @@ declare module '@mui/x-data-grid-pro' {
 
 declare const version: string
 
-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 };
-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 };
+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 };
+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 };

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import Chip, { chipClasses } from '@mui/material/Chip';
 import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-import { forwardRef, createElement, useState, useMemo, useRef, useEffect } from 'react';
+import React, { forwardRef, createElement, useState, useMemo, useRef, useEffect } from 'react';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
@@ -57,6 +57,9 @@ import Skeleton from '@mui/material/Skeleton';
 import MuiTab, { tabClasses } from '@mui/material/Tab';
 import MuiTabs, { tabsClasses } from '@mui/material/Tabs';
 import Switch, { switchClasses } from '@mui/material/Switch';
+import { useTreeItemModel } from '@mui/x-tree-view/hooks';
+import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
+import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
 import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
 import ToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 
@@ -1290,6 +1293,28 @@ const StyledButtonBase$1 = styled(ButtonBase, {
                     },
                 }),
         },
+        tertiary: {
+            backgroundColor: 'transparent',
+            color: semanticColors.typography.input.default,
+            border: 'none',
+            padding: 0,
+            lineHeight: 1,
+            '&:hover': {
+                backgroundColor: 'transparent',
+                color: semanticColors.buttons.tertiary.hover,
+            },
+            '&:active': {
+                color: semanticColors.buttons.tertiary.pressed,
+            },
+            ...(loading
+                ? {}
+                : {
+                    [`&.${buttonBaseClasses.disabled}`]: {
+                        backgroundColor: 'transparent',
+                        color: semanticColors.buttons.tertiary.disabled,
+                    },
+                }),
+        },
     };
     return {
         ...baseStyles,
@@ -1304,6 +1329,7 @@ const LoadingSpinner = styled(CircularProgress)(({ theme, $variant }) => {
         destructive: theme.palette.common.white,
         link: semanticColors.buttons.primary.default,
         linkColor: semanticColors.buttons.primary.default,
+        tertiary: semanticColors.buttons.tertiary.default,
     };
     return {
         color: spinnerColors[$variant],
@@ -1315,7 +1341,7 @@ const LoadingSpinner = styled(CircularProgress)(({ theme, $variant }) => {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
  *
  * Figma Props Mapping:
- * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color|Tertiary) → variant prop
  * - Size (Small|Medium) → size prop
  * - State=Disabled → disabled prop
  * - State=Loading → loading prop
@@ -1323,8 +1349,8 @@ const LoadingSpinner = styled(CircularProgress)(({ theme, $variant }) => {
  * - State=Pressed → CSS :active
  * - State=Focused → CSS :focus-visible
  */
-function NeoButton({ variant = 'primary', size = 'medium', loading = false, children, disabled, ...rest }) {
-    return (jsx(StyledButtonBase$1, { variant: variant, size: size, loading: loading, disabled: disabled || loading, ...rest, children: loading ? jsx(LoadingSpinner, { "$variant": variant, size: size === 'small' ? 16 : 20 }) : children }));
+function NeoButton({ variant = 'primary', size = 'medium', loading = false, children, disabled, startIcon, endIcon, ...rest }) {
+    return (jsx(StyledButtonBase$1, { variant: variant, size: size, loading: loading, disabled: disabled || loading, ...rest, children: loading ? (jsx(LoadingSpinner, { "$variant": variant, size: size === 'small' ? 16 : 20 })) : (jsxs(React.Fragment, { children: [startIcon, children, endIcon] })) }));
 }
 NeoButton.displayName = 'NeoButton';
 
@@ -6511,6 +6537,140 @@ const NeoTooltip = ({ variant = 'light', title, description, children, arrow = f
 };
 NeoTooltip.displayName = 'NeoTooltip';
 
+/**
+ * Custom label component that reads extra slot data from the item model.
+ * Used as `slots.label` on the TreeItem.
+ */
+const NeoTreeItemLabel = (props) => {
+    const { children, itemId, ...rest } = props;
+    const item = useTreeItemModel(itemId);
+    return (jsxs(ItemContentRow, { ...rest, children: [item?.checkbox, (item?.statusIcon ?? item?.icon) && jsx(ItemIcon, { children: item?.statusIcon ?? item?.icon }), jsx(ItemLabel, { children: children }), item?.secondaryLabel && jsx(ItemSecondaryLabel, { children: item.secondaryLabel }), item?.endAction && jsx(ItemEndAction, { children: item.endAction })] }));
+};
+/**
+ * NeoTreeItem - Styled tree item row with optional icon, checkbox,
+ * secondaryLabel, endAction, and statusIcon slots.
+ *
+ * Slot data is read from the item model (passed via `items` on NeoTreeView).
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
+ */
+const NeoTreeItem = forwardRef(function NeoTreeItem({ slots, slotProps, ...props }, ref) {
+    return (jsx(TreeItem, { ref: ref, slots: { label: NeoTreeItemLabel, ...slots }, 
+        // itemId is not in MUI's label slot type but NeoTreeItemLabel needs it for useTreeItemModel
+        slotProps: {
+            ...slotProps,
+            label: { ...slotProps?.label, itemId: props.itemId },
+        }, ...props }));
+});
+const ItemContentRow = styled('div')({
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.spacing_1_2,
+    flex: 1,
+    minWidth: 0,
+});
+const ItemIcon = styled('span')({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 16,
+    height: 16,
+    flexShrink: 0,
+    color: semanticColors.icons.default,
+    '& svg': {
+        width: 16,
+        height: 16,
+    },
+});
+const ItemLabel = styled('span')({
+    flex: 1,
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
+const ItemSecondaryLabel = styled('span')({
+    flexShrink: 0,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.regular,
+    fontFamily: typography.fontFamily.body,
+    color: semanticColors.typography.link.primary,
+});
+const ItemEndAction = styled('span')({
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    color: semanticColors.icons.utility,
+    '& svg': {
+        width: 16,
+        height: 16,
+    },
+});
+/**
+ * NeoTreeView - Styled tree container wrapping MUI RichTreeViewPro.
+ *
+ * Provides neo-design token styling, default expand/collapse icons,
+ * and NeoTreeItem as the default item slot.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4190-30493
+ */
+const NeoTreeView = ({ slots, ...props }) => {
+    return (jsx(StyledTreeView, { slots: {
+            item: NeoTreeItem,
+            collapseIcon: CollapseIcon,
+            expandIcon: ExpandIcon,
+            ...slots,
+        }, itemChildrenIndentation: spacing.spacing_2_1_2, ...props }));
+};
+NeoTreeView.displayName = 'NeoTreeView';
+const CollapseIcon = () => jsx(ChevronDown, { size: 16 });
+const ExpandIcon = () => jsx(ChevronRight, { size: 16 });
+const StyledTreeView = styled(RichTreeViewPro)({
+    [`& .${treeItemClasses.content}`]: {
+        height: 28,
+        gap: spacing.spacing_1_2,
+        paddingLeft: spacing.spacing_1,
+        paddingRight: spacing.spacing_1,
+        borderRadius: 0,
+    },
+    [`& .${treeItemClasses.content}:hover`]: {
+        backgroundColor: semanticColors.surfaces.listHover,
+    },
+    [`& .${treeItemClasses.content}.Mui-focused`]: {
+        boxShadow: `inset 0 0 0 2px ${semanticColors.buttons.primary.focus}`,
+        backgroundColor: 'transparent',
+    },
+    [`& .${treeItemClasses.content}.Mui-selected`]: {
+        backgroundColor: semanticColors.surfaces.listHover,
+    },
+    [`& .${treeItemClasses.content}.Mui-selected:hover`]: {
+        backgroundColor: semanticColors.surfaces.listHover,
+    },
+    [`& .${treeItemClasses.content}.Mui-selected.Mui-focused`]: {
+        backgroundColor: semanticColors.surfaces.listHover,
+        boxShadow: `inset 0 0 0 2px ${semanticColors.buttons.primary.focus}`,
+    },
+    [`& .${treeItemClasses.label}`]: {
+        fontSize: typography.fontSize.xs,
+        fontWeight: typography.fontWeight.regular,
+        fontFamily: typography.fontFamily.body,
+        color: semanticColors.typography.body,
+        padding: 0,
+    },
+    [`& .${treeItemClasses.iconContainer}`]: {
+        width: 16,
+        color: semanticColors.icons.default,
+        '& svg': {
+            width: 16,
+            height: 16,
+        },
+    },
+    [`& .${treeItemClasses.groupTransition}`]: {
+        borderLeft: `1px solid ${semanticColors.border.primary}`,
+        marginLeft: spacing.spacing_1_1_4,
+    },
+});
+
 // Figma-exact border radius for toggle buttons — no matching design token
 const TOGGLE_BUTTON_BORDER_RADIUS = 14;
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
@@ -6580,5 +6740,5 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 
 const version = '0.0.0-development';
 
-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, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, 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, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
+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, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, 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, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map