@yamada-ui/react 2.1.8-dev-20260409043924 → 2.2.0-dev-20260409110358

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

@@ -0,0 +1,540 @@
+import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { UseDisclosureProps } from "../../hooks/use-disclosure/use-disclosure.js";
+import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
+import { UseCheckboxProps } from "../checkbox/use-checkbox.js";
+import "../checkbox/index.js";
+import "../../index.js";
+import * as react241 from "react";
+import { ReactNode, RefObject, SetStateAction } from "react";
+
+//#region src/components/tree/use-tree.d.ts
+interface TreeControl {
+  collapse: () => void;
+  expand: () => void;
+}
+interface TreeDescendantProps {
+  expanded: boolean;
+  group: boolean;
+  id: string;
+  value: string;
+  query?: string;
+}
+declare const TreeDescendantsContext: react241.Context<{
+    active: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined, options?: FocusOptions) => void;
+    count: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    destroy: () => void;
+    enabledCount: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    enabledFirstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    enabledLastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValues: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+    firstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    indexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    lastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    register: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => react241.RefCallback<HTMLElement>;
+    unregister: (node?: HTMLElement | null | undefined) => void;
+    value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    values: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+  }>, useTreeDescendant: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => {
+    descendants: {
+      active: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined, options?: FocusOptions) => void;
+      count: (props?: Partial<TreeDescendantProps> | undefined) => number;
+      destroy: () => void;
+      enabledCount: (props?: Partial<TreeDescendantProps> | undefined) => number;
+      enabledFirstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+      enabledLastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      enabledValues: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+      firstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      indexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+      lastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      register: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => react241.RefCallback<HTMLElement>;
+      unregister: (node?: HTMLElement | null | undefined) => void;
+      value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+      values: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+    };
+    register: react241.RefCallback<HTMLElement>;
+  }, useTreeDescendants: () => {
+    active: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined, options?: FocusOptions) => void;
+    count: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    destroy: () => void;
+    enabledCount: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    enabledFirstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    enabledLastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValues: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+    firstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    indexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    lastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    register: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => react241.RefCallback<HTMLElement>;
+    unregister: (node?: HTMLElement | null | undefined) => void;
+    value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    values: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+  };
+interface TreeContext extends Omit<UseTreeReturn, "descendants" | "getRootProps"> {}
+declare const TreeContext: react241.Context<TreeContext>, useTreeContext: () => TreeContext;
+interface TreeItemContext extends Pick<UseTreeItemReturn, "branchOpen" | "groupOpen" | "level" | "onGroupClose" | "onGroupOpen" | "onGroupToggle" | "value"> {}
+declare const TreeItemContext: react241.Context<TreeItemContext | undefined>, useTreeItemContext: () => TreeItemContext | undefined;
+interface UseTreeProps<Multiple extends boolean = false> extends HTMLProps<"ul"> {
+  /**
+   * If `true`, the tree will allow checkable items.
+   *
+   * @default false
+   */
+  checkable?: boolean;
+  /**
+   * The checked value of the tree.
+   */
+  checkedValue?: string[];
+  /**
+   * Ref of the tree callbacks.
+   */
+  controlRef?: RefObject<null | TreeControl>;
+  /**
+   * The initial checked value of the tree.
+   */
+  defaultCheckedValue?: string[];
+  /**
+   * The initial expanded value of the tree.
+   */
+  defaultExpandedValue?: string[];
+  /**
+   * The initial selected value of the tree.
+   */
+  defaultSelectedValue?: Multiple extends true ? string[] : string;
+  /**
+   * The expanded value of the tree.
+   */
+  expandedValue?: string[];
+  /**
+   * If `true`, the tree will allow multiple selection.
+   *
+   * @default false
+   */
+  multiple?: Multiple;
+  /**
+   * The selected value of the tree.
+   */
+  selectedValue?: Multiple extends true ? string[] : string;
+  /**
+   * The callback invoked when checked value changes.
+   */
+  onCheckedChange?: (value: string[]) => void;
+  /**
+   * The callback invoked when expanded value changes.
+   */
+  onExpandedChange?: (value: string[]) => void;
+  /**
+   * The callback invoked when selected value changes.
+   */
+  onSelectedChange?: (value: Multiple extends true ? string[] : string) => void;
+}
+declare const useTree: <Multiple extends boolean = false>({
+  checkable,
+  checkedValue: checkedValueProp,
+  children,
+  controlRef,
+  defaultCheckedValue,
+  defaultExpandedValue,
+  defaultSelectedValue,
+  expandedValue: expandedValueProp,
+  multiple,
+  selectedValue: selectedValueProp,
+  onCheckedChange: onCheckedChangeProp,
+  onExpandedChange: onExpandedChangeProp,
+  onSelectedChange: onSelectedChangeProp,
+  ...rest
+}?: UseTreeProps<Multiple>) => {
+  activeDescendant: RefObject<Descendant<HTMLElement, TreeDescendantProps> | null>;
+  checkable: boolean;
+  checkedValue: string[];
+  descendants: {
+    active: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined, options?: FocusOptions) => void;
+    count: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    destroy: () => void;
+    enabledCount: (props?: Partial<TreeDescendantProps> | undefined) => number;
+    enabledFirstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledIndexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    enabledLastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledNextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledPrevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValue: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    enabledValues: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+    firstValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    indexOf: (target?: HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null | undefined) => number;
+    lastValue: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    nextValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    prevValue: (indexOrNode: number | HTMLElement | Descendant<HTMLElement, TreeDescendantProps> | null, loop?: boolean, props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    register: (props?: DescendantProps<HTMLElement, TreeDescendantProps> | undefined) => react241.RefCallback<HTMLElement>;
+    unregister: (node?: HTMLElement | null | undefined) => void;
+    value: (indexOrNode: number | HTMLElement | null) => Descendant<HTMLElement, TreeDescendantProps> | undefined;
+    values: (props?: Partial<TreeDescendantProps> | undefined) => Descendant<HTMLElement, TreeDescendantProps>[];
+  };
+  expandedValue: string[];
+  multiple: Multiple | undefined;
+  selectedValue: Multiple extends true ? string[] : string;
+  getRootProps: PropGetter<"ul", undefined, undefined>;
+  onActiveDescendant: (descendant?: Descendant<HTMLElement, TreeDescendantProps>, shouldFocus?: boolean) => void;
+  onCheckedChange: react241.Dispatch<SetStateAction<string[]>>;
+  onCollapseAll: () => void;
+  onExpandAll: () => void;
+  onExpandedChange: (value: string) => void;
+  onSearch: (value: string, omitValue: string) => void;
+  onSelectedChange: (value: SetStateAction<string | string[]>) => void;
+};
+type UseTreeReturn = ReturnType<typeof useTree>;
+interface UseTreeItemProps extends HTMLProps<"div">, Omit<UseDisclosureProps, "timing"> {
+  /**
+   * If `true`, the tree item will be disabled.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * The query to search for in the tree item.
+   */
+  query?: string;
+  /**
+   * The value of the item.
+   */
+  value?: string;
+  /**
+   * If provided, the tree item will be rendered as an async tree item.
+   */
+  asyncChildren?: () => Promise<ReactNode>;
+}
+declare const useTreeItem: ({
+  asyncChildren,
+  children: childrenProp,
+  defaultOpen,
+  disabled,
+  open: openProp,
+  query,
+  value: valueProp,
+  onClose: onCloseProp,
+  onOpen: onOpenProp,
+  ...rest
+}?: UseTreeItemProps) => {
+  branchOpen: boolean[];
+  checked: boolean;
+  children: ReactNode;
+  disabled: boolean;
+  group: boolean;
+  groupLoading: boolean;
+  groupOpen: boolean;
+  indeterminate: boolean;
+  level: number;
+  props: {
+    [key: `data-${string}`]: string | undefined;
+    ref?: react241.Ref<HTMLDivElement> | undefined;
+    slot?: string | undefined | undefined;
+    style?: react241.CSSProperties | undefined;
+    title?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    defaultChecked?: boolean | undefined | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined | undefined;
+    suppressHydrationWarning?: boolean | undefined | undefined;
+    accessKey?: string | undefined | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+    autoFocus?: boolean | undefined | undefined;
+    className?: string | undefined | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined | undefined;
+    dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
+    id?: string | undefined | undefined;
+    lang?: string | undefined | undefined;
+    nonce?: string | undefined | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined | undefined;
+    radioGroup?: string | undefined | undefined;
+    role?: react241.AriaRole | undefined;
+    about?: string | undefined | undefined;
+    datatype?: string | undefined | undefined;
+    inlist?: any;
+    prefix?: string | undefined | undefined;
+    property?: string | undefined | undefined;
+    rel?: string | undefined | undefined;
+    resource?: string | undefined | undefined;
+    rev?: string | undefined | undefined;
+    typeof?: string | undefined | undefined;
+    vocab?: string | undefined | undefined;
+    autoCorrect?: string | undefined | undefined;
+    autoSave?: string | undefined | undefined;
+    itemProp?: string | undefined | undefined;
+    itemScope?: boolean | undefined | undefined;
+    itemType?: string | undefined | undefined;
+    itemID?: string | undefined | undefined;
+    itemRef?: string | undefined | undefined;
+    results?: number | undefined | undefined;
+    security?: string | undefined | undefined;
+    unselectable?: "on" | "off" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+    popoverTarget?: string | undefined | undefined;
+    inert?: boolean | undefined | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+    is?: string | undefined | undefined;
+    exportparts?: string | undefined | undefined;
+    part?: string | undefined | undefined;
+    "aria-activedescendant"?: string | undefined | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+    "aria-braillelabel"?: string | undefined | undefined;
+    "aria-brailleroledescription"?: string | undefined | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-colcount"?: number | undefined | undefined;
+    "aria-colindex"?: number | undefined | undefined;
+    "aria-colindextext"?: string | undefined | undefined;
+    "aria-colspan"?: number | undefined | undefined;
+    "aria-controls"?: string | undefined | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+    "aria-describedby"?: string | undefined | undefined;
+    "aria-description"?: string | undefined | undefined;
+    "aria-details"?: string | undefined | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+    "aria-errormessage"?: string | undefined | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+    "aria-keyshortcuts"?: string | undefined | undefined;
+    "aria-label"?: string | undefined | undefined;
+    "aria-labelledby"?: string | undefined | undefined;
+    "aria-level"?: number | undefined | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+    "aria-owns"?: string | undefined | undefined;
+    "aria-placeholder"?: string | undefined | undefined;
+    "aria-posinset"?: number | undefined | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined | undefined;
+    "aria-rowcount"?: number | undefined | undefined;
+    "aria-rowindex"?: number | undefined | undefined;
+    "aria-rowindextext"?: string | undefined | undefined;
+    "aria-rowspan"?: number | undefined | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+    "aria-valuemax"?: number | undefined | undefined;
+    "aria-valuemin"?: number | undefined | undefined;
+    "aria-valuenow"?: number | undefined | undefined;
+    "aria-valuetext"?: string | undefined | undefined;
+    dangerouslySetInnerHTML?: {
+      __html: string | TrustedHTML;
+    } | undefined | undefined;
+    onCopy?: react241.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: react241.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: react241.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: react241.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: react241.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: react241.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: react241.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: react241.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: react241.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: react241.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: react241.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: react241.CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: react241.FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: react241.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: react241.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: react241.FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: react241.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: react241.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onBeforeInput?: react241.InputEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: react241.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: react241.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: react241.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: react241.SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: react241.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoad?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: react241.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: react241.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: react241.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: react241.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: react241.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: react241.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onDrag?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnd?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStart?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: react241.DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: react241.MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: react241.ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: react241.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: react241.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: react241.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: react241.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: react241.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: react241.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: react241.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: react241.TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: react241.PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: react241.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: react241.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEnd?: react241.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollEndCapture?: react241.UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: react241.WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: react241.WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStart?: react241.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: react241.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: react241.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: react241.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: react241.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: react241.AnimationEventHandler<HTMLDivElement> | undefined;
+    onToggle?: react241.ToggleEventHandler<HTMLDivElement> | undefined;
+    onBeforeToggle?: react241.ToggleEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancel?: react241.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionCancelCapture?: react241.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: react241.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: react241.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRun?: react241.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionRunCapture?: react241.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStart?: react241.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionStartCapture?: react241.TransitionEventHandler<HTMLDivElement> | undefined;
+    key?: react241.Key | null | undefined;
+  };
+  selected: boolean;
+  value: string;
+  getCheckboxProps: PropGetter<UseCheckboxProps<string>, undefined, undefined>;
+  getGroupItemProps: PropGetter<"li", undefined, undefined>;
+  getGroupProps: PropGetter<"ul", undefined, undefined>;
+  getIndicatorProps: PropGetter<"svg", undefined, undefined>;
+  getItemProps: PropGetter<"li", undefined, undefined>;
+  getLabelProps: PropGetter<"span", undefined, undefined>;
+  onGroupClose: () => void;
+  onGroupOpen: () => void;
+  onGroupToggle: () => void;
+};
+type UseTreeItemReturn = ReturnType<typeof useTreeItem>;
+//#endregion
+export { TreeContext, TreeControl, TreeDescendantsContext, TreeItemContext, UseTreeItemProps, UseTreeItemReturn, UseTreeProps, UseTreeReturn, useTree, useTreeContext, useTreeDescendant, useTreeDescendants, useTreeItem, useTreeItemContext };
+//# sourceMappingURL=use-tree.d.ts.map

