@zenkigen-inc/component-ui 1.23.1 → 1.24.0

package/dist/index.mjs

@@ -1544,6 +1544,9 @@ function isElement(node) {
   return node != null && typeof node === "object" && "type" in node;
 }
 
+// src/utils/top-layer.ts
+var TOP_LAYER_ATTRIBUTE = "data-zenkigen-top-layer";
+
 // src/popover/popover-context.ts
 import { createContext as createContext5, useContext as useContext5 } from "react";
 var PopoverContext = createContext5(null);
@@ -2895,7 +2898,8 @@ function Loading({ size = "medium", position = "fixed", height = "100%" }) {
 }
 
 // src/modal/modal.tsx
-import { useEffect as useEffect10, useState as useState9 } from "react";
+import { FloatingFocusManager, useFloating as useFloating3 } from "@floating-ui/react";
+import { useEffect as useEffect10, useId as useId5, useLayoutEffect as useLayoutEffect3, useRef as useRef11, useState as useState9 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/modal/body-scroll-lock.tsx
@@ -2969,10 +2973,16 @@ function ModalFooter({ children, isNoBorder = false }) {
 
 // src/modal/modal-header.tsx
 import clsx28 from "clsx";
-import { useContext as useContext9 } from "react";
+import { useContext as useContext9, useLayoutEffect as useLayoutEffect2 } from "react";
 import { jsx as jsx36, jsxs as jsxs13 } from "react/jsx-runtime";
 function ModalHeader({ children, isNoBorder = false }) {
-  const { onClose } = useContext9(ModalContext);
+  const { onClose, titleId, setHasTitle } = useContext9(ModalContext);
+  useLayoutEffect2(() => {
+    setHasTitle?.(true);
+    return () => {
+      setHasTitle?.(false);
+    };
+  }, [setHasTitle]);
   const headerClasses = clsx28(
     "typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01",
     {
@@ -2982,7 +2992,7 @@ function ModalHeader({ children, isNoBorder = false }) {
     }
   );
   return /* @__PURE__ */ jsxs13("div", { className: headerClasses, children: [
-    /* @__PURE__ */ jsx36("div", { children }),
+    /* @__PURE__ */ jsx36("div", { id: titleId, children }),
     onClose && /* @__PURE__ */ jsx36(IconButton, { icon: "close", size: "small", variant: "text", onClick: onClose })
   ] });
 }
@@ -2991,6 +3001,9 @@ function ModalHeader({ children, isNoBorder = false }) {
 import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
 var LIMIT_WIDTH = 320;
 var LIMIT_HEIGHT = 184;
+var MODAL_OVERLAY_ATTRIBUTE = "data-zenkigen-modal-overlay";
+var FOLLOWING_INSIDE_SELECTOR = `[data-floating-ui-portal],[${MODAL_OVERLAY_ATTRIBUTE}],[data-floating-ui-focus-guard]`;
+var isFollowing = (base, target) => (base.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
 function Modal({
   children,
   width = 480,
@@ -3001,6 +3014,26 @@ function Modal({
   portalTargetRef
 }) {
   const [isMounted, setIsMounted] = useState9(false);
+  const overlayRef = useRef11(null);
+  const titleId = useId5();
+  const [hasTitle, setHasTitle] = useState9(false);
+  const { refs, context } = useFloating3({ open: isOpen });
+  const returnFocusRef = useRef11(null);
+  useLayoutEffect3(() => {
+    if (isOpen) {
+      returnFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    }
+  }, [isOpen]);
+  const getInsideElements = () => {
+    const overlay = overlayRef.current;
+    const topLayers = Array.from(document.querySelectorAll(`[${TOP_LAYER_ATTRIBUTE}]`));
+    const following = overlay == null ? [] : Array.from(document.querySelectorAll(FOLLOWING_INSIDE_SELECTOR)).filter(
+      (element) => isFollowing(overlay, element)
+    );
+    return [...topLayers, ...following].filter(
+      (element) => element !== document.body && element !== document.documentElement
+    );
+  };
   const renderWidth = typeof width === "number" ? Math.max(width, LIMIT_WIDTH) : width;
   const renderHeight = typeof height === "number" ? Math.max(height, LIMIT_HEIGHT) : height;
   useEffect10(() => {
@@ -3014,16 +3047,36 @@ function Modal({
   return isMounted && isOpen ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
     /* @__PURE__ */ jsx37(BodyScrollLock, {}),
     createPortal2(
-      /* @__PURE__ */ jsx37(ModalContext.Provider, { value: { onClose }, children: /* @__PURE__ */ jsx37("div", { className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4", children: /* @__PURE__ */ jsx37(
-        "div",
+      /* @__PURE__ */ jsx37(ModalContext.Provider, { value: { onClose, titleId, setHasTitle }, children: /* @__PURE__ */ jsx37(
+        FloatingFocusManager,
         {
-          role: "dialog",
-          "aria-modal": "true",
-          className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow",
-          style: { width: renderWidth, height: renderHeight, maxWidth },
-          children
+          context,
+          initialFocus: refs.floating,
+          returnFocus: returnFocusRef,
+          outsideElementsInert: true,
+          getInsideElements,
+          children: /* @__PURE__ */ jsx37(
+            "div",
+            {
+              ref: overlayRef,
+              ...{ [MODAL_OVERLAY_ATTRIBUTE]: "" },
+              className: "fixed left-0 top-0 z-overlay flex size-full items-center justify-center bg-backgroundOverlayBlack py-4",
+              children: /* @__PURE__ */ jsx37(
+                "div",
+                {
+                  ref: refs.setFloating,
+                  role: "dialog",
+                  "aria-modal": "true",
+                  ...hasTitle && { "aria-labelledby": titleId },
+                  className: "grid max-h-full min-h-[120px] grid-rows-[max-content_1fr_max-content] flex-col rounded-lg bg-uiBackground01 shadow-modalShadow outline-none",
+                  style: { width: renderWidth, height: renderHeight, maxWidth },
+                  children
+                }
+              )
+            }
+          )
         }
-      ) }) }),
+      ) }),
       portalTargetRef?.current != null ? portalTargetRef.current : document.body
     )
   ] }) : null;
@@ -3062,7 +3115,8 @@ function NotificationInline({ state = "default", size = "medium", variant = "def
     "fill-supportSuccess": state === "success"
   });
   const textClasses = clsx29("flex-1", {
-    "pt-[2px]": size === "medium" && state !== "default"
+    "pt-[3px]": size === "medium" && state !== "default",
+    "pt-[1px]": size === "small" && state !== "default"
   });
   const iconName = {
     attention: "attention",
@@ -3183,15 +3237,16 @@ function Pagination({ currentPage, totalPage, sideNumPagesToShow = 3, onClick })
 }
 
 // src/select/select.tsx
-import { autoUpdate as autoUpdate3, FloatingPortal as FloatingPortal3, offset as offset3, size as sizeMiddleware2, useFloating as useFloating3 } from "@floating-ui/react";
+import { autoUpdate as autoUpdate3, FloatingPortal as FloatingPortal3, offset as offset3, size as sizeMiddleware2, useFloating as useFloating4 } from "@floating-ui/react";
 import { focusVisible as focusVisible11, selectColors } from "@zenkigen-inc/component-theme";
 import clsx33 from "clsx";
-import { useRef as useRef11, useState as useState10 } from "react";
+import { useRef as useRef12, useState as useState10 } from "react";
 
 // src/select/select-context.ts
 import { createContext as createContext10 } from "react";
 var SelectContext = createContext10({
   size: "medium",
+  isDeselectVisible: false,
   setIsOptionListOpen: () => false,
   variant: "outline",
   isError: false
@@ -3230,31 +3285,43 @@ function SelectItem({ option }) {
 // src/select/select-list.tsx
 import { focusVisible as focusVisible10 } from "@zenkigen-inc/component-theme";
 import clsx32 from "clsx";
-import { forwardRef as forwardRef10, useContext as useContext12, useLayoutEffect as useLayoutEffect2 } from "react";
+import { forwardRef as forwardRef10, useContext as useContext12, useLayoutEffect as useLayoutEffect4 } from "react";
 import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var SelectList = forwardRef10(({ children, maxHeight }, ref) => {
-  const { selectedOption, setIsOptionListOpen, variant, placeholder, onChange, floatingStyles, floatingRef, size } = useContext12(SelectContext);
+  const {
+    selectedOption,
+    setIsOptionListOpen,
+    variant,
+    isDeselectVisible,
+    onChange,
+    floatingStyles,
+    floatingRef,
+    size
+  } = useContext12(SelectContext);
   const handleClickDeselect = () => {
     onChange?.(null);
     setIsOptionListOpen(false);
   };
-  useLayoutEffect2(() => {
-    if (maxHeight != null && selectedOption != null) {
-      const container = floatingRef?.current;
-      if (container != null) {
-        const element = container.querySelector(`[data-id="${selectedOption.id}"]`);
-        if (element != null) {
-          const htmlElement = element;
-          const elementTop = htmlElement.offsetTop;
-          const elementHeight = htmlElement.offsetHeight;
-          const containerHeight = container.clientHeight;
-          const scrollTop = elementTop - (containerHeight - elementHeight) / 2;
-          container.scrollTo({
-            top: Math.max(0, scrollTop)
-          });
-        }
-      }
+  useLayoutEffect4(() => {
+    if (selectedOption == null) {
+      return;
+    }
+    const container = floatingRef?.current;
+    if (container == null || container.scrollHeight <= container.clientHeight) {
+      return;
+    }
+    const element = container.querySelector(`[data-id="${selectedOption.id}"]`);
+    if (element == null) {
+      return;
     }
+    const htmlElement = element;
+    const elementTop = htmlElement.offsetTop;
+    const elementHeight = htmlElement.offsetHeight;
+    const containerHeight = container.clientHeight;
+    const scrollTop = elementTop - (containerHeight - elementHeight) / 2;
+    container.scrollTo({
+      top: Math.max(0, scrollTop)
+    });
   }, [selectedOption, maxHeight, floatingRef]);
   const listClasses = clsx32("overflow-y-auto rounded bg-uiBackground01 py-2 shadow-floatingShadow", {
     "border-solid border border-uiBorder01": variant === "outline"
@@ -3269,7 +3336,7 @@ var SelectList = forwardRef10(({ children, maxHeight }, ref) => {
   );
   return /* @__PURE__ */ jsxs18("ul", { className: listClasses, style: { maxHeight, ...floatingStyles }, ref, children: [
     children,
-    placeholder != null && selectedOption !== null && /* @__PURE__ */ jsx42("li", { children: /* @__PURE__ */ jsx42("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
+    isDeselectVisible && selectedOption !== null && /* @__PURE__ */ jsx42("li", { children: /* @__PURE__ */ jsx42("button", { className: deselectButtonClasses, type: "button", onClick: handleClickDeselect, children: "\u9078\u629E\u89E3\u9664" }) })
   ] });
 });
 SelectList.displayName = "SelectList";
@@ -3277,6 +3344,10 @@ SelectList.displayName = "SelectList";
 // src/select/select.tsx
 import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var FLOATING_OFFSET2 = 4;
+var OPTION_HEIGHT_PX = { "x-small": 32, small: 32, medium: 32, large: 40 };
+var DEFAULT_VISIBLE_OPTION_COUNT = 8.5;
+var LIST_VERTICAL_CHROME_PX = 10;
+var getDefaultOptionListMaxHeight = (size) => OPTION_HEIGHT_PX[size] * DEFAULT_VISIBLE_OPTION_COUNT + LIST_VERTICAL_CHROME_PX;
 function Select({
   children,
   size = "medium",
@@ -3289,6 +3360,7 @@ function Select({
   isDisabled = false,
   isError = false,
   isOptionSelected = false,
+  hasDeselectButton,
   onChange,
   optionListMaxHeight,
   matchListToTrigger = false,
@@ -3296,14 +3368,14 @@ function Select({
   "aria-describedby": ariaDescribedby
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState10(false);
-  const targetRef = useRef11(null);
+  const targetRef = useRef12(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   useDismissOnModalOpen(() => {
     if (isOptionListOpen) {
       setIsOptionListOpen(false);
     }
   });
-  const { refs, floatingStyles } = useFloating3({
+  const { refs, floatingStyles } = useFloating4({
     open: isOptionListOpen,
     onOpenChange: setIsOptionListOpen,
     placement: "bottom-start",
@@ -3324,8 +3396,10 @@ function Select({
     whileElementsMounted: autoUpdate3
   });
   const handleClickToggle = () => setIsOptionListOpen((prev) => !prev);
+  const resolvedOptionListMaxHeight = optionListMaxHeight ?? getDefaultOptionListMaxHeight(size);
   const buttonVariant = isError && !isDisabled ? `${variant}Error` : variant;
   const isSelected = isOptionSelected && !isDisabled && selectedOption !== null && !isError;
+  const isDeselectVisible = hasDeselectButton ?? placeholder != null;
   const wrapperClasses = clsx33("relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01", {
     "h-6": size === "x-small" || size === "small",
     "h-8": size === "medium",
@@ -3361,7 +3435,7 @@ function Select({
       value: {
         size,
         variant,
-        placeholder,
+        isDeselectVisible,
         setIsOptionListOpen,
         selectedOption,
         onChange,
@@ -3394,7 +3468,7 @@ function Select({
             ]
           }
         ),
-        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx43(FloatingPortal3, { children: /* @__PURE__ */ jsx43("div", { className: "relative z-popover", children: /* @__PURE__ */ jsx43(SelectList, { ref: refs.setFloating, maxHeight: optionListMaxHeight, children }) }) })
+        isOptionListOpen && !isDisabled && /* @__PURE__ */ jsx43(FloatingPortal3, { children: /* @__PURE__ */ jsx43("div", { className: "relative z-popover", children: /* @__PURE__ */ jsx43(SelectList, { ref: refs.setFloating, maxHeight: resolvedOptionListMaxHeight, children }) }) })
       ] })
     }
   );
@@ -3688,7 +3762,7 @@ function Radio({
 }
 
 // src/radio-card/radio-card.tsx
-import { Children as Children5, cloneElement as cloneElement5, isValidElement as isValidElement5, useId as useId6, useMemo as useMemo6 } from "react";
+import { Children as Children5, cloneElement as cloneElement5, isValidElement as isValidElement5, useId as useId7, useMemo as useMemo6 } from "react";
 
 // src/radio-card/radio-card-context.ts
 import { createContext as createContext12, useContext as useContext15 } from "react";
@@ -3734,11 +3808,11 @@ RadioCardGroup.displayName = "RadioCard.Group";
 // src/radio-card/radio-card-item.tsx
 import { focusVisible as focusVisible13 } from "@zenkigen-inc/component-theme";
 import clsx35 from "clsx";
-import { useId as useId5 } from "react";
+import { useId as useId6 } from "react";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 function RadioCardItem({ value, label, description, isDisabled: itemDisabled = false, id }) {
   const context = useRadioCardContext("RadioCard.Item");
-  const autoId = useId5();
+  const autoId = useId6();
   const inputId = id ?? autoId;
   const labelId = `${inputId}-label`;
   const descriptionId = `${inputId}-description`;
@@ -3832,8 +3906,8 @@ function RadioCardRoot({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
-  const autoName = useId6();
-  const baseId = useId6();
+  const autoName = useId7();
+  const baseId = useId7();
   const resolvedName = name ?? autoName;
   const errorIds = [];
   const enhancedChildren = Children5.map(children, (child) => {
@@ -3913,7 +3987,7 @@ var Search = forwardRef12(({ width = "100%", size = "medium", ...props }, ref) =
 Search.displayName = "Search";
 
 // src/segmented-control/segmented-control.tsx
-import React4, { Children as Children6, useRef as useRef13 } from "react";
+import React4, { Children as Children6, useRef as useRef14 } from "react";
 
 // src/segmented-control/segmented-control-context.ts
 import { createContext as createContext13 } from "react";
@@ -3922,7 +3996,7 @@ var SegmentedControlContext = createContext13(null);
 // src/segmented-control/segmented-control-item.tsx
 import { focusVisible as focusVisible14 } from "@zenkigen-inc/component-theme";
 import { clsx as clsx37 } from "clsx";
-import { useContext as useContext16, useEffect as useEffect11, useRef as useRef12 } from "react";
+import { useContext as useContext16, useEffect as useEffect11, useRef as useRef13 } from "react";
 import { jsx as jsx56, jsxs as jsxs25 } from "react/jsx-runtime";
 var SegmentedControlItem = ({
   label,
@@ -3933,8 +4007,8 @@ var SegmentedControlItem = ({
   ...rest
 }) => {
   const context = useContext16(SegmentedControlContext);
-  const buttonRef = useRef12(null);
-  const lastInteractionWasMouse = useRef12(false);
+  const buttonRef = useRef13(null);
+  const lastInteractionWasMouse = useRef13(false);
   if (context === null) {
     throw new Error("SegmentedControl.Item must be used within SegmentedControl");
   }
@@ -4027,7 +4101,7 @@ var SegmentedControl = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const containerRef = useRef13(null);
+  const containerRef = useRef14(null);
   const itemIds = Children6.toArray(children).filter((child) => {
     if (!React4.isValidElement(child) || typeof child.props !== "object" || child.props === null || !("value" in child.props)) {
       return false;
@@ -4081,7 +4155,7 @@ SegmentedControl.Item = SegmentedControlItem;
 // src/select-sort/select-sort.tsx
 import { buttonColors as buttonColors4, focusVisible as focusVisible17 } from "@zenkigen-inc/component-theme";
 import clsx40 from "clsx";
-import { useCallback as useCallback13, useRef as useRef14, useState as useState13 } from "react";
+import { useCallback as useCallback13, useRef as useRef15, useState as useState13 } from "react";
 
 // src/select-sort/select-list.tsx
 import { focusVisible as focusVisible16 } from "@zenkigen-inc/component-theme";
@@ -4149,7 +4223,7 @@ function SelectSort({
   onClickDeselect
 }) {
   const [isOptionListOpen, setIsOptionListOpen] = useState13(false);
-  const targetRef = useRef14(null);
+  const targetRef = useRef15(null);
   useOutsideClick(targetRef, () => setIsOptionListOpen(false));
   useDismissOnModalOpen(() => {
     if (isOptionListOpen) {
@@ -4294,7 +4368,7 @@ function SortButton({
 
 // src/steps/steps.tsx
 import { clsx as clsx44 } from "clsx";
-import { Children as Children7, Fragment as Fragment7, isValidElement as isValidElement6, useId as useId7, useMemo as useMemo7, useState as useState14 } from "react";
+import { Children as Children7, Fragment as Fragment7, isValidElement as isValidElement6, useId as useId8, useMemo as useMemo7, useState as useState14 } from "react";
 
 // src/steps/steps-context.ts
 import { createContext as createContext14, useContext as useContext17 } from "react";
@@ -4479,7 +4553,7 @@ function StepsRoot({
   variant = "solid",
   "aria-label": ariaLabel
 }) {
-  const baseId = useId7();
+  const baseId = useId8();
   const [internalStep] = useState14(defaultCurrentStep ?? 0);
   const resolvedCurrentStep = currentStep ?? internalStep;
   const itemElements = useMemo7(() => collectStepsItems(children), [children]);
@@ -4683,7 +4757,7 @@ function Tag({ id, children, color, variant = "normal", size = "medium", isEdita
 
 // src/text-area/text-area.tsx
 import { clsx as clsx53 } from "clsx";
-import { Children as Children9, cloneElement as cloneElement6, forwardRef as forwardRef15, isValidElement as isValidElement7, useId as useId8, useMemo as useMemo8 } from "react";
+import { Children as Children9, cloneElement as cloneElement6, forwardRef as forwardRef15, isValidElement as isValidElement7, useId as useId9, useMemo as useMemo8 } from "react";
 
 // src/text-area/text-area-context.tsx
 import { createContext as createContext16, useContext as useContext19 } from "react";
@@ -4744,7 +4818,7 @@ function TextAreaInner({
   maxLength,
   ...props
 }, ref) {
-  const autoGeneratedId = useId8();
+  const autoGeneratedId = useId9();
   const textAreaPropsForContext = useMemo8(
     () => ({
       size,
@@ -4907,7 +4981,7 @@ var TextArea = attachStatics2(TextAreaBase);
 
 // src/time-picker/time-picker.tsx
 import { clsx as clsx55 } from "clsx";
-import { Children as Children10, cloneElement as cloneElement7, Fragment as Fragment8, isValidElement as isValidElement8, useId as useId9, useMemo as useMemo9 } from "react";
+import { Children as Children10, cloneElement as cloneElement7, Fragment as Fragment8, isValidElement as isValidElement8, useId as useId10, useMemo as useMemo9 } from "react";
 
 // src/time-picker/time-picker-context.tsx
 import { createContext as createContext17, useContext as useContext20 } from "react";
@@ -5047,7 +5121,7 @@ var TimePicker = ({
   isError = false,
   children
 }) => {
-  const autoGeneratedId = useId9();
+  const autoGeneratedId = useId10();
   const hourOptions = useMemo9(() => generateHourOptions(minuteStep, minTime, maxTime), [minuteStep, minTime, maxTime]);
   const minuteOptions = useMemo9(
     () => generateMinuteOptions(minuteStep, value.hour, minTime, maxTime),
@@ -5139,7 +5213,7 @@ TimePicker.displayName = "TimePicker";
 
 // src/toast/toast.tsx
 import { clsx as clsx56 } from "clsx";
-import { useCallback as useCallback15, useEffect as useEffect12, useRef as useRef15, useState as useState15 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect12, useRef as useRef16, useState as useState15 } from "react";
 import { jsx as jsx77, jsxs as jsxs35 } from "react/jsx-runtime";
 var CLOSE_TIME_MSEC = 5e3;
 var REMOVAL_FALLBACK_MSEC = 1e3;
@@ -5156,11 +5230,11 @@ function Toast({
   onClickClose
 }) {
   const [isRemoving, setIsRemoving] = useState15(false);
-  const onClickCloseRef = useRef15(onClickClose);
+  const onClickCloseRef = useRef16(onClickClose);
   useEffect12(() => {
     onClickCloseRef.current = onClickClose;
   }, [onClickClose]);
-  const hasNotifiedCloseRef = useRef15(false);
+  const hasNotifiedCloseRef = useRef16(false);
   const notifyClose = useCallback15(() => {
     if (hasNotifiedCloseRef.current) {
       return;
@@ -5240,14 +5314,14 @@ function Toast({
 }
 
 // src/toast/toast-provider.tsx
-import { createContext as createContext18, useCallback as useCallback16, useContext as useContext21, useEffect as useEffect13, useRef as useRef16, useState as useState16 } from "react";
+import { createContext as createContext18, useCallback as useCallback16, useContext as useContext21, useEffect as useEffect13, useRef as useRef17, useState as useState16 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx78, jsxs as jsxs36 } from "react/jsx-runtime";
 var ToastContext = createContext18({});
 var ToastProvider = ({ children, hasCloseButton = false }) => {
   const [isClientRender, setIsClientRender] = useState16(false);
   const [toasts, setToasts] = useState16([]);
-  const nextIdRef = useRef16(0);
+  const nextIdRef = useRef17(0);
   const addToast = useCallback16(
     (args) => {
       nextIdRef.current += 1;
@@ -5278,6 +5352,7 @@ var ToastProvider = ({ children, hasCloseButton = false }) => {
       /* @__PURE__ */ jsx78(
         "div",
         {
+          ...{ [TOP_LAYER_ATTRIBUTE]: "" },
           role: "region",
           "aria-label": "\u901A\u77E5",
           className: "pointer-events-none fixed bottom-0 left-0 z-toast mb-4 ml-4 flex w-full flex-col-reverse gap-4",
@@ -5361,7 +5436,7 @@ function Toggle({
 }
 
 // src/tooltip/tooltip.tsx
-import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef17, useState as useState17 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect14, useRef as useRef18, useState as useState17 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/tooltip/tooltip-content.tsx
@@ -5532,7 +5607,7 @@ function Tooltip({
     translateX: "0",
     translateY: "0"
   });
-  const targetRef = useRef17(null);
+  const targetRef = useRef18(null);
   const handleMouseOverWrapper = useCallback18(() => {
     if (isDisabledHover) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zenkigen-inc/component-ui",
-  "version": "1.23.1",
+  "version": "1.24.0",
   "repository": "https://github.com/zenkigen/zenkigen-component",
   "license": "MIT",
   "publishConfig": {
@@ -38,9 +38,9 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.27.20",
-    "@zenkigen-inc/component-config": "1.23.1",
-    "@zenkigen-inc/component-icons": "1.23.1",
-    "@zenkigen-inc/component-theme": "1.23.1",
+    "@zenkigen-inc/component-config": "1.24.0",
+    "@zenkigen-inc/component-icons": "1.24.0",
+    "@zenkigen-inc/component-theme": "1.24.0",
     "clsx": "2.1.1",
     "react-day-picker": "9.14.0"
   }