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

package/dist/types/components/timeline/timeline.style.d.ts

@@ -1,9 +1,8 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
-import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 
 //#region src/components/timeline/timeline.style.d.ts
-declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "description" | "item" | "indicator" | "connector", {
+declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "item" | "description" | "indicator" | "connector", {
   /**
    * The alignment of the timeline.
    *
@@ -97,6 +96,9 @@ declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "
     description: {
       fontSize: "xs";
     };
+    indicator: {
+      fontSize: "xs";
+    };
     item: {
       gap: "3";
     };
@@ -117,6 +119,9 @@ declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "
     description: {
       fontSize: "sm";
     };
+    indicator: {
+      fontSize: "sm";
+    };
     item: {
       gap: "4";
     };
@@ -137,6 +142,9 @@ declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "
     description: {
       fontSize: "sm";
     };
+    indicator: {
+      fontSize: "md";
+    };
     item: {
       gap: "4";
     };
@@ -157,6 +165,9 @@ declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "
     description: {
       fontSize: "md";
     };
+    indicator: {
+      fontSize: "md";
+    };
     item: {
       gap: "5";
     };
@@ -169,7 +180,14 @@ declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "
       fontSize: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "description" | "item" | "indicator" | "connector">>>;
+}, {
+  number: {
+    indicator: {
+      layerStyle: "solid";
+    };
+  };
+  plain: {};
+}>;
 type TimelineStyle = typeof timelineStyle;
 //#endregion
 export { TimelineStyle, timelineStyle };

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

@@ -10,13 +10,13 @@ import "../button/index.js";
 import { ToggleStyle } from "./toggle.style.js";
 import { UseToggleProps } from "./use-toggle.js";
 import "../../index.js";
-import * as react1032 from "react";
+import * as react436 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils19 from "@yamada-ui/utils";
+import * as _yamada_ui_utils13 from "@yamada-ui/utils";
 
 //#region src/components/toggle/toggle.d.ts
 interface ToggleProps<Y extends string = string> extends Omit<WithoutThemeProps<IconButtonProps, ToggleStyle>, "aria-label" | "onChange" | "ref" | "value">, UseToggleProps<Y>, Pick<UseInputBorderProps, "errorBorderColor">, ThemeProps<ToggleStyle> {}
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils19.Dict = _yamada_ui_utils19.Dict<any>>(el: H | react1032.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
+declare const component: <H extends As | "fragment" = "div", R extends _yamada_ui_utils13.Dict = _yamada_ui_utils13.Dict<any>>(el: H | react436.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
     fullRounded: {
       true: {
         root: {
@@ -175,7 +175,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1032.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, TogglePropsContext: react1032.Context<Partial<ToggleProps<string>> | undefined>, useTogglePropsContext: () => Partial<ToggleProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils19.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react436.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, TogglePropsContext: react436.Context<Partial<ToggleProps<string>> | undefined>, useTogglePropsContext: () => Partial<ToggleProps<string>> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils13.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
     fullRounded: {
       true: {
         root: {
@@ -334,7 +334,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils19.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils13.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root", {
     fullRounded: {
       true: {
         root: {

package/dist/types/components/toggle/use-toggle-group.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react1029 from "react";
+import * as react441 from "react";
 import { RefObject } from "react";
 
 //#region src/components/toggle/use-toggle-group.d.ts
@@ -11,7 +11,7 @@ interface ToggleGroupContext {
   value?: string | string[];
   onChange?: <Y extends string = string>(value: undefined | Y) => void;
 }
-declare const ToggleGroupContext: react1029.Context<ToggleGroupContext | undefined>, useToggleGroupContext: () => ToggleGroupContext | undefined;
+declare const ToggleGroupContext: react441.Context<ToggleGroupContext | undefined>, useToggleGroupContext: () => ToggleGroupContext | undefined;
 interface UseToggleGroupProps<Y extends string | string[] = string> extends Omit<HTMLProps, "defaultValue" | "onChange" | "value"> {
   /**
    * The initial value of the toggle button group.

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

@@ -3,7 +3,7 @@ import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/
 import "../../core/index.js";
 import { FieldProps } from "../field/field.js";
 import "../field/index.js";
-import * as react1035 from "react";
+import * as react439 from "react";
 
 //#region src/components/toggle/use-toggle.d.ts
 interface UseToggleProps<Y extends string = string> extends FieldProps, HTMLRefAttributes<"input">, Omit<HTMLProps<"button">, "onChange" | "ref" | "value"> {
@@ -34,7 +34,7 @@ interface UseToggleProps<Y extends string = string> extends FieldProps, HTMLRefA
 }
 declare const useToggle: <Y extends string = string>(props?: UseToggleProps<Y>) => {
   checked: boolean;
-  setChecked: react1035.Dispatch<react1035.SetStateAction<boolean>>;
+  setChecked: react439.Dispatch<react439.SetStateAction<boolean>>;
   getButtonProps: PropGetter<"button", undefined, Merge<HTMLProps<"button">, {
     "aria-label": string;
   }>>;

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

@@ -3,15 +3,15 @@ import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
 import "../motion/index.js";
 import { PortalProps } from "../portal/portal.js";
-import { PopupAnimationProps } from "../popover/popover.js";
+import { UsePopupAnimationProps } from "../popover/popover.js";
 import "../popover/index.js";
 import { TooltipStyle } from "./tooltip.style.js";
 import { UseTooltipProps } from "./use-tooltip.js";
-import * as react140 from "react";
+import * as react423 from "react";
 import { FC, PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/tooltip/tooltip.d.ts
-interface TooltipProps extends UseTooltipProps, PropsWithChildren, PopupAnimationProps, ThemeProps<TooltipStyle> {
+interface TooltipProps extends UseTooltipProps, PropsWithChildren, UsePopupAnimationProps, ThemeProps<TooltipStyle> {
   /**
    * The content of the tooltip.
    */
@@ -21,7 +21,7 @@ interface TooltipProps extends UseTooltipProps, PropsWithChildren, PopupAnimatio
    *
    * @default 0.1
    */
-  duration?: PopupAnimationProps["duration"];
+  duration?: UsePopupAnimationProps["duration"];
   /**
    * Props for content element.
    */
@@ -31,7 +31,7 @@ interface TooltipProps extends UseTooltipProps, PropsWithChildren, PopupAnimatio
    */
   portalProps?: Omit<PortalProps, "children">;
 }
-declare const TooltipPropsContext: react140.Context<Partial<TooltipProps> | undefined>, useTooltipPropsContext: () => Partial<TooltipProps> | undefined;
+declare const TooltipPropsContext: react423.Context<Partial<TooltipProps> | undefined>, useTooltipPropsContext: () => Partial<TooltipProps> | undefined;
 /**
  * `Tooltip` is a component that displays short information, such as supplementary details for an element.
  *

package/dist/types/components/tree/index.d.ts

@@ -0,0 +1,5 @@
+import { TreeStyle, treeStyle } from "./tree.style.js";
+import { TreeContext, TreeControl, TreeDescendantsContext, TreeItemContext, UseTreeItemProps, UseTreeItemReturn, UseTreeProps, UseTreeReturn, useTree, useTreeContext, useTreeDescendant, useTreeDescendants, useTreeItem, useTreeItemContext } from "./use-tree.js";
+import { TreeItem, TreeItemProps, TreePropsContext, TreeRoot, TreeRootProps, useTreePropsContext } from "./tree.js";
+import { namespace_d_exports } from "./namespace.js";
+export { namespace_d_exports as Tree, TreeContext, TreeControl, TreeDescendantsContext, TreeItem, TreeItemContext, type TreeItemProps, TreePropsContext, TreeRoot, type TreeRootProps, TreeStyle, UseTreeItemProps, UseTreeItemReturn, UseTreeProps, UseTreeReturn, treeStyle, useTree, useTreeContext, useTreeDescendant, useTreeDescendants, useTreeItem, useTreeItemContext, useTreePropsContext };

package/dist/types/components/tree/namespace.d.ts

@@ -0,0 +1,10 @@
+import { TreeContext, TreeControl, TreeDescendantsContext, useTreeContext, useTreeDescendant, useTreeDescendants, useTreeItemContext } from "./use-tree.js";
+import { TreeItem, TreeItemProps, TreePropsContext, TreeRoot, TreeRootProps, useTreePropsContext } from "./tree.js";
+
+//#region src/components/tree/namespace.d.ts
+declare namespace namespace_d_exports {
+  export { TreeContext as Context, TreeControl as Control, TreeDescendantsContext as DescendantsContext, TreeItem as Item, TreeItemProps as ItemProps, TreeItem as ItemType, TreePropsContext as PropsContext, TreeRoot as Root, TreeRootProps as RootProps, useTreeContext as useContext, useTreeDescendant as useDescendant, useTreeDescendants as useDescendants, useTreeItemContext as useItemContext, useTreePropsContext as usePropsContext };
+}
+//#endregion
+export { namespace_d_exports };
+//# sourceMappingURL=namespace.d.ts.map

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

@@ -0,0 +1,130 @@
+import { ReactNodeOrFunction } from "../../utils/index.types.js";
+import { LoadingScheme, ThemeProps } from "../../core/system/index.types.js";
+import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
+import "../../core/index.js";
+import { WithTransitionProps } from "../motion/index.types.js";
+import "../motion/index.js";
+import "../loading/index.js";
+import { CheckboxProps } from "../checkbox/checkbox.js";
+import "../checkbox/index.js";
+import { CollapseProps } from "../collapse/collapse.js";
+import "../collapse/index.js";
+import { TreeStyle } from "./tree.style.js";
+import { UseTreeItemProps, UseTreeProps } from "./use-tree.js";
+import "../../index.js";
+import * as react422 from "react";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/tree/tree.d.ts
+interface TreeCallBackProps {
+  disabled?: boolean;
+  expanded?: boolean;
+}
+type TreeItemReactNode = ReactNodeOrFunction<TreeCallBackProps> | {
+  group: ReactNodeOrFunction<TreeCallBackProps>;
+  item?: ReactNodeOrFunction<TreeCallBackProps>;
+} | {
+  item: ReactNodeOrFunction<TreeCallBackProps>;
+  group?: ReactNodeOrFunction<TreeCallBackProps>;
+};
+interface TreeItemWithValue extends Omit<TreeItemProps, "children"> {}
+interface TreeItemWithChildren extends TreeItemWithValue {
+  children: TreeItem[];
+}
+type TreeItem = TreeItemWithChildren | TreeItemWithValue;
+interface TreeRootProps<Multiple extends boolean = false> extends HTMLStyledProps<"ul">, ThemeProps<TreeStyle>, UseTreeProps<Multiple>, Pick<TreeItemProps, "animated" | "checkboxProps" | "endElement" | "endElementProps" | "groupProps" | "indicator" | "indicatorProps" | "labelProps" | "loadingScheme" | "startElement" | "startElementProps"> {
+  /**
+   * If `true`, hide the tree indicator icon for all items.
+   *
+   * @default false
+   */
+  indicatorHidden?: boolean;
+  /**
+   * If provided, generate elements based on items.
+   */
+  items?: TreeItem[];
+  /**
+   * Props for the item component.
+   */
+  itemProps?: Omit<TreeItemProps, "children" | "label" | "open" | "query" | "value">;
+}
+declare const TreePropsContext: react422.Context<Partial<TreeRootProps<false>> | undefined>, useTreePropsContext: () => Partial<TreeRootProps<false>> | undefined;
+/**
+ * `Tree` is a component used to display hierarchical data structures in an expandable tree format.
+ *
+ * @see https://yamada-ui.com/docs/components/tree
+ */
+declare const TreeRoot: GenericsComponent<{
+  <Multiple extends boolean = false>(props: TreeRootProps<Multiple>): ReactElement;
+}>;
+interface TreeItemProps extends HTMLStyledProps<"div">, Omit<UseTreeItemProps, "asyncChildren"> {
+  /**
+   * The label to display in the item.
+   */
+  label: ReactNode;
+  /**
+   * If `true`, the tree item will be animated.
+   *
+   * @default false
+   */
+  animated?: boolean;
+  /**
+   * The element to display at the end of the item.
+   */
+  endElement?: TreeItemReactNode;
+  /**
+   * The tree indicator icon to use.
+   */
+  indicator?: ReactNodeOrFunction<TreeCallBackProps>;
+  /**
+   * The loading scheme.
+   *
+   * @default 'oval'
+   */
+  loadingScheme?: LoadingScheme;
+  /**
+   * The element to display at the start of the item.
+   */
+  startElement?: TreeItemReactNode;
+  /**
+   * Props for the checkbox component.
+   */
+  checkboxProps?: Omit<CheckboxProps, "checked" | "defaultChecked" | "value">;
+  /**
+   * Props for the end component.
+   */
+  endElementProps?: TreeEndElementProps;
+  /**
+   * Props for the group component.
+   */
+  groupProps?: Omit<TreeGroupProps, "children">;
+  /**
+   * Props for the indicator component.
+   */
+  indicatorProps?: TreeIndicatorProps;
+  /**
+   * Props for the label component.
+   */
+  labelProps?: TreeLabelProps;
+  /**
+   * Props for the root element.
+   */
+  rootProps?: HTMLStyledProps<"li">;
+  /**
+   * Props for the start component.
+   */
+  startElementProps?: TreeStartElementProps;
+  /**
+   * If provided, the tree item will be rendered as an async tree item.
+   */
+  asyncChildren?: () => Promise<TreeItem[]>;
+}
+declare const TreeItem: Component<"div", TreeItemProps>;
+interface TreeGroupProps extends Omit<HTMLStyledProps<"ul">, "transition">, Pick<CollapseProps, "animationOpacity" | keyof WithTransitionProps> {}
+interface TreeIndicatorProps extends HTMLStyledProps<"svg"> {}
+interface TreeStartElementProps extends HTMLStyledProps {}
+interface TreeEndElementProps extends HTMLStyledProps {}
+interface TreeLabelProps extends HTMLStyledProps<"span"> {}
+//#endregion
+export { TreeItem, TreeItemProps, TreePropsContext, TreeRoot, TreeRootProps, useTreePropsContext };
+//# sourceMappingURL=tree.d.ts.map

