@yamada-ui/react 2.1.4-dev-20260323182837 → 2.2.0-next-20260324183323

package/dist/cjs/components/tree/index.cjs

@@ -0,0 +1,25 @@
+const require_tree_style = require('./tree.style.cjs');
+const require_use_tree = require('./use-tree.cjs');
+const require_tree = require('./tree.cjs');
+const require_tree_namespace = require('./tree.namespace.cjs');
+
+Object.defineProperty(exports, 'Tree', {
+  enumerable: true,
+  get: function () {
+    return require_tree_namespace.tree_namespace_exports;
+  }
+});
+exports.TreeContext = require_use_tree.TreeContext;
+exports.TreeDescendantsContext = require_use_tree.TreeDescendantsContext;
+exports.TreeItem = require_tree.TreeItem;
+exports.TreeItemContext = require_use_tree.TreeItemContext;
+exports.TreePropsContext = require_tree.TreePropsContext;
+exports.TreeRoot = require_tree.TreeRoot;
+exports.treeStyle = require_tree_style.treeStyle;
+exports.useTree = require_use_tree.useTree;
+exports.useTreeContext = require_use_tree.useTreeContext;
+exports.useTreeDescendant = require_use_tree.useTreeDescendant;
+exports.useTreeDescendants = require_use_tree.useTreeDescendants;
+exports.useTreeItem = require_use_tree.useTreeItem;
+exports.useTreeItemContext = require_use_tree.useTreeItemContext;
+exports.useTreePropsContext = require_tree.useTreePropsContext;

package/dist/cjs/components/tree/tree.cjs

