@ark-ui/solid/dist/chunk/SWUMYWUU.js

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

import { collapsible_exports } from './ROUJC6XC.js';
import { splitRenderStrategyProps, RenderStrategyProvider, useRenderStrategyContext } from './QFAL6GWC.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { createMemo, createUniqueId } from 'solid-js';
import * as treeView from '@zag-js/tree-view';
export { anatomy } from '@zag-js/tree-view';

// src/components/tree-view/use-tree-view-context.ts
var [TreeViewProvider, useTreeViewContext] = createContext({
  hookName: "useTreeViewContext",
  providerName: "<TreeViewProvider />"
});

// src/components/tree-view/use-tree-view-node-context.ts
var [TreeViewNodeStateProvider, useTreeViewNodeContext] = createContext({
  hookName: "useTreeViewNodeContext",
  providerName: "<TreeViewNodeProvider />"
});

// src/components/tree-view/use-tree-view-node-props-context.ts
var [TreeViewNodePropsProvider, useTreeViewNodePropsContext] = createContext({
  hookName: "useTreeViewNodePropsContext",
  providerName: "<TreeViewNodeProvider />"
});

// src/components/tree-view/tree-view-branch.tsx
var TreeViewBranch = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const nodeState = useTreeViewNodeContext();
  const renderStrategyProps = useRenderStrategyContext();
  const branchContentProps = createMemo(() => treeView2().getBranchContentProps(nodeProps));
  const mergedProps = mergeProps(() => treeView2().getBranchProps(nodeProps), props);
  return createComponent(collapsible_exports.Root, mergeProps$1({
    get open() {
      return nodeState().expanded;
    },
    get ids() {
      return {
        content: branchContentProps().id
      };
    }
  }, renderStrategyProps, mergedProps));
};
var splitVisibilityProps = createSplitProps();
var TreeViewBranchContent = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const branchContentProps = createMemo(() => {
    const contentProps = treeView2().getBranchContentProps(nodeProps);
    const [, ownProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]);
    return ownProps;
  });
  const mergedProps = mergeProps(() => branchContentProps(), props);
  return createComponent(collapsible_exports.Content, mergedProps);
};
var TreeViewBranchControl = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const mergedProps = mergeProps(() => treeView2().getBranchControlProps(nodeProps), props);
  return createComponent(ark.div, mergedProps);
};
var TreeViewBranchIndentGuide = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const mergedProps = mergeProps(() => treeView2().getBranchIndentGuideProps(nodeProps), props);
  return createComponent(ark.div, mergedProps);
};
var TreeViewBranchIndicator = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const mergedProps = mergeProps(() => treeView2().getBranchIndicatorProps(nodeProps), props);
  return createComponent(ark.div, mergedProps);
};
var TreeViewBranchText = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const mergedProps = mergeProps(() => treeView2().getBranchTextProps(nodeProps), props);
  return createComponent(ark.span, mergedProps);
};
var TreeViewBranchTrigger = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const mergedProps = mergeProps(() => treeView2().getBranchTriggerProps(nodeProps), props);
  return createComponent(ark.div, mergedProps);
};

// src/components/tree-view/tree-view-context.tsx
var TreeViewContext = (props) => props.children(useTreeViewContext());
var TreeViewItem = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const mergedProps = mergeProps(() => treeView2().getItemProps(nodeProps), props);
  return createComponent(ark.div, mergedProps);
};
var TreeViewItemIndicator = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const mergedProps = mergeProps(() => treeView2().getItemIndicatorProps(nodeProps), props);
  return createComponent(ark.div, mergedProps);
};
var TreeViewItemText = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const mergedProps = mergeProps(() => treeView2().getItemTextProps(nodeProps), props);
  return createComponent(ark.span, mergedProps);
};
var TreeViewLabel = (props) => {
  const treeView2 = useTreeViewContext();
  const mergedProps = mergeProps(() => treeView2().getLabelProps(), props);
  return createComponent(ark.h3, mergedProps);
};
var TreeViewNodeCheckbox = (props) => {
  const treeView2 = useTreeViewContext();
  const nodeProps = useTreeViewNodePropsContext();
  const mergedProps = mergeProps(() => treeView2().getNodeCheckboxProps(nodeProps), props);
  return createComponent(ark.span, mergedProps);
};
var TreeViewNodeCheckboxIndicator = (props) => {
  const nodeState = useTreeViewNodeContext();
  const checkedState = createMemo(() => nodeState().checked);
  if (checkedState() === "indeterminate" && props.indeterminate) {
    return props.indeterminate;
  }
  if (checkedState() === true && props.children) {
    return props.children;
  }
  return props.fallback;
};

