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

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

@@ -0,0 +1,362 @@
+"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_environment_provider = require('../../core/system/environment-provider.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_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
+require('../../providers/i18n-provider/index.cjs');
+const require_hooks_use_async_callback_index = require('../../hooks/use-async-callback/index.cjs');
+const require_hooks_use_window_event_index = require('../../hooks/use-window-event/index.cjs');
+let react = require("react");
+
+//#region src/components/sidebar/use-sidebar.ts
+const { DescendantsContext: SidebarDescendantsContext, useDescendant: useSidebarDescendant, useDescendants: useSidebarDescendants } = require_hooks_use_descendants_index.createDescendants();
+const [SidebarContext, useSidebarContext] = require_context.createContext({ name: "SidebarContext" });
+const [SidebarItemContext, useSidebarItemContext] = require_context.createContext({
+	name: "SidebarItemContext",
+	strict: false
+});
+const useSidebar = ({ controlRef, defaultExpandedValue = [], defaultSelectedValue, disclosure, expandedValue: expandedValueProp, mobile = false, selectedValue: selectedValueProp, onExpandedChange: onExpandedChangeProp, onSelectedChange: onSelectedChangeProp, ...rest } = {}) => {
+	const { t } = require_i18n_provider.useI18n("sidebar");
+	const desktopDisclosure = require_use_disclosure.useDisclosure({
+		defaultOpen: disclosure?.desktop?.defaultOpen ?? true,
+		open: disclosure?.desktop?.open,
+		onClose: disclosure?.desktop?.onClose,
+		onOpen: disclosure?.desktop?.onOpen
+	});
+	const mobileDisclosure = require_use_disclosure.useDisclosure({
+		defaultOpen: disclosure?.mobile?.defaultOpen ?? false,
+		open: disclosure?.mobile?.open,
+		onClose: disclosure?.mobile?.onClose,
+		onOpen: disclosure?.mobile?.onOpen
+	});
+	const [selectedValue, setSelectedValue] = require_hooks_use_controllable_state_index.useControllableState({
+		defaultValue: defaultSelectedValue,
+		value: selectedValueProp,
+		onChange: onSelectedChangeProp
+	});
+	const [expandedValue, setExpandedValue] = require_hooks_use_controllable_state_index.useControllableState({
+		defaultValue: defaultExpandedValue,
+		value: expandedValueProp,
+		onChange: onExpandedChangeProp
+	});
+	const descendants = useSidebarDescendants();
+	const open = mobile ? mobileDisclosure.open : desktopDisclosure.open;
+	const onOpen = mobile ? mobileDisclosure.onOpen : desktopDisclosure.onOpen;
+	const onClose = mobile ? mobileDisclosure.onClose : desktopDisclosure.onClose;
+	const onToggle = mobile ? mobileDisclosure.onToggle : desktopDisclosure.onToggle;
+	const onSelectedChange = (0, react.useCallback)((value) => {
+		setSelectedValue(value);
+	}, [setSelectedValue]);
+	const onExpandAll = (0, react.useCallback)(() => {
+		setExpandedValue(descendants.enabledValues().filter(({ group }) => group).map(({ value }) => value));
+	}, [descendants, setExpandedValue]);
+	const onCollapseAll = (0, react.useCallback)(() => {
+		setExpandedValue([]);
+	}, [setExpandedValue]);
+	const onExpandedChange = (0, react.useCallback)((value) => {
+		setExpandedValue((prev) => {
+			if (prev.includes(value)) return prev.filter((prevValue) => prevValue !== value);
+			else return [...prev, value];
+		});
+	}, [setExpandedValue]);
+	require_ref.assignRef(controlRef, {
+		collapse: onCollapseAll,
+		expand: onExpandAll
+	});
+	require_hooks_use_window_event_index.useWindowEvent("keydown", (ev) => {
+		if (ev.key !== "b") return;
+		if (!ev.metaKey && !ev.ctrlKey) return;
+		ev.preventDefault();
+		desktopDisclosure.onToggle();
+	});
+	const getRootProps = (0, react.useCallback)((props = {}) => ({
+		"data-expanded": (0, require_utils_index.utils_exports.dataAttr)(open),
+		...rest,
+		...props
+	}), [open, rest]);
+	const getTriggerProps = (0, react.useCallback)((props = {}) => ({
+		"aria-expanded": open,
+		"aria-label": t(open ? "Close sidebar" : "Open sidebar"),
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onToggle)
+	}), [
+		open,
+		t,
+		onToggle
+	]);
+	const getSidePanelProps = (0, react.useCallback)((props = {}) => ({
+		"data-expanded": (0, require_utils_index.utils_exports.dataAttr)(open),
+		...props
+	}), [open]);
+	const getHeaderProps = (0, react.useCallback)((props = {}) => ({ ...props }), []);
+	const getFooterProps = (0, react.useCallback)((props = {}) => ({ ...props }), []);
+	return {
+		descendants,
+		expandedValue,
+		mobile,
+		open,
+		selectedValue,
+		getContentProps: (0, react.useCallback)((props = {}) => ({ ...props }), []),
+		getFooterProps,
+		getHeaderProps,
+		getRootProps,
+		getSidePanelProps,
+		getTriggerProps,
+		onClose,
+		onExpandedChange,
+		onOpen,
+		onSelectedChange,
+		onToggle
+	};
+};
+const useSidebarGroup = ({ ...rest } = {}) => {
+	const { getDocument } = require_environment_provider.useEnvironment();
+	const rootRef = (0, react.useRef)(null);
+	const contentRef = (0, react.useRef)(null);
+	const labelId = (0, react.useId)();
+	require_effect.useSafeLayoutEffect(() => {
+		if (!getDocument()?.getElementById(labelId)) return;
+		if (rootRef.current) (0, require_utils_index.utils_exports.setAttribute)(rootRef.current, "aria-labelledby", labelId);
+		if (contentRef.current) (0, require_utils_index.utils_exports.setAttribute)(contentRef.current, "aria-labelledby", labelId);
+	}, []);
+	const getRootProps = (0, react.useCallback)(({ ref, ...props } = {}) => ({
+		ref: require_ref.mergeRefs(ref, rootRef),
+		...rest,
+		...props
+	}), [rest]);
+	const getLabelProps = (0, react.useCallback)((props = {}) => ({
+		id: labelId,
+		...props
+	}), [labelId]);
+	return {
+		getContentProps: (0, react.useCallback)(({ ref, ...props } = {}) => ({
+			ref: require_ref.mergeRefs(ref, contentRef),
+			...props
+		}), []),
+		getLabelProps,
+		getRootProps
+	};
+};
+const useSidebarItem = ({ asyncChildren, children: childrenProp, defaultOpen, disabled = false, external, open: openProp, value, onClose: onCloseProp, onOpen: onOpenProp, ...rest }) => {
+	const context = useSidebarItemContext();
+	const { expandedValue, open, selectedValue, onExpandedChange, onSelectedChange } = useSidebarContext();
+	const [children, setChildren] = (0, react.useState)(childrenProp);
+	const [itemId, labelId, contentId] = require_dom.useIds();
+	const initialAsyncRef = (0, react.useRef)(false);
+	const async = !!asyncChildren;
+	const group = async || react.Children.count(children) > 0;
+	const nested = !!context;
+	const selected = !!value && selectedValue === value;
+	const defaultExpanded = !!value && expandedValue.includes(value);
+	const { open: groupOpen, onClose, onOpen } = require_use_disclosure.useDisclosure({
+		defaultOpen: defaultOpen ?? defaultExpanded,
+		open: openProp,
+		onClose: onCloseProp,
+		onOpen: onOpenProp
+	});
+	const branchOpen = nested ? [...context.branchOpen, groupOpen] : [groupOpen];
+	const expanded = branchOpen.slice(0, -1).every(Boolean);
+	const { register } = useSidebarDescendant({
+		id: itemId,
+		disabled,
+		expanded,
+		group,
+		value
+	});
+	const [groupLoading, onGroupChildren] = require_hooks_use_async_callback_index.useAsyncCallback(async () => {
+		setChildren(await asyncChildren?.());
+	}, [asyncChildren]);
+	const onGroupOpen = (0, react.useCallback)(() => {
+		if (disabled || !group || !value || groupLoading) return;
+		if (async && !initialAsyncRef.current) {
+			initialAsyncRef.current = true;
+			onGroupChildren().then(() => {
+				onOpen();
+				onExpandedChange(value);
+			}).catch(() => {
+				initialAsyncRef.current = false;
+			});
+		} else {
+			onOpen();
+			onExpandedChange(value);
+		}
+	}, [
+		disabled,
+		group,
+		value,
+		groupLoading,
+		async,
+		onGroupChildren,
+		onOpen,
+		onExpandedChange
+	]);
+	const onGroupClose = (0, react.useCallback)(() => {
+		if (disabled || !group || !value) return;
+		onClose();
+		onExpandedChange(value);
+	}, [
+		disabled,
+		group,
+		value,
+		onClose,
+		onExpandedChange
+	]);
+	const onGroupToggle = (0, react.useCallback)(() => {
+		if (groupOpen) onGroupClose();
+		else onGroupOpen();
+	}, [
+		groupOpen,
+		onGroupClose,
+		onGroupOpen
+	]);
+	require_effect.useSafeLayoutEffect(() => {
+		if (defaultExpanded) if (async && !initialAsyncRef.current) {
+			initialAsyncRef.current = true;
+			onGroupChildren().then(() => {
+				onOpen();
+			}).catch(() => {
+				initialAsyncRef.current = false;
+			});
+		} else onOpen();
+		else onClose();
+	}, [defaultExpanded]);
+	const getItemProps = (0, react.useCallback)(({ ref, "aria-labelledby": ariaLabelledby, ...props } = {}) => ({
+		id: itemId,
+		ref: require_ref.mergeRefs(ref, register),
+		"aria-current": selected ? "page" : void 0,
+		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+		"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, labelId),
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
+		...rest,
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, !group ? () => onSelectedChange(value) : void 0)
+	}), [
+		itemId,
+		register,
+		selected,
+		disabled,
+		labelId,
+		rest,
+		group,
+		onSelectedChange,
+		value
+	]);
+	const getIndicatorProps = (0, react.useCallback)((props) => ({
+		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+		"aria-expanded": groupOpen,
+		"aria-hidden": true,
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		"data-loading": (0, require_utils_index.utils_exports.dataAttr)(groupLoading),
+		"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
+		role: "presentation",
+		...props
+	}), [
+		disabled,
+		groupOpen,
+		groupLoading,
+		selected
+	]);
+	const getTriggerProps = (0, react.useCallback)((props = {}) => ({
+		"aria-controls": contentId,
+		"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+		"aria-expanded": groupOpen,
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		"data-expanded": (0, require_utils_index.utils_exports.dataAttr)(groupOpen),
+		"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
+		tabIndex: open && expanded && !disabled ? 0 : -1,
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onGroupToggle)
+	}), [
+		contentId,
+		disabled,
+		groupOpen,
+		selected,
+		open,
+		expanded,
+		onGroupToggle
+	]);
+	const getLinkProps = (0, react.useCallback)((props = {}) => ({
+		href: value,
+		rel: external ? "noopener" : void 0,
+		target: external ? "_blank" : void 0,
+		"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+		"data-selected": (0, require_utils_index.utils_exports.dataAttr)(selected),
+		tabIndex: open && expanded && !disabled ? 0 : -1,
+		...props,
+		onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, (ev) => {
+			if (!disabled) return;
+			ev.preventDefault();
+			ev.stopPropagation();
+		})
+	}), [
+		disabled,
+		expanded,
+		external,
+		open,
+		selected,
+		value
+	]);
+	return {
+		branchOpen,
+		children,
+		disabled,
+		expanded,
+		expandedValue,
+		group,
+		groupLoading,
+		groupOpen,
+		open,
+		selected,
+		selectedValue,
+		value,
+		getContentProps: (0, react.useCallback)(({ "aria-labelledby": ariaLabelledby, ...props } = {}) => ({
+			id: contentId,
+			"aria-busy": (0, require_utils_index.utils_exports.ariaAttr)(groupLoading),
+			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, labelId),
+			"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
+			...props
+		}), [
+			contentId,
+			labelId,
+			disabled,
+			groupLoading
+		]),
+		getIndicatorProps,
+		getItemProps,
+		getLabelProps: (0, react.useCallback)((props = {}) => ({
+			id: labelId,
+			...props
+		}), [labelId]),
+		getLinkProps,
+		getTriggerProps,
+		onExpandedChange,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle,
+		onSelectedChange
+	};
+};
+
+//#endregion
+exports.SidebarContext = SidebarContext;
+exports.SidebarDescendantsContext = SidebarDescendantsContext;
+exports.SidebarItemContext = SidebarItemContext;
+exports.useSidebar = useSidebar;
+exports.useSidebarContext = useSidebarContext;
+exports.useSidebarDescendant = useSidebarDescendant;
+exports.useSidebarDescendants = useSidebarDescendants;
+exports.useSidebarGroup = useSidebarGroup;
+exports.useSidebarItem = useSidebarItem;
+exports.useSidebarItemContext = useSidebarItemContext;
+//# sourceMappingURL=use-sidebar.cjs.map