@@ -0,0 +1,289 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_factory = require('../../core/system/factory.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_chevron_right_icon = require('../icon/icons/chevron-right-icon.cjs');
+require('../icon/index.cjs');
+const require_collapse = require('../collapse/collapse.cjs');
+require('../collapse/index.cjs');
+const require_use_loading_component = require('../loading/use-loading-component.cjs');
+require('../loading/index.cjs');
+const require_checkbox = require('../checkbox/checkbox.cjs');
+require('../checkbox/index.cjs');
+const require_tree_style = require('./tree.style.cjs');
+const require_use_tree = require('./use-tree.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/tree/tree.tsx
+const recursiveTreeItem = (items) => {
+	return items?.map((props, index) => {
+		const key = props.value || ((0, require_utils_index.utils_exports.isString)(props.label) ? props.label : index);
+		if ("children" in props) {
+			const { children, ...rest } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItem, {
+				...rest,
+				children: recursiveTreeItem(children)
+			}, key);
+		} else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItem, { ...props }, key);
+	});
+};
+const getReactNodeOrFunction = (type, custom, root) => {
+	if ((0, require_utils_index.utils_exports.isObject)(custom) && ("group" in custom || "item" in custom)) return custom[type];
+	else if (custom) return custom;
+	else if ((0, require_utils_index.utils_exports.isObject)(root) && ("group" in root || "item" in root)) return root[type];
+	else return root;
+};
+const { ComponentContext, PropsContext: TreePropsContext, useComponentContext, usePropsContext: useTreePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("tree", require_tree_style.treeStyle);
+/**
+* `Tree` is a component used to display hierarchical data structures in an expandable tree format.
+*
+* @see https://yamada-ui.com/docs/components/tree
+*/
+const TreeRoot = withProvider(({ size, animated, children, endElement, indicator, indicatorHidden, items, loadingScheme, startElement, checkboxProps, endElementProps, groupProps, indicatorProps, itemProps, labelProps, startElementProps, triggerProps, ...rest }) => {
+	const computedChildren = (0, react.useMemo)(() => {
+		if (children) return children;
+		return recursiveTreeItem(items);
+	}, [children, items]);
+	const { activeDescendant, checkable, checkedValue, descendants, expandedValue, multiple, selectedValue, getRootProps, onActiveDescendant, onCheckedChange, onCollapseAll, onExpandAll, onExpandedChange, onSearch, onSelectedChange } = require_use_tree.useTree({
+		...rest,
+		children: computedChildren
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_tree.TreeDescendantsContext, {
+		value: descendants,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_tree.TreeContext, {
+			value: (0, react.useMemo)(() => ({
+				activeDescendant,
+				checkable,
+				checkedValue,
+				expandedValue,
+				multiple,
+				selectedValue,
+				onActiveDescendant,
+				onCheckedChange,
+				onCollapseAll,
+				onExpandAll,
+				onExpandedChange,
+				onSearch,
+				onSelectedChange
+			}), [
+				activeDescendant,
+				checkable,
+				checkedValue,
+				expandedValue,
+				multiple,
+				selectedValue,
+				onActiveDescendant,
+				onCheckedChange,
+				onSearch,
+				onCollapseAll,
+				onExpandAll,
+				onExpandedChange,
+				onSelectedChange
+			]),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+				value: (0, react.useMemo)(() => ({
+					size,
+					animated,
+					endElement,
+					indicator,
+					indicatorHidden,
+					loadingScheme,
+					startElement,
+					checkboxProps,
+					endElementProps,
+					groupProps,
+					indicatorProps,
+					itemProps,
+					labelProps,
+					startElementProps,
+					triggerProps
+				}), [
+					size,
+					animated,
+					endElement,
+					indicator,
+					indicatorHidden,
+					startElement,
+					endElementProps,
+					groupProps,
+					indicatorProps,
+					itemProps,
+					labelProps,
+					startElementProps,
+					triggerProps,
+					checkboxProps,
+					loadingScheme
+				]),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.ul, { ...getRootProps() })
+			})
+		})
+	});
+}, "root", { transferProps: ["size"] })();
+const TreeItem = withContext(({ animated: animatedProp, asyncChildren: asyncChildrenProp, endElement, indicator: indicatorProp, label, loadingScheme, startElement, value: valueProp = (0, require_utils_index.utils_exports.isString)(label) ? label : void 0, checkboxProps, endElementProps, groupProps, indicatorProps, labelProps, startElementProps, triggerProps, ...rest }) => {
+	const { checkable } = require_use_tree.useTreeContext();
+	const componentContext = useComponentContext();
+	const Loading = require_use_loading_component.useLoadingComponent(loadingScheme ?? componentContext.loadingScheme ?? "oval");
+	const animated = animatedProp ?? componentContext.animated;
+	const indicator = indicatorProp ?? componentContext.indicator;
+	const groupStartElement = getReactNodeOrFunction("group", startElement, componentContext.startElement);
+	const groupEndElement = getReactNodeOrFunction("group", endElement, componentContext.endElement);
+	const itemStartElement = getReactNodeOrFunction("item", startElement, componentContext.startElement);
+	const itemEndElement = getReactNodeOrFunction("item", endElement, componentContext.endElement);
+	const asyncChildren = (0, react.useCallback)(async () => {
+		return recursiveTreeItem(await asyncChildrenProp?.());
+	}, [asyncChildrenProp]);
+	const { branchOpen, children, disabled, group, groupLoading, groupOpen, level, value, getCheckboxProps, getGroupItemProps, getGroupProps, getIndicatorProps, getItemProps, getLabelProps, getTriggerProps, onGroupClose, onGroupOpen, onGroupToggle } = require_use_tree.useTreeItem({
+		...componentContext.itemProps,
+		...rest,
+		asyncChildren: asyncChildrenProp ? asyncChildren : void 0,
+		value: valueProp
+	});
+	const props = {
+		disabled,
+		expanded: groupOpen
+	};
+	const context = (0, react.useMemo)(() => ({
+		branchOpen,
+		groupOpen,
+		level,
+		value,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle
+	}), [
+		branchOpen,
+		groupOpen,
+		level,
+		value,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle
+	]);
+	const varProps = (0, react.useMemo)(() => ({ "--level": level.toString() }), [level]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_tree.TreeItemContext, {
+		value: context,
+		children: group ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.li, {
+			...varProps,
+			...getGroupItemProps(),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TreeTrigger, {
+				...getTriggerProps({
+					...componentContext.triggerProps,
+					...triggerProps
+				}),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeIndicator, {
+						...getIndicatorProps({
+							"data-animated": (0, require_utils_index.utils_exports.dataAttr)(animated),
+							...componentContext.indicatorProps,
+							...indicatorProps
+						}),
+						children: groupLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loading, {}) : (0, require_utils_index.utils_exports.runIfFn)(indicator, props)
+					}),
+					checkable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeCheckbox, {
+						size: componentContext.size,
+						...getCheckboxProps({
+							...componentContext.checkboxProps,
+							...checkboxProps
+						})
+					}) : null,
+					groupStartElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeStartElement, {
+						...componentContext.startElementProps,
+						...startElementProps,
+						children: (0, require_utils_index.utils_exports.runIfFn)(groupStartElement, props)
+					}) : null,
+					label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeLabel, {
+						...getLabelProps({
+							...componentContext.labelProps,
+							...labelProps
+						}),
+						children: label
+					}) : null,
+					groupEndElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeEndElement, {
+						...componentContext.endElementProps,
+						...endElementProps,
+						children: (0, require_utils_index.utils_exports.runIfFn)(groupEndElement, props)
+					}) : null
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeGroup, {
+				duration: !animated ? 0 : void 0,
+				open: groupOpen,
+				...getGroupProps({
+					...componentContext.groupProps,
+					...groupProps
+				}),
+				children
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.li, {
+			...varProps,
+			...getItemProps(),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeIndicator, { ...getIndicatorProps({
+					"data-hidden": "",
+					...componentContext.indicatorProps,
+					...indicatorProps
+				}) }),
+				checkable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeCheckbox, {
+					size: componentContext.size,
+					...getCheckboxProps({
+						...componentContext.checkboxProps,
+						...checkboxProps
+					})
+				}) : null,
+				itemStartElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeStartElement, {
+					...componentContext.startElementProps,
+					...startElementProps,
+					children: (0, require_utils_index.utils_exports.runIfFn)(itemStartElement, props)
+				}) : null,
+				label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeLabel, {
+					...getLabelProps({
+						...componentContext.labelProps,
+						...labelProps
+					}),
+					children: label
+				}) : null,
+				itemEndElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeEndElement, {
+					...componentContext.endElementProps,
+					...endElementProps,
+					children: (0, require_utils_index.utils_exports.runIfFn)(itemEndElement, props)
+				}) : null
+			]
+		})
+	});
+}, "item")();
+const TreeTrigger = withContext("div", "trigger")();
+const TreeGroup = withContext((props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_collapse.Collapse, {
+		as: "ul",
+		...(0, require_utils_index.utils_exports.cast)(props)
+	});
+}, "group")();
+const TreeIndicator = withContext(({ children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_right_icon.ChevronRightIcon, {}), ...rest }) => {
+	const { indicatorHidden } = useComponentContext();
+	if (indicatorHidden) return null;
+	if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, {
+		...rest,
+		...children.props
+	});
+	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
+}, "indicator")();
+const TreeCheckbox = withContext(require_checkbox.Checkbox, "checkbox")();
+const TreeStartElement = withContext("div", {
+	name: "TreeStartElement",
+	slot: ["element", "start"]
+})();
+const TreeEndElement = withContext("div", {
+	name: "TreeEndElement",
+	slot: ["element", "end"]
+})();
+const TreeLabel = withContext("span", "label")();
+
+//#endregion
+exports.TreeItem = TreeItem;
+exports.TreePropsContext = TreePropsContext;
+exports.TreeRoot = TreeRoot;
+exports.useTreePropsContext = useTreePropsContext;
+//# sourceMappingURL=tree.cjs.map

