@yamada-ui/react 2.3.0-next-20260411064049 → 2.3.0-next-20260411071154

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

@@ -4,6 +4,7 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_context = require('../../utils/context.cjs');
 const require_utils_index = require('../../utils/index.cjs');
 const require_factory = require('../../core/system/factory.cjs');
+const require_props = require('../../core/components/props.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');
@@ -143,13 +144,18 @@ const TreeItem = withContext(({ className, css, colorScheme, animated: animatedP
 		query: query ?? ((0, require_utils_index.utils_exports.isString)(label) ? label : void 0),
 		value: valueProp
 	});
-	const itemProps = {
+	const itemProps = (0, react.useMemo)(() => require_props.mergeProps({
 		className,
 		css,
 		colorScheme,
-		"--level": level.toString(),
-		...rootProps
-	};
+		"--level": level.toString()
+	}, rootProps)(), [
+		className,
+		css,
+		colorScheme,
+		level,
+		rootProps
+	]);
 	const callbackProps = {
 		disabled,
 		expanded: groupOpen
@@ -176,27 +182,12 @@ const TreeItem = withContext(({ className, css, colorScheme, animated: animatedP
 			value: (0, react.useMemo)(() => ({
 				checkboxProps: {
 					size: componentContext.size,
-					...getCheckboxProps({
-						...componentContext.checkboxProps,
-						...checkboxProps
-					})
-				},
-				endElementProps: {
-					...componentContext.endElementProps,
-					...endElementProps
+					...getCheckboxProps(require_props.mergeProps(componentContext.checkboxProps, checkboxProps)())
 				},
-				indicatorProps: { ...getIndicatorProps({
-					...componentContext.indicatorProps,
-					...indicatorProps
-				}) },
-				labelProps: { ...getLabelProps({
-					...componentContext.labelProps,
-					...labelProps
-				}) },
-				startElementProps: {
-					...componentContext.startElementProps,
-					...startElementProps
-				}
+				endElementProps: require_props.mergeProps(componentContext.endElementProps, endElementProps)(),
+				indicatorProps: { ...getIndicatorProps(require_props.mergeProps(componentContext.indicatorProps, indicatorProps)()) },
+				labelProps: { ...getLabelProps(require_props.mergeProps(componentContext.labelProps, labelProps)()) },
+				startElementProps: require_props.mergeProps(componentContext.startElementProps, startElementProps)()
 			}), [
 				checkboxProps,
 				componentContext.checkboxProps,
@@ -231,10 +222,7 @@ const TreeItem = withContext(({ className, css, colorScheme, animated: animatedP
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeGroup, {
 					duration: !animated ? 0 : void 0,
 					open: groupOpen,
-					...getGroupProps({
-						...componentContext.groupProps,
-						...groupProps
-					}),
+					...getGroupProps(require_props.mergeProps(componentContext.groupProps, groupProps)()),
 					children
 				})]
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.li, {
@@ -270,44 +258,29 @@ const TreeIndicator = withContext(({ children = /* @__PURE__ */ (0, react_jsx_ru
 	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
 }, "indicator")(void 0, (props) => {
 	const { indicatorProps } = useItemComponentContext();
-	return {
-		...indicatorProps,
-		...props
-	};
+	return require_props.mergeProps(indicatorProps, props)();
 });
 const TreeCheckbox = withContext(require_checkbox.Checkbox, "checkbox")(void 0, (props) => {
 	const { checkboxProps } = useItemComponentContext();
-	return {
-		...checkboxProps,
-		...props
-	};
+	return require_props.mergeProps(checkboxProps, props)();
 });
 const TreeStartElement = withContext("div", {
 	name: "StartElement",
 	slot: ["element", "start"]
 })(void 0, (props) => {
 	const { startElementProps } = useItemComponentContext();
-	return {
-		...startElementProps,
-		...props
-	};
+	return require_props.mergeProps(startElementProps, props)();
 });
 const TreeEndElement = withContext("div", {
 	name: "EndElement",
 	slot: ["element", "end"]
 })(void 0, (props) => {
 	const { endElementProps } = useItemComponentContext();
-	return {
-		...endElementProps,
-		...props
-	};
+	return require_props.mergeProps(endElementProps, props)();
 });
 const TreeLabel = withContext("span", "label")(void 0, (props) => {
 	const { labelProps } = useItemComponentContext();
-	return {
-		...labelProps,
-		...props
-	};
+	return require_props.mergeProps(labelProps, props)();
 });
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"tree.cjs","names":["createContext","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  createContext,\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\ntype 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\ninterface 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 =\n      props.value || (isString(props.label) ? `${props.label}-${index}` : 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> {}\n\ninterface ItemComponentContext {\n  checkboxProps: TreeCheckboxProps\n  endElementProps: TreeEndElementProps\n  indicatorProps: TreeIndicatorProps\n  labelProps: TreeLabelProps\n  startElementProps: TreeStartElementProps\n}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({ name: \"ItemComponentContext\" })\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    > {\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<\n    TreeItemProps,\n    \"children\" | \"label\" | \"open\" | \"query\" | \"value\"\n  >\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    ...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      }),\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        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 HTMLStyledProps<\"div\">, 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 root element.\n   */\n  rootProps?: HTMLStyledProps<\"li\">\n  /**\n   * Props for the start component.\n   */\n  startElementProps?: TreeStartElementProps\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<\"div\", TreeItemProps>(\n  ({\n    className,\n    css,\n    colorScheme,\n    animated: animatedProp,\n    asyncChildren: asyncChildrenProp,\n    endElement,\n    indicator: indicatorProp,\n    label,\n    loadingScheme,\n    query,\n    startElement,\n    value: valueProp = isString(label) ? label : undefined,\n    checkboxProps,\n    endElementProps,\n    groupProps,\n    indicatorProps,\n    labelProps,\n    rootProps,\n    startElementProps,\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      props,\n      value,\n      getCheckboxProps,\n      getGroupItemProps,\n      getGroupProps,\n      getIndicatorProps,\n      getItemProps,\n      getLabelProps,\n      onGroupClose,\n      onGroupOpen,\n      onGroupToggle,\n    } = useTreeItem({\n      ...componentContext.itemProps,\n      ...rest,\n      asyncChildren: asyncChildrenProp ? asyncChildren : undefined,\n      query: query ?? (isString(label) ? label : undefined),\n      value: valueProp,\n    })\n    const itemProps = {\n      className,\n      css,\n      colorScheme,\n      \"--level\": level.toString(),\n      ...rootProps,\n    }\n    const callbackProps = { 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 itemComponentContext = useMemo(\n      () => ({\n        checkboxProps: {\n          size: componentContext.size,\n          ...getCheckboxProps({\n            ...componentContext.checkboxProps,\n            ...checkboxProps,\n          }),\n        },\n        endElementProps: {\n          ...componentContext.endElementProps,\n          ...endElementProps,\n        },\n        indicatorProps: {\n          ...getIndicatorProps({\n            ...componentContext.indicatorProps,\n            ...indicatorProps,\n          }),\n        },\n        labelProps: {\n          ...getLabelProps({\n            ...componentContext.labelProps,\n            ...labelProps,\n          }),\n        },\n        startElementProps: {\n          ...componentContext.startElementProps,\n          ...startElementProps,\n        },\n      }),\n      [\n        checkboxProps,\n        componentContext.checkboxProps,\n        componentContext.endElementProps,\n        componentContext.indicatorProps,\n        componentContext.labelProps,\n        componentContext.size,\n        componentContext.startElementProps,\n        endElementProps,\n        getCheckboxProps,\n        getIndicatorProps,\n        getLabelProps,\n        indicatorProps,\n        labelProps,\n        startElementProps,\n      ],\n    )\n\n    return (\n      <TreeItemContext value={context}>\n        <ItemComponentContext value={itemComponentContext}>\n          {group ? (\n            <styled.li {...getGroupItemProps(itemProps)}>\n              <styled.div data-content {...props}>\n                <TreeIndicator data-animated={dataAttr(animated)}>\n                  {groupLoading ? (\n                    <Loading />\n                  ) : (\n                    runIfFn(indicator, callbackProps)\n                  )}\n                </TreeIndicator>\n                {checkable ? <TreeCheckbox /> : null}\n                {groupStartElement ? (\n                  <TreeStartElement>\n                    {runIfFn(groupStartElement, callbackProps)}\n                  </TreeStartElement>\n                ) : null}\n                {label ? <TreeLabel>{label}</TreeLabel> : null}\n                {groupEndElement ? (\n                  <TreeEndElement>\n                    {runIfFn(groupEndElement, callbackProps)}\n                  </TreeEndElement>\n                ) : null}\n              </styled.div>\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 {...getItemProps(itemProps)}>\n              <styled.div data-content {...props}>\n                <TreeIndicator data-hidden />\n                {checkable ? <TreeCheckbox /> : null}\n                {itemStartElement ? (\n                  <TreeStartElement>\n                    {runIfFn(itemStartElement, callbackProps)}\n                  </TreeStartElement>\n                ) : null}\n                {label ? <TreeLabel>{label}</TreeLabel> : null}\n                {itemEndElement ? (\n                  <TreeEndElement>\n                    {runIfFn(itemEndElement, callbackProps)}\n                  </TreeEndElement>\n                ) : null}\n              </styled.div>\n            </styled.li>\n          )}\n        </ItemComponentContext>\n      </TreeItemContext>\n    )\n  },\n  \"item\",\n)()\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)(undefined, (props) => {\n  const { indicatorProps } = useItemComponentContext()\n\n  return { ...indicatorProps, ...props }\n})\n\ninterface TreeCheckboxProps extends CheckboxProps {}\n\nconst TreeCheckbox = withContext<\"input\", TreeCheckboxProps>(\n  Checkbox,\n  \"checkbox\",\n)(undefined, (props) => {\n  const { checkboxProps } = useItemComponentContext()\n\n  return { ...checkboxProps, ...props }\n})\n\ninterface TreeStartElementProps extends HTMLStyledProps {}\n\nconst TreeStartElement = withContext<\"div\", TreeStartElementProps>(\"div\", {\n  name: \"StartElement\",\n  slot: [\"element\", \"start\"],\n})(undefined, (props) => {\n  const { startElementProps } = useItemComponentContext()\n\n  return { ...startElementProps, ...props }\n})\n\ninterface TreeEndElementProps extends HTMLStyledProps {}\n\nconst TreeEndElement = withContext<\"div\", TreeEndElementProps>(\"div\", {\n  name: \"EndElement\",\n  slot: [\"element\", \"end\"],\n})(undefined, (props) => {\n  const { endElementProps } = useItemComponentContext()\n\n  return { ...endElementProps, ...props }\n})\n\ninterface TreeLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst TreeLabel = withContext<\"span\", TreeLabelProps>(\"span\", \"label\")(\n  undefined,\n  (props) => {\n    const { labelProps } = useItemComponentContext()\n\n    return { ...labelProps, ...props }\n  },\n)\n"],"mappings":"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"}
+{"version":3,"file":"tree.cjs","names":["createContext","createSlotComponent","treeStyle","useTree","TreeDescendantsContext","TreeContext","styled","useTreeContext","useLoadingComponent","useTreeItem","mergeProps","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, mergeProps, styled } from \"../../core\"\nimport {\n  cast,\n  createContext,\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\ntype 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\ninterface 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 =\n      props.value || (isString(props.label) ? `${props.label}-${index}` : 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> {}\n\ninterface ItemComponentContext {\n  checkboxProps: TreeCheckboxProps\n  endElementProps: TreeEndElementProps\n  indicatorProps: TreeIndicatorProps\n  labelProps: TreeLabelProps\n  startElementProps: TreeStartElementProps\n}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({ name: \"ItemComponentContext\" })\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    > {\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<\n    TreeItemProps,\n    \"children\" | \"label\" | \"open\" | \"query\" | \"value\"\n  >\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    ...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      }),\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        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 HTMLStyledProps<\"div\">, 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 root element.\n   */\n  rootProps?: HTMLStyledProps<\"li\">\n  /**\n   * Props for the start component.\n   */\n  startElementProps?: TreeStartElementProps\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<\"div\", TreeItemProps>(\n  ({\n    className,\n    css,\n    colorScheme,\n    animated: animatedProp,\n    asyncChildren: asyncChildrenProp,\n    endElement,\n    indicator: indicatorProp,\n    label,\n    loadingScheme,\n    query,\n    startElement,\n    value: valueProp = isString(label) ? label : undefined,\n    checkboxProps,\n    endElementProps,\n    groupProps,\n    indicatorProps,\n    labelProps,\n    rootProps,\n    startElementProps,\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      props,\n      value,\n      getCheckboxProps,\n      getGroupItemProps,\n      getGroupProps,\n      getIndicatorProps,\n      getItemProps,\n      getLabelProps,\n      onGroupClose,\n      onGroupOpen,\n      onGroupToggle,\n    } = useTreeItem({\n      ...componentContext.itemProps,\n      ...rest,\n      asyncChildren: asyncChildrenProp ? asyncChildren : undefined,\n      query: query ?? (isString(label) ? label : undefined),\n      value: valueProp,\n    })\n    const itemProps = useMemo(\n      () =>\n        mergeProps(\n          {\n            className,\n            css,\n            colorScheme,\n            \"--level\": level.toString(),\n          },\n          rootProps,\n        )(),\n      [className, css, colorScheme, level, rootProps],\n    )\n    const callbackProps = { 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 itemComponentContext = useMemo(\n      () => ({\n        checkboxProps: {\n          size: componentContext.size,\n          ...getCheckboxProps(\n            mergeProps(componentContext.checkboxProps, checkboxProps)(),\n          ),\n        },\n        endElementProps: mergeProps(\n          componentContext.endElementProps,\n          endElementProps,\n        )(),\n        indicatorProps: {\n          ...getIndicatorProps(\n            mergeProps(componentContext.indicatorProps, indicatorProps)(),\n          ),\n        },\n        labelProps: {\n          ...getLabelProps(\n            mergeProps(componentContext.labelProps, labelProps)(),\n          ),\n        },\n        startElementProps: mergeProps(\n          componentContext.startElementProps,\n          startElementProps,\n        )(),\n      }),\n      [\n        checkboxProps,\n        componentContext.checkboxProps,\n        componentContext.endElementProps,\n        componentContext.indicatorProps,\n        componentContext.labelProps,\n        componentContext.size,\n        componentContext.startElementProps,\n        endElementProps,\n        getCheckboxProps,\n        getIndicatorProps,\n        getLabelProps,\n        indicatorProps,\n        labelProps,\n        startElementProps,\n      ],\n    )\n\n    return (\n      <TreeItemContext value={context}>\n        <ItemComponentContext value={itemComponentContext}>\n          {group ? (\n            <styled.li {...getGroupItemProps(itemProps)}>\n              <styled.div data-content {...props}>\n                <TreeIndicator data-animated={dataAttr(animated)}>\n                  {groupLoading ? (\n                    <Loading />\n                  ) : (\n                    runIfFn(indicator, callbackProps)\n                  )}\n                </TreeIndicator>\n                {checkable ? <TreeCheckbox /> : null}\n                {groupStartElement ? (\n                  <TreeStartElement>\n                    {runIfFn(groupStartElement, callbackProps)}\n                  </TreeStartElement>\n                ) : null}\n                {label ? <TreeLabel>{label}</TreeLabel> : null}\n                {groupEndElement ? (\n                  <TreeEndElement>\n                    {runIfFn(groupEndElement, callbackProps)}\n                  </TreeEndElement>\n                ) : null}\n              </styled.div>\n\n              <TreeGroup\n                duration={!animated ? 0 : undefined}\n                open={groupOpen}\n                {...getGroupProps(\n                  mergeProps(componentContext.groupProps, groupProps)(),\n                )}\n              >\n                {children}\n              </TreeGroup>\n            </styled.li>\n          ) : (\n            <styled.li {...getItemProps(itemProps)}>\n              <styled.div data-content {...props}>\n                <TreeIndicator data-hidden />\n                {checkable ? <TreeCheckbox /> : null}\n                {itemStartElement ? (\n                  <TreeStartElement>\n                    {runIfFn(itemStartElement, callbackProps)}\n                  </TreeStartElement>\n                ) : null}\n                {label ? <TreeLabel>{label}</TreeLabel> : null}\n                {itemEndElement ? (\n                  <TreeEndElement>\n                    {runIfFn(itemEndElement, callbackProps)}\n                  </TreeEndElement>\n                ) : null}\n              </styled.div>\n            </styled.li>\n          )}\n        </ItemComponentContext>\n      </TreeItemContext>\n    )\n  },\n  \"item\",\n)()\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)(undefined, (props) => {\n  const { indicatorProps } = useItemComponentContext()\n\n  return mergeProps(indicatorProps, props)()\n})\n\ninterface TreeCheckboxProps extends CheckboxProps {}\n\nconst TreeCheckbox = withContext<\"input\", TreeCheckboxProps>(\n  Checkbox,\n  \"checkbox\",\n)(undefined, (props) => {\n  const { checkboxProps } = useItemComponentContext()\n\n  return mergeProps(checkboxProps, props)()\n})\n\ninterface TreeStartElementProps extends HTMLStyledProps {}\n\nconst TreeStartElement = withContext<\"div\", TreeStartElementProps>(\"div\", {\n  name: \"StartElement\",\n  slot: [\"element\", \"start\"],\n})(undefined, (props) => {\n  const { startElementProps } = useItemComponentContext()\n\n  return mergeProps(startElementProps, props)()\n})\n\ninterface TreeEndElementProps extends HTMLStyledProps {}\n\nconst TreeEndElement = withContext<\"div\", TreeEndElementProps>(\"div\", {\n  name: \"EndElement\",\n  slot: [\"element\", \"end\"],\n})(undefined, (props) => {\n  const { endElementProps } = useItemComponentContext()\n\n  return mergeProps(endElementProps, props)()\n})\n\ninterface TreeLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst TreeLabel = withContext<\"span\", TreeLabelProps>(\"span\", \"label\")(\n  undefined,\n  (props) => {\n    const { labelProps } = useItemComponentContext()\n\n    return mergeProps(labelProps, props)()\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsEA,MAAM,qBAAqB,UAAuB;AAChD,QAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,MACJ,MAAM,0DAAmB,MAAM,MAAM,GAAG,GAAG,MAAM,MAAM,GAAG,UAAU;AAEtE,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;;AA8BX,MAAM,CAAC,sBAAsB,2BAC3BA,8BAAoC,EAAE,MAAM,wBAAwB,CAAC;AAwCvE,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACEC,6CACF,QACAC,6BACD;;;;;;AASD,MAAa,WAAW,cACa,EACjC,MACA,UACA,UACA,YACA,WACA,iBACA,OACA,eACA,cACA,eACA,iBACA,YACA,gBACA,WACA,YACA,mBACA,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;AAoEpD,QACE,2CAACC;EAAuB,OAAO;YAC7B,2CAACC;GAAY,iCApER;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;aAuCK,2CAAC;IAAiB,iCArCf;KACL;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;KACD,CACF;cAMO,2CAACC,uBAAO,MAAG,GAAI,cAAc,GAAI;KAChB;IACP;GACS;GAG7B,QACA,EAAE,eAAe,CAAC,OAAO,EAAE,CAC5B,EAAE;AAsEH,MAAa,WAAW,aACrB,EACC,WACA,KACA,aACA,UAAU,cACV,eAAe,mBACf,YACA,WAAW,eACX,OACA,eACA,OACA,cACA,OAAO,4DAAqB,MAAM,GAAG,QAAQ,QAC7C,eACA,iBACA,YACA,gBACA,YACA,WACA,mBACA,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,OACA,kBACA,mBACA,eACA,mBACA,cACA,eACA,cACA,aACA,kBACEC,6BAAY;EACd,GAAG,iBAAiB;EACpB,GAAG;EACH,eAAe,oBAAoB,gBAAgB;EACnD,OAAO,0DAAmB,MAAM,GAAG,QAAQ;EAC3C,OAAO;EACR,CAAC;CACF,MAAM,qCAEFC,yBACE;EACE;EACA;EACA;EACA,WAAW,MAAM,UAAU;EAC5B,EACD,UACD,EAAE,EACL;EAAC;EAAW;EAAK;EAAa;EAAO;EAAU,CAChD;CACD,MAA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"}

package/dist/esm/components/tree/tree.js

@@ -3,6 +3,7 @@
 import { createContext as createContext$1 } from "../../utils/context.js";
 import { utils_exports } from "../../utils/index.js";
 import { styled } from "../../core/system/factory.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { ChevronRightIcon } from "../icon/icons/chevron-right-icon.js";
@@ -142,13 +143,18 @@ const TreeItem = withContext(({ className, css, colorScheme, animated: animatedP
 		query: query ?? ((0, utils_exports.isString)(label) ? label : void 0),
 		value: valueProp
 	});
-	const itemProps = {
+	const itemProps = useMemo(() => mergeProps({
 		className,
 		css,
 		colorScheme,
-		"--level": level.toString(),
-		...rootProps
-	};
+		"--level": level.toString()
+	}, rootProps)(), [
+		className,
+		css,
+		colorScheme,
+		level,
+		rootProps
+	]);
 	const callbackProps = {
 		disabled,
 		expanded: groupOpen
@@ -175,27 +181,12 @@ const TreeItem = withContext(({ className, css, colorScheme, animated: animatedP
 			value: useMemo(() => ({
 				checkboxProps: {
 					size: componentContext.size,
-					...getCheckboxProps({
-						...componentContext.checkboxProps,
-						...checkboxProps
-					})
-				},
-				endElementProps: {
-					...componentContext.endElementProps,
-					...endElementProps
+					...getCheckboxProps(mergeProps(componentContext.checkboxProps, checkboxProps)())
 				},
-				indicatorProps: { ...getIndicatorProps({
-					...componentContext.indicatorProps,
-					...indicatorProps
-				}) },
-				labelProps: { ...getLabelProps({
-					...componentContext.labelProps,
-					...labelProps
-				}) },
-				startElementProps: {
-					...componentContext.startElementProps,
-					...startElementProps
-				}
+				endElementProps: mergeProps(componentContext.endElementProps, endElementProps)(),
+				indicatorProps: { ...getIndicatorProps(mergeProps(componentContext.indicatorProps, indicatorProps)()) },
+				labelProps: { ...getLabelProps(mergeProps(componentContext.labelProps, labelProps)()) },
+				startElementProps: mergeProps(componentContext.startElementProps, startElementProps)()
 			}), [
 				checkboxProps,
 				componentContext.checkboxProps,
@@ -230,10 +221,7 @@ const TreeItem = withContext(({ className, css, colorScheme, animated: animatedP
 				}), /* @__PURE__ */ jsx(TreeGroup, {
 					duration: !animated ? 0 : void 0,
 					open: groupOpen,
-					...getGroupProps({
-						...componentContext.groupProps,
-						...groupProps
-					}),
+					...getGroupProps(mergeProps(componentContext.groupProps, groupProps)()),
 					children
 				})]
 			}) : /* @__PURE__ */ jsx(styled.li, {
@@ -269,44 +257,29 @@ const TreeIndicator = withContext(({ children = /* @__PURE__ */ jsx(ChevronRight
 	return Children.count(children) > 1 ? Children.only(null) : null;
 }, "indicator")(void 0, (props) => {
 	const { indicatorProps } = useItemComponentContext();
-	return {
-		...indicatorProps,
-		...props
-	};
+	return mergeProps(indicatorProps, props)();
 });
 const TreeCheckbox = withContext(Checkbox, "checkbox")(void 0, (props) => {
 	const { checkboxProps } = useItemComponentContext();
-	return {
-		...checkboxProps,
-		...props
-	};
+	return mergeProps(checkboxProps, props)();
 });
 const TreeStartElement = withContext("div", {
 	name: "StartElement",
 	slot: ["element", "start"]
 })(void 0, (props) => {
 	const { startElementProps } = useItemComponentContext();
-	return {
-		...startElementProps,
-		...props
-	};
+	return mergeProps(startElementProps, props)();
 });
 const TreeEndElement = withContext("div", {
 	name: "EndElement",
 	slot: ["element", "end"]
 })(void 0, (props) => {
 	const { endElementProps } = useItemComponentContext();
-	return {
-		...endElementProps,
-		...props
-	};
+	return mergeProps(endElementProps, props)();
 });
 const TreeLabel = withContext("span", "label")(void 0, (props) => {
 	const { labelProps } = useItemComponentContext();
-	return {
-		...labelProps,
-		...props
-	};
+	return mergeProps(labelProps, props)();
 });
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"tree.js","names":["createContext"],"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  createContext,\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\ntype 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\ninterface 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 =\n      props.value || (isString(props.label) ? `${props.label}-${index}` : 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> {}\n\ninterface ItemComponentContext {\n  checkboxProps: TreeCheckboxProps\n  endElementProps: TreeEndElementProps\n  indicatorProps: TreeIndicatorProps\n  labelProps: TreeLabelProps\n  startElementProps: TreeStartElementProps\n}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({ name: \"ItemComponentContext\" })\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    > {\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<\n    TreeItemProps,\n    \"children\" | \"label\" | \"open\" | \"query\" | \"value\"\n  >\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    ...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      }),\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        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 HTMLStyledProps<\"div\">, 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 root element.\n   */\n  rootProps?: HTMLStyledProps<\"li\">\n  /**\n   * Props for the start component.\n   */\n  startElementProps?: TreeStartElementProps\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<\"div\", TreeItemProps>(\n  ({\n    className,\n    css,\n    colorScheme,\n    animated: animatedProp,\n    asyncChildren: asyncChildrenProp,\n    endElement,\n    indicator: indicatorProp,\n    label,\n    loadingScheme,\n    query,\n    startElement,\n    value: valueProp = isString(label) ? label : undefined,\n    checkboxProps,\n    endElementProps,\n    groupProps,\n    indicatorProps,\n    labelProps,\n    rootProps,\n    startElementProps,\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      props,\n      value,\n      getCheckboxProps,\n      getGroupItemProps,\n      getGroupProps,\n      getIndicatorProps,\n      getItemProps,\n      getLabelProps,\n      onGroupClose,\n      onGroupOpen,\n      onGroupToggle,\n    } = useTreeItem({\n      ...componentContext.itemProps,\n      ...rest,\n      asyncChildren: asyncChildrenProp ? asyncChildren : undefined,\n      query: query ?? (isString(label) ? label : undefined),\n      value: valueProp,\n    })\n    const itemProps = {\n      className,\n      css,\n      colorScheme,\n      \"--level\": level.toString(),\n      ...rootProps,\n    }\n    const callbackProps = { 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 itemComponentContext = useMemo(\n      () => ({\n        checkboxProps: {\n          size: componentContext.size,\n          ...getCheckboxProps({\n            ...componentContext.checkboxProps,\n            ...checkboxProps,\n          }),\n        },\n        endElementProps: {\n          ...componentContext.endElementProps,\n          ...endElementProps,\n        },\n        indicatorProps: {\n          ...getIndicatorProps({\n            ...componentContext.indicatorProps,\n            ...indicatorProps,\n          }),\n        },\n        labelProps: {\n          ...getLabelProps({\n            ...componentContext.labelProps,\n            ...labelProps,\n          }),\n        },\n        startElementProps: {\n          ...componentContext.startElementProps,\n          ...startElementProps,\n        },\n      }),\n      [\n        checkboxProps,\n        componentContext.checkboxProps,\n        componentContext.endElementProps,\n        componentContext.indicatorProps,\n        componentContext.labelProps,\n        componentContext.size,\n        componentContext.startElementProps,\n        endElementProps,\n        getCheckboxProps,\n        getIndicatorProps,\n        getLabelProps,\n        indicatorProps,\n        labelProps,\n        startElementProps,\n      ],\n    )\n\n    return (\n      <TreeItemContext value={context}>\n        <ItemComponentContext value={itemComponentContext}>\n          {group ? (\n            <styled.li {...getGroupItemProps(itemProps)}>\n              <styled.div data-content {...props}>\n                <TreeIndicator data-animated={dataAttr(animated)}>\n                  {groupLoading ? (\n                    <Loading />\n                  ) : (\n                    runIfFn(indicator, callbackProps)\n                  )}\n                </TreeIndicator>\n                {checkable ? <TreeCheckbox /> : null}\n                {groupStartElement ? (\n                  <TreeStartElement>\n                    {runIfFn(groupStartElement, callbackProps)}\n                  </TreeStartElement>\n                ) : null}\n                {label ? <TreeLabel>{label}</TreeLabel> : null}\n                {groupEndElement ? (\n                  <TreeEndElement>\n                    {runIfFn(groupEndElement, callbackProps)}\n                  </TreeEndElement>\n                ) : null}\n              </styled.div>\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 {...getItemProps(itemProps)}>\n              <styled.div data-content {...props}>\n                <TreeIndicator data-hidden />\n                {checkable ? <TreeCheckbox /> : null}\n                {itemStartElement ? (\n                  <TreeStartElement>\n                    {runIfFn(itemStartElement, callbackProps)}\n                  </TreeStartElement>\n                ) : null}\n                {label ? <TreeLabel>{label}</TreeLabel> : null}\n                {itemEndElement ? (\n                  <TreeEndElement>\n                    {runIfFn(itemEndElement, callbackProps)}\n                  </TreeEndElement>\n                ) : null}\n              </styled.div>\n            </styled.li>\n          )}\n        </ItemComponentContext>\n      </TreeItemContext>\n    )\n  },\n  \"item\",\n)()\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)(undefined, (props) => {\n  const { indicatorProps } = useItemComponentContext()\n\n  return { ...indicatorProps, ...props }\n})\n\ninterface TreeCheckboxProps extends CheckboxProps {}\n\nconst TreeCheckbox = withContext<\"input\", TreeCheckboxProps>(\n  Checkbox,\n  \"checkbox\",\n)(undefined, (props) => {\n  const { checkboxProps } = useItemComponentContext()\n\n  return { ...checkboxProps, ...props }\n})\n\ninterface TreeStartElementProps extends HTMLStyledProps {}\n\nconst TreeStartElement = withContext<\"div\", TreeStartElementProps>(\"div\", {\n  name: \"StartElement\",\n  slot: [\"element\", \"start\"],\n})(undefined, (props) => {\n  const { startElementProps } = useItemComponentContext()\n\n  return { ...startElementProps, ...props }\n})\n\ninterface TreeEndElementProps extends HTMLStyledProps {}\n\nconst TreeEndElement = withContext<\"div\", TreeEndElementProps>(\"div\", {\n  name: \"EndElement\",\n  slot: [\"element\", \"end\"],\n})(undefined, (props) => {\n  const { endElementProps } = useItemComponentContext()\n\n  return { ...endElementProps, ...props }\n})\n\ninterface TreeLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst TreeLabel = withContext<\"span\", TreeLabelProps>(\"span\", \"label\")(\n  undefined,\n  (props) => {\n    const { labelProps } = useItemComponentContext()\n\n    return { ...labelProps, ...props }\n  },\n)\n"],"mappings":"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"}
+{"version":3,"file":"tree.js","names":["createContext"],"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, mergeProps, styled } from \"../../core\"\nimport {\n  cast,\n  createContext,\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\ntype 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\ninterface 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 =\n      props.value || (isString(props.label) ? `${props.label}-${index}` : 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> {}\n\ninterface ItemComponentContext {\n  checkboxProps: TreeCheckboxProps\n  endElementProps: TreeEndElementProps\n  indicatorProps: TreeIndicatorProps\n  labelProps: TreeLabelProps\n  startElementProps: TreeStartElementProps\n}\n\nconst [ItemComponentContext, useItemComponentContext] =\n  createContext<ItemComponentContext>({ name: \"ItemComponentContext\" })\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    > {\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<\n    TreeItemProps,\n    \"children\" | \"label\" | \"open\" | \"query\" | \"value\"\n  >\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    ...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      }),\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        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 HTMLStyledProps<\"div\">, 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 root element.\n   */\n  rootProps?: HTMLStyledProps<\"li\">\n  /**\n   * Props for the start component.\n   */\n  startElementProps?: TreeStartElementProps\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<\"div\", TreeItemProps>(\n  ({\n    className,\n    css,\n    colorScheme,\n    animated: animatedProp,\n    asyncChildren: asyncChildrenProp,\n    endElement,\n    indicator: indicatorProp,\n    label,\n    loadingScheme,\n    query,\n    startElement,\n    value: valueProp = isString(label) ? label : undefined,\n    checkboxProps,\n    endElementProps,\n    groupProps,\n    indicatorProps,\n    labelProps,\n    rootProps,\n    startElementProps,\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      props,\n      value,\n      getCheckboxProps,\n      getGroupItemProps,\n      getGroupProps,\n      getIndicatorProps,\n      getItemProps,\n      getLabelProps,\n      onGroupClose,\n      onGroupOpen,\n      onGroupToggle,\n    } = useTreeItem({\n      ...componentContext.itemProps,\n      ...rest,\n      asyncChildren: asyncChildrenProp ? asyncChildren : undefined,\n      query: query ?? (isString(label) ? label : undefined),\n      value: valueProp,\n    })\n    const itemProps = useMemo(\n      () =>\n        mergeProps(\n          {\n            className,\n            css,\n            colorScheme,\n            \"--level\": level.toString(),\n          },\n          rootProps,\n        )(),\n      [className, css, colorScheme, level, rootProps],\n    )\n    const callbackProps = { 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 itemComponentContext = useMemo(\n      () => ({\n        checkboxProps: {\n          size: componentContext.size,\n          ...getCheckboxProps(\n            mergeProps(componentContext.checkboxProps, checkboxProps)(),\n          ),\n        },\n        endElementProps: mergeProps(\n          componentContext.endElementProps,\n          endElementProps,\n        )(),\n        indicatorProps: {\n          ...getIndicatorProps(\n            mergeProps(componentContext.indicatorProps, indicatorProps)(),\n          ),\n        },\n        labelProps: {\n          ...getLabelProps(\n            mergeProps(componentContext.labelProps, labelProps)(),\n          ),\n        },\n        startElementProps: mergeProps(\n          componentContext.startElementProps,\n          startElementProps,\n        )(),\n      }),\n      [\n        checkboxProps,\n        componentContext.checkboxProps,\n        componentContext.endElementProps,\n        componentContext.indicatorProps,\n        componentContext.labelProps,\n        componentContext.size,\n        componentContext.startElementProps,\n        endElementProps,\n        getCheckboxProps,\n        getIndicatorProps,\n        getLabelProps,\n        indicatorProps,\n        labelProps,\n        startElementProps,\n      ],\n    )\n\n    return (\n      <TreeItemContext value={context}>\n        <ItemComponentContext value={itemComponentContext}>\n          {group ? (\n            <styled.li {...getGroupItemProps(itemProps)}>\n              <styled.div data-content {...props}>\n                <TreeIndicator data-animated={dataAttr(animated)}>\n                  {groupLoading ? (\n                    <Loading />\n                  ) : (\n                    runIfFn(indicator, callbackProps)\n                  )}\n                </TreeIndicator>\n                {checkable ? <TreeCheckbox /> : null}\n                {groupStartElement ? (\n                  <TreeStartElement>\n                    {runIfFn(groupStartElement, callbackProps)}\n                  </TreeStartElement>\n                ) : null}\n                {label ? <TreeLabel>{label}</TreeLabel> : null}\n                {groupEndElement ? (\n                  <TreeEndElement>\n                    {runIfFn(groupEndElement, callbackProps)}\n                  </TreeEndElement>\n                ) : null}\n              </styled.div>\n\n              <TreeGroup\n                duration={!animated ? 0 : undefined}\n                open={groupOpen}\n                {...getGroupProps(\n                  mergeProps(componentContext.groupProps, groupProps)(),\n                )}\n              >\n                {children}\n              </TreeGroup>\n            </styled.li>\n          ) : (\n            <styled.li {...getItemProps(itemProps)}>\n              <styled.div data-content {...props}>\n                <TreeIndicator data-hidden />\n                {checkable ? <TreeCheckbox /> : null}\n                {itemStartElement ? (\n                  <TreeStartElement>\n                    {runIfFn(itemStartElement, callbackProps)}\n                  </TreeStartElement>\n                ) : null}\n                {label ? <TreeLabel>{label}</TreeLabel> : null}\n                {itemEndElement ? (\n                  <TreeEndElement>\n                    {runIfFn(itemEndElement, callbackProps)}\n                  </TreeEndElement>\n                ) : null}\n              </styled.div>\n            </styled.li>\n          )}\n        </ItemComponentContext>\n      </TreeItemContext>\n    )\n  },\n  \"item\",\n)()\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)(undefined, (props) => {\n  const { indicatorProps } = useItemComponentContext()\n\n  return mergeProps(indicatorProps, props)()\n})\n\ninterface TreeCheckboxProps extends CheckboxProps {}\n\nconst TreeCheckbox = withContext<\"input\", TreeCheckboxProps>(\n  Checkbox,\n  \"checkbox\",\n)(undefined, (props) => {\n  const { checkboxProps } = useItemComponentContext()\n\n  return mergeProps(checkboxProps, props)()\n})\n\ninterface TreeStartElementProps extends HTMLStyledProps {}\n\nconst TreeStartElement = withContext<\"div\", TreeStartElementProps>(\"div\", {\n  name: \"StartElement\",\n  slot: [\"element\", \"start\"],\n})(undefined, (props) => {\n  const { startElementProps } = useItemComponentContext()\n\n  return mergeProps(startElementProps, props)()\n})\n\ninterface TreeEndElementProps extends HTMLStyledProps {}\n\nconst TreeEndElement = withContext<\"div\", TreeEndElementProps>(\"div\", {\n  name: \"EndElement\",\n  slot: [\"element\", \"end\"],\n})(undefined, (props) => {\n  const { endElementProps } = useItemComponentContext()\n\n  return mergeProps(endElementProps, props)()\n})\n\ninterface TreeLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst TreeLabel = withContext<\"span\", TreeLabelProps>(\"span\", \"label\")(\n  undefined,\n  (props) => {\n    const { labelProps } = useItemComponentContext()\n\n    return mergeProps(labelProps, props)()\n  },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsEA,MAAM,qBAAqB,UAAuB;AAChD,QAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,MACJ,MAAM,sCAAmB,MAAM,MAAM,GAAG,GAAG,MAAM,MAAM,GAAG,UAAU;AAEtE,MAAI,cAAc,OAAO;GACvB,MAAM,EAAE,UAAU,GAAG,SAAS;AAE9B,UACE,oBAAC;IAAmB,GAAI;cACrB,kBAAkB,SAAS;MADf,IAEJ;QAGb,QAAO,oBAAC,YAAmB,GAAI,SAAT,IAAkB;GAE1C;;AAGJ,MAAM,0BACJ,MACA,QACA,SAC2C;AAC3C,iCAAa,OAAO,KAAK,WAAW,UAAU,UAAU,QACtD,QAAO,OAAO;UACL,OACT,QAAO;sCACW,KAAK,KAAK,WAAW,QAAQ,UAAU,MACzD,QAAO,KAAK;KAEZ,QAAO;;AA8BX,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAoC,EAAE,MAAM,wBAAwB,CAAC;AAwCvE,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACE,oBACF,QACA,UACD;;;;;;AASD,MAAa,WAAW,cACa,EACjC,MACA,UACA,UACA,YACA,WACA,iBACA,OACA,eACA,cACA,eACA,iBACA,YACA,gBACA,WACA,YACA,mBACA,GAAG,WAC0B;CAC7B,MAAM,mBAAmB,cAAc;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,qBACE,QAAQ;EAAE,GAAG;EAAM,UAAU;EAAkB,CAAC;AAoEpD,QACE,oBAAC;EAAuB,OAAO;YAC7B,oBAAC;GAAY,OArED,eACP;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;aAuCK,oBAAC;IAAiB,OAtCC,eAChB;KACL;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;KACD,CACF;cAMO,oBAAC,OAAO,MAAG,GAAI,cAAc,GAAI;KAChB;IACP;GACS;GAG7B,QACA,EAAE,eAAe,CAAC,OAAO,EAAE,CAC5B,EAAE;AAsEH,MAAa,WAAW,aACrB,EACC,WACA,KACA,aACA,UAAU,cACV,eAAe,mBACf,YACA,WAAW,eACX,OACA,eACA,OACA,cACA,OAAO,wCAAqB,MAAM,GAAG,QAAQ,QAC7C,eACA,iBACA,YACA,gBACA,YACA,WACA,mBACA,GAAG,WACC;CACJ,MAAM,EAAE,cAAc,gBAAgB;CACtC,MAAM,mBAAmB,qBAAqB;CAC9C,MAAM,UAAU,oBACd,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,gBAAgB,YAAY,YAAY;AAG5C,SAAO,kBAFO,MAAM,qBAAqB,CAEV;IAC9B,CAAC,kBAAkB,CAAC;CACvB,MAAM,EACJ,YACA,UACA,UACA,OACA,cACA,WACA,OACA,OACA,OACA,kBACA,mBACA,eACA,mBACA,cACA,eACA,cACA,aACA,kBACE,YAAY;EACd,GAAG,iBAAiB;EACpB,GAAG;EACH,eAAe,oBAAoB,gBAAgB;EACnD,OAAO,sCAAmB,MAAM,GAAG,QAAQ;EAC3C,OAAO;EACR,CAAC;CACF,MAAM,YAAY,cAEd,WACE;EACE;EACA;EACA;EACA,WAAW,MAAM,UAAU;EAC5B,EACD,UACD,EAAE,EACL;EAAC;EAAW;EAAK;EAAa;EAAO;EAAU,CAChD;C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"}

package/dist/types/components/accordion/accordion.d.ts

@@ -1,15 +1,12 @@
 import { ReactNodeOrFunction } from "../../utils/index.types.js";
 import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
-import "../../core/index.js";
 import { WithTransitionProps } from "../motion/index.types.js";
-import "../motion/index.js";
 import { CollapseProps } from "../collapse/collapse.js";
-import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react39 from "react";
+import * as react485 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +30,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react39.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react485.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/use-accordion.d.ts

@@ -1,11 +1,10 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
-import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react40 from "react";
+import * as react473 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react40.Context<{
+declare const AccordionDescendantsContext: react473.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
     destroy: () => void;
@@ -24,7 +23,7 @@ declare const AccordionDescendantsContext: react40.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react40.RefCallback<HTMLButtonElement>;
+    } | undefined) => react473.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +49,12 @@ declare const AccordionDescendantsContext: react40.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react40.RefCallback<HTMLButtonElement>;
+      } | undefined) => react473.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react40.RefCallback<HTMLButtonElement>;
+    register: react473.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +74,15 @@ declare const AccordionDescendantsContext: react40.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react40.RefCallback<HTMLButtonElement>;
+    } | undefined) => react473.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react40.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react473.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react40.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react473.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +136,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react40.RefCallback<HTMLButtonElement>;
+    } | undefined) => react473.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +144,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react40.Dispatch<react40.SetStateAction<number>>;
-  setIndex: react40.Dispatch<react40.SetStateAction<number | number[]>>;
+  setFocusedIndex: react473.Dispatch<react473.SetStateAction<number>>;
+  setIndex: react473.Dispatch<react473.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/action-bar/action-bar.d.ts

@@ -1,13 +1,11 @@
 import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
-import "../../core/index.js";
 import { ActionBarStyle } from "./action-bar.style.js";
 import { PortalProps } from "../portal/portal.js";
 import { UsePopupAnimationProps } from "../popover/popover.js";
-import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react30 from "react";
+import * as react486 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/action-bar/action-bar.d.ts
@@ -29,7 +27,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react30.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react486.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

package/dist/types/components/action-bar/use-action-bar.d.ts

@@ -1,5 +1,4 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
-import "../../core/index.js";
 import { UseDisclosureProps } from "../../hooks/use-disclosure/use-disclosure.js";
 
 //#region src/components/action-bar/use-action-bar.d.ts