package/dist/cjs/components/sidebar/use-sidebar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sidebar.cjs","names":["createDescendants","createContext","useI18n","useDisclosure","useControllableState","getRootProps: PropGetter<\"div\">","getTriggerProps: PropGetter<\"button\">","getSidePanelProps: PropGetter<\"aside\">","getHeaderProps: PropGetter<\"header\">","getFooterProps: PropGetter<\"footer\">","useEnvironment","getRootProps: PropGetter<\"li\">","mergeRefs","getLabelProps: PropGetter<\"span\">","useIds","Children","branchOpen: boolean[]","useAsyncCallback","getItemProps: PropGetter<\"li\">","getIndicatorProps: PropGetter<\"svg\">","getLinkProps: PropGetter<\"a\">"],"sources":["../../../../src/components/sidebar/use-sidebar.ts"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode, RefObject } from \"react\"\nimport { Children, useCallback, useId, useRef, useState } from \"react\"\nimport { type HTMLProps, type PropGetter, useEnvironment } from \"../../core\"\nimport { useAsyncCallback } from \"../../hooks/use-async-callback\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n  useDisclosure,\n  type UseDisclosureProps,\n} from \"../../hooks/use-disclosure\"\nimport { useWindowEvent } from \"../../hooks/use-window-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n  ariaAttr,\n  assignRef,\n  createContext,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n  setAttribute,\n  useIds,\n  useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport interface SidebarControl {\n  collapse: () => void\n  expand: () => void\n}\n\ninterface SidebarDescendantProps {\n  expanded: boolean\n  group: boolean\n  id: string\n  value: string\n}\n\nconst {\n  DescendantsContext: SidebarDescendantsContext,\n  useDescendant: useSidebarDescendant,\n  useDescendants: useSidebarDescendants,\n} = createDescendants<HTMLElement, SidebarDescendantProps>()\n\nexport {\n  SidebarDescendantsContext,\n  useSidebarDescendant,\n  useSidebarDescendants,\n}\n\ninterface SidebarContext extends Pick<\n  UseSidebarReturn,\n  | \"expandedValue\"\n  | \"mobile\"\n  | \"onClose\"\n  | \"onExpandedChange\"\n  | \"onOpen\"\n  | \"onSelectedChange\"\n  | \"onToggle\"\n  | \"open\"\n  | \"selectedValue\"\n> {}\n\nconst [SidebarContext, useSidebarContext] = createContext<SidebarContext>({\n  name: \"SidebarContext\",\n})\n\nexport { SidebarContext, useSidebarContext }\n\ninterface SidebarItemContext extends Pick<\n  UseSidebarItemReturn,\n  \"branchOpen\" | \"groupOpen\"\n> {}\n\nconst [SidebarItemContext, useSidebarItemContext] =\n  createContext<SidebarItemContext>({\n    name: \"SidebarItemContext\",\n    strict: false,\n  })\n\nexport { SidebarItemContext, useSidebarItemContext }\n\nexport interface UseSidebarProps extends HTMLProps<\"div\"> {\n  /**\n   * Ref of the sidebar callbacks.\n   */\n  controlRef?: RefObject<null | SidebarControl>\n  /**\n   * The initial expanded value of the sidebar.\n   */\n  defaultExpandedValue?: string[]\n  /**\n   * The initial selected value of the sidebar.\n   */\n  defaultSelectedValue?: string\n  /**\n   * The disclosure props for the desktop and mobile.\n   */\n  disclosure?: {\n    desktop?: Omit<UseDisclosureProps, \"timing\">\n    mobile?: Omit<UseDisclosureProps, \"timing\">\n  }\n  /**\n   * The expanded value of the sidebar.\n   */\n  expandedValue?: string[]\n  /**\n   * If `true`, the trigger click event will be switched to mobile.\n   *\n   * @default false\n   */\n  mobile?: boolean\n  /**\n   * The selected value of the sidebar.\n   */\n  selectedValue?: string\n  /**\n   * The callback invoked when expanded value changes.\n   */\n  onExpandedChange?: (value: string[]) => void\n  /**\n   * The callback invoked when selected value changes.\n   */\n  onSelectedChange?: (value: string) => void\n}\n\nexport const useSidebar = ({\n  controlRef,\n  defaultExpandedValue = [],\n  defaultSelectedValue,\n  disclosure,\n  expandedValue: expandedValueProp,\n  mobile = false,\n  selectedValue: selectedValueProp,\n  onExpandedChange: onExpandedChangeProp,\n  onSelectedChange: onSelectedChangeProp,\n  ...rest\n}: UseSidebarProps = {}) => {\n  const { t } = useI18n(\"sidebar\")\n  const desktopDisclosure = useDisclosure({\n    defaultOpen: disclosure?.desktop?.defaultOpen ?? true,\n    open: disclosure?.desktop?.open,\n    onClose: disclosure?.desktop?.onClose,\n    onOpen: disclosure?.desktop?.onOpen,\n  })\n  const mobileDisclosure = useDisclosure({\n    defaultOpen: disclosure?.mobile?.defaultOpen ?? false,\n    open: disclosure?.mobile?.open,\n    onClose: disclosure?.mobile?.onClose,\n    onOpen: disclosure?.mobile?.onOpen,\n  })\n  const [selectedValue, setSelectedValue] = useControllableState({\n    defaultValue: defaultSelectedValue,\n    value: selectedValueProp,\n    onChange: onSelectedChangeProp,\n  })\n  const [expandedValue, setExpandedValue] = useControllableState({\n    defaultValue: defaultExpandedValue,\n    value: expandedValueProp,\n    onChange: onExpandedChangeProp,\n  })\n  const descendants = useSidebarDescendants()\n  const open = mobile ? mobileDisclosure.open : desktopDisclosure.open\n  const onOpen = mobile ? mobileDisclosure.onOpen : desktopDisclosure.onOpen\n  const onClose = mobile ? mobileDisclosure.onClose : desktopDisclosure.onClose\n  const onToggle = mobile\n    ? mobileDisclosure.onToggle\n    : desktopDisclosure.onToggle\n\n  const onSelectedChange = useCallback(\n    (value: string) => {\n      setSelectedValue(value)\n    },\n    [setSelectedValue],\n  )\n\n  const onExpandAll = useCallback(() => {\n    const values = descendants.enabledValues()\n    const group = values.filter(({ group }) => group)\n    const value = group.map(({ value }) => value)\n\n    setExpandedValue(value)\n  }, [descendants, setExpandedValue])\n\n  const onCollapseAll = useCallback(() => {\n    setExpandedValue([])\n  }, [setExpandedValue])\n\n  const onExpandedChange = useCallback(\n    (value: string) => {\n      setExpandedValue((prev) => {\n        if (prev.includes(value)) {\n          return prev.filter((prevValue) => prevValue !== value)\n        } else {\n          return [...prev, value]\n        }\n      })\n    },\n    [setExpandedValue],\n  )\n\n  assignRef(controlRef, { collapse: onCollapseAll, expand: onExpandAll })\n\n  useWindowEvent(\"keydown\", (ev) => {\n    if (ev.key !== \"b\") return\n    if (!ev.metaKey && !ev.ctrlKey) return\n\n    ev.preventDefault()\n\n    desktopDisclosure.onToggle()\n  })\n\n  const getRootProps: PropGetter<\"div\"> = useCallback(\n    (props = {}) => ({\n      \"data-expanded\": dataAttr(open),\n      ...rest,\n      ...props,\n    }),\n    [open, rest],\n  )\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-expanded\": open,\n      \"aria-label\": t(open ? \"Close sidebar\" : \"Open sidebar\"),\n      ...props,\n      onClick: handlerAll(props.onClick, onToggle),\n    }),\n    [open, t, onToggle],\n  )\n\n  const getSidePanelProps: PropGetter<\"aside\"> = useCallback(\n    (props = {}) => ({ \"data-expanded\": dataAttr(open), ...props }),\n    [open],\n  )\n\n  const getHeaderProps: PropGetter<\"header\"> = useCallback(\n    (props = {}) => ({ ...props }),\n    [],\n  )\n\n  const getFooterProps: PropGetter<\"footer\"> = useCallback(\n    (props = {}) => ({ ...props }),\n    [],\n  )\n\n  const getContentProps: PropGetter<\"ul\"> = useCallback(\n    (props = {}) => ({ ...props }),\n    [],\n  )\n\n  return {\n    descendants,\n    expandedValue,\n    mobile,\n    open,\n    selectedValue,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getRootProps,\n    getSidePanelProps,\n    getTriggerProps,\n    onClose,\n    onExpandedChange,\n    onOpen,\n    onSelectedChange,\n    onToggle,\n  }\n}\n\nexport type UseSidebarReturn = ReturnType<typeof useSidebar>\n\nexport interface UseSidebarGroupProps extends HTMLProps<\"li\"> {}\n\nexport const useSidebarGroup = ({ ...rest }: UseSidebarGroupProps = {}) => {\n  const { getDocument } = useEnvironment()\n  const rootRef = useRef<HTMLLIElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const labelId = useId()\n\n  useSafeLayoutEffect(() => {\n    const el = getDocument()?.getElementById(labelId)\n\n    if (!el) return\n\n    if (rootRef.current)\n      setAttribute(rootRef.current, \"aria-labelledby\", labelId)\n    if (contentRef.current)\n      setAttribute(contentRef.current, \"aria-labelledby\", labelId)\n  }, [])\n\n  const getRootProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ref: mergeRefs(ref, rootRef),\n      ...rest,\n      ...props,\n    }),\n    [rest],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) => ({ id: labelId, ...props }),\n    [labelId],\n  )\n\n  const getContentProps: PropGetter<\"div\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ref: mergeRefs(ref, contentRef),\n      ...props,\n    }),\n    [],\n  )\n\n  return { getContentProps, getLabelProps, getRootProps }\n}\n\nexport type UseSidebarGroupReturn = ReturnType<typeof useSidebarGroup>\n\nexport interface UseSidebarItemProps\n  extends HTMLProps<\"li\">, Omit<UseDisclosureProps, \"timing\"> {\n  /**\n   * The value of the item.\n   */\n  value: string\n  /**\n   * If `true`, the tree item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the link will open in new tab.\n   *\n   * @default false\n   */\n  external?: boolean\n  /**\n   * If provided, the sidebar item will be rendered as an async sidebar item.\n   */\n  asyncChildren?: () => Promise<ReactNode>\n}\n\nexport const useSidebarItem = ({\n  asyncChildren,\n  children: childrenProp,\n  defaultOpen,\n  disabled = false,\n  external,\n  open: openProp,\n  value,\n  onClose: onCloseProp,\n  onOpen: onOpenProp,\n  ...rest\n}: UseSidebarItemProps) => {\n  const context = useSidebarItemContext()\n  const {\n    expandedValue,\n    open,\n    selectedValue,\n    onExpandedChange,\n    onSelectedChange,\n  } = useSidebarContext()\n  const [children, setChildren] = useState<ReactNode>(childrenProp)\n  const [itemId, labelId, contentId] = useIds()\n  const initialAsyncRef = useRef(false)\n  const async = !!asyncChildren\n  const group = async || Children.count(children) > 0\n  const nested = !!context\n  const selected = !!value && selectedValue === value\n  const defaultExpanded = !!value && expandedValue.includes(value)\n  const {\n    open: groupOpen,\n    onClose,\n    onOpen,\n  } = useDisclosure({\n    defaultOpen: defaultOpen ?? defaultExpanded,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const branchOpen: boolean[] = nested\n    ? [...context.branchOpen, groupOpen]\n    : [groupOpen]\n  const expanded = branchOpen.slice(0, -1).every(Boolean)\n  const { register } = useSidebarDescendant({\n    id: itemId!,\n    disabled,\n    expanded,\n    group,\n    value,\n  })\n\n  const [groupLoading, onGroupChildren] = useAsyncCallback(async () => {\n    const children = await asyncChildren?.()\n\n    setChildren(children)\n  }, [asyncChildren])\n\n  const onGroupOpen = useCallback(() => {\n    if (disabled || !group || !value || groupLoading) return\n\n    if (async && !initialAsyncRef.current) {\n      initialAsyncRef.current = true\n\n      onGroupChildren()\n        .then(() => {\n          onOpen()\n          onExpandedChange(value)\n        })\n        .catch(() => {\n          initialAsyncRef.current = false\n        })\n    } else {\n      onOpen()\n      onExpandedChange(value)\n    }\n  }, [\n    disabled,\n    group,\n    value,\n    groupLoading,\n    async,\n    onGroupChildren,\n    onOpen,\n    onExpandedChange,\n  ])\n\n  const onGroupClose = useCallback(() => {\n    if (disabled || !group || !value) return\n\n    onClose()\n    onExpandedChange(value)\n  }, [disabled, group, value, onClose, onExpandedChange])\n\n  const onGroupToggle = useCallback(() => {\n    if (groupOpen) {\n      onGroupClose()\n    } else {\n      onGroupOpen()\n    }\n  }, [groupOpen, onGroupClose, onGroupOpen])\n\n  useSafeLayoutEffect(() => {\n    if (defaultExpanded) {\n      if (async && !initialAsyncRef.current) {\n        initialAsyncRef.current = true\n\n        onGroupChildren()\n          .then(() => {\n            onOpen()\n          })\n          .catch(() => {\n            initialAsyncRef.current = false\n          })\n      } else {\n        onOpen()\n      }\n    } else {\n      onClose()\n    }\n  }, [defaultExpanded])\n\n  const getItemProps: PropGetter<\"li\"> = useCallback(\n    ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id: itemId,\n      ref: mergeRefs(ref, register),\n      \"aria-current\": selected ? \"page\" : undefined,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-labelledby\": cx(ariaLabelledby, labelId),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-selected\": dataAttr(selected),\n      ...rest,\n      ...props,\n      onClick: handlerAll(\n        props.onClick,\n        !group ? () => onSelectedChange(value) : undefined,\n      ),\n    }),\n    [\n      itemId,\n      register,\n      selected,\n      disabled,\n      labelId,\n      rest,\n      group,\n      onSelectedChange,\n      value,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-expanded\": groupOpen,\n      \"aria-hidden\": true,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-loading\": dataAttr(groupLoading),\n      \"data-selected\": dataAttr(selected),\n      role: \"presentation\",\n      ...props,\n    }),\n    [disabled, groupOpen, groupLoading, selected],\n  )\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      \"aria-controls\": contentId,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-expanded\": groupOpen,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-expanded\": dataAttr(groupOpen),\n      \"data-selected\": dataAttr(selected),\n      tabIndex: open && expanded && !disabled ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, onGroupToggle),\n    }),\n    [contentId, disabled, groupOpen, selected, open, expanded, onGroupToggle],\n  )\n\n  const getLinkProps: PropGetter<\"a\"> = useCallback(\n    (props = {}) => ({\n      href: value,\n      rel: external ? \"noopener\" : undefined,\n      target: external ? \"_blank\" : undefined,\n      \"data-disabled\": dataAttr(disabled),\n      \"data-selected\": dataAttr(selected),\n      tabIndex: open && expanded && !disabled ? 0 : -1,\n      ...props,\n      onClick: handlerAll(props.onClick, (ev) => {\n        if (!disabled) return\n\n        ev.preventDefault()\n        ev.stopPropagation()\n      }),\n    }),\n    [disabled, expanded, external, open, selected, value],\n  )\n\n  const getContentProps: PropGetter<\"ul\"> = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n      id: contentId,\n      \"aria-busy\": ariaAttr(groupLoading),\n      \"aria-labelledby\": cx(ariaLabelledby, labelId),\n      \"data-disabled\": dataAttr(disabled),\n      ...props,\n    }),\n    [contentId, labelId, disabled, groupLoading],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}) => ({ id: labelId, ...props }),\n    [labelId],\n  )\n\n  return {\n    branchOpen,\n    children,\n    disabled,\n    expanded,\n    expandedValue,\n    group,\n    groupLoading,\n    groupOpen,\n    open,\n    selected,\n    selectedValue,\n    value,\n    getContentProps,\n    getIndicatorProps,\n    getItemProps,\n    getLabelProps,\n    getLinkProps,\n    getTriggerProps,\n    onExpandedChange,\n    onGroupClose,\n    onGroupOpen,\n    onGroupToggle,\n    onSelectedChange,\n  }\n}\n\nexport type UseSidebarItemReturn = ReturnType<typeof useSidebarItem>\n"],"mappings":"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"}

