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

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/MarketplaceCard/MarketplaceCard.d.ts

@@ -23,13 +23,13 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 't
     /**
      * Whether the card is in selected/active state
      * @default false
-     * @figma Property 1 (Active)
+     * @figma State (Active)
      */
     selected?: boolean;
     /**
      * Whether the card is disabled
      * @default false
-     * @figma Property 1 (Disabled)
+     * @figma State (Disabled)
      */
     disabled?: boolean;
     /**
@@ -59,10 +59,11 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 't
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
  *
  * Figma Props Mapping:
- * - Property 1="Active" → selected={true}
- * - Property 1="Disabled" → disabled={true}
- * - Property 1="Focused" → CSS :focus-visible state (not a prop)
- * - Property 1="Default" → Base state (no props)
+ * - State="Active" → selected={true}
+ * - State="Disabled" → disabled={true}
+ * - State="Focused" → CSS :focus-visible state (not a prop)
+ * - State="Hover" → CSS :hover state (not a prop)
+ * - State="Default" → Base state (no props)
  *
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background

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
  */
@@ -2614,13 +2660,13 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
     /**
      * Whether the card is in selected/active state
      * @default false
-     * @figma Property 1 (Active)
+     * @figma State (Active)
      */
     selected?: boolean;
     /**
      * Whether the card is disabled
      * @default false
-     * @figma Property 1 (Disabled)
+     * @figma State (Disabled)
      */
     disabled?: boolean;
     /**
@@ -2650,10 +2696,11 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
  *
  * Figma Props Mapping:
- * - Property 1="Active" → selected={true}
- * - Property 1="Disabled" → disabled={true}
- * - Property 1="Focused" → CSS :focus-visible state (not a prop)
- * - Property 1="Default" → Base state (no props)
+ * - State="Active" → selected={true}
+ * - State="Disabled" → disabled={true}
+ * - State="Focused" → CSS :focus-visible state (not a prop)
+ * - State="Hover" → CSS :hover state (not a prop)
+ * - State="Default" → Base state (no props)
  *
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
@@ -2808,6 +2855,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 +2914,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';
 
@@ -3562,7 +3588,7 @@ const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...prop
 };
 NeoDot.displayName = 'NeoDot';
 
-const focusRing$1 = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
+const focusRing$2 = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
 const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
 const StyledChip = styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
@@ -3599,7 +3625,7 @@ const StyledChip = styled(Chip, {
         backgroundColor: semanticColors.buttons.secondary.hoverBackground,
     },
     [`&.${chipClasses.focusVisible}`]: {
-        boxShadow: focusRing$1,
+        boxShadow: focusRing$2,
         backgroundColor: selected
             ? semanticColors.buttons.secondary.pressedBackground
             : semanticColors.surfaces.white,
@@ -4681,10 +4707,11 @@ const Description$1 = styled('p')(({ theme }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
  *
  * Figma Props Mapping:
- * - Property 1="Active" → selected={true}
- * - Property 1="Disabled" → disabled={true}
- * - Property 1="Focused" → CSS :focus-visible state (not a prop)
- * - Property 1="Default" → Base state (no props)
+ * - State="Active" → selected={true}
+ * - State="Disabled" → disabled={true}
+ * - State="Focused" → CSS :focus-visible state (not a prop)
+ * - State="Hover" → CSS :hover state (not a prop)
+ * - State="Default" → Base state (no props)
  *
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
@@ -5070,6 +5097,7 @@ const NeoModalFooter = ({ leadingContent, children }) => {
 NeoModalFooter.displayName = 'NeoModalFooter';
 
 const customProps = ['selected'];
+const focusRing$1 = `0 0 0 ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, 0 0 0 ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
 const StyledRoot = styled(ButtonBase, {
     shouldForwardProp: prop => !customProps.includes(prop),
 })(({ selected }) => ({
@@ -5087,25 +5115,43 @@ const StyledRoot = styled(ButtonBase, {
     cursor: 'pointer',
     textDecoration: 'none',
     '&:hover .neo-nav-icon-padding': {
-        backgroundColor: semanticColors.buttons.secondary.hoverBackground, // #F2F3FF
+        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+        borderColor: colors.digitalBlue[100],
     },
     '&:hover .neo-nav-label': {
-        color: semanticColors.buttons.primary.hover, // #1E2EC2
+        color: semanticColors.buttons.primary.hover,
+    },
+    '&:focus-visible': {
+        outline: 'none',
+        boxShadow: focusRing$1,
+    },
+    '&:focus-visible .neo-nav-icon-padding': {
+        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+        borderColor: colors.digitalBlue[100],
+    },
+    '&:focus-visible .neo-nav-label': {
+        color: semanticColors.buttons.primary.hover,
     },
     ...(selected && {
         '& .neo-nav-icon-padding': {
-            backgroundColor: `${colors.digitalBlue[100]}BF`, // rgba(220,224,255,0.75)
+            backgroundColor: colors.digitalBlue[100],
         },
         '& .neo-nav-label': {
-            color: semanticColors.buttons.primary.pressed, // #131E7A
+            color: semanticColors.buttons.primary.pressed,
             fontWeight: typography.fontWeight.semiBold,
         },
         '&:hover .neo-nav-icon-padding': {
-            backgroundColor: `${colors.digitalBlue[100]}BF`,
+            backgroundColor: colors.digitalBlue[100],
         },
         '&:hover .neo-nav-label': {
             color: semanticColors.buttons.primary.pressed,
         },
+        '&:focus-visible .neo-nav-icon-padding': {
+            backgroundColor: colors.digitalBlue[100],
+        },
+        '&:focus-visible .neo-nav-label': {
+            color: semanticColors.buttons.primary.pressed,
+        },
     }),
 }));
 const IconPadding = styled('span')({
@@ -5113,13 +5159,14 @@ const IconPadding = styled('span')({
     alignItems: 'center',
     padding: spacing.spacing_1, // 8px
     borderRadius: spacing.spacing_1, // 8px
-    transition: 'background-color 150ms',
+    border: '1px solid transparent',
+    transition: 'background-color 150ms, border-color 150ms',
 });
 const Label$2 = styled('span')(({ theme }) => ({
     fontFamily: typography.fontFamily.body,
     fontWeight: typography.fontWeight.regular,
-    fontSize: theme.typography.pxToRem(10),
-    lineHeight: 1.2,
+    fontSize: theme.typography.pxToRem(11),
+    lineHeight: 1,
     textAlign: 'center',
     color: semanticColors.typography.navigation.default, // #1F2937
     width: '100%',
@@ -6511,6 +6558,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 +6761,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