@wallarm-org/design-system 0.71.4 → 0.72.0

package/dist/components/Tree/TreeItemContent.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
+import { Collapse } from "../../utils/Collapse.js";
 import { useTreeItemContext } from "./TreeItemContext.js";
 const TreeItemContent = ({ ref, children, className, ...props })=>{
     const { collapsible, open } = useTreeItemContext();
@@ -10,16 +10,13 @@ const TreeItemContent = ({ ref, children, className, ...props })=>{
         ...props,
         children: children
     });
-    return /*#__PURE__*/ jsx("div", {
+    return /*#__PURE__*/ jsx(Collapse, {
         ref: ref,
+        open: open,
         "data-slot": "tree-item-content",
-        "data-state": open ? 'open' : 'closed',
-        className: cn('grid transition-[grid-template-rows] duration-[220ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none', open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]', className),
+        className: className,
         ...props,
-        children: /*#__PURE__*/ jsx("div", {
-            className: "overflow-hidden",
-            children: children
-        })
+        children: children
     });
 };
 TreeItemContent.displayName = 'TreeItemContent';

package/dist/components/TreeView/TreeView.d.ts

@@ -0,0 +1,19 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+/** Horizontal indentation added per nesting level, in pixels. */
+export declare const TREE_VIEW_INDENT_STEP = 16;
+export interface TreeViewProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    children?: ReactNode;
+    /** Allow rows to be selected by clicking. */
+    selectable?: boolean;
+    /** Allow more than one row to be selected at a time. */
+    multiSelect?: boolean;
+    /** Controlled selected item ids. */
+    selectedIds?: string[];
+    /** Uncontrolled initial selected item ids. */
+    defaultSelectedIds?: string[];
+    /** Called whenever the selection changes. */
+    onSelectionChange?: (ids: string[]) => void;
+}
+export declare const TreeView: FC<TreeViewProps>;