package/dist/cjs/components/timeline/timeline.cjs

@@ -6,6 +6,7 @@ const require_var = require('../../core/system/var.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_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
 const require_timeline_style = require('./timeline.style.cjs');
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -17,8 +18,9 @@ const { ComponentContext, PropsContext: TimelinePropsContext, useComponentContex
 *
 * @see https://yamada-ui.com/docs/components/timeline
 */
-const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }) => {
+const TimelineRoot = withProvider(({ variant: variantProp, children, index = -1, items = [], ...rest }) => {
 	const context = (0, react.useMemo)(() => ({ index }), [index]);
+	const variant = require_hooks_use_value_index.useValue(variantProp);
 	const computedChildren = (0, react.useMemo)(() => {
 		if (children) return children;
 		return items.map(({ align = "start", content, description, indicator, title, connectorProps, contentProps, descriptionProps, indicatorProps, titleProps, ...rest$1 }, index$1) => {
@@ -27,7 +29,7 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 					...connectorProps,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineIndicator, {
 						...indicatorProps,
-						children: indicator
+						children: indicator ?? (variant === "number" ? index$1 + 1 : void 0)
 					})
 				}),
 				content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TimelineContent, {
@@ -47,7 +49,11 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 				children: [align === "start" ? children$1.connector : children$1.content, align === "start" ? children$1.content : children$1.connector]
 			}, index$1);
 		});
-	}, [items, children]);
+	}, [
+		children,
+		items,
+		variant
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
 		value: context,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.ul, {
@@ -55,7 +61,7 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 			children: computedChildren
 		})
 	});
