@accelint/design-system 0.3.2 → 0.4.0

package/dist/components/tree/tree.css.d.ts

@@ -0,0 +1,89 @@
+import { TreeClassNames } from './types.js';
+import '@react-types/shared';
+import 'react';
+import 'react-aria-components';
+import 'type-fest';
+import '../../types/generic.js';
+import '../../types/props.js';
+import '../../types/react-aria.js';
+import '../../types/use-tree.js';
+import '@react-stately/data';
+import '../button/types.js';
+import '../icon/types.js';
+import '../checkbox/types.js';
+import '../group/types.js';
+
+declare const treeContainers: {
+    tree: string;
+    group: string;
+    item: string;
+};
+declare const treeColorVars: {
+    bar: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    indicator: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+declare const treeSpaceVars: {
+    bar: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    description: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    empty: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+declare const treeStateVars: {
+    allowsDragging: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    allowsExpansion: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    allowsVisibility: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    showTreeLines: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const treeGroupStateVars: {
+    count: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    layout: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDropTarget: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEmpty: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const treeIndicatorStateVars: {
+    dropPosition: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDropTarget: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const treeItemStateVars: {
+    allowsDragging: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    count: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    index: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    selectionMode: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    selectionBehavior: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDragging: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDropTarget: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isExpanded: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFirstChild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isGroup: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isLastChild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isViewable: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const treeClassNames: TreeClassNames;
+
+export { treeClassNames, treeColorVars, treeContainers, treeGroupStateVars, treeIndicatorStateVars, treeItemStateVars, treeSpaceVars, treeStateVars };

package/dist/components/tree/tree.css.js

@@ -0,0 +1,15 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/tree/tree.css.ts
+var treeClassNames = { tree: { container: "tree_treeClassNames_tree_container__kbtjn31b" }, empty: "tree_treeClassNames_empty__kbtjn31c", group: "tree_treeClassNames_group__kbtjn31d", indicator: { indicator: "tree_treeClassNames_indicator_indicator__kbtjn31e" }, item: { container: "tree_treeClassNames_item_container__kbtjn31f", item: "tree_treeClassNames_item_item__kbtjn31g", bar: "tree_treeClassNames_item_bar__kbtjn31h", lines: { container: "tree_treeClassNames_item_lines_container__kbtjn31i", button: "tree_treeClassNames_item_lines_button__kbtjn31j" }, visibility: { container: "tree_treeClassNames_item_visibility_container__kbtjn31k" }, expansion: { container: "tree_treeClassNames_item_expansion_container__kbtjn31l" }, description: "tree_treeClassNames_item_description__kbtjn31m", actions: { container: "tree_treeClassNames_item_actions_container__kbtjn31n" }, selection: { checkbox: { container: "tree_treeClassNames_item_selection_checkbox_container__kbtjn31o" } }, drag: { container: "tree_treeClassNames_item_drag_container__kbtjn31p" } } };
+var treeColorVars = { bar: { background: "var(--bar-background__kbtjn33)", border: "var(--bar-border__kbtjn34)", color: "var(--bar-color__kbtjn35)" }, indicator: { background: "var(--indicator-background__kbtjn36)", border: "var(--indicator-border__kbtjn37)", color: "var(--indicator-color__kbtjn38)" } };
+var treeContainers = { tree: "tree_treeContainers_tree__kbtjn30", group: "tree_treeContainers_group__kbtjn31", item: "tree_treeContainers_item__kbtjn32" };
+var treeGroupStateVars = { count: "var(--count__kbtjn3k)", layout: "var(--layout__kbtjn3l)", isDropTarget: "var(--isDropTarget__kbtjn3m)", isEmpty: "var(--isEmpty__kbtjn3n)", isFocused: "var(--isFocused__kbtjn3o)", isFocusVisible: "var(--isFocusVisible__kbtjn3p)" };
+var treeIndicatorStateVars = { dropPosition: "var(--dropPosition__kbtjn3q)", isDropTarget: "var(--isDropTarget__kbtjn3r)" };
+var treeItemStateVars = { allowsDragging: "var(--allowsDragging__kbtjn3s)", count: "var(--count__kbtjn3t)", index: "var(--index__kbtjn3u)", selectionMode: "var(--selectionMode__kbtjn3v)", selectionBehavior: "var(--selectionBehavior__kbtjn3w)", isDisabled: "var(--isDisabled__kbtjn3x)", isDragging: "var(--isDragging__kbtjn3y)", isDropTarget: "var(--isDropTarget__kbtjn3z)", isExpanded: "var(--isExpanded__kbtjn310)", isFirstChild: "var(--isFirstChild__kbtjn311)", isFocused: "var(--isFocused__kbtjn312)", isFocusVisible: "var(--isFocusVisible__kbtjn313)", isGroup: "var(--isGroup__kbtjn314)", isHovered: "var(--isHovered__kbtjn315)", isLastChild: "var(--isLastChild__kbtjn316)", isPressed: "var(--isPressed__kbtjn317)", isSelected: "var(--isSelected__kbtjn318)", isViewable: "var(--isViewable__kbtjn319)", isVisible: "var(--isVisible__kbtjn31a)" };
+var treeSpaceVars = { bar: { x: "var(--bar-x__kbtjn39)", y: "var(--bar-y__kbtjn3a)" }, description: { x: "var(--description-x__kbtjn3b)", y: "var(--description-y__kbtjn3c)" }, empty: { x: "var(--empty-x__kbtjn3d)", y: "var(--empty-y__kbtjn3e)" } };
+var treeStateVars = { allowsDragging: "var(--allowsDragging__kbtjn3f)", allowsExpansion: "var(--allowsExpansion__kbtjn3g)", allowsVisibility: "var(--allowsVisibility__kbtjn3h)", showTreeLines: "var(--showTreeLines__kbtjn3i)", size: "var(--size__kbtjn3j)" };
+
+export { treeClassNames, treeColorVars, treeContainers, treeGroupStateVars, treeIndicatorStateVars, treeItemStateVars, treeSpaceVars, treeStateVars };
+//# sourceMappingURL=tree.css.js.map
+//# sourceMappingURL=tree.css.js.map

package/dist/components/tree/tree.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tree/tree.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,cAAiB,GAAA,EAAC,IAAK,EAAA,EAAC,SAAU,EAAA,8CAAA,EAAgD,EAAA,KAAA,EAAM,qCAAsC,EAAA,KAAA,EAAM,qCAAsC,EAAA,SAAA,EAAU,EAAC,SAAA,EAAU,mDAAmD,EAAA,EAAE,IAAK,EAAA,EAAC,SAAU,EAAA,8CAAA,EAA+C,IAAK,EAAA,yCAAA,EAA0C,GAAI,EAAA,wCAAA,EAAyC,KAAM,EAAA,EAAC,SAAU,EAAA,oDAAA,EAAqD,MAAO,EAAA,iDAAA,EAAmD,EAAA,UAAA,EAAW,EAAC,SAAA,EAAU,yDAAyD,EAAA,EAAE,SAAU,EAAA,EAAC,SAAU,EAAA,wDAAA,EAA0D,EAAA,WAAA,EAAY,gDAAiD,EAAA,OAAA,EAAQ,EAAC,SAAA,EAAU,sDAAsD,EAAA,EAAE,SAAU,EAAA,EAAC,QAAS,EAAA,EAAC,SAAU,EAAA,iEAAA,EAAkE,EAAA,EAAE,IAAK,EAAA,EAAC,SAAU,EAAA,mDAAA,IAAqD;AACn+B,IAAI,gBAAgB,EAAC,GAAA,EAAI,EAAC,UAAW,EAAA,gCAAA,EAAiC,QAAO,4BAA6B,EAAA,KAAA,EAAM,6BAA6B,EAAA,SAAA,EAAU,EAAC,UAAW,EAAA,sCAAA,EAAuC,QAAO,kCAAmC,EAAA,KAAA,EAAM,mCAAkC;AAC5R,IAAI,iBAAiB,EAAC,IAAA,EAAK,qCAAoC,KAAM,EAAA,oCAAA,EAAqC,MAAK,mCAAmC;AAClJ,IAAI,kBAAqB,GAAA,EAAC,KAAM,EAAA,uBAAA,EAAwB,MAAO,EAAA,wBAAA,EAAyB,YAAa,EAAA,8BAAA,EAA+B,OAAQ,EAAA,yBAAA,EAA0B,SAAU,EAAA,2BAAA,EAA4B,gBAAe,gCAAgC;AAC3P,IAAI,sBAAyB,GAAA,EAAC,YAAa,EAAA,8BAAA,EAA+B,cAAa,8BAA8B;AACrH,IAAI,oBAAoB,EAAC,cAAA,EAAe,gCAAiC,EAAA,KAAA,EAAM,yBAAwB,KAAM,EAAA,uBAAA,EAAwB,aAAc,EAAA,+BAAA,EAAgC,mBAAkB,mCAAoC,EAAA,UAAA,EAAW,8BAA6B,UAAW,EAAA,4BAAA,EAA6B,cAAa,8BAA+B,EAAA,UAAA,EAAW,6BAA8B,EAAA,YAAA,EAAa,iCAAgC,SAAU,EAAA,4BAAA,EAA6B,gBAAe,iCAAkC,EAAA,OAAA,EAAQ,4BAA2B,SAAU,EAAA,4BAAA,EAA6B,WAAY,EAAA,8BAAA,EAA+B,WAAU,4BAA6B,EAAA,UAAA,EAAW,+BAA8B,UAAW,EAAA,6BAAA,EAA8B,WAAU,4BAA4B;AACnyB,IAAA,aAAA,GAAgB,EAAC,GAAI,EAAA,EAAC,GAAE,uBAAwB,EAAA,CAAA,EAAE,uBAAuB,EAAA,EAAE,WAAY,EAAA,EAAC,GAAE,+BAAgC,EAAA,CAAA,EAAE,iCAAiC,EAAA,KAAA,EAAM,EAAC,CAAE,EAAA,yBAAA,EAA0B,CAAE,EAAA,yBAAA,EAA0B;AAC5N,IAAA,aAAA,GAAgB,EAAC,cAAA,EAAe,gCAAiC,EAAA,eAAA,EAAgB,iCAAkC,EAAA,gBAAA,EAAiB,kCAAmC,EAAA,aAAA,EAAc,+BAAgC,EAAA,IAAA,EAAK,sBAAsB","file":"tree.css.js","sourcesContent":["export var treeClassNames = {tree:{container:'tree_treeClassNames_tree_container__kbtjn31b'},empty:'tree_treeClassNames_empty__kbtjn31c',group:'tree_treeClassNames_group__kbtjn31d',indicator:{indicator:'tree_treeClassNames_indicator_indicator__kbtjn31e'},item:{container:'tree_treeClassNames_item_container__kbtjn31f',item:'tree_treeClassNames_item_item__kbtjn31g',bar:'tree_treeClassNames_item_bar__kbtjn31h',lines:{container:'tree_treeClassNames_item_lines_container__kbtjn31i',button:'tree_treeClassNames_item_lines_button__kbtjn31j'},visibility:{container:'tree_treeClassNames_item_visibility_container__kbtjn31k'},expansion:{container:'tree_treeClassNames_item_expansion_container__kbtjn31l'},description:'tree_treeClassNames_item_description__kbtjn31m',actions:{container:'tree_treeClassNames_item_actions_container__kbtjn31n'},selection:{checkbox:{container:'tree_treeClassNames_item_selection_checkbox_container__kbtjn31o'}},drag:{container:'tree_treeClassNames_item_drag_container__kbtjn31p'}}};\nexport var treeColorVars = {bar:{background:'var(--bar-background__kbtjn33)',border:'var(--bar-border__kbtjn34)',color:'var(--bar-color__kbtjn35)'},indicator:{background:'var(--indicator-background__kbtjn36)',border:'var(--indicator-border__kbtjn37)',color:'var(--indicator-color__kbtjn38)'}};\nexport var treeContainers = {tree:'tree_treeContainers_tree__kbtjn30',group:'tree_treeContainers_group__kbtjn31',item:'tree_treeContainers_item__kbtjn32'};\nexport var treeGroupStateVars = {count:'var(--count__kbtjn3k)',layout:'var(--layout__kbtjn3l)',isDropTarget:'var(--isDropTarget__kbtjn3m)',isEmpty:'var(--isEmpty__kbtjn3n)',isFocused:'var(--isFocused__kbtjn3o)',isFocusVisible:'var(--isFocusVisible__kbtjn3p)'};\nexport var treeIndicatorStateVars = {dropPosition:'var(--dropPosition__kbtjn3q)',isDropTarget:'var(--isDropTarget__kbtjn3r)'};\nexport var treeItemStateVars = {allowsDragging:'var(--allowsDragging__kbtjn3s)',count:'var(--count__kbtjn3t)',index:'var(--index__kbtjn3u)',selectionMode:'var(--selectionMode__kbtjn3v)',selectionBehavior:'var(--selectionBehavior__kbtjn3w)',isDisabled:'var(--isDisabled__kbtjn3x)',isDragging:'var(--isDragging__kbtjn3y)',isDropTarget:'var(--isDropTarget__kbtjn3z)',isExpanded:'var(--isExpanded__kbtjn310)',isFirstChild:'var(--isFirstChild__kbtjn311)',isFocused:'var(--isFocused__kbtjn312)',isFocusVisible:'var(--isFocusVisible__kbtjn313)',isGroup:'var(--isGroup__kbtjn314)',isHovered:'var(--isHovered__kbtjn315)',isLastChild:'var(--isLastChild__kbtjn316)',isPressed:'var(--isPressed__kbtjn317)',isSelected:'var(--isSelected__kbtjn318)',isViewable:'var(--isViewable__kbtjn319)',isVisible:'var(--isVisible__kbtjn31a)'};\nexport var treeSpaceVars = {bar:{x:'var(--bar-x__kbtjn39)',y:'var(--bar-y__kbtjn3a)'},description:{x:'var(--description-x__kbtjn3b)',y:'var(--description-y__kbtjn3c)'},empty:{x:'var(--empty-x__kbtjn3d)',y:'var(--empty-y__kbtjn3e)'}};\nexport var treeStateVars = {allowsDragging:'var(--allowsDragging__kbtjn3f)',allowsExpansion:'var(--allowsExpansion__kbtjn3g)',allowsVisibility:'var(--allowsVisibility__kbtjn3h)',showTreeLines:'var(--showTreeLines__kbtjn3i)',size:'var(--size__kbtjn3j)'};"]}

package/dist/components/tree/tree.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { TreeStateContextValue, TreeProps, TreeGroupProps, TreeItemProps } from './types.js';
+import '@react-types/shared';
+import 'react-aria-components';
+import 'type-fest';
+import '../../types/generic.js';
+import '../../types/props.js';
+import '../../types/react-aria.js';
+import '../../types/use-tree.js';
+import '@react-stately/data';
+import '../button/types.js';
+import '../icon/types.js';
+import '../checkbox/types.js';
+import '../group/types.js';
+
+declare const TreeStateContext: react.Context<TreeStateContextValue<any>>;
+/**
+ * By default Tree only works as an uncontrolled input. However, if you need to use the Tree
+ * as a controlled input (passing state changes to the "nodes" props), you will need to add a
+ * "key" prop that is a hash of the "nodes" prop to trigger a rerender of the component and
+ * abandon it's previous state. Unfortunately, the underlying hooks don't provide a good way
+ * to update the internal state of the Tree onces it's been initialized.
+ */
+declare function Tree<T>(props: TreeProps<T>): react_jsx_runtime.JSX.Element;
+declare function TreeGroup<T>({ id, children, nodes, types, ...rest }: TreeGroupProps<T>): react_jsx_runtime.JSX.Element;
+declare function TreeItem<T>({ children: childrenProp, index, mapping: mappingProp, node, isFirstChild, isLastChild, ...rest }: TreeItemProps<T>): react_jsx_runtime.JSX.Element;
+
+export { Tree, TreeGroup, TreeItem, TreeStateContext };

package/dist/components/tree/tree.js

@@ -0,0 +1,488 @@
+import '../../chunk-PZ5AY32C.js';
+import { noop } from '@accelint/core';
+import { usePress } from '@react-aria/interactions';
+import { createContext, useMemo, useCallback, useContext } from 'react';
+import { Provider, DropIndicator, useDragAndDrop, GridList, DEFAULT_SLOT, ButtonContext as ButtonContext$1, GridListItem } from 'react-aria-components';
+import { useDefaultProps, useTree, useTheme } from '../../hooks/index.js';
+import { bodies } from '../../styles/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/index.js';
+import { AriaTextContext } from '../aria/index.js';
+import { ToggleButtonContext, ButtonContext, Button } from '../button/index.js';
+import { CheckboxContext } from '../checkbox/index.js';
+import { GroupContext } from '../group/index.js';
+import { Icon } from '../icon/index.js';
+import { MergeProvider } from '../merge-provider/index.js';
+import { treeClassNames, treeStateVars, treeIndicatorStateVars, treeGroupStateVars, treeItemStateVars } from './tree.css.js';
+import { createDragAndDropHandlers } from './utils.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var emptyTree = {
+  key: "",
+  parentKey: "",
+  children: [],
+  value: { id: "", label: "" }
+};
+var defaultMapping = {
+  actions: {
+    sm: {},
+    lg: {}
+  },
+  button: {
+    sm: { size: "sm", variant: "icon" },
+    lg: { size: "md", variant: "icon" }
+  },
+  description: {
+    sm: bodies.sm,
+    lg: bodies.md
+  },
+  drag: {
+    sm: {},
+    lg: {}
+  },
+  expansion: {
+    sm: {},
+    lg: {}
+  },
+  visibility: {
+    sm: {},
+    lg: {}
+  }
+};
+var defaultSize = "lg";
+var TreeStateContext = createContext({
+  allowsDragging: true,
+  allowsExpansion: true,
+  allowsVisibility: false,
+  lookup: {},
+  selectedKeys: /* @__PURE__ */ new Set(),
+  selectionMode: "none",
+  tree: emptyTree,
+  actions: {
+    append: noop,
+    getItem: () => emptyTree,
+    insert: noop,
+    insertAfter: noop,
+    insertBefore: noop,
+    move: noop,
+    prepend: noop,
+    remove: noop,
+    removeSelectedItems: noop,
+    revertIsExpanded: noop,
+    setSelectedKeys: noop,
+    toggleIsExpanded: noop,
+    toggleIsSelected: noop,
+    toggleIsViewable: noop,
+    update: noop
+  }
+});
+function defaultRenderEmptyState({ isDropTarget }) {
+  return isDropTarget ? "Add to this group" : "Nothing to see here";
+}
+function Tree(props) {
+  props = useDefaultProps(props, "Tree");
+  const {
+    children: childrenProp,
+    allowsDragging = false,
+    allowsExpansion = true,
+    allowsVisibility = false,
+    classNames: classNamesProps,
+    disabledBehavior = "all",
+    keyboardNavigationBehavior = "arrow",
+    mapping: mappingProp,
+    nodes,
+    provider,
+    renderDragPreview,
+    renderEmptyState: renderEmptyStateProp = defaultRenderEmptyState,
+    selectionBehavior = "replace",
+    selectionMode = "none",
+    showTreeLines = true,
+    size = defaultSize,
+    onAction,
+    onScroll,
+    onSelectionChange,
+    onUpdate,
+    ...rest
+  } = props;
+  const state = useTree({
+    allowsExpansion,
+    allowsVisibility,
+    nodes,
+    selectionMode,
+    onSelectionChange,
+    onUpdate
+  });
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(treeClassNames, theme.Tree, classNamesProps, {
+      item: {
+        description: mapping.description[size]
+      }
+    }) ?? {},
+    [theme.Tree, classNamesProps, mapping, size]
+  );
+  const renderEmptyState = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx("div", { className: classNames?.empty, children: renderEmptyStateProp(renderProps) }),
+    [classNames?.empty, renderEmptyStateProp]
+  );
+  const context = useMemo(
+    () => [
+      [
+        TreeStateContext,
+        {
+          ...state,
+          allowsDragging,
+          classNames,
+          disabledBehavior,
+          keyboardNavigationBehavior,
+          renderDragPreview,
+          renderEmptyState,
+          selectionBehavior,
+          selectionMode,
+          showTreeLines,
+          size,
+          onAction,
+          onScroll
+        }
+      ]
+    ],
+    [
+      state,
+      allowsDragging,
+      classNames,
+      disabledBehavior,
+      keyboardNavigationBehavior,
+      renderDragPreview,
+      renderEmptyState,
+      selectionBehavior,
+      selectionMode,
+      showTreeLines,
+      size,
+      onAction,
+      onScroll
+    ]
+  );
+  const style = useMemo(
+    () => inlineVars(treeStateVars, {
+      allowsDragging,
+      allowsExpansion: state.allowsExpansion,
+      allowsVisibility: state.allowsVisibility,
+      showTreeLines,
+      size
+    }),
+    [
+      allowsDragging,
+      state.allowsExpansion,
+      state.allowsVisibility,
+      showTreeLines,
+      size
+    ]
+  );
+  const children = useMemo(() => {
+    const treeGroupProps = {
+      ...rest,
+      id: state.tree.key,
+      nodes: state.tree.children
+    };
+    return provider ? callRenderProps(childrenProp, { ...state, treeGroupProps }) : /* @__PURE__ */ jsx(TreeGroup, { ...treeGroupProps, children: childrenProp });
+  }, [rest, provider, childrenProp, state]);
+  return /* @__PURE__ */ jsx(Provider, { values: context, children: /* @__PURE__ */ jsx("div", { className: classNames?.tree?.container, style, children: /* @__PURE__ */ jsx("div", { className: classNames?.tree?.tree, children }) }) });
+}
+function TreeGroup({
+  id,
+  children,
+  nodes,
+  types = ["all"],
+  ...rest
+}) {
+  const {
+    actions,
+    allowsDragging,
+    classNames,
+    disabledBehavior,
+    keyboardNavigationBehavior,
+    lookup,
+    renderDragPreview,
+    renderEmptyState,
+    selectedKeys,
+    selectionBehavior,
+    selectionMode,
+    onAction,
+    onScroll
+  } = useContext(TreeStateContext);
+  const acceptedDragTypes = useMemo(
+    () => types.map((type) => `tree-${type}`),
+    [types]
+  );
+  const renderDropIndicator = useCallback(
+    (target) => /* @__PURE__ */ jsx(
+      DropIndicator,
+      {
+        className: classNames?.indicator?.container,
+        style: (renderProps) => inlineVars(treeIndicatorStateVars, {
+          ...renderProps,
+          dropPosition: "dropPosition" in target ? target.dropPosition : "root"
+        }),
+        target,
+        children: /* @__PURE__ */ jsx("div", { className: classNames?.indicator?.indicator })
+      }
+    ),
+    [classNames?.indicator?.container, classNames?.indicator?.indicator]
+  );
+  const { dragAndDropHooks } = useDragAndDrop({
+    isDisabled: !allowsDragging,
+    renderDragPreview,
+    renderDropIndicator,
+    ...createDragAndDropHandlers(id, acceptedDragTypes, lookup, actions)
+  });
+  const style = useCallback(
+    (renderProps) => inlineVars(treeGroupStateVars, { ...renderProps, count: nodes.length }),
+    [nodes.length]
+  );
+  const indices = useMemo(
+    () => nodes.reduce((acc, node, index) => {
+      acc[node.key] = index;
+      return acc;
+    }, {}),
+    [nodes]
+  );
+  return /* @__PURE__ */ jsx(
+    GridList,
+    {
+      ...rest,
+      className: classNames?.group,
+      disabledBehavior,
+      dragAndDropHooks,
+      items: nodes,
+      keyboardNavigationBehavior,
+      renderEmptyState,
+      selectedKeys,
+      selectionBehavior,
+      selectionMode,
+      style,
+      onAction,
+      onScroll,
+      children: (item) => /* @__PURE__ */ jsx(
+        TreeItem,
+        {
+          index: indices[item.key] ?? -1,
+          node: item,
+          isFirstChild: indices[item.key] === 0,
+          isLastChild: indices[item.key] === nodes.length - 1,
+          children
+        }
+      )
+    }
+  );
+}
+var contextBlocker = [
+  [ToggleButtonContext, null],
+  [AriaTextContext, null],
+  [GroupContext, null],
+  [CheckboxContext, null],
+  [ButtonContext, null],
+  [ButtonContext$1, null]
+];
+function TreeItem({
+  children: childrenProp,
+  index,
+  mapping: mappingProp,
+  node,
+  isFirstChild,
+  isLastChild,
+  ...rest
+}) {
+  const {
+    actions,
+    allowsExpansion,
+    classNames,
+    size: sizeProp
+  } = useContext(TreeStateContext);
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const selection = useMemo(() => /* @__PURE__ */ new Set([node.key]), [node.key]);
+  const handleToggleExpansion = useCallback(
+    () => actions.toggleIsExpanded(selection),
+    [actions, selection]
+  );
+  const handleToggleSelection = useCallback(
+    () => actions.toggleIsSelected(selection),
+    [actions, selection]
+  );
+  const handleToggleVisibility = useCallback(
+    () => actions.toggleIsViewable(selection),
+    [actions, selection]
+  );
+  const { pressProps } = usePress({
+    onPress: handleToggleExpansion
+  });
+  const style = useCallback(
+    (renderProps) => inlineVars(treeItemStateVars, {
+      ...renderProps,
+      count: node.children.length,
+      index,
+      isExpanded: "nodes" in node.value ? !!node.value.isExpanded : false,
+      isFirstChild,
+      isGroup: "nodes" in node.value,
+      isLastChild,
+      isViewable: !!node.value.isViewable,
+      isVisible: !!node.value.isVisible
+    }),
+    [node.children.length, node.value, index, isFirstChild, isLastChild]
+  );
+  const context = useMemo(() => {
+    const size = sizeProp ?? defaultSize;
+    const buttonProps = mapping.button[size] ?? {};
+    return [
+      [
+        ToggleButtonContext,
+        {
+          slots: {
+            [DEFAULT_SLOT]: buttonProps,
+            expansion: {
+              ...buttonProps,
+              ...mapping.expansion[size],
+              classNames: classNames?.item?.expansion,
+              isSelected: "nodes" in node.value ? !!node.value.isExpanded : void 0,
+              onPress: handleToggleExpansion
+            },
+            visibility: {
+              ...buttonProps,
+              ...mapping.visibility[size],
+              classNames: classNames?.item?.visibility,
+              isSelected: !!node.value.isViewable,
+              onPress: handleToggleVisibility
+            }
+          }
+        }
+      ],
+      [
+        AriaTextContext,
+        {
+          slots: {
+            [DEFAULT_SLOT]: {},
+            description: {
+              ..."nodes" in node.value ? pressProps : {},
+              className: classNames?.item?.description,
+              children: node.value.label
+            }
+          }
+        }
+      ],
+      [
+        GroupContext,
+        {
+          slots: {
+            [DEFAULT_SLOT]: {},
+            actions: {
+              classNames: classNames?.item?.actions,
+              context: ButtonContext,
+              values: buttonProps
+            }
+          }
+        }
+      ],
+      [
+        CheckboxContext,
+        {
+          slots: {
+            [DEFAULT_SLOT]: {},
+            selection: {
+              classNames: classNames?.item?.selection,
+              onChange: handleToggleSelection
+            }
+          }
+        }
+      ],
+      [
+        ButtonContext,
+        {
+          slots: {
+            [DEFAULT_SLOT]: buttonProps,
+            drag: {
+              ...buttonProps,
+              ...mapping.drag[size],
+              classNames: classNames?.item?.drag
+            },
+            // We use a non-interactive Button for the lines to try and simplify the
+            // consistent use of space when rendered in alignment with other Buttons
+            lines: {
+              ...buttonProps,
+              classNames: classNames?.item?.lines,
+              isDisabled: true
+            }
+          }
+        }
+      ],
+      // Need to expand the RAC ButtonContext to allow for additional slots
+      [ButtonContext$1, { slots: { [DEFAULT_SLOT]: {}, lines: {} } }]
+    ];
+  }, [
+    classNames?.item?.lines,
+    classNames?.item?.expansion,
+    classNames?.item?.visibility,
+    classNames?.item?.description,
+    classNames?.item?.actions,
+    classNames?.item?.selection,
+    classNames?.item?.drag,
+    mapping,
+    node,
+    pressProps,
+    sizeProp,
+    handleToggleExpansion,
+    handleToggleSelection,
+    handleToggleVisibility
+  ]);
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx(MergeProvider, { values: context, children: /* @__PURE__ */ jsxs("div", { className: classNames?.item?.item, children: [
+      node.parentKey && /* @__PURE__ */ jsx(Button, { slot: "lines", children: /* @__PURE__ */ jsx(Icon, {}) }),
+      /* @__PURE__ */ jsx("div", { className: classNames?.item?.bar, children: callRenderProps(childrenProp, {
+        ...renderProps,
+        node
+      }) }),
+      "nodes" in node.value && (!allowsExpansion || node.value.isExpanded) && /* @__PURE__ */ jsx(Provider, { values: contextBlocker, children: /* @__PURE__ */ jsx(
+        TreeGroup,
+        {
+          id: node.key,
+          nodes: node.children,
+          types: node.value.types,
+          "aria-label": node.value.label,
+          children: childrenProp
+        }
+      ) })
+    ] }) }),
+    [
+      context,
+      classNames?.item?.item,
+      classNames?.item?.bar,
+      node,
+      childrenProp,
+      allowsExpansion
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    GridListItem,
+    {
+      ...rest,
+      className: classNames?.item?.container,
+      style,
+      textValue: node.value.label,
+      children
+    }
+  );
+}
+
+export { Tree, TreeGroup, TreeItem, TreeStateContext };
+//# sourceMappingURL=tree.js.map
+//# sourceMappingURL=tree.js.map