package/dist/types/components/visually-hidden/visually-hidden.d.ts

@@ -1,11 +1,11 @@
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react907 from "react";
+import * as react239 from "react";
 
 //#region src/components/visually-hidden/visually-hidden.d.ts
 interface VisuallyHiddenProps extends HTMLStyledProps<"span"> {}
-declare const VisuallyHiddenPropsContext: react907.Context<Partial<VisuallyHiddenProps> | undefined>, useVisuallyHiddenPropsContext: () => Partial<VisuallyHiddenProps> | undefined;
+declare const VisuallyHiddenPropsContext: react239.Context<Partial<VisuallyHiddenProps> | undefined>, useVisuallyHiddenPropsContext: () => Partial<VisuallyHiddenProps> | undefined;
 /**
  * `VisuallyHidden` is a common technique used in web accessibility to hide content from the visual client, but keep it readable for screen readers.
  *

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

@@ -5,11 +5,11 @@ import { FlexProps } from "../flex/flex.js";
 import "../flex/index.js";
 import { WrapStyle } from "./wrap.style.js";
 import "../../index.js";
-import * as react771 from "react";
+import * as react238 from "react";
 
 //#region src/components/wrap/wrap.d.ts
 interface WrapProps extends WithoutThemeProps<FlexProps, WrapStyle>, ThemeProps<WrapStyle> {}
-declare const WrapPropsContext: react771.Context<Partial<WrapProps> | undefined>, useWrapPropsContext: () => Partial<WrapProps> | undefined;
+declare const WrapPropsContext: react238.Context<Partial<WrapProps> | undefined>, useWrapPropsContext: () => Partial<WrapProps> | undefined;
 /**
  * `Wrap` is a component that has `wrap` set on `Flex`. It inherits convenient style shorthand from `Flex`.
  *

package/dist/types/core/components/create-component.d.ts

@@ -1,10 +1,9 @@
 import { AnyString, Dict, Merge } from "../../utils/index.js";
 import { ComponentSlotStyle, ComponentStyle, System, WithoutThemeProps } from "../system/index.types.js";
 import { StyledOptions } from "../system/styled.js";
-import "../system/index.js";
 import { CSSObject, CSSSlotObject } from "../css/index.types.js";
 import { As, Component as Component$1, HTMLStyledProps } from "./index.types.js";
-import * as react1034 from "react";
+import * as react34 from "react";
 import { FC, FunctionComponent } from "react";
 
 //#region src/core/components/create-component.d.ts
@@ -35,8 +34,8 @@ declare function createComponent<Y extends object = {}, M extends ComponentStyle
     className,
     ...options
   }?: ComponentOptions) => (initialProps?: InitialProps<H>, ...superProps: SuperProps<H>[]) => Component<D_1, H>;
-  ComponentContext: react1034.Context<D>;
-  PropsContext: react1034.Context<Partial<Y> | undefined>;
+  ComponentContext: react34.Context<D>;
+  PropsContext: react34.Context<Partial<Y> | undefined>;
   useComponentContext: () => D;
   usePropsContext: () => Partial<Y> | undefined;
   withContext: <D_1 extends AsWithFragment = "div", H extends Y = Y, R extends keyof H = keyof H>(el: D_1 | FC<WithoutThemeProps<H, M, R>>, {
@@ -58,16 +57,16 @@ declare function createSlotComponent<Y extends object = {}, M extends ComponentS
     className,
     ...options
   }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => Component<H, R>;
-  ComponentContext: react1034.Context<D>;
-  PropsContext: react1034.Context<Partial<Y> | undefined>;
-  StyleContext: react1034.Context<CSSSlotObject<ComponentSlotName<M>>>;
+  ComponentContext: react34.Context<D>;
+  PropsContext: react34.Context<Partial<Y> | undefined>;
+  StyleContext: react34.Context<CSSSlotObject<ComponentSlotName<M>>>;
   useClassNames: () => {
     [key: string]: string;
   };
   useComponentContext: () => D;
   usePropsContext: () => Partial<Y> | undefined;
   useStyleContext: () => CSSSlotObject<ComponentSlotName<M>>;
-  withContext: <H extends AsWithFragment = "div", R extends Dict = (H extends keyof react1034.JSX.IntrinsicElements ? HTMLStyledProps<H> : Dict<any>)>(el: FC<R> | H, slot?: ComponentSlot<ComponentSlotName<M>>, {
+  withContext: <H extends AsWithFragment = "div", R extends Dict = (H extends keyof react34.JSX.IntrinsicElements ? HTMLStyledProps<H> : Dict<any>)>(el: FC<R> | H, slot?: ComponentSlot<ComponentSlotName<M>>, {
     name,
     className,
     withContext,

package/dist/types/core/components/use-component-style.d.ts

@@ -1,6 +1,5 @@
 import { Dict } from "../../utils/index.js";
 import { ComponentSlotStyle, ComponentStyle, WithoutThemeProps } from "../system/index.types.js";
-import "../system/index.js";
 import { CSSObject, CSSSlotObject } from "../css/index.types.js";
 import { ComponentSlot, ComponentSlotName } from "./create-component.js";
 

package/dist/types/core/components/utils.d.ts

@@ -1,5 +1,4 @@
 import { System } from "../system/index.types.js";
-import "../system/index.js";
 
 //#region src/core/components/utils.d.ts
 declare function getDisplayName(name: string, fallback?: string): string;

package/dist/types/core/constant.d.ts

@@ -1,5 +1,4 @@
 import { LayersConfig } from "./system/index.types.js";
-import "./system/index.js";
 
 //#region src/core/constant.d.ts
 declare const COLOR_MODE_STORAGE_KEY = "color-mode";