package/dist/components/TreeView/TreeView.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useCallback, useMemo, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { TestIdProvider } from "../../utils/testId.js";
+import { TreeDepthProvider } from "../../utils/treeDepth.js";
+import { Text } from "../Text/index.js";
+import { TreeViewProvider } from "./TreeViewContext.js";
+const TREE_VIEW_INDENT_STEP = 16;
+const TreeView = ({ ref, children, selectable = false, multiSelect = false, selectedIds: controlledSelectedIds, defaultSelectedIds, onSelectionChange, 'data-testid': testId, className, ...props })=>{
+    const [internalSelected, setInternalSelected] = useState(()=>defaultSelectedIds ?? []);
+    const isControlled = void 0 !== controlledSelectedIds;
+    const selectedList = isControlled ? controlledSelectedIds : internalSelected;
+    const selectedIds = useMemo(()=>new Set(selectedList), [
+        selectedList
+    ]);
+    const toggleSelect = useCallback((id)=>{
+        const isSelected = selectedIds.has(id);
+        let next;
+        next = multiSelect ? isSelected ? selectedList.filter((v)=>v !== id) : [
+            ...selectedList,
+            id
+        ] : isSelected ? [] : [
+            id
+        ];
+        if (!isControlled) setInternalSelected(next);
+        onSelectionChange?.(next);
+    }, [
+        selectedIds,
+        selectedList,
+        multiSelect,
+        isControlled,
+        onSelectionChange
+    ]);
+    const contextValue = useMemo(()=>({
+            selectable,
+            multiSelect,
+            selectedIds,
+            toggleSelect
+        }), [
+        selectable,
+        multiSelect,
+        selectedIds,
+        toggleSelect
+    ]);
+    const hasItems = Children.toArray(children).some((child)=>/*#__PURE__*/ isValidElement(child) && 'TreeViewItem' === child.type.displayName);
+    return /*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsx(TreeViewProvider, {
+            value: contextValue,
+            children: /*#__PURE__*/ jsx(TreeDepthProvider, {
+                value: {
+                    depth: 0,
+                    indent: TREE_VIEW_INDENT_STEP,
+                    gap: void 0
+                },
+                children: /*#__PURE__*/ jsxs("div", {
+                    ref: ref,
+                    role: "tree",
+                    "aria-multiselectable": selectable && multiSelect ? true : void 0,
+                    "data-slot": "tree-view",
+                    "data-testid": testId,
+                    className: cn('flex w-full flex-col', className),
+                    ...props,
+                    children: [
+                        children,
+                        !hasItems && /*#__PURE__*/ jsx("div", {
+                            "data-slot": "tree-view-empty",
+                            className: "flex h-32 items-center justify-center",
+                            children: /*#__PURE__*/ jsx(Text, {
+                                size: "sm",
+                                color: "secondary",
+                                children: "No results"
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+};
+TreeView.displayName = 'TreeView';
+export { TREE_VIEW_INDENT_STEP, TreeView };

package/dist/components/TreeView/TreeViewContext.d.ts

@@ -0,0 +1,12 @@
+export interface TreeViewContextValue {
+    /** Whether rows can be selected by clicking. */
+    selectable: boolean;
+    /** Allow multiple rows to be selected at once. */
+    multiSelect: boolean;
+    /** Currently selected item ids. */
+    selectedIds: Set<string>;
+    /** Toggle selection for a given item id. */
+    toggleSelect: (id: string) => void;
+}
+export declare const TreeViewProvider: import("react").Provider<TreeViewContextValue | null>;
+export declare function useTreeViewContext(): TreeViewContextValue;

package/dist/components/TreeView/TreeViewContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const TreeViewContext = createContext(null);
+const TreeViewProvider = TreeViewContext.Provider;
+function useTreeViewContext() {
+    const ctx = useContext(TreeViewContext);
+    if (null === ctx) throw new Error('TreeView sub-components must be used within a <TreeView>');
+    return ctx;
+}
+export { TreeViewProvider, useTreeViewContext };

package/dist/components/TreeView/TreeViewItem.d.ts

@@ -0,0 +1,24 @@
+import { type FC, type HTMLAttributes, type ReactNode, type Ref } from 'react';
+export interface TreeViewItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    ref?: Ref<HTMLDivElement>;
+    /** Stable id used for selection. Required for a row to be selectable. */
+    id?: string;
+    /**
+     * Row content and nested items. Compose the row freely (icon, badge, text);
+     * any nested `<TreeViewItem>` children are rendered as the collapsible subtree,
+     * which also marks this item as an expandable branch.
+     */
+    children?: ReactNode;
+    /** Force branch behaviour (show a toggle) even without nested items. */
+    expandable?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Visually mark the row as selected (defaults to the tree's selection state). */
+    selected?: boolean;
+    /** Dim the row and disable all interaction (toggle, selection, checkbox). */
+    disabled?: boolean;
+}
+export declare const TreeViewItem: FC<TreeViewItemProps>;

package/dist/components/TreeView/TreeViewItem.js

@@ -0,0 +1,168 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useCallback, useState } from "react";
+import { SquareMinus, SquarePlus } from "../../icons/index.js";
+import { Collapse } from "../../utils/Collapse.js";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { TreeDepthProvider, useTreeDepth } from "../../utils/treeDepth.js";
+import { treeViewRowVariants } from "./classes.js";
+import { TREE_VIEW_INDENT_STEP } from "./TreeView.js";
+import { useTreeViewContext } from "./TreeViewContext.js";
+const RAIL_BASE_LEFT = 14;
+const TreeViewItem = ({ ref, id, children, expandable, open: controlledOpen, defaultOpen = false, onOpenChange, selected: selectedProp, disabled = false, className, onClick, ...props })=>{
+    const depth = useTreeDepth();
+    const testId = useTestId('item');
+    const { selectable, selectedIds, toggleSelect } = useTreeViewContext();
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = void 0 !== controlledOpen;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const nestedItems = [];
+    const content = [];
+    let labelIndex = 0;
+    for (const child of Children.toArray(children))if (/*#__PURE__*/ isValidElement(child) && child.type === TreeViewItem) nestedItems.push(child);
+    else if ('string' == typeof child || 'number' == typeof child) {
+        labelIndex += 1;
+        content.push(/*#__PURE__*/ jsx("span", {
+            className: "min-w-0 flex-1 truncate",
+            children: child
+        }, `label-${labelIndex}`));
+    } else content.push(child);
+    const isBranch = expandable || nestedItems.length > 0;
+    const isSelected = selectedProp ?? (void 0 !== id ? selectedIds.has(id) : false);
+    const isInteractive = !disabled && (selectable ? void 0 !== id : isBranch);
+    const setOpen = useCallback((next)=>{
+        if (!isControlled) setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [
+        isControlled,
+        onOpenChange
+    ]);
+    const activate = useCallback(()=>{
+        if (selectable && void 0 !== id) toggleSelect(id);
+        else if (isBranch) setOpen(!isOpen);
+    }, [
+        selectable,
+        id,
+        toggleSelect,
+        isBranch,
+        isOpen,
+        setOpen
+    ]);
+    const handleToggle = useCallback((event)=>{
+        event.stopPropagation();
+        setOpen(!isOpen);
+    }, [
+        isOpen,
+        setOpen
+    ]);
+    const handleRowClick = useCallback((event)=>{
+        onClick?.(event);
+        activate();
+    }, [
+        onClick,
+        activate
+    ]);
+    const handleRowKeyDown = useCallback((event)=>{
+        if ('Enter' === event.key || ' ' === event.key) {
+            event.preventDefault();
+            event.stopPropagation();
+            activate();
+        } else if (isBranch && 'ArrowRight' === event.key && !isOpen) {
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(true);
+        } else if (isBranch && 'ArrowLeft' === event.key && isOpen) {
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(false);
+        }
+    }, [
+        activate,
+        isBranch,
+        isOpen,
+        setOpen
+    ]);
+    const paddingLeft = depth * TREE_VIEW_INDENT_STEP;
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        role: "treeitem",
+        "aria-expanded": isBranch ? isOpen : void 0,
+        "aria-selected": selectable && void 0 !== id && !disabled ? isSelected : void 0,
+        "aria-disabled": disabled || void 0,
+        tabIndex: isInteractive ? 0 : -1,
+        onKeyDown: isInteractive ? handleRowKeyDown : void 0,
+        "data-slot": "tree-view-item",
+        "data-testid": testId,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                "data-slot": "tree-view-row",
+                "data-selected": isSelected || void 0,
+                "data-disabled": disabled || void 0,
+                "data-state": isBranch ? isOpen ? 'open' : 'closed' : void 0,
+                className: cn(treeViewRowVariants({
+                    interactive: isInteractive,
+                    selected: isSelected,
+                    disabled
+                }), className),
+                onClick: isInteractive ? handleRowClick : onClick,
+                children: [
+                    Array.from({
+                        length: depth
+                    }, (_, k)=>RAIL_BASE_LEFT + k * TREE_VIEW_INDENT_STEP).map((left)=>/*#__PURE__*/ jsx("span", {
+                            "aria-hidden": true,
+                            "data-slot": "tree-view-rail",
+                            className: "pointer-events-none absolute inset-y-0 w-px bg-border-primary-light",
+                            style: {
+                                left
+                            }
+                        }, left)),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex h-24 min-w-0 flex-1 items-center gap-4 text-xs text-text-primary [&>svg]:icon-xs [&>svg]:shrink-0 [&>svg]:text-text-secondary",
+                        style: {
+                            paddingLeft
+                        },
+                        "data-slot": "tree-view-left",
+                        children: [
+                            isBranch ? /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                "data-slot": "tree-view-toggle",
+                                "aria-label": isOpen ? 'Collapse' : 'Expand',
+                                disabled: disabled,
+                                className: "flex shrink-0 cursor-pointer items-center justify-center text-text-secondary disabled:cursor-not-allowed",
+                                onClick: handleToggle,
+                                tabIndex: -1,
+                                children: isOpen ? /*#__PURE__*/ jsx(SquareMinus, {
+                                    size: "xs"
+                                }) : /*#__PURE__*/ jsx(SquarePlus, {
+                                    size: "xs"
+                                })
+                            }) : /*#__PURE__*/ jsx("span", {
+                                "aria-hidden": true,
+                                className: "size-12 shrink-0",
+                                "data-slot": "tree-view-toggle-spacer"
+                            }),
+                            content
+                        ]
+                    })
+                ]
+            }),
+            isBranch && /*#__PURE__*/ jsx(Collapse, {
+                open: isOpen,
+                inertWhenClosed: true,
+                role: "group",
+                "data-slot": "tree-view-group",
+                children: /*#__PURE__*/ jsx(TreeDepthProvider, {
+                    value: {
+                        depth: depth + 1,
+                        indent: TREE_VIEW_INDENT_STEP,
+                        gap: void 0
+                    },
+                    children: nestedItems
+                })
+            })
+        ]
+    });
+};
+TreeViewItem.displayName = 'TreeViewItem';
+export { TreeViewItem };