// src/components/tree-view/tree-view-node-context.ts
var TreeViewNodeContext = (props) => props.children(useTreeViewNodeContext());
function TreeViewNodeProvider(props) {
  const [nodeProps, localProps] = createSplitProps()(props, ["indexPath", "node"]);
  const treeView2 = useTreeViewContext();
  const nodeState = createMemo(() => treeView2().getNodeState(nodeProps));
  return createComponent(TreeViewNodeStateProvider, {
    value: nodeState,
    get children() {
      return createComponent(TreeViewNodePropsProvider, {
        value: nodeProps,
        get children() {
          return localProps.children;
        }
      });
    }
  });
}
var useTreeView = (props) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const machineProps = createMemo(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(treeView.machine, machineProps);
  return createMemo(() => treeView.connect(service, normalizeProps));
};

// src/components/tree-view/tree-view-root.tsx
var TreeViewRoot = (props) => {
  const [renderStrategyProps, treeViewProps] = splitRenderStrategyProps(props);
  const [useTreeViewProps, localProps] = createSplitProps()(treeViewProps, ["checkedValue", "collection", "defaultCheckedValue", "defaultExpandedValue", "defaultFocusedValue", "defaultSelectedValue", "expandedValue", "expandOnClick", "focusedValue", "id", "ids", "loadChildren", "onCheckedChange", "onExpandedChange", "onFocusChange", "onLoadChildrenComplete", "onLoadChildrenError", "onSelectionChange", "selectedValue", "selectionMode", "typeahead"]);
  const treeView2 = useTreeView(useTreeViewProps);
  const mergedProps = mergeProps(() => treeView2().getRootProps(), localProps);
  return createComponent(TreeViewProvider, {
    value: treeView2,
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};
var TreeViewRootProvider = (props) => {
  const [renderStrategyProps, treeViewProps] = splitRenderStrategyProps(props);
  const [{
    value: treeView2
  }, localProps] = createSplitProps()(treeViewProps, ["value"]);
  const mergedProps = mergeProps(() => treeView2().getRootProps(), localProps);
  return createComponent(TreeViewProvider, {
    value: treeView2,
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};
var TreeViewTree = (props) => {
  const treeView2 = useTreeViewContext();
  const mergedProps = mergeProps(() => treeView2().getTreeProps(), props);
  return createComponent(ark.div, mergedProps);
};

// src/components/tree-view/tree-view.ts
var tree_view_exports = {};
__export(tree_view_exports, {
  Branch: () => TreeViewBranch,
  BranchContent: () => TreeViewBranchContent,
  BranchControl: () => TreeViewBranchControl,
  BranchIndentGuide: () => TreeViewBranchIndentGuide,
  BranchIndicator: () => TreeViewBranchIndicator,
  BranchText: () => TreeViewBranchText,
  BranchTrigger: () => TreeViewBranchTrigger,
  Context: () => TreeViewContext,
  Item: () => TreeViewItem,
  ItemIndicator: () => TreeViewItemIndicator,
  ItemText: () => TreeViewItemText,
  Label: () => TreeViewLabel,
  NodeCheckbox: () => TreeViewNodeCheckbox,
  NodeCheckboxIndicator: () => TreeViewNodeCheckboxIndicator,
  NodeContext: () => TreeViewNodeContext,
  NodeProvider: () => TreeViewNodeProvider,
  Root: () => TreeViewRoot,
  RootProvider: () => TreeViewRootProvider,
  Tree: () => TreeViewTree
});

export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndentGuide, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewContext, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNodeCheckbox, TreeViewNodeCheckboxIndicator, TreeViewNodeContext, TreeViewNodeProvider, TreeViewRoot, TreeViewRootProvider, TreeViewTree, tree_view_exports, useTreeView, useTreeViewContext, useTreeViewNodeContext };