@k8ordo/ui 1.0.0 → 2.1.0

package/dist/components/overlays/modal/modal.css

@@ -0,0 +1,119 @@
+@layer properties, theme, base;
+
+@layer components {
+  .T8UDzW_root {
+    z-index: var(--z-index-modal);
+    background-color: var(--color-bg-raised);
+    color: var(--color-fg-base);
+    box-shadow: var(--shadow-md);
+    opacity: 0;
+    transition-property: opacity, scale, translate;
+    transition-duration: var(--duration-moderate);
+    transition-timing-function: var(--easing-in-out);
+
+    &[open] {
+      opacity: 1;
+    }
+
+    &::backdrop {
+      background-color: var(--color-back-drop);
+      opacity: 0;
+      transition-property: opacity;
+      transition-duration: var(--duration-moderate);
+      transition-timing-function: var(--easing-in-out);
+    }
+
+    &[open]::backdrop {
+      opacity: 1;
+    }
+  }
+
+  @starting-style {
+    .T8UDzW_root[open], .T8UDzW_root[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  .T8UDzW_center {
+    max-height: calc(var(--spacing) * 128);
+    border-radius: var(--radius-lg);
+    width: 83.3333%;
+    max-width: 42rem;
+    margin: auto;
+    scale: .9;
+
+    &[open] {
+      scale: 1;
+    }
+
+    @container style(--writing: vertical) {
+      height: 83.3333%;
+      max-height: calc(var(--spacing) * 168);
+      width: auto;
+      max-width: 32rem;
+    }
+  }
+
+  .T8UDzW_bottom {
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+    width: 100vw;
+    max-width: 100vw;
+    margin-top: auto;
+    translate: 0 100%;
+  }
+
+  .T8UDzW_right {
+    border-top-left-radius: var(--radius-lg);
+    border-bottom-left-radius: var(--radius-lg);
+    width: 100vw;
+    max-width: 24rem;
+    height: 100svh;
+    max-height: none;
+    transition-duration: var(--duration-slow);
+    margin-left: auto;
+    translate: 100%;
+  }
+
+  .T8UDzW_left {
+    border-top-right-radius: var(--radius-lg);
+    border-bottom-right-radius: var(--radius-lg);
+    width: 100vw;
+    max-width: 24rem;
+    height: 100svh;
+    max-height: none;
+    transition-duration: var(--duration-slow);
+    margin-right: auto;
+    translate: -100%;
+  }
+
+  .T8UDzW_bottom[open], .T8UDzW_right[open], .T8UDzW_left[open] {
+    translate: 0;
+  }
+
+  @starting-style {
+    .T8UDzW_center[open] {
+      scale: .9;
+    }
+
+    .T8UDzW_bottom[open] {
+      translate: 0 100%;
+    }
+
+    .T8UDzW_right[open] {
+      translate: 100%;
+    }
+
+    .T8UDzW_left[open] {
+      translate: -100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .T8UDzW_root, .T8UDzW_root::backdrop {
+      transition: none;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/modal/modal.d.mts

@@ -1,7 +1,7 @@
 import { ModalSide } from "../../../types/variables.mjs";
 import { FC, PropsWithChildren, Ref } from "react";
 //#region src/components/overlays/modal/modal.d.ts
-declare const Modal: FC<PropsWithChildren<{
+export declare const Modal: FC<PropsWithChildren<{
   ref?: Ref<HTMLDialogElement>;
   side?: ModalSide;
   defaultOpen?: boolean;
@@ -11,5 +11,4 @@ declare const Modal: FC<PropsWithChildren<{
   'aria-labelledby'?: string;
   'aria-describedby'?: string;
 }>>;
-//#endregion
-export { Modal };
+//#endregion

package/dist/components/overlays/modal/modal.mjs

@@ -1,12 +1,20 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
 import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import high_contrast_module_default from "../../_internal/high-contrast.module.mjs";
 import { ToastProvider } from "../../feedback/toast/provider.mjs";
-import { ModalDialogProvider } from "../_internal/modal-dialog-context.mjs";
 import { PortalRootProvider } from "../../providers/portal-root.mjs";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ModalDialogProvider } from "../_internal/modal-dialog-context.mjs";
+import modal_module_default from "./modal.module.mjs";
+import { clsx } from "clsx";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/modal/modal.tsx
+const SIDE = {
+	center: modal_module_default.center,
+	bottom: modal_module_default.bottom,
+	right: modal_module_default.right,
+	left: modal_module_default.left
+};
 const Modal = ({ ref, side = "center", defaultOpen, isOpen, onClose, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children }) => {
 	const dialogRef = useRef(null);
 	const mergedRef = useMemo(() => mergeRefs(dialogRef, ref), [ref]);
@@ -14,11 +22,6 @@ const Modal = ({ ref, side = "center", defaultOpen, isOpen, onClose, "aria-label
 	const [registeredLabelledBy, setRegisteredLabelledBy] = useState(void 0);
 	const [registeredDescribedBy, setRegisteredDescribedBy] = useState(void 0);
 	const realDialogOpen = isOpen === true || isOpen === false ? isOpen : dialogOpen;
-	const realOnClose = useCallback(() => {
-		onClose?.();
-		if (isOpen === void 0) return;
-		setDialogOpen(false);
-	}, [isOpen, onClose]);
 	const modalDialogContext = useMemo(() => ({
 		registerLabelledBy: setRegisteredLabelledBy,
 		registerDescribedBy: setRegisteredDescribedBy
@@ -49,11 +52,11 @@ const Modal = ({ ref, side = "center", defaultOpen, isOpen, onClose, "aria-label
 		"aria-describedby": describedBy,
 		"aria-label": ariaLabel,
 		"aria-labelledby": labelledBy,
-		className: cn("ao-modal bg-bg-raised text-fg-base z-modal shadow-md backdrop:bg-back-drop", side === "center" && "ao-modal-center m-auto max-h-128 w-5/6 max-w-2xl rounded-lg vertical:h-5/6 vertical:max-h-168 vertical:w-auto vertical:max-w-lg", side === "bottom" && "ao-modal-bottom mt-auto w-screen max-w-screen rounded-t-lg", side === "right" && "ao-modal-right ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg", side === "left" && "ao-modal-left mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg"),
+		className: clsx(modal_module_default.root, high_contrast_module_default.edge, SIDE[side]),
 		onClick: (e) => {
-			if (e.target === e.currentTarget) dialogRef.current?.close();
+			if (e.target === e.currentTarget && dialogRef.current) dialogRef.current.close();
 		},
-		onClose: realOnClose,
+		onClose,
 		ref: mergedRef,
 		children: /* @__PURE__ */ jsx(ModalDialogProvider, {
 			value: modalDialogContext,

package/dist/components/overlays/modal/modal.module.mjs

@@ -0,0 +1,11 @@
+import './modal.css';
+//#region src/components/overlays/modal/modal.module.css
+var modal_module_default = {
+	"bottom": "T8UDzW_bottom",
+	"center": "T8UDzW_center",
+	"left": "T8UDzW_left",
+	"right": "T8UDzW_right",
+	"root": "T8UDzW_root"
+};
+//#endregion
+export { modal_module_default as default };

package/dist/components/overlays/popover/anchor-positioning.d.mts

@@ -5,7 +5,7 @@ import { CSSProperties } from "react";
  * CSS Anchor Positioning による配置ヘルパー。
  *
  * placement を position-area / position-try-fallbacks / 対向辺マージン（offset 相当）へ
- * 変換する。旧 floating-ui のミドルウェア（offset / flip / autoUpdate）の置き換え。
+ * 変換する。
  *
  * 注意: CSS Anchor Positioning は Baseline newly available（2026-01）で、
  * 縦書き / RTL のインライン軸補正にエンジン差（既知の interop バグ）がある。
@@ -16,11 +16,10 @@ type AnchorCSSProperties = CSSProperties & {
   positionTryFallbacks?: string;
   '--ao-anchor'?: string;
 };
-declare const toAnchorName: (id: string) => string;
+export declare const toAnchorName: (id: string) => string;
 /**
  * Popover content（位置決め対象）に適用する style。
  * `flipDisabled` のときは position-try-fallbacks を付けず、はみ出しても反転しない。
  */
-declare const getContentAnchorStyle: (anchorName: string, placement: Placement, flipDisabled: boolean) => AnchorCSSProperties;
-//#endregion
-export { getContentAnchorStyle, toAnchorName };
+export declare const getContentAnchorStyle: (anchorName: string, placement: Placement, flipDisabled: boolean) => AnchorCSSProperties;
+//#endregion

package/dist/components/overlays/popover/escape-stack.d.mts

@@ -2,6 +2,5 @@
 /**
  * ポップオーバーを最上位レイヤーとして積む。戻り値を呼ぶと取り除かれる。
  */
-declare const pushEscapeLayer: (close: () => void) => (() => void);
-//#endregion
-export { pushEscapeLayer };
+export declare const pushEscapeLayer: (close: () => void) => (() => void);
+//#endregion

package/dist/components/overlays/popover/hooks.d.mts

@@ -16,20 +16,20 @@ type PopoverContext = {
   triggerRef: RefObject<HTMLElement | null>;
   setTriggerRef: (node: HTMLElement | null) => void;
 };
-declare const PopoverProvider: import("react").Context<PopoverContext | null>, usePopoverContext: () => PopoverContext;
-declare const useOpenContext: () => {
+export declare const PopoverProvider: import("react").Context<PopoverContext | null>, usePopoverContext: () => PopoverContext;
+export declare const useOpenContext: () => {
   isOpen: boolean;
   onOpen: () => void;
   onClose: () => void;
   toggleOpen: () => void;
 };
-type PopoverContentProps = {
+export type PopoverContentProps = {
   id: string;
   ref: RefObject<HTMLDivElement | null>;
   role: 'dialog' | 'menu' | 'listbox';
   'aria-orientation'?: 'vertical';
 };
-declare const usePopoverContent: () => {
+export declare const usePopoverContent: () => {
   id: string;
   ref: RefObject<HTMLDivElement | null>;
   isOpen: boolean;
@@ -39,7 +39,7 @@ declare const usePopoverContent: () => {
   flipDisabled: boolean;
   itemProps: PopoverContentProps;
 };
-type PopoverTriggerProps = {
+export type PopoverTriggerProps = {
   ref: RefCallback<HTMLElement>;
   onClick: MouseEventHandler<HTMLElement>;
   onKeyDown: KeyboardEventHandler<HTMLElement>;
@@ -48,6 +48,5 @@ type PopoverTriggerProps = {
   'aria-controls'?: string;
   role?: 'combobox';
 };
-declare const usePopoverTrigger: () => PopoverTriggerProps;
-//#endregion
-export { PopoverContentProps, PopoverProvider, PopoverTriggerProps, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger };
+export declare const usePopoverTrigger: () => PopoverTriggerProps;
+//#endregion

package/dist/components/overlays/popover/index.d.mts

@@ -1,3 +1,26 @@
+import { Placement } from "../../../types/variables.mjs";
 import { PopoverContentProps, PopoverTriggerProps, useOpenContext } from "./hooks.mjs";
-import { Popover } from "./popover.mjs";
-export { Popover, type PopoverContentProps, type PopoverTriggerProps, useOpenContext };
+import "./popover.mjs";
+import "../../../index.mjs";
+//#region src/components/overlays/popover/index.d.ts
+export declare const Popover: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    placement?: Placement;
+    role?: 'dialog' | 'menu' | 'listbox';
+    flipDisabled?: boolean;
+    closeOnClickAway?: boolean;
+    trapFocus?: boolean;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
+  }>>;
+  readonly Content: import("react").FC<{
+    renderItem: (props: PopoverContentProps) => import("react").ReactElement;
+    animation?: 'scale' | 'fade';
+  }>;
+  readonly Trigger: import("react").FC<{
+    renderItem: (props: PopoverTriggerProps) => import("react").ReactElement;
+  }>;
+};
+//#endregion
+export { type PopoverContentProps, type PopoverTriggerProps, useOpenContext };

package/dist/components/overlays/popover/index.mjs

@@ -1,3 +1,10 @@
 import { useOpenContext } from "./hooks.mjs";
-import { Popover } from "./popover.mjs";
+import { Content, Root, Trigger } from "./popover.mjs";
+//#region src/components/overlays/popover/index.ts
+const Popover = {
+	Root,
+	Content,
+	Trigger
+};
+//#endregion
 export { Popover, useOpenContext };

package/dist/components/overlays/popover/popover.css

@@ -0,0 +1,51 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._5jFJFW_root {
+    z-index: var(--z-index-overlay);
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  ._5jFJFW_scale:popover-open {
+    animation-name: _5jFJFW_pop-in;
+    animation-duration: .18s;
+  }
+
+  ._5jFJFW_fade:popover-open {
+    animation-name: _5jFJFW_fade-in;
+    animation-duration: var(--duration-fast);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :is(._5jFJFW_scale:popover-open, ._5jFJFW_fade:popover-open) {
+      animation: none;
+    }
+  }
+
+  @keyframes _5jFJFW_pop-in {
+    from {
+      scale: .92;
+    }
+
+    to {
+      scale: 1;
+    }
+  }
+
+  @keyframes _5jFJFW_fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/popover/popover.d.mts

@@ -2,24 +2,22 @@ import { Placement } from "../../../types/variables.mjs";
 import { PopoverContentProps, PopoverTriggerProps, useOpenContext } from "./hooks.mjs";
 import { FC, PropsWithChildren, ReactElement } from "react";
 //#region src/components/overlays/popover/popover.d.ts
-declare const Popover: {
-  readonly Root: FC<PropsWithChildren<{
-    placement?: Placement;
-    role?: 'dialog' | 'menu' | 'listbox';
-    flipDisabled?: boolean;
-    closeOnClickAway?: boolean;
-    trapFocus?: boolean;
-    isOpen?: boolean;
-    defaultOpen?: boolean;
-    onChange?: (isOpen: boolean) => void;
-  }>>;
-  readonly Content: FC<{
-    renderItem: (props: PopoverContentProps) => ReactElement;
-    animation?: 'scale' | 'fade';
-  }>;
-  readonly Trigger: FC<{
-    renderItem: (props: PopoverTriggerProps) => ReactElement;
-  }>;
-};
+export declare const Root: FC<PropsWithChildren<{
+  placement?: Placement;
+  role?: 'dialog' | 'menu' | 'listbox';
+  flipDisabled?: boolean;
+  closeOnClickAway?: boolean;
+  trapFocus?: boolean;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onChange?: (isOpen: boolean) => void;
+}>>;
+export declare const Content: FC<{
+  renderItem: (props: PopoverContentProps) => ReactElement;
+  animation?: 'scale' | 'fade';
+}>;
+export declare const Trigger: FC<{
+  renderItem: (props: PopoverTriggerProps) => ReactElement;
+}>;
 //#endregion
-export { Popover, type PopoverContentProps, type PopoverTriggerProps, useOpenContext };
+export { type PopoverContentProps, type PopoverTriggerProps, useOpenContext };

package/dist/components/overlays/popover/popover.mjs

@@ -1,12 +1,13 @@
 "use client";
-import { cn } from "../../../helpers/cn.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
-import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
-import { useFocusTrap } from "../../../hooks/focus-trap/index.mjs";
+import { readWritingMode } from "../../../hooks/writing-mode/index.mjs";
+import { useFocusTrap } from "../../../internal/focus-trap.mjs";
 import { getContentAnchorStyle, toAnchorName } from "./anchor-positioning.mjs";
 import { pushEscapeLayer } from "./escape-stack.mjs";
 import { PopoverProvider, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger } from "./hooks.mjs";
-import { useCallback, useEffect, useId, useRef } from "react";
+import popover_module_default from "./popover.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/popover/popover.tsx
 const Root = ({ children, role = "menu", placement = "bottom-start", flipDisabled = false, closeOnClickAway = true, trapFocus = true, isOpen: isOpenProp, defaultOpen = false, onChange }) => {
@@ -57,7 +58,12 @@ const Root = ({ children, role = "menu", placement = "bottom-start", flipDisable
 const Content = ({ renderItem, animation = "scale" }) => {
 	const { isOpen, trapFocus, anchorName, placement, flipDisabled, itemProps } = usePopoverContent();
 	const { triggerRef, onClose } = usePopoverContext();
-	const writingClass = useWritingMode(triggerRef) === "vertical" ? "writing-v" : void 0;
+	const [writingMode, setWritingMode] = useState("horizontal");
+	useLayoutEffect(() => {
+		const trigger = triggerRef.current;
+		if (isOpen && trigger) setWritingMode(readWritingMode(trigger));
+	}, [isOpen, triggerRef]);
+	const writingClass = writingMode === "vertical" ? "writing-v" : void 0;
 	const contentWrapperRef = useRef(null);
 	useEffect(() => {
 		const el = contentWrapperRef.current;
@@ -72,7 +78,7 @@ const Content = ({ renderItem, animation = "scale" }) => {
 		onClose();
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("z-overlay outline-hidden", animation === "fade" ? "ao-anim-fade" : "ao-anim-scale", writingClass),
+		className: clsx(popover_module_default.root, animation === "fade" ? popover_module_default.fade : popover_module_default.scale, writingClass),
 		onBlur: handleFocusOut,
 		popover: "manual",
 		ref: contentWrapperRef,
@@ -81,10 +87,5 @@ const Content = ({ renderItem, animation = "scale" }) => {
 	});
 };
 const Trigger = ({ renderItem }) => renderItem(usePopoverTrigger());
-const Popover = {
-	Root,
-	Content,
-	Trigger
-};
 //#endregion
-export { Popover, useOpenContext };
+export { Content, Root, Trigger, useOpenContext };

package/dist/components/overlays/popover/popover.module.mjs

@@ -0,0 +1,11 @@
+import './popover.css';
+//#region src/components/overlays/popover/popover.module.css
+var popover_module_default = {
+	"fade": "_5jFJFW_fade",
+	"fade-in": "_5jFJFW_fade-in",
+	"pop-in": "_5jFJFW_pop-in",
+	"root": "_5jFJFW_root",
+	"scale": "_5jFJFW_scale"
+};
+//#endregion
+export { popover_module_default as default };

package/dist/components/overlays/tooltip/bridge.css

@@ -0,0 +1,68 @@
+@layer properties, theme, base;
+
+@layer components {
+  .BgXmNG_bridge:before {
+    content: "";
+    position: absolute;
+  }
+
+  .BgXmNG_bridge:after {
+    content: "";
+    position-anchor: var(--ao-anchor);
+    position: fixed;
+  }
+
+  .BgXmNG_top:before {
+    inset-inline: 0;
+    bottom: calc(var(--spacing) * -2);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_top:after {
+    bottom: anchor(top);
+    left: anchor(left);
+    right: anchor(right);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_bottom:before {
+    inset-inline: 0;
+    top: calc(var(--spacing) * -2);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_bottom:after {
+    top: anchor(bottom);
+    left: anchor(left);
+    right: anchor(right);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_left:before {
+    inset-block: 0;
+    right: calc(var(--spacing) * -2);
+    width: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_left:after {
+    top: anchor(top);
+    right: anchor(left);
+    bottom: anchor(bottom);
+    width: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_right:before {
+    inset-block: 0;
+    left: calc(var(--spacing) * -2);
+    width: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_right:after {
+    top: anchor(top);
+    bottom: anchor(bottom);
+    left: anchor(right);
+    width: calc(var(--spacing) * 2);
+  }
+}
+
+@layer utilities;

package/dist/components/overlays/tooltip/bridge.d.mts

@@ -1,5 +1,4 @@
 import { Placement } from "../../../types/variables.mjs";
 //#region src/components/overlays/tooltip/bridge.d.ts
-declare const bridgeClass: (placement: Placement) => string;
-//#endregion
-export { bridgeClass };
+export declare const bridgeClass: (placement: Placement) => string;
+//#endregion

package/dist/components/overlays/tooltip/bridge.mjs

@@ -1,29 +1,15 @@
-import { cn } from "../../../helpers/cn.mjs";
+import bridge_module_default from "./bridge.module.mjs";
+import { clsx } from "clsx";
 //#region src/components/overlays/tooltip/bridge.ts
-/**
-* trigger との 8px の隙間（anchor-positioning の offset 相当）を覆う透明ブリッジ。
-*
-* 隙間を渡る途中で mouseleave 扱いにならないよう、当たり判定を「trigger と
-* content の幅の合併」に広げる。1 枚では表現できないため 2 枚の帯を重ねる:
-* - ::before … content の幅の帯（通常の absolute 配置）
-* - ::after … trigger の幅の帯。anchor() は containing block が initial
-*   containing block でないと trigger を参照できない（acceptable anchor 制約）
-*   ため、fixed 配置で CB を ICB に切り替えた上で 4 辺を anchor() で
-*   trigger に張り付ける。anchor 名は popover が配る --ao-anchor を使う。
-*
-* ブリッジが守るのは「まっすぐ渡る」「content 上に留まる」経路だけで、
-* content 中央へ斜めに向かう軌跡は Tooltip の closeDelay（時間側）が守る。
-*/
-const bridgeBase = cn("before:absolute", "after:fixed after:[position-anchor:var(--ao-anchor)]");
 const BRIDGE_BY_SIDE = {
-	top: cn("before:inset-x-0 before:-bottom-2 before:h-2", "after:h-2 after:bottom-[anchor(top)] after:left-[anchor(left)] after:right-[anchor(right)]"),
-	bottom: cn("before:inset-x-0 before:-top-2 before:h-2", "after:h-2 after:top-[anchor(bottom)] after:left-[anchor(left)] after:right-[anchor(right)]"),
-	left: cn("before:inset-y-0 before:-right-2 before:w-2", "after:w-2 after:right-[anchor(left)] after:top-[anchor(top)] after:bottom-[anchor(bottom)]"),
-	right: cn("before:inset-y-0 before:-left-2 before:w-2", "after:w-2 after:left-[anchor(right)] after:top-[anchor(top)] after:bottom-[anchor(bottom)]")
+	top: bridge_module_default.top,
+	bottom: bridge_module_default.bottom,
+	left: bridge_module_default.left,
+	right: bridge_module_default.right
 };
 const bridgeClass = (placement) => {
 	const side = placement.split("-")[0] ?? "bottom";
-	return cn(bridgeBase, BRIDGE_BY_SIDE[side]);
+	return clsx(bridge_module_default.bridge, BRIDGE_BY_SIDE[side]);
 };
 //#endregion
 export { bridgeClass };

package/dist/components/overlays/tooltip/bridge.module.mjs

@@ -0,0 +1,11 @@
+import './bridge.css';
+//#region src/components/overlays/tooltip/bridge.module.css
+var bridge_module_default = {
+	"bottom": "BgXmNG_bottom",
+	"bridge": "BgXmNG_bridge",
+	"left": "BgXmNG_left",
+	"right": "BgXmNG_right",
+	"top": "BgXmNG_top"
+};
+//#endregion
+export { bridge_module_default as default };

package/dist/components/overlays/tooltip/index.d.mts

@@ -1,2 +1,22 @@
-import { Tooltip, TooltipTriggerProps } from "./tooltip.mjs";
-export { Tooltip, type TooltipTriggerProps };
+import { Placement } from "../../../types/variables.mjs";
+import "../../../index.mjs";
+import { TooltipTriggerProps } from "./tooltip.mjs";
+//#region src/components/overlays/tooltip/index.d.ts
+export declare const Tooltip: {
+  readonly Root: import("react").FC<import("react").PropsWithChildren<{
+    placement?: Placement;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
+    openDelay?: number;
+    closeDelay?: number;
+  }>>;
+  readonly Trigger: import("react").FC<{
+    renderItem: (props: TooltipTriggerProps) => import("react").ReactElement;
+  }>;
+  readonly Content: import("react").FC<{
+    children?: import("react").ReactNode | undefined;
+  }>;
+};
+//#endregion
+export type { TooltipTriggerProps };

package/dist/components/overlays/tooltip/index.mjs

@@ -1,2 +1,9 @@
-import { Tooltip } from "./tooltip.mjs";
+import { Content, Root, Trigger } from "./tooltip.mjs";
+//#region src/components/overlays/tooltip/index.ts
+const Tooltip = {
+	Root,
+	Trigger,
+	Content
+};
+//#endregion
 export { Tooltip };

package/dist/components/overlays/tooltip/tooltip.css

@@ -0,0 +1,15 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._4CBCqq_content {
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-inverse);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    color: var(--color-fg-inverse);
+    box-shadow: var(--shadow-md);
+    position: relative;
+  }
+}
+
+@layer utilities;