package/dist/cjs/components/tree/tree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.cjs","names":["createSlotComponent","treeStyle","useTree","TreeDescendantsContext","TreeContext","styled","useTreeContext","useLoadingComponent","useTreeItem","TreeItemContext","Collapse","ChevronRightIcon","Children","Checkbox"],"sources":["../../../../src/components/tree/tree.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { CheckboxProps } from \"../checkbox\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { Loading } from \"../loading\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { TreeStyle } from \"./tree.style\"\nimport type { UseTreeItemProps, UseTreeProps } from \"./use-tree\"\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useMemo,\n} from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  cast,\n  dataAttr,\n  isObject,\n  isString,\n  type ReactNodeOrFunction,\n  runIfFn,\n} from \"../../utils\"\nimport { Checkbox } from \"../checkbox\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronRightIcon } from \"../icon\"\nimport { useLoadingComponent } from \"../loading\"\nimport { treeStyle } from \"./tree.style\"\nimport {\n  TreeContext,\n  TreeDescendantsContext,\n  TreeItemContext,\n  useTree,\n  useTreeContext,\n  useTreeItem,\n} from \"./use-tree\"\n\ninterface TreeCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport type TreeItemReactNode =\n  | ReactNodeOrFunction<TreeCallBackProps>\n  | {\n      group: ReactNodeOrFunction<TreeCallBackProps>\n      item?: ReactNodeOrFunction<TreeCallBackProps>\n    }\n  | {\n      item: ReactNodeOrFunction<TreeCallBackProps>\n      group?: ReactNodeOrFunction<TreeCallBackProps>\n    }\n\ninterface TreeItemWithValue extends Omit<TreeItemProps, \"children\"> {}\n\nexport interface TreeItemWithChildren extends TreeItemWithValue {\n  children: TreeItem[]\n}\n\nexport type TreeItem = TreeItemWithChildren | TreeItemWithValue\n\nconst recursiveTreeItem = (items?: TreeItem[]) => {\n  return items?.map((props, index) => {\n    const key = props.value || (isString(props.label) ? props.label : index)\n\n    if (\"children\" in props) {\n      const { children, ...rest } = props\n\n      return (\n        <TreeItem key={key} {...rest}>\n          {recursiveTreeItem(children)}\n        </TreeItem>\n      )\n    } else {\n      return <TreeItem key={key} {...props} />\n    }\n  })\n}\n\nconst getReactNodeOrFunction = (\n  type: \"group\" | \"item\",\n  custom?: TreeItemReactNode,\n  root?: TreeItemReactNode,\n): ReactNodeOrFunction<TreeCallBackProps> => {\n  if (isObject(custom) && (\"group\" in custom || \"item\" in custom)) {\n    return custom[type]\n  } else if (custom) {\n    return custom\n  } else if (isObject(root) && (\"group\" in root || \"item\" in root)) {\n    return root[type]\n  } else {\n    return root\n  }\n}\n\ninterface ComponentContext extends Pick<\n  TreeRootProps,\n  | \"animated\"\n  | \"checkboxProps\"\n  | \"endElement\"\n  | \"endElementProps\"\n  | \"groupProps\"\n  | \"indicator\"\n  | \"indicatorHidden\"\n  | \"indicatorProps\"\n  | \"itemProps\"\n  | \"labelProps\"\n  | \"loadingScheme\"\n  | \"size\"\n  | \"startElement\"\n  | \"startElementProps\"\n  | \"triggerProps\"\n> {}\n\nexport interface TreeRootProps<Multiple extends boolean = false>\n  extends\n    HTMLStyledProps<\"ul\">,\n    ThemeProps<TreeStyle>,\n    UseTreeProps<Multiple>,\n    Pick<\n      TreeItemProps,\n      | \"animated\"\n      | \"checkboxProps\"\n      | \"endElement\"\n      | \"endElementProps\"\n      | \"groupProps\"\n      | \"indicator\"\n      | \"indicatorProps\"\n      | \"labelProps\"\n      | \"loadingScheme\"\n      | \"startElement\"\n      | \"startElementProps\"\n      | \"triggerProps\"\n    > {\n  /**\n   * If `true`, hide the tree indicator icon for all items.\n   *\n   * @default false\n   */\n  indicatorHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: TreeItem[]\n  /**\n   * Props for the item component.\n   */\n  itemProps?: Omit<TreeItemProps, \"label\" | \"open\" | \"value\">\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TreePropsContext,\n  useComponentContext,\n  usePropsContext: useTreePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TreeRootProps, TreeStyle, ComponentContext>(\n  \"tree\",\n  treeStyle,\n)\n\nexport { TreePropsContext, useTreePropsContext }\n\n/**\n * `Tree` is a component used to display hierarchical data structures in an expandable tree format.\n *\n * @see https://yamada-ui.com/docs/components/tree\n */\nexport const TreeRoot = withProvider<\"ul\", TreeRootProps, \"size\">(\n  <Multiple extends boolean = false>({\n    size,\n    animated,\n    children,\n    endElement,\n    indicator,\n    indicatorHidden,\n    items,\n    loadingScheme,\n    startElement,\n    checkboxProps,\n    endElementProps,\n    groupProps,\n    indicatorProps,\n    itemProps,\n    labelProps,\n    startElementProps,\n    triggerProps,\n    ...rest\n  }: TreeRootProps<Multiple>) => {\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return recursiveTreeItem(items)\n    }, [children, items])\n    const {\n      activeDescendant,\n      checkable,\n      checkedValue,\n      descendants,\n      expandedValue,\n      multiple,\n      selectedValue,\n      getRootProps,\n      onActiveDescendant,\n      onCheckedChange,\n      onCollapseAll,\n      onExpandAll,\n      onExpandedChange,\n      onSearch,\n      onSelectedChange,\n    } = useTree({ ...rest, children: computedChildren })\n    const context = useMemo(\n      () => ({\n        activeDescendant,\n        checkable,\n        checkedValue,\n        expandedValue,\n        multiple,\n        selectedValue,\n        onActiveDescendant,\n        onCheckedChange,\n        onCollapseAll,\n        onExpandAll,\n        onExpandedChange,\n        onSearch,\n        onSelectedChange,\n      }),\n      [\n        activeDescendant,\n        checkable,\n        checkedValue,\n        expandedValue,\n        multiple,\n        selectedValue,\n        onActiveDescendant,\n        onCheckedChange,\n        onSearch,\n        onCollapseAll,\n        onExpandAll,\n        onExpandedChange,\n        onSelectedChange,\n      ],\n    )\n    const componentContext = useMemo(\n      () => ({\n        size,\n        animated,\n        endElement,\n        indicator,\n        indicatorHidden,\n        loadingScheme,\n        startElement,\n        checkboxProps,\n        endElementProps,\n        groupProps,\n        indicatorProps,\n        itemProps,\n        labelProps,\n        startElementProps,\n        triggerProps,\n      }),\n      [\n        size,\n        animated,\n        endElement,\n        indicator,\n        indicatorHidden,\n        startElement,\n        endElementProps,\n        groupProps,\n        indicatorProps,\n        itemProps,\n        labelProps,\n        startElementProps,\n        triggerProps,\n        checkboxProps,\n        loadingScheme,\n      ],\n    )\n\n    return (\n      <TreeDescendantsContext value={descendants}>\n        <TreeContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.ul {...getRootProps()} />\n          </ComponentContext>\n        </TreeContext>\n      </TreeDescendantsContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)() as GenericsComponent<{\n  <Multiple extends boolean = false>(\n    props: TreeRootProps<Multiple>,\n  ): ReactElement\n}>\n\nexport interface TreeItemProps\n  extends\n    Omit<HTMLStyledProps<\"li\">, \"value\">,\n    Omit<UseTreeItemProps, \"asyncChildren\"> {\n  /**\n   * The label to display in the item.\n   */\n  label: ReactNode\n  /**\n   * If `true`, the tree item will be animated.\n   *\n   * @default false\n   */\n  animated?: boolean\n  /**\n   * The element to display at the end of the item.\n   */\n  endElement?: TreeItemReactNode\n  /**\n   * The tree indicator icon to use.\n   */\n  indicator?: ReactNodeOrFunction<TreeCallBackProps>\n  /**\n   * The loading scheme.\n   *\n   * @default 'oval'\n   */\n  loadingScheme?: Loading.Scheme\n  /**\n   * The element to display at the start of the item.\n   */\n  startElement?: TreeItemReactNode\n  /**\n   * Props for the checkbox component.\n   */\n  checkboxProps?: Omit<CheckboxProps, \"checked\" | \"defaultChecked\" | \"value\">\n  /**\n   * Props for the end component.\n   */\n  endElementProps?: TreeEndElementProps\n  /**\n   * Props for the group component.\n   */\n  groupProps?: Omit<TreeGroupProps, \"children\">\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: TreeIndicatorProps\n  /**\n   * Props for the label component.\n   */\n  labelProps?: TreeLabelProps\n  /**\n   * Props for the start component.\n   */\n  startElementProps?: TreeStartElementProps\n  /**\n   * Props for the trigger component.\n   */\n  triggerProps?: TreeTriggerProps\n  /**\n   * If provided, the tree item will be rendered as an async tree item.\n   */\n  asyncChildren?: () => Promise<TreeItem[]>\n}\n\nexport const TreeItem = withContext<\"li\", TreeItemProps>(\n  ({\n    animated: animatedProp,\n    asyncChildren: asyncChildrenProp,\n    endElement,\n    indicator: indicatorProp,\n    label,\n    loadingScheme,\n    startElement,\n    value: valueProp = isString(label) ? label : undefined,\n    checkboxProps,\n    endElementProps,\n    groupProps,\n    indicatorProps,\n    labelProps,\n    startElementProps,\n    triggerProps,\n    ...rest\n  }) => {\n    const { checkable } = useTreeContext()\n    const componentContext = useComponentContext()\n    const Loading = useLoadingComponent(\n      loadingScheme ?? componentContext.loadingScheme ?? \"oval\",\n    )\n    const animated = animatedProp ?? componentContext.animated\n    const indicator = indicatorProp ?? componentContext.indicator\n    const groupStartElement = getReactNodeOrFunction(\n      \"group\",\n      startElement,\n      componentContext.startElement,\n    )\n    const groupEndElement = getReactNodeOrFunction(\n      \"group\",\n      endElement,\n      componentContext.endElement,\n    )\n    const itemStartElement = getReactNodeOrFunction(\n      \"item\",\n      startElement,\n      componentContext.startElement,\n    )\n    const itemEndElement = getReactNodeOrFunction(\n      \"item\",\n      endElement,\n      componentContext.endElement,\n    )\n    const asyncChildren = useCallback(async () => {\n      const items = await asyncChildrenProp?.()\n\n      return recursiveTreeItem(items)\n    }, [asyncChildrenProp])\n    const {\n      branchOpen,\n      children,\n      disabled,\n      group,\n      groupLoading,\n      groupOpen,\n      level,\n      value,\n      getCheckboxProps,\n      getGroupItemProps,\n      getGroupProps,\n      getIndicatorProps,\n      getItemProps,\n      getLabelProps,\n      getTriggerProps,\n      onGroupClose,\n      onGroupOpen,\n      onGroupToggle,\n    } = useTreeItem({\n      ...componentContext.itemProps,\n      ...rest,\n      asyncChildren: asyncChildrenProp ? asyncChildren : undefined,\n      value: valueProp,\n    })\n    const props = { disabled, expanded: groupOpen }\n    const context = useMemo(\n      () => ({\n        branchOpen,\n        groupOpen,\n        level,\n        value,\n        onGroupClose,\n        onGroupOpen,\n        onGroupToggle,\n      }),\n      [\n        branchOpen,\n        groupOpen,\n        level,\n        value,\n        onGroupClose,\n        onGroupOpen,\n        onGroupToggle,\n      ],\n    )\n    const varProps = useMemo(() => ({ \"--level\": level.toString() }), [level])\n\n    return (\n      <TreeItemContext value={context}>\n        {group ? (\n          <styled.li {...varProps} {...getGroupItemProps()}>\n            <TreeTrigger\n              {...getTriggerProps({\n                ...componentContext.triggerProps,\n                ...triggerProps,\n              })}\n            >\n              <TreeIndicator\n                {...getIndicatorProps({\n                  \"data-animated\": dataAttr(animated),\n                  ...componentContext.indicatorProps,\n                  ...indicatorProps,\n                })}\n              >\n                {groupLoading ? <Loading /> : runIfFn(indicator, props)}\n              </TreeIndicator>\n              {checkable ? (\n                <TreeCheckbox\n                  size={componentContext.size}\n                  {...getCheckboxProps({\n                    ...componentContext.checkboxProps,\n                    ...checkboxProps,\n                  })}\n                />\n              ) : null}\n              {groupStartElement ? (\n                <TreeStartElement\n                  {...componentContext.startElementProps}\n                  {...startElementProps}\n                >\n                  {runIfFn(groupStartElement, props)}\n                </TreeStartElement>\n              ) : null}\n              {label ? (\n                <TreeLabel\n                  {...getLabelProps({\n                    ...componentContext.labelProps,\n                    ...labelProps,\n                  })}\n                >\n                  {label}\n                </TreeLabel>\n              ) : null}\n              {groupEndElement ? (\n                <TreeEndElement\n                  {...componentContext.endElementProps}\n                  {...endElementProps}\n                >\n                  {runIfFn(groupEndElement, props)}\n                </TreeEndElement>\n              ) : null}\n            </TreeTrigger>\n\n            <TreeGroup\n              duration={!animated ? 0 : undefined}\n              open={groupOpen}\n              {...getGroupProps({\n                ...componentContext.groupProps,\n                ...groupProps,\n              })}\n            >\n              {children}\n            </TreeGroup>\n          </styled.li>\n        ) : (\n          <styled.li {...varProps} {...getItemProps()}>\n            <TreeIndicator\n              {...getIndicatorProps({\n                \"data-hidden\": \"\",\n                ...componentContext.indicatorProps,\n                ...indicatorProps,\n              })}\n            />\n            {checkable ? (\n              <TreeCheckbox\n                size={componentContext.size}\n                {...getCheckboxProps({\n                  ...componentContext.checkboxProps,\n                  ...checkboxProps,\n                })}\n              />\n            ) : null}\n            {itemStartElement ? (\n              <TreeStartElement\n                {...componentContext.startElementProps}\n                {...startElementProps}\n              >\n                {runIfFn(itemStartElement, props)}\n              </TreeStartElement>\n            ) : null}\n            {label ? (\n              <TreeLabel\n                {...getLabelProps({\n                  ...componentContext.labelProps,\n                  ...labelProps,\n                })}\n              >\n                {label}\n              </TreeLabel>\n            ) : null}\n            {itemEndElement ? (\n              <TreeEndElement\n                {...componentContext.endElementProps}\n                {...endElementProps}\n              >\n                {runIfFn(itemEndElement, props)}\n              </TreeEndElement>\n            ) : null}\n          </styled.li>\n        )}\n      </TreeItemContext>\n    )\n  },\n  \"item\",\n)()\n\ninterface TreeTriggerProps extends HTMLStyledProps {}\n\nconst TreeTrigger = withContext<\"div\", TreeTriggerProps>(\"div\", \"trigger\")()\n\ninterface TreeGroupProps\n  extends\n    Omit<HTMLStyledProps<\"ul\">, \"transition\">,\n    Pick<CollapseProps, \"animationOpacity\" | keyof WithTransitionProps> {}\n\nconst TreeGroup = withContext<\"ul\", TreeGroupProps>((props) => {\n  return <Collapse as=\"ul\" {...cast<CollapseProps>(props)} />\n}, \"group\")()\n\ninterface TreeIndicatorProps extends HTMLStyledProps<\"svg\"> {}\n\nconst TreeIndicator = withContext<\"svg\", TreeIndicatorProps>(\n  ({ children = <ChevronRightIcon />, ...rest }) => {\n    const { indicatorHidden } = useComponentContext()\n\n    if (indicatorHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(children, { ...rest, ...children.props })\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"indicator\",\n)()\n\ninterface TreeCheckboxProps extends CheckboxProps {}\n\nconst TreeCheckbox = withContext<\"input\", TreeCheckboxProps>(\n  Checkbox,\n  \"checkbox\",\n)()\n\ninterface TreeStartElementProps extends HTMLStyledProps {}\n\nconst TreeStartElement = withContext<\"div\", TreeStartElementProps>(\"div\", {\n  name: \"TreeStartElement\",\n  slot: [\"element\", \"start\"],\n})()\n\ninterface TreeEndElementProps extends HTMLStyledProps {}\n\nconst TreeEndElement = withContext<\"div\", TreeEndElementProps>(\"div\", {\n  name: \"TreeEndElement\",\n  slot: [\"element\", \"end\"],\n})()\n\ninterface TreeLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst TreeLabel = withContext<\"span\", TreeLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqEA,MAAM,qBAAqB,UAAuB;AAChD,QAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,MAAM,0DAAmB,MAAM,MAAM,GAAG,MAAM,QAAQ;AAElE,MAAI,cAAc,OAAO;GACvB,MAAM,EAAE,UAAU,GAAG,SAAS;AAE9B,UACE,2CAAC;IAAmB,GAAI;cACrB,kBAAkB,SAAS;MADf,IAEJ;QAGb,QAAO,2CAAC,YAAmB,GAAI,SAAT,IAAkB;GAE1C;;AAGJ,MAAM,0BACJ,MACA,QACA,SAC2C;AAC3C,qDAAa,OAAO,KAAK,WAAW,UAAU,UAAU,QACtD,QAAO,OAAO;UACL,OACT,QAAO;0DACW,KAAK,KAAK,WAAW,QAAQ,UAAU,MACzD,QAAO,KAAK;KAEZ,QAAO;;AA2DX,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACEA,6CACF,QACAC,6BACD;;;;;;AASD,MAAa,WAAW,cACa,EACjC,MACA,UACA,UACA,YACA,WACA,iBACA,OACA,eACA,cACA,eACA,iBACA,YACA,gBACA,WACA,YACA,mBACA,cACA,GAAG,WAC0B;CAC7B,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,kBAAkB,MAAM;IAC9B,CAAC,UAAU,MAAM,CAAC;CACrB,MAAM,EACJ,kBACA,WACA,cACA,aACA,eACA,UACA,eACA,cACA,oBACA,iBACA,eACA,aACA,kBACA,UACA,qBACEC,yBAAQ;EAAE,GAAG;EAAM,UAAU;EAAkB,CAAC;AAsEpD,QACE,2CAACC;EAAuB,OAAO;YAC7B,2CAACC;GAAY,iCAtER;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;aAyCK,2CAAC;IAAiB,iCAvCf;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cAMO,2CAACC,uBAAO,MAAG,GAAI,cAAc,GAAI;KAChB;IACP;GACS;GAG7B,QACA,EAAE,eAAe,CAAC,OAAO,EAAE,CAC5B,EAAE;AAwEH,MAAa,WAAW,aACrB,EACC,UAAU,cACV,eAAe,mBACf,YACA,WAAW,eACX,OACA,eACA,cACA,OAAO,4DAAqB,MAAM,GAAG,QAAQ,QAC7C,eACA,iBACA,YACA,gBACA,YACA,mBACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,cAAcC,iCAAgB;CACtC,MAAM,mBAAmB,qBAAqB;CAC9C,MAAM,UAAUC,kDACd,iBAAiB,iBAAiB,iBAAiB,OACpD;CACD,MAAM,WAAW,gBAAgB,iBAAiB;CAClD,MAAM,YAAY,iBAAiB,iBAAiB;CACpD,MAAM,oBAAoB,uBACxB,SACA,cACA,iBAAiB,aAClB;CACD,MAAM,kBAAkB,uBACtB,SACA,YACA,iBAAiB,WAClB;CACD,MAAM,mBAAmB,uBACvB,QACA,cACA,iBAAiB,aAClB;CACD,MAAM,iBAAiB,uBACrB,QACA,YACA,iBAAiB,WAClB;CACD,MAAM,uCAA4B,YAAY;AAG5C,SAAO,kBAFO,MAAM,qBAAqB,CAEV;IAC9B,CAAC,kBAAkB,CAAC;CACvB,MAAM,EACJ,YACA,UACA,UACA,OACA,cACA,WACA,OACA,OACA,kBACA,mBACA,eACA,mBACA,cACA,eACA,iBACA,cACA,aACA,kBACEC,6BAAY;EACd,GAAG,iBAAiB;EACpB,GAAG;EACH,eAAe,oBAAoB,gBAAgB;EACnD,OAAO;EACR,CAAC;CACF,MAAM,QAAQ;EAAE;EAAU,UAAU;EAAW;CAC/C,MAAM,oCACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,qCAA0B,EAAE,WAAW,MAAM,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;AAE1E,QACE,2CAACC;EAAgB,OAAO;YACrB,QACC,4CAACJ,uBAAO;GAAG,GAAI;GAAU,GAAI,mBAAmB;cAC9C,4CAAC;IACC,GAAI,gBAAgB;KAClB,GAAG,iBAAiB;KACpB,GAAG;KACJ,CAAC;;KAEF,2CAAC;MACC,GAAI,kBAAkB;OACpB,iEAA0B,SAAS;OACnC,GAAG,iBAAiB;OACpB,GAAG;OACJ,CAAC;gBAED,eAAe,2CAAC,YAAU,kDAAW,WAAW,MAAM;OACzC;KACf,YACC,2CAAC;MACC,MAAM,iBAAiB;MACvB,GAAI,iBAAiB;OACnB,GAAG,iBAAiB;OACpB,GAAG;OACJ,CAAC;OACF,GACA;KACH,oBACC,2CAAC;MACC,GAAI,iBAAiB;MACrB,GAAI;+DAEK,mBAAmB,MAAM;OACjB,GACjB;KACH,QACC,2CAAC;MACC,GAAI,cAAc;OAChB,GAAG,iBAAiB;OACpB,GAAG;OACJ,CAAC;gBAED;OACS,GACV;KACH,kBACC,2CAAC;MACC,GAAI,iBAAiB;MACrB,GAAI;+DAEK,iBAAiB,MAAM;OACjB,GACf;;KACQ,EAEd,2CAAC;IACC,UAAU,CAAC,WAAW,IAAI;IAC1B,MAAM;IACN,GAAI,cAAc;KAChB,GAAG,iBAAiB;KACpB,GAAG;KACJ,CAAC;IAED;KACS;IACF,GAEZ,4CAACA,uBAAO;GAAG,GAAI;GAAU,GAAI,cAAc;;IACzC,2CAAC,iBACC,GAAI,kBAAkB;KACpB,eAAe;KACf,GAAG,iBAAiB;KACpB,GAAG;KACJ,CAAC,GACF;IACD,YACC,2CAAC;KACC,MAAM,iBAAiB;KACvB,GAAI,iBAAiB;MACnB,GAAG,iBAAiB;MACpB,GAAG;MACJ,CAAC;MACF,GACA;IACH,mBACC,2CAAC;KACC,GAAI,iBAAiB;KACrB,GAAI;8DAEK,kBAAkB,MAAM;MAChB,GACjB;IACH,QACC,2CAAC;KACC,GAAI,cAAc;MAChB,GAAG,iBAAiB;MACpB,GAAG;MACJ,CAAC;eAED;MACS,GACV;IACH,iBACC,2CAAC;KACC,GAAI,iBAAiB;KACrB,GAAI;8DAEK,gBAAgB,MAAM;MAChB,GACf;;IACM;GAEE;GAGtB,OACD,EAAE;AAIH,MAAM,cAAc,YAAqC,OAAO,UAAU,EAAE;AAO5E,MAAM,YAAY,aAAmC,UAAU;AAC7D,QAAO,2CAACK;EAAS,IAAG;EAAK,+CAAwB,MAAM;GAAI;GAC1D,QAAQ,EAAE;AAIb,MAAM,gBAAgB,aACnB,EAAE,WAAW,2CAACC,gDAAmB,EAAE,GAAG,WAAW;CAChD,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,KAAI,gBAAiB,QAAO;AAE5B,+BAAqC,SAAS,CAC5C,gCAAoB,UAAU;EAAE,GAAG;EAAM,GAAG,SAAS;EAAO,CAAC;AAE/D,QAAOC,eAAS,MAAM,SAAS,GAAG,IAAIA,eAAS,KAAK,KAAK,GAAG;GAE9D,YACD,EAAE;AAIH,MAAM,eAAe,YACnBC,2BACA,WACD,EAAE;AAIH,MAAM,mBAAmB,YAA0C,OAAO;CACxE,MAAM;CACN,MAAM,CAAC,WAAW,QAAQ;CAC3B,CAAC,EAAE;AAIJ,MAAM,iBAAiB,YAAwC,OAAO;CACpE,MAAM;CACN,MAAM,CAAC,WAAW,MAAM;CACzB,CAAC,EAAE;AAIJ,MAAM,YAAY,YAAoC,QAAQ,QAAQ,EAAE"}