-}, "root")(void 0, ({ indicatorFill, indicatorSize, indicatorStroke, separatorColor, separatorGap, separatorStyle, separatorWidth, ...rest }) => ({
+}, "root", { transferProps: ["variant"] })(void 0, ({ indicatorFill, indicatorSize, indicatorStroke, separatorColor, separatorGap, separatorStyle, separatorWidth, ...rest }) => ({
 	"--indicator-fill": require_var.varAttr(indicatorFill, "colors"),
 	"--indicator-size": require_var.varAttr(indicatorSize, "sizes"),
 	"--indicator-stroke": require_var.varAttr(indicatorStroke, "colors"),

package/dist/cjs/components/timeline/timeline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.cjs","names":["createSlotComponent","timelineStyle","rest","children","index","styled","varAttr"],"sources":["../../../../src/components/timeline/timeline.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TimelineStyle } from \"./timeline.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { dataAttr, isUndefined } from \"../../utils\"\nimport { timelineStyle } from \"./timeline.style\"\n\nexport interface TimelineItem extends Omit<\n  TimelineItemProps,\n  \"content\" | \"title\"\n> {\n  align?: \"end\" | \"start\"\n  content?: ReactNode\n  description?: ReactNode\n  indicator?: ReactNode\n  title?: ReactNode\n  connectorProps?: TimelineConnectorProps\n  contentProps?: TimelineContentProps\n  descriptionProps?: TimelineDescriptionProps\n  indicatorProps?: TimelineIndicatorProps\n  titleProps?: TimelineTitleProps\n}\n\ninterface ComponentContext extends Pick<TimelineRootProps, \"index\"> {}\n\nexport interface TimelineRootProps\n  extends HTMLStyledProps<\"ul\">, ThemeProps<TimelineStyle> {\n  /**\n   * The index of the active timeline item.\n   */\n  index?: number\n  /**\n   * The fill color of the indicator.\n   */\n  indicatorFill?: CSSProps[\"bg\"]\n  /**\n   * The size of the indicator.\n   */\n  indicatorSize?: CSSProps[\"boxSize\"]\n  /**\n   * The stroke color of the indicator.\n   */\n  indicatorStroke?: CSSProps[\"color\"]\n  /**\n   * If provided, generate timeline components based on items.\n   */\n  items?: TimelineItem[]\n  /**\n   * The color of the separator.\n   */\n  separatorColor?: CSSProps[\"color\"]\n  /**\n   * The gap of the separator.\n   */\n  separatorGap?: CSSProps[\"gap\"]\n  /**\n   * The style of the separator.\n   */\n  separatorStyle?: CSSProps[\"borderStyle\"]\n  /**\n   * The width of the separator.\n   */\n  separatorWidth?: CSSProps[\"width\"]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TimelinePropsContext,\n  useComponentContext,\n  usePropsContext: useTimelinePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TimelineRootProps, TimelineStyle, ComponentContext>(\n  \"timeline\",\n  timelineStyle,\n)\n\nexport { TimelinePropsContext, useTimelinePropsContext }\n\n/**\n * `Timeline` is a component that is used to display a list of events in chronological order.\n *\n * @see https://yamada-ui.com/docs/components/timeline\n */\nexport const TimelineRoot = withProvider(\n  ({ children, index = -1, items = [], ...rest }) => {\n    const context = useMemo(() => ({ index }), [index])\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(\n        (\n          {\n            align = \"start\",\n            content,\n            description,\n            indicator,\n            title,\n            connectorProps,\n            contentProps,\n            descriptionProps,\n            indicatorProps,\n            titleProps,\n            ...rest\n          },\n          index,\n        ) => {\n          const children = {\n            connector: (\n              <TimelineConnector {...connectorProps}>\n                <TimelineIndicator {...indicatorProps}>\n                  {indicator}\n                </TimelineIndicator>\n              </TimelineConnector>\n            ),\n            content: (\n              <TimelineContent {...contentProps}>\n                {content ?? (\n                  <>\n                    <TimelineTitle {...titleProps}>{title}</TimelineTitle>\n                    <TimelineDescription {...descriptionProps}>\n                      {description}\n                    </TimelineDescription>\n                  </>\n                )}\n              </TimelineContent>\n            ),\n          }\n\n          return (\n            <TimelineItem key={index} index={index} {...rest}>\n              {align === \"start\" ? children.connector : children.content}\n              {align === \"start\" ? children.content : children.connector}\n            </TimelineItem>\n          )\n        },\n      )\n    }, [items, children])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.ul {...rest}>{computedChildren}</styled.ul>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)(\n  undefined,\n  ({\n    indicatorFill,\n    indicatorSize,\n    indicatorStroke,\n    separatorColor,\n    separatorGap,\n    separatorStyle,\n    separatorWidth,\n    ...rest\n  }) => ({\n    \"--indicator-fill\": varAttr(indicatorFill, \"colors\"),\n    \"--indicator-size\": varAttr(indicatorSize, \"sizes\"),\n    \"--indicator-stroke\": varAttr(indicatorStroke, \"colors\"),\n    \"--separator-color\": varAttr(separatorColor, \"colors\"),\n    \"--separator-gap\": varAttr(separatorGap, \"spaces\"),\n    \"--separator-style\": varAttr(separatorStyle),\n    \"--separator-width\": varAttr(separatorWidth, \"sizes\"),\n    ...rest,\n  }),\n)\n\nexport interface TimelineItemProps extends HTMLStyledProps<\"li\"> {\n  /**\n   * The index of the timeline item.\n   */\n  index?: number\n}\n\nexport const TimelineItem = withContext<\"li\", TimelineItemProps>(\"li\", \"item\")(\n  undefined,\n  ({ index, ...rest }) => {\n    const { index: currentIndex } = useComponentContext()\n    const active =\n      !isUndefined(index) && !isUndefined(currentIndex) && index <= currentIndex\n\n    return {\n      ...rest,\n      \"data-active\": dataAttr(active),\n      \"data-index\": index,\n    }\n  },\n)\n\nexport interface TimelineConnectorProps extends HTMLStyledProps {}\n\nexport const TimelineConnector = withContext<\"div\", TimelineConnectorProps>(\n  \"div\",\n  \"connector\",\n)({ \"data-connector\": \"\" })\n\nexport interface TimelineIndicatorProps extends HTMLStyledProps {}\n\nconst TimelineIcon = styled(\"div\", {\n  base: {\n    bg: \"{indicator-fill}\",\n    borderColor: \"{indicator-stroke}\",\n    borderWidth: \"{separator-width}\",\n    boxSize: \"full\",\n    rounded: \"{indicator-rounded}\",\n  },\n})\n\nexport const TimelineIndicator = withContext<\"div\", TimelineIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)(undefined, ({ children = <TimelineIcon />, ...rest }) => ({\n  children,\n  ...rest,\n}))\n\nexport interface TimelineContentProps extends HTMLStyledProps {}\n\nexport const TimelineContent = withContext<\"div\", TimelineContentProps>(\n  \"div\",\n  \"content\",\n)({ \"data-content\": \"\" })\n\nexport interface TimelineTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const TimelineTitle = withContext<\"h3\", TimelineTitleProps>(\n  \"h3\",\n  \"title\",\n)()\n\nexport interface TimelineDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const TimelineDescription = withContext<\"p\", TimelineDescriptionProps>(\n  \"p\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;;AAoEA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,6CACF,YACAC,qCACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,UAAU,QAAQ,IAAI,QAAQ,EAAE,EAAE,GAAG,WAAW;CACjD,MAAM,oCAAyB,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CACnD,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAET,EACE,QAAQ,SACR,SACA,aACA,WACA,OACA,gBACA,cACA,kBACA,gBACA,YACA,GAAGC,UAEL,YACG;GACH,MAAMC,aAAW;IACf,WACE,2CAAC;KAAkB,GAAI;eACrB,2CAAC;MAAkB,GAAI;gBACpB;OACiB;MACF;IAEtB,SACE,2CAAC;KAAgB,GAAI;eAClB,WACC,qFACE,2CAAC;MAAc,GAAI;gBAAa;OAAsB,EACtD,2CAAC;MAAoB,GAAI;gBACtB;OACmB,IACrB;MAEW;IAErB;AAED,UACE,4CAAC;IAAyB,OAAOC;IAAO,GAAIF;eACzC,UAAU,UAAUC,WAAS,YAAYA,WAAS,SAClD,UAAU,UAAUA,WAAS,UAAUA,WAAS;MAFhCC,QAGJ;IAGpB;IACA,CAAC,OAAO,SAAS,CAAC;AAErB,QACE,2CAAC;EAAiB,OAAO;YACvB,2CAACC,uBAAO;GAAG,GAAI;aAAO;IAA6B;GAClC;GAGvB,OACD,CACC,SACC,EACC,eACA,eACA,iBACA,gBACA,cACA,gBACA,gBACA,GAAG,YACE;CACL,oBAAoBC,oBAAQ,eAAe,SAAS;CACpD,oBAAoBA,oBAAQ,eAAe,QAAQ;CACnD,sBAAsBA,oBAAQ,iBAAiB,SAAS;CACxD,qBAAqBA,oBAAQ,gBAAgB,SAAS;CACtD,mBAAmBA,oBAAQ,cAAc,SAAS;CAClD,qBAAqBA,oBAAQ,eAAe;CAC5C,qBAAqBA,oBAAQ,gBAAgB,QAAQ;CACrD,GAAG;CACJ,EACF;AASD,MAAa,eAAe,YAAqC,MAAM,OAAO,CAC5E,SACC,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,OAAO,iBAAiB,qBAAqB;CACrD,MAAM,SACJ,oDAAa,MAAM,IAAI,oDAAa,aAAa,IAAI,SAAS;AAEhE,QAAO;EACL,GAAG;EACH,+DAAwB,OAAO;EAC/B,cAAc;EACf;EAEJ;AAID,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,eAAeD,uBAAO,OAAO,EACjC,MAAM;CACJ,IAAI;CACJ,aAAa;CACb,aAAa;CACb,SAAS;CACT,SAAS;CACV,EACF,CAAC;AAEF,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,SAAY,EAAE,WAAW,2CAAC,iBAAe,EAAE,GAAG,YAAY;CAC1D;CACA,GAAG;CACJ,EAAE;AAIH,MAAa,kBAAkB,YAC7B,OACA,UACD,CAAC,EAAE,gBAAgB,IAAI,CAAC;AAIzB,MAAa,gBAAgB,YAC3B,MACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YACjC,KACA,cACD,EAAE"}
+{"version":3,"file":"timeline.cjs","names":["createSlotComponent","timelineStyle","useValue","rest","children","index","styled","varAttr"],"sources":["../../../../src/components/timeline/timeline.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TimelineStyle } from \"./timeline.style\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr, isUndefined } from \"../../utils\"\nimport { timelineStyle } from \"./timeline.style\"\n\nexport interface TimelineItem extends Omit<\n  TimelineItemProps,\n  \"content\" | \"title\"\n> {\n  align?: \"end\" | \"start\"\n  content?: ReactNode\n  description?: ReactNode\n  indicator?: ReactNode\n  title?: ReactNode\n  connectorProps?: TimelineConnectorProps\n  contentProps?: TimelineContentProps\n  descriptionProps?: TimelineDescriptionProps\n  indicatorProps?: TimelineIndicatorProps\n  titleProps?: TimelineTitleProps\n}\n\ninterface ComponentContext extends Pick<TimelineRootProps, \"index\"> {}\n\nexport interface TimelineRootProps\n  extends HTMLStyledProps<\"ul\">, ThemeProps<TimelineStyle> {\n  /**\n   * The index of the active timeline item.\n   */\n  index?: number\n  /**\n   * The fill color of the indicator.\n   */\n  indicatorFill?: CSSProps[\"bg\"]\n  /**\n   * The size of the indicator.\n   */\n  indicatorSize?: CSSProps[\"boxSize\"]\n  /**\n   * The stroke color of the indicator.\n   */\n  indicatorStroke?: CSSProps[\"color\"]\n  /**\n   * If provided, generate timeline components based on items.\n   */\n  items?: TimelineItem[]\n  /**\n   * The color of the separator.\n   */\n  separatorColor?: CSSProps[\"color\"]\n  /**\n   * The gap of the separator.\n   */\n  separatorGap?: CSSProps[\"gap\"]\n  /**\n   * The style of the separator.\n   */\n  separatorStyle?: CSSProps[\"borderStyle\"]\n  /**\n   * The width of the separator.\n   */\n  separatorWidth?: CSSProps[\"width\"]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TimelinePropsContext,\n  useComponentContext,\n  usePropsContext: useTimelinePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TimelineRootProps, TimelineStyle, ComponentContext>(\n  \"timeline\",\n  timelineStyle,\n)\n\nexport { TimelinePropsContext, useTimelinePropsContext }\n\n/**\n * `Timeline` is a component that is used to display a list of events in chronological order.\n *\n * @see https://yamada-ui.com/docs/components/timeline\n */\nexport const TimelineRoot = withProvider(\n  ({ variant: variantProp, children, index = -1, items = [], ...rest }) => {\n    const context = useMemo(() => ({ index }), [index])\n    const variant = useValue(variantProp)\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return items.map(\n        (\n          {\n            align = \"start\",\n            content,\n            description,\n            indicator,\n            title,\n            connectorProps,\n            contentProps,\n            descriptionProps,\n            indicatorProps,\n            titleProps,\n            ...rest\n          },\n          index,\n        ) => {\n          const children = {\n            connector: (\n              <TimelineConnector {...connectorProps}>\n                <TimelineIndicator {...indicatorProps}>\n                  {indicator ?? (variant === \"number\" ? index + 1 : undefined)}\n                </TimelineIndicator>\n              </TimelineConnector>\n            ),\n            content: (\n              <TimelineContent {...contentProps}>\n                {content ?? (\n                  <>\n                    <TimelineTitle {...titleProps}>{title}</TimelineTitle>\n                    <TimelineDescription {...descriptionProps}>\n                      {description}\n                    </TimelineDescription>\n                  </>\n                )}\n              </TimelineContent>\n            ),\n          }\n\n          return (\n            <TimelineItem key={index} index={index} {...rest}>\n              {align === \"start\" ? children.connector : children.content}\n              {align === \"start\" ? children.content : children.connector}\n            </TimelineItem>\n          )\n        },\n      )\n    }, [children, items, variant])\n\n    return (\n      <ComponentContext value={context}>\n        <styled.ul {...rest}>{computedChildren}</styled.ul>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"variant\"] },\n)(\n  undefined,\n  ({\n    indicatorFill,\n    indicatorSize,\n    indicatorStroke,\n    separatorColor,\n    separatorGap,\n    separatorStyle,\n    separatorWidth,\n    ...rest\n  }) => ({\n    \"--indicator-fill\": varAttr(indicatorFill, \"colors\"),\n    \"--indicator-size\": varAttr(indicatorSize, \"sizes\"),\n    \"--indicator-stroke\": varAttr(indicatorStroke, \"colors\"),\n    \"--separator-color\": varAttr(separatorColor, \"colors\"),\n    \"--separator-gap\": varAttr(separatorGap, \"spaces\"),\n    \"--separator-style\": varAttr(separatorStyle),\n    \"--separator-width\": varAttr(separatorWidth, \"sizes\"),\n    ...rest,\n  }),\n)\n\nexport interface TimelineItemProps extends HTMLStyledProps<\"li\"> {\n  /**\n   * The index of the timeline item.\n   */\n  index?: number\n}\n\nexport const TimelineItem = withContext<\"li\", TimelineItemProps>(\"li\", \"item\")(\n  undefined,\n  ({ index, ...rest }) => {\n    const { index: currentIndex } = useComponentContext()\n    const active =\n      !isUndefined(index) && !isUndefined(currentIndex) && index <= currentIndex\n\n    return {\n      ...rest,\n      \"data-active\": dataAttr(active),\n      \"data-index\": index,\n    }\n  },\n)\n\nexport interface TimelineConnectorProps extends HTMLStyledProps {}\n\nexport const TimelineConnector = withContext<\"div\", TimelineConnectorProps>(\n  \"div\",\n  \"connector\",\n)({ \"data-connector\": \"\" })\n\nexport interface TimelineIndicatorProps extends HTMLStyledProps {}\n\nconst TimelineIcon = styled(\"div\", {\n  base: {\n    bg: \"{indicator-fill}\",\n    borderColor: \"{indicator-stroke}\",\n    borderWidth: \"{separator-width}\",\n    boxSize: \"full\",\n    rounded: \"{indicator-rounded}\",\n  },\n})\n\nexport const TimelineIndicator = withContext<\"div\", TimelineIndicatorProps>(\n  \"div\",\n  \"indicator\",\n)(undefined, ({ children = <TimelineIcon />, ...rest }) => ({\n  children,\n  ...rest,\n}))\n\nexport interface TimelineContentProps extends HTMLStyledProps {}\n\nexport const TimelineContent = withContext<\"div\", TimelineContentProps>(\n  \"div\",\n  \"content\",\n)({ \"data-content\": \"\" })\n\nexport interface TimelineTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const TimelineTitle = withContext<\"h3\", TimelineTitleProps>(\n  \"h3\",\n  \"title\",\n)()\n\nexport interface TimelineDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const TimelineDescription = withContext<\"p\", TimelineDescriptionProps>(\n  \"p\",\n  \"description\",\n)()\n"],"mappings":";;;;;;;;;;;;;;AAqEA,MAAM,EACJ,kBACA,cAAc,sBACd,qBACA,iBAAiB,yBACjB,aACA,iBACEA,6CACF,YACAC,qCACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,SAAS,aAAa,UAAU,QAAQ,IAAI,QAAQ,EAAE,EAAE,GAAG,WAAW;CACvE,MAAM,oCAAyB,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CACnD,MAAM,UAAUC,uCAAS,YAAY;CACrC,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAET,EACE,QAAQ,SACR,SACA,aACA,WACA,OACA,gBACA,cACA,kBACA,gBACA,YACA,GAAGC,UAEL,YACG;GACH,MAAMC,aAAW;IACf,WACE,2CAAC;KAAkB,GAAI;eACrB,2CAAC;MAAkB,GAAI;gBACpB,cAAc,YAAY,WAAWC,UAAQ,IAAI;OAChC;MACF;IAEtB,SACE,2CAAC;KAAgB,GAAI;eAClB,WACC,qFACE,2CAAC;MAAc,GAAI;gBAAa;OAAsB,EACtD,2CAAC;MAAoB,GAAI;gBACtB;OACmB,IACrB;MAEW;IAErB;AAED,UACE,4CAAC;IAAyB,OAAOA;IAAO,GAAIF;eACzC,UAAU,UAAUC,WAAS,YAAYA,WAAS,SAClD,UAAU,UAAUA,WAAS,UAAUA,WAAS;MAFhCC,QAGJ;IAGpB;IACA;EAAC;EAAU;EAAO;EAAQ,CAAC;AAE9B,QACE,2CAAC;EAAiB,OAAO;YACvB,2CAACC,uBAAO;GAAG,GAAI;aAAO;IAA6B;GAClC;GAGvB,QACA,EAAE,eAAe,CAAC,UAAU,EAAE,CAC/B,CACC,SACC,EACC,eACA,eACA,iBACA,gBACA,cACA,gBACA,gBACA,GAAG,YACE;CACL,oBAAoBC,oBAAQ,eAAe,SAAS;CACpD,oBAAoBA,oBAAQ,eAAe,QAAQ;CACnD,sBAAsBA,oBAAQ,iBAAiB,SAAS;CACxD,qBAAqBA,oBAAQ,gBAAgB,SAAS;CACtD,mBAAmBA,oBAAQ,cAAc,SAAS;CAClD,qBAAqBA,oBAAQ,eAAe;CAC5C,qBAAqBA,oBAAQ,gBAAgB,QAAQ;CACrD,GAAG;CACJ,EACF;AASD,MAAa,eAAe,YAAqC,MAAM,OAAO,CAC5E,SACC,EAAE,OAAO,GAAG,WAAW;CACtB,MAAM,EAAE,OAAO,iBAAiB,qBAAqB;CACrD,MAAM,SACJ,oDAAa,MAAM,IAAI,oDAAa,aAAa,IAAI,SAAS;AAEhE,QAAO;EACL,GAAG;EACH,+DAAwB,OAAO;EAC/B,cAAc;EACf;EAEJ;AAID,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,eAAeD,uBAAO,OAAO,EACjC,MAAM;CACJ,IAAI;CACJ,aAAa;CACb,aAAa;CACb,SAAS;CACT,SAAS;CACV,EACF,CAAC;AAEF,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,SAAY,EAAE,WAAW,2CAAC,iBAAe,EAAE,GAAG,YAAY;CAC1D;CACA,GAAG;CACJ,EAAE;AAIH,MAAa,kBAAkB,YAC7B,OACA,UACD,CAAC,EAAE,gBAAgB,IAAI,CAAC;AAIzB,MAAa,gBAAgB,YAC3B,MACA,QACD,EAAE;AAIH,MAAa,sBAAsB,YACjC,KACA,cACD,EAAE"}

package/dist/cjs/components/timeline/timeline.style.cjs

@@ -30,7 +30,6 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 			boxSize: "{indicator-size}",
 			color: "{indicator-stroke}",
 			display: "flex",
-			fontWeight: "medium",
 			justifyContent: "center",
 			lineHeight: "{indicator-size}",
 			overflow: "hidden",
@@ -86,6 +85,10 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 			square: { item: { "--indicator-rounded": "radii.0" } }
 		}
 	},
