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

package/dist/esm/components/sidebar/use-sidebar.js

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

package/dist/esm/components/sidebar/use-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sidebar.js","names":["createContext","getRootProps: PropGetter<\"div\">","getTriggerProps: PropGetter<\"button\">","getSidePanelProps: PropGetter<\"aside\">","getHeaderProps: PropGetter<\"header\">","getFooterProps: PropGetter<\"footer\">","getRootProps: PropGetter<\"li\">","getLabelProps: PropGetter<\"span\">","branchOpen: boolean[]","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/esm/components/timeline/timeline.js

@@ -5,6 +5,7 @@ import { varAttr } from "../../core/system/var.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
+import { useValue } from "../../hooks/use-value/index.js";
 import { timelineStyle } from "./timeline.style.js";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -16,8 +17,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 = useMemo(() => ({ index }), [index]);
+	const variant = useValue(variantProp);
 	const computedChildren = useMemo(() => {
 		if (children) return children;
 		return items.map(({ align = "start", content, description, indicator, title, connectorProps, contentProps, descriptionProps, indicatorProps, titleProps, ...rest$1 }, index$1) => {
@@ -26,7 +28,7 @@ const TimelineRoot = withProvider(({ children, index = -1, items = [], ...rest }
 					...connectorProps,
 					children: /* @__PURE__ */ jsx(TimelineIndicator, {
 						...indicatorProps,
-						children: indicator
+						children: indicator ?? (variant === "number" ? index$1 + 1 : void 0)
 					})
 				}),
 				content: /* @__PURE__ */ jsx(TimelineContent, {
@@ -46,7 +48,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__ */ jsx(ComponentContext, {
 		value: context,
 		children: /* @__PURE__ */ jsx(styled.ul, {
@@ -54,7 +60,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": varAttr(indicatorFill, "colors"),
 	"--indicator-size": varAttr(indicatorSize, "sizes"),
 	"--indicator-stroke": varAttr(indicatorStroke, "colors"),

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

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","names":["rest","children","index"],"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,iBACE,oBACF,YACA,cACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,UAAU,QAAQ,IAAI,QAAQ,EAAE,EAAE,GAAG,WAAW;CACjD,MAAM,UAAU,eAAe,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CACnD,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAET,EACE,QAAQ,SACR,SACA,aACA,WACA,OACA,gBACA,cACA,kBACA,gBACA,YACA,GAAGA,UAEL,YACG;GACH,MAAMC,aAAW;IACf,WACE,oBAAC;KAAkB,GAAI;eACrB,oBAAC;MAAkB,GAAI;gBACpB;OACiB;MACF;IAEtB,SACE,oBAAC;KAAgB,GAAI;eAClB,WACC,8CACE,oBAAC;MAAc,GAAI;gBAAa;OAAsB,EACtD,oBAAC;MAAoB,GAAI;gBACtB;OACmB,IACrB;MAEW;IAErB;AAED,UACE,qBAAC;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,oBAAC;EAAiB,OAAO;YACvB,oBAAC,OAAO;GAAG,GAAI;aAAO;IAA6B;GAClC;GAGvB,OACD,CACC,SACC,EACC,eACA,eACA,iBACA,gBACA,cACA,gBACA,gBACA,GAAG,YACE;CACL,oBAAoB,QAAQ,eAAe,SAAS;CACpD,oBAAoB,QAAQ,eAAe,QAAQ;CACnD,sBAAsB,QAAQ,iBAAiB,SAAS;CACxD,qBAAqB,QAAQ,gBAAgB,SAAS;CACtD,mBAAmB,QAAQ,cAAc,SAAS;CAClD,qBAAqB,QAAQ,eAAe;CAC5C,qBAAqB,QAAQ,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,gCAAa,MAAM,IAAI,gCAAa,aAAa,IAAI,SAAS;AAEhE,QAAO;EACL,GAAG;EACH,2CAAwB,OAAO;EAC/B,cAAc;EACf;EAEJ;AAID,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,eAAe,OAAO,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,oBAAC,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.js","names":["rest","children","index"],"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,iBACE,oBACF,YACA,cACD;;;;;;AASD,MAAa,eAAe,cACzB,EAAE,SAAS,aAAa,UAAU,QAAQ,IAAI,QAAQ,EAAE,EAAE,GAAG,WAAW;CACvE,MAAM,UAAU,eAAe,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CACnD,MAAM,UAAU,SAAS,YAAY;CACrC,MAAM,mBAAmB,cAAc;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,MAAM,KAET,EACE,QAAQ,SACR,SACA,aACA,WACA,OACA,gBACA,cACA,kBACA,gBACA,YACA,GAAGA,UAEL,YACG;GACH,MAAMC,aAAW;IACf,WACE,oBAAC;KAAkB,GAAI;eACrB,oBAAC;MAAkB,GAAI;gBACpB,cAAc,YAAY,WAAWC,UAAQ,IAAI;OAChC;MACF;IAEtB,SACE,oBAAC;KAAgB,GAAI;eAClB,WACC,8CACE,oBAAC;MAAc,GAAI;gBAAa;OAAsB,EACtD,oBAAC;MAAoB,GAAI;gBACtB;OACmB,IACrB;MAEW;IAErB;AAED,UACE,qBAAC;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,oBAAC;EAAiB,OAAO;YACvB,oBAAC,OAAO;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,oBAAoB,QAAQ,eAAe,SAAS;CACpD,oBAAoB,QAAQ,eAAe,QAAQ;CACnD,sBAAsB,QAAQ,iBAAiB,SAAS;CACxD,qBAAqB,QAAQ,gBAAgB,SAAS;CACtD,mBAAmB,QAAQ,cAAc,SAAS;CAClD,qBAAqB,QAAQ,eAAe;CAC5C,qBAAqB,QAAQ,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,gCAAa,MAAM,IAAI,gCAAa,aAAa,IAAI,SAAS;AAEhE,QAAO;EACL,GAAG;EACH,2CAAwB,OAAO;EAC/B,cAAc;EACf;EAEJ;AAID,MAAa,oBAAoB,YAC/B,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,eAAe,OAAO,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,oBAAC,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/esm/components/timeline/timeline.style.js

@@ -30,7 +30,6 @@ const timelineStyle = defineComponentSlotStyle({
 			boxSize: "{indicator-size}",
 			color: "{indicator-stroke}",
 			display: "flex",
-			fontWeight: "medium",
 			justifyContent: "center",
 			lineHeight: "{indicator-size}",
 			overflow: "hidden",
@@ -86,6 +85,10 @@ const timelineStyle = 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 = defineComponentSlotStyle({
 				pb: "8"
 			},
 			description: { fontSize: "xs" },
+			indicator: { fontSize: "xs" },
 			item: { gap: "3" },
 			root: {
 				"--indicator-size": "sizes.3",
@@ -108,6 +112,7 @@ const timelineStyle = defineComponentSlotStyle({
 				pb: "10"
 			},
 			description: { fontSize: "sm" },
+			indicator: { fontSize: "sm" },
 			item: { gap: "4" },
 			root: {
 				"--indicator-size": "sizes.5",
@@ -122,6 +127,7 @@ const timelineStyle = defineComponentSlotStyle({
 				pb: "10"
 			},
 			description: { fontSize: "sm" },
+			indicator: { fontSize: "md" },
 			item: { gap: "4" },
 			root: {
 				"--indicator-size": "sizes.7",
@@ -136,6 +142,7 @@ const timelineStyle = defineComponentSlotStyle({
 				pb: "12"
 			},
 			description: { fontSize: "md" },
+			indicator: { fontSize: "md" },
 			item: { gap: "5" },
 			root: {
 				"--indicator-size": "sizes.8",

package/dist/esm/components/timeline/timeline.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.style.js","names":[],"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.js","names":[],"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/esm/components/tooltip/tooltip.js

@@ -7,7 +7,7 @@ import { motion as motion$1 } from "../motion/factory.js";
 import "../motion/index.js";
 import { Portal } from "../portal/portal.js";
 import "../portal/index.js";
-import { getPopupAnimationProps } from "../popover/popover.js";
+import { usePopupAnimationProps } from "../popover/popover.js";
 import "../popover/index.js";
 import { tooltipStyle } from "./tooltip.style.js";
 import { useTooltip } from "./use-tooltip.js";
@@ -24,6 +24,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 } = useTooltip(rest);
+	const popupAnimationProps = usePopupAnimationProps({
+		animationScheme,
+		duration
+	});
 	if (!content) return children;
 	return /* @__PURE__ */ jsxs(StyleContext, {
 		value: context,
@@ -36,7 +40,7 @@ const Tooltip = (props) => {
 			children: /* @__PURE__ */ jsx(TooltipPositioner, {
 				...getPositionerProps(),
 				children: /* @__PURE__ */ jsx(TooltipContent, {
-					...getPopupAnimationProps(animationScheme, duration),
+					...popupAnimationProps,
 					...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(contentProps))),
 					children: content
 				})

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["Tooltip: FC<TooltipProps>","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,0BACE,oBAAgD,WAAW,aAAa;;;;;;AAS5E,MAAaA,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,oBACjD,WAAW,KAAK;AAElB,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,qBAAC;EAAa,OAAO;aACnB,oBAAC;GAAe;GAAQ,GAAI,iBAAiB;GAC1C;IACc,EAEjB,oBAAC,6BACE,OACC,oBAAC;GAAO,GAAI;aACV,oBAAC;IAAkB,GAAI,oBAAoB;cACzC,oBAAC;KACC,GAAI,uBAAuB,iBAAiB,SAAS;KACrD,2BACE,wCAAgC,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,SAAO,KACP,UACD,EAAE"}
+{"version":3,"file":"tooltip.js","names":["Tooltip: FC<TooltipProps>","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,0BACE,oBAAgD,WAAW,aAAa;;;;;;AAS5E,MAAaA,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,oBACjD,WAAW,KAAK;CAClB,MAAM,sBAAsB,uBAAuB;EACjD;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,qBAAC;EAAa,OAAO;aACnB,oBAAC;GAAe;GAAQ,GAAI,iBAAiB;GAC1C;IACc,EAEjB,oBAAC,6BACE,OACC,oBAAC;GAAO,GAAI;aACV,oBAAC;IAAkB,GAAI,oBAAoB;cACzC,oBAAC;KACC,GAAI;KACJ,2BACE,wCAAgC,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,SAAO,KACP,UACD,EAAE"}