package/dist/cjs/components/tree/tree.namespace.cjs

@@ -0,0 +1,26 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_use_tree = require('./use-tree.cjs');
+const require_tree = require('./tree.cjs');
+
+//#region src/components/tree/tree.namespace.ts
+var tree_namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Context: () => require_use_tree.TreeContext,
+	DescendantsContext: () => require_use_tree.TreeDescendantsContext,
+	Item: () => require_tree.TreeItem,
+	PropsContext: () => require_tree.TreePropsContext,
+	Root: () => require_tree.TreeRoot,
+	useContext: () => require_use_tree.useTreeContext,
+	useDescendant: () => require_use_tree.useTreeDescendant,
+	useDescendants: () => require_use_tree.useTreeDescendants,
+	useItemContext: () => require_use_tree.useTreeItemContext,
+	usePropsContext: () => require_tree.useTreePropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'tree_namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return tree_namespace_exports;
+  }
+});
+//# sourceMappingURL=tree.namespace.cjs.map

package/dist/cjs/components/tree/tree.namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.namespace.cjs","names":[],"sources":["../../../../src/components/tree/tree.namespace.ts"],"sourcesContent":["export {\n  TreeItem as Item,\n  TreePropsContext as PropsContext,\n  TreeRoot as Root,\n  useTreePropsContext as usePropsContext,\n} from \"./tree\"\nexport type {\n  TreeItemProps as ItemProps,\n  TreeItem as ItemType,\n  TreeRootProps as RootProps,\n} from \"./tree\"\nexport {\n  TreeContext as Context,\n  TreeDescendantsContext as DescendantsContext,\n  useTreeContext as useContext,\n  useTreeDescendant as useDescendant,\n  useTreeDescendants as useDescendants,\n  useTreeItemContext as useItemContext,\n} from \"./use-tree\"\nexport type { TreeControl as Control } from \"./use-tree\"\n"],"mappings":""}