package/dist/types/components/tree/tree.style.d.ts

@@ -0,0 +1,170 @@
+import { ComponentSlotStyle } from "../../core/system/index.types.js";
+import "../../index.js";
+
+//#region src/components/tree/tree.style.d.ts
+declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "item" | "indicator", {
+  /**
+   * 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";
+        _before: {
+          bg: "{guide-line-color}";
+          display: "block";
+          h: "full";
+          left: "calc({space-guide-line} + {depth-space})";
+          position: "absolute";
+          transform: "translateX(-50%)";
+          w: "px";
+          zIndex: "yamcha";
+        };
+      };
+      item: {
+        "--space-guide-line": "calc(({space-start} * 2) + {space})";
+        _content: {
+          ps: "{space-guide-line}";
+        };
+      };
+      root: {
+        "--guide-line-color": "colors.border";
+      };
+    };
+  };
+}, {
+  sm: {
+    item: {
+      "--depth-space": "spaces.1.5";
+      "--gap": "spaces.1.5";
+    };
+    root: {
+      fontSize: "sm";
+    };
+  };
+  md: {
+    item: {
+      "--depth-space": "spaces.2";
+      "--gap": "spaces.2";
+    };
+    root: {
+      fontSize: "md";
+    };
+  };
+  lg: {
+    item: {
+      "--depth-space": "spaces.2";
+      "--gap": "spaces.2";
+    };
+    root: {
+      fontSize: "lg";
+    };
+  };
+}, {
+  solid: {
+    checkbox: {
+      _indicator: {
+        color: "colorScheme.contrast";
+        _checked: {
+          bg: "colorScheme.solid";
+        };
+        _indeterminate: {
+          bg: "colorScheme.solid";
+        };
+      } | undefined;
+      _selected: {
+        _checked: {
+          "--indicator-border-color": "colorScheme.contrast";
+        };
+        _indicator: {
+          color: "colorScheme.solid";
+          _checked: {
+            bg: "colorScheme.contrast";
+          };
+          _indeterminate: {
+            bg: "colorScheme.contrast";
+          };
+        };
+      };
+      _checked?: {
+        "--indicator-border-color": "colorScheme.solid";
+      } | undefined;
+      _indeterminate?: {
+        "--indicator-border-color": "colorScheme.solid";
+      } | undefined;
+    };
+    item: {
+      _selected: {
+        _content: {
+          layerStyle: "solid";
+          "--element-color": "colorScheme.contrast";
+        };
+        _focusVisible: {
+          _content: {
+            borderColor: "{focus-ring-color}";
+          };
+        };
+      };
+    };
+  };
+  subtle: {
+    checkbox: {
+      _indicator: {
+        color: "colorScheme.contrast";
+        _checked: {
+          bg: "colorScheme.solid";
+        };
+        _indeterminate: {
+          bg: "colorScheme.solid";
+        };
+      } | undefined;
+      _checked?: {
+        "--indicator-border-color": "colorScheme.solid";
+      } | undefined;
+      _indeterminate?: {
+        "--indicator-border-color": "colorScheme.solid";
+      } | undefined;
+    };
+    item: {
+      _selected: {
+        _content: {
+          layerStyle: "subtle";
+          "--element-color": "colorScheme.fg";
+        };
+        _focusVisible: {
+          _content: {
+            borderColor: "{focus-ring-color}";
+          };
+        };
+      };
+    };
+  };
+}>;
+type TreeStyle = typeof treeStyle;
+//#endregion
+export { TreeStyle, treeStyle };
+//# sourceMappingURL=tree.style.d.ts.map