+	variants: {
+		number: { indicator: { layerStyle: "solid" } },
+		plain: {}
+	},
 	sizes: {
 		base: { item: { _last: { "& [data-content]": { pb: 0 } } } },
 		sm: {
@@ -94,6 +97,7 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 				pb: "8"
 			},
 			description: { fontSize: "xs" },
+			indicator: { fontSize: "xs" },
 			item: { gap: "3" },
 			root: {
 				"--indicator-size": "sizes.3",
@@ -108,6 +112,7 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 				pb: "10"
 			},
 			description: { fontSize: "sm" },
+			indicator: { fontSize: "sm" },
 			item: { gap: "4" },
 			root: {
 				"--indicator-size": "sizes.5",
@@ -122,6 +127,7 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 				pb: "10"
 			},
 			description: { fontSize: "sm" },
+			indicator: { fontSize: "md" },
 			item: { gap: "4" },
 			root: {
 				"--indicator-size": "sizes.7",
@@ -136,6 +142,7 @@ const timelineStyle = require_config.defineComponentSlotStyle({
 				pb: "12"
 			},
 			description: { fontSize: "md" },
+			indicator: { fontSize: "md" },
 			item: { gap: "5" },
 			root: {
 				"--indicator-size": "sizes.8",

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

@@ -1 +1 @@
-{"version":3,"file":"timeline.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/timeline/timeline.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const timelineStyle = defineComponentSlotStyle({\n  base: {\n    connector: {\n      alignSelf: \"stretch\",\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        borderInlineStart:\n          \"{separator-width} {separator-style, solid} {separator-color}\",\n        display: \"block\",\n        h: \"full\",\n        insetBlockStart: \"calc({indicator-size} + {separator-gap})\",\n        insetInlineStart:\n          \"calc(({indicator-size} / 2) - ({separator-width} / 2))\",\n        maxH: `calc(full - {indicator-size} - ({separator-gap} * 2))`,\n        position: \"absolute\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      color: \"fg.muted\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      boxSize: \"{indicator-size}\",\n      color: \"{indicator-stroke}\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      justifyContent: \"center\",\n      lineHeight: \"{indicator-size}\",\n      overflow: \"hidden\",\n      rounded: \"{indicator-rounded}\",\n    },\n    item: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      _last: {\n        \"& [data-connector]\": {\n          _after: { display: \"none\" },\n        },\n      },\n    },\n    root: {\n      \"--indicator-fill\": \"transparent\",\n      \"--indicator-stroke\": \"colorScheme.solid\",\n      \"--separator-color\": \"colors.border\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    title: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      gap: \"1\",\n      lineHeight: \"{indicator-size}\",\n    },\n  },\n\n  props: {\n    /**\n     * The alignment of the timeline.\n     *\n     * @default 'start'\n     */\n    align: {\n      center: {\n        content: {\n          \"&:first-of-type\": { alignItems: \"flex-end\" },\n          flex: \"1\",\n        },\n        item: {\n          \"&:has(> [data-content]:first-of-type)\": {\n            \"&:not(:has(> [data-content]:last-of-type))\": {\n              _after: { display: \"block\", flex: \"1\" },\n            },\n          },\n          \"&:not(:has(> [data-content]:first-of-type))\": {\n            _before: { display: \"block\", flex: \"1\" },\n          },\n        },\n      },\n      end: {\n        content: { alignItems: \"flex-end\" },\n      },\n      start: {\n        content: { alignItems: \"flex-start\" },\n      },\n    },\n    /**\n     * If `true`, the timeline will be attached.\n     *\n     * @default false\n     */\n    attached: {\n      true: {\n        item: {\n          \"--separator-gap\": \"0px\",\n        },\n      },\n    },\n    /**\n     * The shape of the timeline.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        item: { \"--indicator-rounded\": \"radii.full\" },\n      },\n      rounded: {\n        item: { \"--indicator-rounded\": \"radii.l2\" },\n      },\n      square: {\n        item: { \"--indicator-rounded\": \"radii.0\" },\n      },\n    },\n  },\n\n  sizes: {\n    base: {\n      item: {\n        _last: {\n          \"& [data-content]\": { pb: 0 },\n        },\n      },\n    },\n    sm: {\n      content: { gap: \"1\", pb: \"8\" },\n      description: { fontSize: \"xs\" },\n      item: { gap: \"3\" },\n      root: {\n        \"--indicator-size\": \"sizes.3\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.0.5\",\n      },\n      title: { fontSize: \"sm\" },\n    },\n    md: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.5\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    lg: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.7\",\n        \"--separator-gap\": \"spaces.2.5\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    xl: {\n      content: { gap: \"2\", pb: \"12\" },\n      description: { fontSize: \"md\" },\n      item: { gap: \"5\" },\n      root: {\n        \"--indicator-size\": \"sizes.8\",\n        \"--separator-gap\": \"spaces.3\",\n        \"--separator-width\": \"sizes.1.5\",\n      },\n      title: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    align: \"start\",\n    shape: \"circle\",\n  },\n})\n\nexport type TimelineStyle = typeof timelineStyle\n"],"mappings":"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"}
+{"version":3,"file":"timeline.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/timeline/timeline.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const timelineStyle = defineComponentSlotStyle({\n  base: {\n    connector: {\n      alignSelf: \"stretch\",\n      position: \"relative\",\n      transitionDuration: \"moderate\",\n      transitionProperty: \"common\",\n      _after: {\n        borderInlineStart:\n          \"{separator-width} {separator-style, solid} {separator-color}\",\n        display: \"block\",\n        h: \"full\",\n        insetBlockStart: \"calc({indicator-size} + {separator-gap})\",\n        insetInlineStart:\n          \"calc(({indicator-size} / 2) - ({separator-width} / 2))\",\n        maxH: `calc(full - {indicator-size} - ({separator-gap} * 2))`,\n        position: \"absolute\",\n      },\n    },\n    content: {\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    description: {\n      color: \"fg.muted\",\n    },\n    indicator: {\n      alignItems: \"center\",\n      boxSize: \"{indicator-size}\",\n      color: \"{indicator-stroke}\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      lineHeight: \"{indicator-size}\",\n      overflow: \"hidden\",\n      rounded: \"{indicator-rounded}\",\n    },\n    item: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flexShrink: \"0\",\n      _last: {\n        \"& [data-connector]\": {\n          _after: { display: \"none\" },\n        },\n      },\n    },\n    root: {\n      \"--indicator-fill\": \"transparent\",\n      \"--indicator-stroke\": \"colorScheme.solid\",\n      \"--separator-color\": \"colors.border\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      w: \"full\",\n    },\n    title: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"medium\",\n      gap: \"1\",\n      lineHeight: \"{indicator-size}\",\n    },\n  },\n\n  props: {\n    /**\n     * The alignment of the timeline.\n     *\n     * @default 'start'\n     */\n    align: {\n      center: {\n        content: {\n          \"&:first-of-type\": { alignItems: \"flex-end\" },\n          flex: \"1\",\n        },\n        item: {\n          \"&:has(> [data-content]:first-of-type)\": {\n            \"&:not(:has(> [data-content]:last-of-type))\": {\n              _after: { display: \"block\", flex: \"1\" },\n            },\n          },\n          \"&:not(:has(> [data-content]:first-of-type))\": {\n            _before: { display: \"block\", flex: \"1\" },\n          },\n        },\n      },\n      end: {\n        content: { alignItems: \"flex-end\" },\n      },\n      start: {\n        content: { alignItems: \"flex-start\" },\n      },\n    },\n    /**\n     * If `true`, the timeline will be attached.\n     *\n     * @default false\n     */\n    attached: {\n      true: {\n        item: {\n          \"--separator-gap\": \"0px\",\n        },\n      },\n    },\n    /**\n     * The shape of the timeline.\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: {\n        item: { \"--indicator-rounded\": \"radii.full\" },\n      },\n      rounded: {\n        item: { \"--indicator-rounded\": \"radii.l2\" },\n      },\n      square: {\n        item: { \"--indicator-rounded\": \"radii.0\" },\n      },\n    },\n  },\n\n  variants: {\n    number: { indicator: { layerStyle: \"solid\" } },\n    plain: {},\n  },\n\n  sizes: {\n    base: {\n      item: {\n        _last: {\n          \"& [data-content]\": { pb: 0 },\n        },\n      },\n    },\n    sm: {\n      content: { gap: \"1\", pb: \"8\" },\n      description: { fontSize: \"xs\" },\n      indicator: { fontSize: \"xs\" },\n      item: { gap: \"3\" },\n      root: {\n        \"--indicator-size\": \"sizes.3\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.0.5\",\n      },\n      title: { fontSize: \"sm\" },\n    },\n    md: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      indicator: { fontSize: \"sm\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.5\",\n        \"--separator-gap\": \"spaces.2\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    lg: {\n      content: { gap: \"2\", pb: \"10\" },\n      description: { fontSize: \"sm\" },\n      indicator: { fontSize: \"md\" },\n      item: { gap: \"4\" },\n      root: {\n        \"--indicator-size\": \"sizes.7\",\n        \"--separator-gap\": \"spaces.2.5\",\n        \"--separator-width\": \"sizes.1\",\n      },\n      title: { fontSize: \"md\" },\n    },\n    xl: {\n      content: { gap: \"2\", pb: \"12\" },\n      description: { fontSize: \"md\" },\n      indicator: { fontSize: \"md\" },\n      item: { gap: \"5\" },\n      root: {\n        \"--indicator-size\": \"sizes.8\",\n        \"--separator-gap\": \"spaces.3\",\n        \"--separator-width\": \"sizes.1.5\",\n      },\n      title: { fontSize: \"lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    align: \"start\",\n    shape: \"circle\",\n  },\n})\n\nexport type TimelineStyle = typeof timelineStyle\n"],"mappings":"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"}

package/dist/cjs/components/tooltip/tooltip.cjs

@@ -25,6 +25,10 @@ const { PropsContext: TooltipPropsContext, StyleContext, usePropsContext: useToo
 const Tooltip = (props) => {
 	const [context, { animationScheme = "scale", children, content, duration = .1, contentProps, portalProps, ...rest }] = useRootComponentProps(props);
 	const { open, getContentProps, getPositionerProps, getTriggerProps } = require_use_tooltip.useTooltip(rest);
+	const popupAnimationProps = require_popover.usePopupAnimationProps({
+		animationScheme,
+		duration
+	});
 	if (!content) return children;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyleContext, {
 		value: context,
@@ -37,7 +41,7 @@ const Tooltip = (props) => {
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipPositioner, {
 				...getPositionerProps(),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
-					...require_popover.getPopupAnimationProps(animationScheme, duration),
+					...popupAnimationProps,
 					...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(contentProps))),
 					children: content
 				})

package/dist/cjs/components/tooltip/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["createSlotComponent","tooltipStyle","Tooltip: FC<TooltipProps>","useTooltip","AnimatePresence","Portal","getPopupAnimationProps","motion"],"sources":["../../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { PopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { TooltipStyle } from \"./tooltip.style\"\nimport type { UseTooltipProps } from \"./use-tooltip\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { getPopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { tooltipStyle } from \"./tooltip.style\"\nimport { useTooltip } from \"./use-tooltip\"\n\nexport interface TooltipProps\n  extends\n    UseTooltipProps,\n    PropsWithChildren,\n    PopupAnimationProps,\n    ThemeProps<TooltipStyle> {\n  /**\n   * The content of the tooltip.\n   */\n  content?: ReactNode\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: PopupAnimationProps[\"duration\"]\n  /**\n   * Props for content element.\n   */\n  contentProps?: HTMLMotionProps\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nconst {\n  PropsContext: TooltipPropsContext,\n  StyleContext,\n  usePropsContext: useTooltipPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<TooltipProps, TooltipStyle>(\"tooltip\", tooltipStyle)\n\nexport { TooltipPropsContext, useTooltipPropsContext }\n\n/**\n * `Tooltip` is a component that displays short information, such as supplementary details for an element.\n *\n * @see https://yamada-ui.com/docs/components/tooltip\n */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n  const [\n    context,\n    {\n      animationScheme = \"scale\",\n      children,\n      content,\n      duration = 0.1,\n      contentProps,\n      portalProps,\n      ...rest\n    },\n  ] = useRootComponentProps(props)\n  const { open, getContentProps, getPositionerProps, getTriggerProps } =\n    useTooltip(rest)\n\n  if (!content) return children\n\n  return (\n    <StyleContext value={context}>\n      <TooltipTrigger asChild {...getTriggerProps()}>\n        {children}\n      </TooltipTrigger>\n\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <TooltipPositioner {...getPositionerProps()}>\n              <TooltipContent\n                {...getPopupAnimationProps(animationScheme, duration)}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(contentProps)),\n                )}\n              >\n                {content}\n              </TooltipContent>\n            </TooltipPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    </StyleContext>\n  )\n}\n\ninterface TooltipPositionerProps extends HTMLStyledProps {}\n\nconst TooltipPositioner = withContext<\"div\", TooltipPositionerProps>(\n  \"div\",\n  \"positioner\",\n)()\n\ninterface TooltipTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nconst TooltipTrigger = withContext<\"button\", TooltipTriggerProps>(\n  \"button\",\n  \"trigger\",\n)()\n\ninterface TooltipContentProps extends Omit<\n  HTMLMotionProps,\n  \"children\" | \"offset\" | \"transform\"\n> {}\n\nconst TooltipContent = withContext<\"div\", TooltipContentProps>(\n  motion.div,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4CA,MAAM,EACJ,cAAc,qBACd,cACA,iBAAiB,wBACjB,aACA,0BACEA,6CAAgD,WAAWC,mCAAa;;;;;;AAS5E,MAAaC,WAA6B,UAAU;CAClD,MAAM,CACJ,SACA,EACE,kBAAkB,SAClB,UACA,SACA,WAAW,IACX,cACA,aACA,GAAG,UAEH,sBAAsB,MAAM;CAChC,MAAM,EAAE,MAAM,iBAAiB,oBAAoB,oBACjDC,+BAAW,KAAK;AAElB,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,4CAAC;EAAa,OAAO;aACnB,2CAAC;GAAe;GAAQ,GAAI,iBAAiB;GAC1C;IACc,EAEjB,2CAACC,0CACE,OACC,2CAACC;GAAO,GAAI;aACV,2CAAC;IAAkB,GAAI,oBAAoB;cACzC,2CAAC;KACC,GAAIC,uCAAuB,iBAAiB,SAAS;KACrD,+CACE,4DAAgC,aAAa,CAAC,CAC/C;eAEA;MACc;KACC;IACb,GACP,OACY;GACL;;AAMnB,MAAM,oBAAoB,YACxB,OACA,aACD,EAAE;AAIH,MAAM,iBAAiB,YACrB,UACA,UACD,EAAE;AAOH,MAAM,iBAAiB,YACrBC,uBAAO,KACP,UACD,EAAE"}
+{"version":3,"file":"tooltip.cjs","names":["createSlotComponent","tooltipStyle","Tooltip: FC<TooltipProps>","useTooltip","usePopupAnimationProps","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { TooltipStyle } from \"./tooltip.style\"\nimport type { UseTooltipProps } from \"./use-tooltip\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { tooltipStyle } from \"./tooltip.style\"\nimport { useTooltip } from \"./use-tooltip\"\n\nexport interface TooltipProps\n  extends\n    UseTooltipProps,\n    PropsWithChildren,\n    UsePopupAnimationProps,\n    ThemeProps<TooltipStyle> {\n  /**\n   * The content of the tooltip.\n   */\n  content?: ReactNode\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: UsePopupAnimationProps[\"duration\"]\n  /**\n   * Props for content element.\n   */\n  contentProps?: HTMLMotionProps\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nconst {\n  PropsContext: TooltipPropsContext,\n  StyleContext,\n  usePropsContext: useTooltipPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<TooltipProps, TooltipStyle>(\"tooltip\", tooltipStyle)\n\nexport { TooltipPropsContext, useTooltipPropsContext }\n\n/**\n * `Tooltip` is a component that displays short information, such as supplementary details for an element.\n *\n * @see https://yamada-ui.com/docs/components/tooltip\n */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n  const [\n    context,\n    {\n      animationScheme = \"scale\",\n      children,\n      content,\n      duration = 0.1,\n      contentProps,\n      portalProps,\n      ...rest\n    },\n  ] = useRootComponentProps(props)\n  const { open, getContentProps, getPositionerProps, getTriggerProps } =\n    useTooltip(rest)\n  const popupAnimationProps = usePopupAnimationProps({\n    animationScheme,\n    duration,\n  })\n\n  if (!content) return children\n\n  return (\n    <StyleContext value={context}>\n      <TooltipTrigger asChild {...getTriggerProps()}>\n        {children}\n      </TooltipTrigger>\n\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <TooltipPositioner {...getPositionerProps()}>\n              <TooltipContent\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(contentProps)),\n                )}\n              >\n                {content}\n              </TooltipContent>\n            </TooltipPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    </StyleContext>\n  )\n}\n\ninterface TooltipPositionerProps extends HTMLStyledProps {}\n\nconst TooltipPositioner = withContext<\"div\", TooltipPositionerProps>(\n  \"div\",\n  \"positioner\",\n)()\n\ninterface TooltipTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nconst TooltipTrigger = withContext<\"button\", TooltipTriggerProps>(\n  \"button\",\n  \"trigger\",\n)()\n\ninterface TooltipContentProps extends Omit<\n  HTMLMotionProps,\n  \"children\" | \"offset\" | \"transform\"\n> {}\n\nconst TooltipContent = withContext<\"div\", TooltipContentProps>(\n  motion.div,\n  \"content\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4CA,MAAM,EACJ,cAAc,qBACd,cACA,iBAAiB,wBACjB,aACA,0BACEA,6CAAgD,WAAWC,mCAAa;;;;;;AAS5E,MAAaC,WAA6B,UAAU;CAClD,MAAM,CACJ,SACA,EACE,kBAAkB,SAClB,UACA,SACA,WAAW,IACX,cACA,aACA,GAAG,UAEH,sBAAsB,MAAM;CAChC,MAAM,EAAE,MAAM,iBAAiB,oBAAoB,oBACjDC,+BAAW,KAAK;CAClB,MAAM,sBAAsBC,uCAAuB;EACjD;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,4CAAC;EAAa,OAAO;aACnB,2CAAC;GAAe;GAAQ,GAAI,iBAAiB;GAC1C;IACc,EAEjB,2CAACC,0CACE,OACC,2CAACC;GAAO,GAAI;aACV,2CAAC;IAAkB,GAAI,oBAAoB;cACzC,2CAAC;KACC,GAAI;KACJ,+CACE,4DAAgC,aAAa,CAAC,CAC/C;eAEA;MACc;KACC;IACb,GACP,OACY;GACL;;AAMnB,MAAM,oBAAoB,YACxB,OACA,aACD,EAAE;AAIH,MAAM,iBAAiB,YACrB,UACA,UACD,EAAE;AAOH,MAAM,iBAAiB,YACrBC,uBAAO,KACP,UACD,EAAE"}