package/dist/cjs/components/tree/tree.style.cjs

@@ -0,0 +1,181 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+const require_checkbox_style = require('../checkbox/checkbox.style.cjs');
+require('../checkbox/index.cjs');
+
+//#region src/components/tree/tree.style.ts
+const treeStyle = require_config.defineComponentSlotStyle({
+	base: {
+		checkbox: { "--indicator-bg": "colors.bg" },
+		element: {
+			color: "{element-color}",
+			display: "inline-center",
+			gap: "{space}"
+		},
+		end: {},
+		group: {
+			alignItems: "stretch",
+			display: "flex",
+			flexDirection: "column"
+		},
+		indicator: {
+			color: "{element-color}",
+			transformOrigin: "center",
+			_animated: {
+				transitionDuration: "moderate",
+				transitionProperty: "transform"
+			},
+			_expanded: { transform: "rotate(90deg)" },
+			_hidden: { opacity: "0" }
+		},
+		item: {
+			"--element-color": "colors.fg.subtle",
+			"--space": "spaces.1",
+			"--space-start": "calc({depth-space} * ({level} - 1))",
+			alignItems: "center",
+			display: "flex",
+			_hasGroup: {
+				alignItems: "stretch",
+				flexDirection: "column"
+			},
+			_notHasGroup: {
+				border: "1px solid transparent",
+				cursor: "pointer",
+				focusVisibleRing: "inside",
+				gap: "{gap}",
+				pe: "{space}",
+				ps: "calc({space-start} + {space})",
+				rounded: "{rounded}",
+				userSelect: "none",
+				_hover: { bg: "bg.subtle" },
+				_focusVisible: { bg: "bg.subtle" },
+				_disabled: { layerStyle: "disabled" }
+			}
+		},
+		label: {
+			flex: "1",
+			textAlign: "left",
+			truncated: true
+		},
+		root: {
+			alignItems: "stretch",
+			display: "flex",
+			flexDirection: "column"
+		},
+		start: {},
+		trigger: {
+			alignItems: "center",
+			border: "1px solid transparent",
+			cursor: "pointer",
+			display: "flex",
+			focusVisibleRing: "inside",
+			gap: "{gap}",
+			pe: "{space}",
+			ps: "calc({space-start} + {space})",
+			rounded: "{rounded}",
+			userSelect: "none",
+			_hover: { bg: "bg.subtle" },
+			_focusVisible: { bg: "bg.subtle" },
+			_disabled: { layerStyle: "disabled" }
+		}
+	},
+	props: {
+		shape: {
+			circle: { item: { "--rounded": "radii.full" } },
+			rounded: { item: { "--rounded": "radii.l1" } },
+			square: { item: { "--rounded": "0" } }
+		},
+		withGuideLine: { true: {
+			group: {
+				position: "relative",
+				_before: {
+					bg: "border",
+					display: "block",
+					h: "full",
+					left: "calc({space-guide-line} + {depth-space})",
+					position: "absolute",
+					transform: "translateX(-50%)",
+					w: "px",
+					zIndex: "yamcha"
+				}
+			},
+			item: {
+				"--space-guide-line": "calc(({space-start} * 2) + {space})",
+				ps: "{space-guide-line}",
+				_hasGroup: { ps: "0" }
+			},
+			trigger: { ps: "{space-guide-line}" }
+		} }
+	},
+	variants: {
+		solid: {
+			checkbox: {
+				...require_checkbox_style.checkboxStyle.variants?.solid.root,
+				_indicator: require_checkbox_style.checkboxStyle.variants?.solid.indicator,
+				_selected: {
+					_checked: { "--indicator-border-color": "colorScheme.contrast" },
+					_indicator: {
+						color: "colorScheme.solid",
+						_checked: { bg: "colorScheme.contrast" },
+						_indeterminate: { bg: "colorScheme.contrast" }
+					}
+				}
+			},
+			item: { _notHasGroup: { _selected: {
+				layerStyle: "solid",
+				"--element-color": "colorScheme.contrast"
+			} } },
+			trigger: { _selected: {
+				layerStyle: "solid",
+				"--element-color": "colorScheme.contrast"
+			} }
+		},
+		subtle: {
+			checkbox: {
+				...require_checkbox_style.checkboxStyle.variants?.solid.root,
+				_indicator: require_checkbox_style.checkboxStyle.variants?.solid.indicator
+			},
+			item: { _notHasGroup: { _selected: {
+				layerStyle: "subtle",
+				"--element-color": "colorScheme.fg"
+			} } },
+			trigger: { _selected: {
+				layerStyle: "subtle",
+				"--element-color": "colorScheme.fg"
+			} }
+		}
+	},
+	sizes: {
+		sm: {
+			item: {
+				"--depth-space": "spaces.1.5",
+				"--gap": "spaces.1.5"
+			},
+			root: { fontSize: "sm" }
+		},
+		md: {
+			item: {
+				"--depth-space": "spaces.2",
+				"--gap": "spaces.2"
+			},
+			root: { fontSize: "md" }
+		},
+		lg: {
+			item: {
+				"--depth-space": "spaces.2",
+				"--gap": "spaces.2"
+			},
+			root: { fontSize: "lg" }
+		}
+	},
+	defaultProps: {
+		size: "md",
+		variant: "subtle",
+		shape: "rounded",
+		withGuideLine: false
+	}
+});
+
+//#endregion
+exports.treeStyle = treeStyle;
+//# sourceMappingURL=tree.style.cjs.map