package/dist/components/TreeView/classes.d.ts

@@ -0,0 +1,5 @@
+export declare const treeViewRowVariants: (props?: ({
+    interactive?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/TreeView/classes.js

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+const treeViewRowVariants = cva('group/row relative flex min-h-24 w-full items-center gap-4 px-8 py-2 text-left', {
+    variants: {
+        interactive: {
+            true: 'cursor-pointer active:bg-states-primary-pressed',
+            false: ''
+        },
+        selected: {
+            true: 'bg-states-primary-default-alt',
+            false: ''
+        },
+        disabled: {
+            true: 'opacity-50 cursor-not-allowed',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        {
+            interactive: true,
+            selected: false,
+            className: '[&:hover:not(:active)]:bg-states-primary-hover'
+        }
+    ],
+    defaultVariants: {
+        interactive: false,
+        selected: false,
+        disabled: false
+    }
+});
+export { treeViewRowVariants };

package/dist/components/TreeView/index.d.ts

@@ -0,0 +1,9 @@
+import { TreeView as TreeViewRoot } from './TreeView';
+import { TreeViewItem } from './TreeViewItem';
+type TreeViewComponent = typeof TreeViewRoot & {
+    Item: typeof TreeViewItem;
+};
+declare const TreeView: TreeViewComponent;
+export { TreeView };
+export { TREE_VIEW_INDENT_STEP, type TreeViewProps } from './TreeView';
+export { TreeViewItem, type TreeViewItemProps } from './TreeViewItem';

package/dist/components/TreeView/index.js

@@ -0,0 +1,5 @@
+import { TREE_VIEW_INDENT_STEP, TreeView } from "./TreeView.js";
+import { TreeViewItem } from "./TreeViewItem.js";
+const TreeView_TreeView = TreeView;
+TreeView_TreeView.Item = TreeViewItem;
+export { TREE_VIEW_INDENT_STEP, TreeView_TreeView as TreeView, TreeViewItem };

package/dist/index.d.ts

@@ -4,10 +4,10 @@
  * barrel gives consumers a single import surface and lets us swap the
  * underlying library later without breaking every caller.
  *
- * Note: `DateValue` is intentionally not re-exported here to avoid colliding
- * with `Calendar`'s own `DateValue` type. Consumers can type state with the
- * concrete classes (e.g. `useState<CalendarDate | null>`) — TypeScript
- * narrows the union automatically.
+ * Note: the `DateValue` union re-exported below comes from `Calendar`
+ * (`./components/Calendar`); the concrete classes (`CalendarDate`,
+ * `CalendarDateTime`, `ZonedDateTime`, `Time`) come from
+ * `@internationalized/date`.
  */
 export { usePagination, usePaginationContext } from '@ark-ui/react/pagination';
 export { CalendarDate, CalendarDateTime, getLocalTimeZone, parseDate, parseDateTime, parseTime, parseZonedDateTime, Time, today, ZonedDateTime, } from '@internationalized/date';
@@ -37,6 +37,7 @@ export { Flex, type FlexProps } from './components/Flex';
 export { FormatDateTime, type FormatDateTimeProps } from './components/FormatDateTime';
 export { Heading, type HeadingProps } from './components/Heading';
 export { HTTP_METHOD_COLOR, HTTP_METHODS, HttpMethod, type HttpMethodName, type HttpMethodProps, } from './components/HttpMethod';
+export { InlineEdit, type InlineEditActivationMode, type InlineEditContextValue, InlineEditControl, type InlineEditControlProps, InlineEditDate, type InlineEditDateProps, InlineEditDateTime, type InlineEditDateTimeProps, InlineEditError, type InlineEditErrorProps, InlineEditInput, type InlineEditInputProps, InlineEditNumber, type InlineEditNumberProps, InlineEditPreview, InlineEditPreviewIcon, type InlineEditPreviewIconProps, type InlineEditPreviewProps, InlineEditPreviewValue, type InlineEditPreviewValueProps, type InlineEditProps, InlineEditSelect, type InlineEditSelectProps, type InlineEditStatus, type InlineEditSubmitMode, InlineEditTextarea, type InlineEditTextareaProps, InlineEditTime, type InlineEditTimeProps, toCalendarDateValue, toReactAriaDateValue, useInlineEdit, useInlineEditSubmitMode, withMinuteGranularity, } from './components/InlineEdit';
 export { Input, type InputProps } from './components/Input';
 export { InputGroup, InputGroupAddon, InputGroupText, } from './components/InputGroup';
 export { OTPInput, type OTPInputProps } from './components/InputOTP';
@@ -60,7 +61,7 @@ export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type Respon
 export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';
-export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, } from './components/Select';
+export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, } from './components/Select';
 export { Selection, SelectionAll, type SelectionAllProps, SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, type SelectionContextValue, SelectionItem, type SelectionItemProps, type SelectionProps, useSelectionContext, } from './components/Selection';
 export { Separator, type SeparatorProps } from './components/Separator';
 export { Skeleton, type SkeletonProps } from './components/Skeleton';
@@ -82,6 +83,7 @@ export { Tooltip, TooltipContent, type TooltipProps, TooltipTrigger, } from './c
 export { TopHeader, TopHeaderActions, type TopHeaderActionsProps, TopHeaderLogo, type TopHeaderLogoProps, type TopHeaderProps, } from './components/TopHeader';
 export { type BeaconStepEffectOptions, beaconStepEffect, Tour, type TourProps, type TourStatusChangeDetails, type TourStepAction, type TourStepChangeDetails, type TourStepChangeDetailsExtended, type TourStepDetails, type TourStepEffectArgs, useTour, type WaitForStepEventOptions, waitForStepEvent, } from './components/Tour';
 export { Tree, TreeItem, TreeItemContent, type TreeItemContentProps, TreeItemHeader, type TreeItemHeaderProps, type TreeItemProps, type TreeProps, useTreeDepth, useTreeIndent, } from './components/Tree';
+export { TREE_VIEW_INDENT_STEP, TreeView, TreeViewItem, type TreeViewItemProps, type TreeViewProps, } from './components/TreeView';
 export { UtilityPage, type UtilityPageProps } from './components/UtilityPage';
 export { WallyIcon, type WallyIconProps, type WallyIconSize, type WallyIconStyle, } from './components/WallyIcon';
 export { type TestableProps, TestIdProvider, useTestId } from './utils/testId';

package/dist/index.js

@@ -26,6 +26,7 @@ import { Flex } from "./components/Flex/index.js";
 import { FormatDateTime } from "./components/FormatDateTime/index.js";
 import { Heading } from "./components/Heading/index.js";
 import { HTTP_METHODS, HTTP_METHOD_COLOR, HttpMethod } from "./components/HttpMethod/index.js";
+import { InlineEdit, InlineEditControl, InlineEditDate, InlineEditDateTime, InlineEditError, InlineEditInput, InlineEditNumber, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect, InlineEditTextarea, InlineEditTime, toCalendarDateValue, toReactAriaDateValue, useInlineEdit, useInlineEditSubmitMode, withMinuteGranularity } from "./components/InlineEdit/index.js";
 import { Input } from "./components/Input/index.js";
 import { InputGroup, InputGroupAddon, InputGroupText } from "./components/InputGroup/index.js";
 import { OTPInput } from "./components/InputOTP/index.js";
@@ -49,7 +50,7 @@ import { RESPONSE_CODE_COLOR, ResponseCode, getResponseCodeCategory } from "./co
 import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "./components/ScrollArea/index.js";
 import { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
 import { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from "./components/SegmentedTabs/index.js";
-import { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator } from "./components/Select/index.js";
+import { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection } from "./components/Select/index.js";
 import { Selection, SelectionAll, SelectionBulkBar, SelectionItem, useSelectionContext } from "./components/Selection/index.js";
 import { Separator } from "./components/Separator/index.js";
 import { Skeleton } from "./components/Skeleton/index.js";
@@ -71,7 +72,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/in
 import { TopHeader, TopHeaderActions, TopHeaderLogo } from "./components/TopHeader/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { Tree, TreeItem, TreeItemContent, TreeItemHeader, useTreeDepth, useTreeIndent } from "./components/Tree/index.js";
+import { TREE_VIEW_INDENT_STEP, TreeView, TreeViewItem } from "./components/TreeView/index.js";
 import { UtilityPage } from "./components/UtilityPage/index.js";
 import { WallyIcon } from "./components/WallyIcon/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AnimatedBackground, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateLink, EmptyStateMessage, EmptyStateTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton, NumberInput, NumericBadge, OTPInput, OverflowTooltip, OverflowTooltipContent, Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, Pagination, PaginationEllipsis, PaginationItem, PaginationList, PaginationNext, PaginationPageSize, PaginationPrevious, ParameterPath, Popover, PopoverContent, PopoverTrigger, Progress, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, Slider, SliderControl, SliderInput, SliderMarks, SliderThumb, SliderValue, SplashScreen, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableColumnMenu, TableColumnMenuHideItem, TableColumnMenuMoveLeftItem, TableColumnMenuMoveRightItem, TableColumnMenuPinItem, TableColumnMenuSortItem, TableEmptyState, TableSettingsMenu, TableSortTrigger, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, Tree, TreeItem, TreeItemContent, TreeItemHeader, UtilityPage, VStack, WallyIcon, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, pushPathname, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useLocationPathname, usePageHost, usePagination, usePaginationContext, usePaginationSizeContext, useRemoteShellContext, useSelectionContext, useTestId, useTheme, useTour, useTreeDepth, useTreeIndent, waitForStepEvent };
+export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AnimatedBackground, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustration, EmptyStateLink, EmptyStateMessage, EmptyStateTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, InlineEdit, InlineEditControl, InlineEditDate, InlineEditDateTime, InlineEditError, InlineEditInput, InlineEditNumber, InlineEditPreview, InlineEditPreviewIcon, InlineEditPreviewValue, InlineEditSelect, InlineEditTextarea, InlineEditTime, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NavRailSkeleton, NumberInput, NumericBadge, OTPInput, OverflowTooltip, OverflowTooltipContent, Page, PageActions, PageContent, PageHeader, PageHostProvider, PageTitle, Pagination, PaginationEllipsis, PaginationItem, PaginationList, PaginationNext, PaginationPageSize, PaginationPrevious, ParameterPath, Popover, PopoverContent, PopoverTrigger, Progress, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, Slider, SliderControl, SliderInput, SliderMarks, SliderThumb, SliderValue, SplashScreen, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, TREE_VIEW_INDENT_STEP, Table, TableActionBar, TableColumnMenu, TableColumnMenuHideItem, TableColumnMenuMoveLeftItem, TableColumnMenuMoveRightItem, TableColumnMenuPinItem, TableColumnMenuSortItem, TableEmptyState, TableSettingsMenu, TableSortTrigger, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, Tree, TreeItem, TreeItemContent, TreeItemHeader, TreeView, TreeViewItem, UtilityPage, VStack, WallyIcon, ZonedDateTime, beaconStepEffect, cardVariants, createListCollection, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, pushPathname, sourceLabels, toCalendarDateValue, toReactAriaDateValue, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useInlineEdit, useInlineEditSubmitMode, useLocationPathname, usePageHost, usePagination, usePaginationContext, usePaginationSizeContext, useRemoteShellContext, useSelectionContext, useTestId, useTheme, useTour, useTreeDepth, useTreeIndent, waitForStepEvent, withMinuteGranularity };