@yamada-ui/react 2.2.1-dev-20260504103143 → 2.2.1-dev-20260509050741

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

@@ -1,9 +1,8 @@
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_use_tree = require('./use-tree.cjs');
-const require_tree = require('./tree.cjs');
-
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_use_tree = require("./use-tree.cjs");
+const require_tree = require("./tree.cjs");
 //#region src/components/tree/namespace.ts
-var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+var namespace_exports = /* @__PURE__ */ require_runtime.__exportAll({
 	Context: () => require_use_tree.TreeContext,
 	DescendantsContext: () => require_use_tree.TreeDescendantsContext,
 	Item: () => require_tree.TreeItem,
@@ -15,12 +14,12 @@ var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	useItemContext: () => require_use_tree.useTreeItemContext,
 	usePropsContext: () => require_tree.useTreePropsContext
 });
-
 //#endregion
-Object.defineProperty(exports, 'namespace_exports', {
-  enumerable: true,
-  get: function () {
-    return namespace_exports;
-  }
+Object.defineProperty(exports, "namespace_exports", {
+	enumerable: true,
+	get: function() {
+		return namespace_exports;
+	}
 });
+
 //# sourceMappingURL=namespace.cjs.map

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

@@ -1,24 +1,17 @@
 "use client";
-
-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_create_component = require('../../core/components/create-component.cjs');
-require('../../core/index.cjs');
-const require_chevron_right_icon = require('../icon/icons/chevron-right-icon.cjs');
-require('../icon/index.cjs');
-const require_collapse = require('../collapse/collapse.cjs');
-require('../collapse/index.cjs');
-const require_use_loading_component = require('../loading/use-loading-component.cjs');
-require('../loading/index.cjs');
-const require_checkbox = require('../checkbox/checkbox.cjs');
-require('../checkbox/index.cjs');
-const require_tree_style = require('./tree.style.cjs');
-const require_use_tree = require('./use-tree.cjs');
+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_create_component = require("../../core/components/create-component.cjs");
+const require_chevron_right_icon = require("../icon/icons/chevron-right-icon.cjs");
+const require_collapse = require("../collapse/collapse.cjs");
+const require_use_loading_component = require("../loading/use-loading-component.cjs");
+const require_checkbox = require("../checkbox/checkbox.cjs");
+const require_tree_style = require("./tree.style.cjs");
+const require_use_tree = require("./use-tree.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/components/tree/tree.tsx
 const recursiveTreeItem = (items) => {
 	return items?.map((props, index) => {
@@ -309,10 +302,10 @@ const TreeLabel = withContext("span", "label")(void 0, (props) => {
 		...props
 	};
 });
-
 //#endregion
 exports.TreeItem = TreeItem;
 exports.TreePropsContext = TreePropsContext;
 exports.TreeRoot = TreeRoot;
 exports.useTreePropsContext = useTreePropsContext;
+
 //# sourceMappingURL=tree.cjs.map

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

@@ -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","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":";;;;;;;;;;;;;;;AAsEA,MAAM,qBAAqB,UAAuB;CAChD,OAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,MACJ,MAAM,WAAA,GAAA,oBAAA,cAAA,UAAmB,MAAM,MAAM,GAAG,GAAG,MAAM,MAAM,GAAG,UAAU;EAEtE,IAAI,cAAc,OAAO;GACvB,MAAM,EAAE,UAAU,GAAG,SAAS;GAE9B,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAAoB,GAAI;cACrB,kBAAkB,SAAS;IACnB,EAFI,IAEJ;SAGb,OAAO,iBAAA,GAAA,kBAAA,KAAC,UAAD,EAAoB,GAAI,OAAS,EAAlB,IAAkB;GAE1C;;AAGJ,MAAM,0BACJ,MACA,QACA,SAC2C;CAC3C,KAAA,GAAA,oBAAA,cAAA,UAAa,OAAO,KAAK,WAAW,UAAU,UAAU,SACtD,OAAO,OAAO;MACT,IAAI,QACT,OAAO;MACF,KAAA,GAAA,oBAAA,cAAA,UAAa,KAAK,KAAK,WAAW,QAAQ,UAAU,OACzD,OAAO,KAAK;MAEZ,OAAO;;AA8BX,MAAM,CAAC,sBAAsB,2BAC3BA,gBAAAA,cAAoC,EAAE,MAAM,wBAAwB,CAAC;AAwCvE,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACEC,yBAAAA,oBACF,QACAC,mBAAAA,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,oBAAA,GAAA,MAAA,eAAiC;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,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,iBAAAA,QAAQ;EAAE,GAAG;EAAM,UAAU;EAAkB,CAAC;CAoEpD,OACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,wBAAD;EAAwB,OAAO;YAC7B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,aAAD;GAAa,QAAA,GAAA,MAAA,gBApER;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,CAuC4B;aACzB,iBAAA,GAAA,kBAAA,KAAC,kBAAD;IAAkB,QAAA,GAAA,MAAA,gBArCf;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,CAM4C;cACvC,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,OAAO,IAAR,EAAW,GAAI,cAAc,EAAI,CAAA;IAChB,CAAA;GACP,CAAA;EACS,CAAA;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,aAAA,GAAA,oBAAA,cAAA,UAAqB,MAAM,GAAG,QAAQ,KAAA,GAC7C,eACA,iBACA,YACA,gBACA,YACA,WACA,mBACA,GAAG,WACC;CACJ,MAAM,EAAE,cAAcC,iBAAAA,gBAAgB;CACtC,MAAM,mBAAmB,qBAAqB;CAC9C,MAAM,UAAUC,8BAAAA,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,iBAAA,GAAA,MAAA,aAA4B,YAAY;EAG5C,OAAO,kBAAkB,MAFL,qBAAqB,CAEV;IAC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"}

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

@@ -1,9 +1,6 @@
-const require_config = require('../../core/system/config.cjs');
-const require_focus_ring = require('../../core/css/focus-ring.cjs');
-require('../../core/index.cjs');
-const require_checkbox_style = require('../checkbox/checkbox.style.cjs');
-require('../checkbox/index.cjs');
-
+const require_config = require("../../core/system/config.cjs");
+const require_focus_ring = require("../../core/css/focus-ring.cjs");
+const require_checkbox_style = require("../checkbox/checkbox.style.cjs");
 //#region src/components/tree/tree.style.ts
 const treeStyle = require_config.defineComponentSlotStyle({
 	base: {
@@ -72,11 +69,21 @@ const treeStyle = require_config.defineComponentSlotStyle({
 		start: {}
 	},
 	props: {
+		/**
+		* The shape of the component
+		*
+		* @default 'rounded'
+		*/
 		shape: {
 			circle: { item: { "--rounded": "radii.full" } },
 			rounded: { item: { "--rounded": "radii.l1" } },
 			square: { item: { "--rounded": "0" } }
 		},
+		/**
+		* If `true`, display guide lines.
+		*
+		* @default false
+		*/
 		withGuideLine: { true: {
 			group: {
 				position: "relative",
@@ -164,7 +171,7 @@ const treeStyle = require_config.defineComponentSlotStyle({
 		withGuideLine: false
 	}
 });
-
 //#endregion
 exports.treeStyle = treeStyle;
+
 //# sourceMappingURL=tree.style.cjs.map

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

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

package/dist/cjs/components/tree/use-tree.cjs

@@ -1,20 +1,16 @@
 "use client";
-
-const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_context = require('../../utils/context.cjs');
-const require_dom = require('../../utils/dom.cjs');
-const require_effect = require('../../utils/effect.cjs');
-const require_ref = require('../../utils/ref.cjs');
-const require_utils_index = require('../../utils/index.cjs');
-const require_props = require('../../core/components/props.cjs');
-require('../../core/index.cjs');
-const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
-const require_hooks_use_descendants_index = require('../../hooks/use-descendants/index.cjs');
-const require_use_disclosure = require('../../hooks/use-disclosure/use-disclosure.cjs');
-require('../../hooks/use-disclosure/index.cjs');
-const require_hooks_use_async_callback_index = require('../../hooks/use-async-callback/index.cjs');
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_context = require("../../utils/context.cjs");
+const require_dom = require("../../utils/dom.cjs");
+const require_effect = require("../../utils/effect.cjs");
+const require_ref = require("../../utils/ref.cjs");
+const require_utils_index = require("../../utils/index.cjs");
+const require_props = require("../../core/components/props.cjs");
+const require_hooks_use_controllable_state_index = require("../../hooks/use-controllable-state/index.cjs");
+const require_hooks_use_descendants_index = require("../../hooks/use-descendants/index.cjs");
+const require_use_disclosure = require("../../hooks/use-disclosure/use-disclosure.cjs");
+const require_hooks_use_async_callback_index = require("../../hooks/use-async-callback/index.cjs");
 let react = require("react");
-
 //#region src/components/tree/use-tree.ts
 const { DescendantsContext: TreeDescendantsContext, useDescendant: useTreeDescendant, useDescendants: useTreeDescendants } = require_hooks_use_descendants_index.createDescendants();
 const [TreeContext, useTreeContext] = require_context.createContext({ name: "TreeContext" });
@@ -70,7 +66,7 @@ const useTree = ({ checkable = false, checkedValue: checkedValueProp, children,
 				value: ""
 			};
 		}, 400);
-		const descendant = descendants.enabledValues({ expanded: true }).filter((descendant$1) => !(0, require_utils_index.utils_exports.isUndefined)(descendant$1.value) && descendant$1.value !== searchRef.current.omitValue).find(({ query, value: value$1 }) => (0, require_utils_index.utils_exports.match)(query ?? value$1, searchRef.current.value, "startsWith"));
+		const descendant = descendants.enabledValues({ expanded: true }).filter((descendant) => !(0, require_utils_index.utils_exports.isUndefined)(descendant.value) && descendant.value !== searchRef.current.omitValue).find(({ query, value }) => (0, require_utils_index.utils_exports.match)(query ?? value, searchRef.current.value, "startsWith"));
 		if (descendant) onActiveDescendant(descendant);
 	}, [descendants, onActiveDescendant]);
 	const onSelectedChange = (0, react.useCallback)((value) => {
@@ -86,7 +82,7 @@ const useTree = ({ checkable = false, checkedValue: checkedValueProp, children,
 		const value = (0, require_utils_index.utils_exports.isArray)(selectedValue) ? selectedValue.at(0) : selectedValue;
 		const expandedDescendants = descendants.enabledValues({ expanded: true });
 		if (value) {
-			const descendant = expandedDescendants.find((descendant$1) => value === descendant$1.value);
+			const descendant = expandedDescendants.find((descendant) => value === descendant.value);
 			if (descendant) onActiveDescendant(descendant, false);
 			else onActiveDescendant(expandedDescendants.at(0), false);
 		} else onActiveDescendant(expandedDescendants.at(0), false);
@@ -126,19 +122,19 @@ const getRootDescendant = (descendants) => (value) => {
 	const segments = value.split("/");
 	if (segments.length <= 1) return;
 	const rootValue = segments.at(0);
-	return descendants.enabledValues().find(({ value: value$1 }) => value$1 === rootValue);
+	return descendants.enabledValues().find(({ value }) => value === rootValue);
 };
 const getParentDescendant = (descendants) => (value) => {
 	const segments = value.split("/");
 	if (segments.length <= 1) return;
 	const parentValue = segments.slice(0, -1).join("/");
-	return descendants.enabledValues().find(({ value: value$1 }) => value$1 === parentValue);
+	return descendants.enabledValues().find(({ value }) => value === parentValue);
 };
 const getChildDescendants = (descendants) => (value) => {
 	const children = descendants.enabledValues().filter((descendant) => descendant.value.startsWith(value + "/"));
 	return {
 		children,
-		values: children.map(({ value: value$1 }) => value$1).filter((value$1) => !(0, require_utils_index.utils_exports.isUndefined)(value$1))
+		values: children.map(({ value }) => value).filter((value) => !(0, require_utils_index.utils_exports.isUndefined)(value))
 	};
 };
 const getParentValues = (value) => {
@@ -207,18 +203,18 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 		setChildren(await asyncChildren?.());
 	}, [asyncChildren]);
 	const onSelect = (0, react.useCallback)((ev = {}) => {
-		const selectedValue$1 = ev.value ?? value;
-		if (disabled || !selectedValue$1) return;
+		const selectedValue = ev.value ?? value;
+		if (disabled || !selectedValue) return;
 		if (multiple) onSelectedChange((prev) => {
 			if (!(0, require_utils_index.utils_exports.isArray)(prev)) return prev;
-			if (ev.ctrlKey || ev.metaKey) if (prev.includes(selectedValue$1)) return prev.filter((prevValue) => prevValue !== selectedValue$1);
-			else return [...prev, selectedValue$1];
+			if (ev.ctrlKey || ev.metaKey) if (prev.includes(selectedValue)) return prev.filter((prevValue) => prevValue !== selectedValue);
+			else return [...prev, selectedValue];
 			else if (ev.shiftKey && prev[0]) {
-				if (prev[0] === selectedValue$1) return prev;
-				return getRangeValues(descendants)(prev[0], selectedValue$1);
-			} else return [selectedValue$1];
+				if (prev[0] === selectedValue) return prev;
+				return getRangeValues(descendants)(prev[0], selectedValue);
+			} else return [selectedValue];
 		});
-		else onSelectedChange(selectedValue$1);
+		else onSelectedChange(selectedValue);
 	}, [
 		descendants,
 		disabled,
@@ -271,7 +267,7 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 		require_dom.runKeyAction(ev, {
 			a: () => {
 				if (!multiple || !(ev.ctrlKey || ev.metaKey)) return;
-				onSelectedChange(descendants.enabledValues().map(({ value: value$1 }) => value$1).filter((value$1) => !(0, require_utils_index.utils_exports.isUndefined)(value$1)));
+				onSelectedChange(descendants.enabledValues().map(({ value }) => value).filter((value) => !(0, require_utils_index.utils_exports.isUndefined)(value)));
 			},
 			ArrowDown: () => {
 				if ((ev.ctrlKey || ev.metaKey) && ev.shiftKey) onExpandAll();
@@ -376,8 +372,8 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 				const parentValues = getParentValues(context.value);
 				const parentTarget = [];
 				parentValues.forEach((parentValue) => {
-					const { children: children$1 } = getChildDescendants(descendants)(parentValue);
-					const { allChecked } = getAllChecked(children$1, [...parentTarget, ...ev.target.checked ? target : []], !ev.target.checked ? target : []);
+					const { children } = getChildDescendants(descendants)(parentValue);
+					const { allChecked } = getAllChecked(children, [...parentTarget, ...ev.target.checked ? target : []], !ev.target.checked ? target : []);
 					if (allChecked) parentTarget.push(parentValue);
 				});
 				if (!ev.target.checked) parentTarget.push(...parentValues);
@@ -414,9 +410,9 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 	]);
 	require_effect.useSafeLayoutEffect(() => {
 		if (!group || !checkable) return;
-		const { children: children$1 } = getChildDescendants(descendants)(value);
-		const { indeterminate: indeterminate$1 } = getAllChecked(children$1);
-		setIndeterminate(indeterminate$1);
+		const { children } = getChildDescendants(descendants)(value);
+		const { indeterminate } = getAllChecked(children);
+		setIndeterminate(indeterminate);
 	}, [checkedValue]);
 	require_effect.useSafeLayoutEffect(() => {
 		if (!checkable) return;
@@ -522,7 +518,6 @@ const useTreeItem = ({ asyncChildren, children: childrenProp, defaultOpen, disab
 		onGroupToggle
 	};
 };
-
 //#endregion
 exports.TreeContext = TreeContext;
 exports.TreeDescendantsContext = TreeDescendantsContext;
@@ -533,4 +528,5 @@ exports.useTreeDescendant = useTreeDescendant;
 exports.useTreeDescendants = useTreeDescendants;
 exports.useTreeItem = useTreeItem;
 exports.useTreeItemContext = useTreeItemContext;
+
 //# sourceMappingURL=use-tree.cjs.map