package/dist/cjs/components/tree/tree.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.style.cjs","names":["defineComponentSlotStyle","checkboxStyle"],"sources":["../../../../src/components/tree/tree.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { checkboxStyle } from \"../checkbox\"\n\nexport const treeStyle = defineComponentSlotStyle({\n  base: {\n    checkbox: { \"--indicator-bg\": \"colors.bg\" },\n    element: {\n      color: \"{element-color}\",\n      display: \"inline-center\",\n      gap: \"{space}\",\n    },\n    end: {},\n    group: { alignItems: \"stretch\", display: \"flex\", flexDirection: \"column\" },\n    indicator: {\n      color: \"{element-color}\",\n      transformOrigin: \"center\",\n      _animated: {\n        transitionDuration: \"moderate\",\n        transitionProperty: \"transform\",\n      },\n      _expanded: { transform: \"rotate(90deg)\" },\n      _hidden: { opacity: \"0\" },\n    },\n    item: {\n      \"--element-color\": \"colors.fg.subtle\",\n      \"--space\": \"spaces.1\",\n      \"--space-start\": \"calc({depth-space} * ({level} - 1))\",\n      alignItems: \"center\",\n      display: \"flex\",\n      _hasGroup: {\n        alignItems: \"stretch\",\n        flexDirection: \"column\",\n      },\n      _notHasGroup: {\n        border: \"1px solid transparent\",\n        cursor: \"pointer\",\n        focusVisibleRing: \"inside\",\n        gap: \"{gap}\",\n        pe: \"{space}\",\n        ps: \"calc({space-start} + {space})\",\n        rounded: \"{rounded}\",\n        userSelect: \"none\",\n        _hover: { bg: \"bg.subtle\" },\n        _focusVisible: { bg: \"bg.subtle\" },\n        _disabled: { layerStyle: \"disabled\" },\n      },\n    },\n    label: { flex: \"1\", textAlign: \"left\", truncated: true },\n    root: {\n      alignItems: \"stretch\",\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    start: {},\n    trigger: {\n      alignItems: \"center\",\n      border: \"1px solid transparent\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      focusVisibleRing: \"inside\",\n      gap: \"{gap}\",\n      pe: \"{space}\",\n      ps: \"calc({space-start} + {space})\",\n      rounded: \"{rounded}\",\n      userSelect: \"none\",\n      _hover: { bg: \"bg.subtle\" },\n      _focusVisible: { bg: \"bg.subtle\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the component\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      circle: {\n        item: { \"--rounded\": \"radii.full\" },\n      },\n      rounded: {\n        item: { \"--rounded\": \"radii.l1\" },\n      },\n      square: {\n        item: { \"--rounded\": \"0\" },\n      },\n    },\n    /**\n     * If `true`, display guide lines.\n     *\n     * @default false\n     */\n    withGuideLine: {\n      true: {\n        group: {\n          position: \"relative\",\n          _before: {\n            bg: \"border\",\n            display: \"block\",\n            h: \"full\",\n            left: \"calc({space-guide-line} + {depth-space})\",\n            position: \"absolute\",\n            transform: \"translateX(-50%)\",\n            w: \"px\",\n            zIndex: \"yamcha\",\n          },\n        },\n        item: {\n          \"--space-guide-line\": \"calc(({space-start} * 2) + {space})\",\n          ps: \"{space-guide-line}\",\n          _hasGroup: { ps: \"0\" },\n        },\n        trigger: { ps: \"{space-guide-line}\" },\n      },\n    },\n  },\n\n  variants: {\n    solid: {\n      checkbox: {\n        ...checkboxStyle.variants?.solid.root,\n        _indicator: checkboxStyle.variants?.solid.indicator,\n        _selected: {\n          _checked: { \"--indicator-border-color\": \"colorScheme.contrast\" },\n          _indicator: {\n            color: \"colorScheme.solid\",\n            _checked: { bg: \"colorScheme.contrast\" },\n            _indeterminate: { bg: \"colorScheme.contrast\" },\n          },\n        },\n      },\n      item: {\n        _notHasGroup: {\n          _selected: {\n            layerStyle: \"solid\",\n            \"--element-color\": \"colorScheme.contrast\",\n          },\n        },\n      },\n      trigger: {\n        _selected: {\n          layerStyle: \"solid\",\n          \"--element-color\": \"colorScheme.contrast\",\n        },\n      },\n    },\n    subtle: {\n      checkbox: {\n        ...checkboxStyle.variants?.solid.root,\n        _indicator: checkboxStyle.variants?.solid.indicator,\n      },\n      item: {\n        _notHasGroup: {\n          _selected: {\n            layerStyle: \"subtle\",\n            \"--element-color\": \"colorScheme.fg\",\n          },\n        },\n      },\n      trigger: {\n        _selected: {\n          layerStyle: \"subtle\",\n          \"--element-color\": \"colorScheme.fg\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      item: { \"--depth-space\": \"spaces.1.5\", \"--gap\": \"spaces.1.5\" },\n      root: { fontSize: \"sm\" },\n    },\n    md: {\n      item: { \"--depth-space\": \"spaces.2\", \"--gap\": \"spaces.2\" },\n      root: { fontSize: \"md\" },\n    },\n    lg: {\n      item: { \"--depth-space\": \"spaces.2\", \"--gap\": \"spaces.2\" },\n      root: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"subtle\",\n    shape: \"rounded\",\n    withGuideLine: false,\n  },\n})\n\nexport type TreeStyle = typeof treeStyle\n"],"mappings":"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"}