@tide-tds/components 0.3.0 → 0.3.1

package/dist/Popover.d.ts

@@ -0,0 +1,43 @@
+import { OverlayPlacement } from "./overlay.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+/** Popover 내용의 위치. 앞은 트리거의 어느 쪽, 뒤는 그 변에서 맞출 끝이다. 공간이 모자라면 반대쪽으로 뒤집힌다. */
+export type PopoverPlacement = OverlayPlacement;
+export interface PopoverProps {
+  /** 열림 상태(제어). 주면 `onOpenChange`로 바꾼다. */
+  open?: boolean;
+  /** 처음 열림 상태(비제어). 기본값은 `false`다. */
+  defaultOpen?: boolean;
+  /** 열림 상태가 바뀌려 할 때 새 값으로 부른다. */
+  onOpenChange?: (open: boolean) => void;
+  /** `PopoverTrigger`와 `PopoverContent` */
+  children: ReactNode;
+}
+/**
+ * 트리거와 내용을 잇는 열림 상태. DOM 요소를 만들지 않는다.
+ * 안에 `PopoverTrigger` 하나와 `PopoverContent` 하나를 둔다.
+ */
+export declare function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps): ReactElement;
+export interface PopoverTriggerProps extends ComponentProps<"button"> {
+  /**
+   * 다른 요소로 렌더한다. 예: `render={<Button variant="outline" />}`, `render={<IconButton aria-label="설정" />}`.
+   * props, ref, className, 이벤트 핸들러를 그 요소에 병합한다. 기본은 class 없는 `<button type="button">`이다.
+   */
+  render?: ReactElement;
+}
+/**
+ * Popover를 여닫는 버튼. 누르면(마우스, 터치, Enter, Space) 열림 상태를 뒤집는다.
+ * `aria-expanded`, 열렸을 때 `aria-controls`, 열렸을 때 `data-open`이 붙는다.
+ */
+export declare function PopoverTrigger({ render, ref, id, className, ...props }: PopoverTriggerProps): ReactElement;
+export interface PopoverContentProps extends Omit<ComponentProps<"div">, "id" | "role"> {
+  /** 트리거 기준 위치. 기본값은 `bottom`(아래, 가운데 맞춤)이다. 공간이 모자라면 반대쪽으로 뒤집힌다. */
+  placement?: PopoverPlacement;
+  /** 트리거와의 간격(px). 기본값은 `8`이다. */
+  offset?: number;
+}
+/**
+ * 트리거 옆에 뜨는 내용(`role="dialog"`). 열릴 때만 `document.body`에 portal로 렌더하고 `z-popover`로 쌓는다.
+ * 등장은 opacity + blur 4px + 4px 이동(`normal`), 퇴장은 그 절반(`fast`)이다. 움직임 줄이기에서는 opacity만 바뀐다.
+ * 열려 있으면 `data-open`이, 트리거 기준 방향이 `data-placement`(`top`/`bottom`/`left`/`right`)로 붙는다.
+ */
+export declare function PopoverContent(props: PopoverContentProps): ReactElement | null;

package/dist/Popover.js

@@ -0,0 +1,147 @@
+"use client";
+
+import { cn } from "./cn.js";
+import { OverlayPortal, useOverlayPresence, useOverlayTheme, usePopoverOverlay } from "./overlay.js";
+import { overlaySurfaceClass, popoverMotionClass } from "./overlay-style.js";
+import { renderElement } from "./render.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, createElement, use, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { DismissButton, mergeProps, mergeRefs, useDialog, useOverlayTrigger, usePress } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+
+// src/Popover.tsx
+const PopoverContext = createContext(null);
+function usePopoverContext(part) {
+	const context = use(PopoverContext);
+	if (!context) throw new Error(`${part}는 Popover 안에 둔다.`);
+	return context;
+}
+/**
+* 트리거와 내용을 잇는 열림 상태. DOM 요소를 만들지 않는다.
+* 안에 `PopoverTrigger` 하나와 `PopoverContent` 하나를 둔다.
+*/
+function Popover({ open, defaultOpen, onOpenChange, children }) {
+	const state = useOverlayTriggerState({
+		isOpen: open,
+		defaultOpen,
+		onOpenChange
+	});
+	const triggerRef = useRef(null);
+	const { triggerProps, overlayProps } = useOverlayTrigger({ type: "dialog" }, state, triggerRef);
+	const generatedTriggerId = useId();
+	const [triggerId, setTriggerId] = useState(generatedTriggerId);
+	const value = useMemo(() => ({
+		state,
+		triggerRef,
+		triggerProps,
+		contentId: overlayProps.id,
+		triggerId,
+		setTriggerId
+	}), [
+		state,
+		triggerProps,
+		overlayProps.id,
+		triggerId
+	]);
+	return /* @__PURE__ */ jsx(PopoverContext, {
+		value,
+		children
+	});
+}
+/**
+* Popover를 여닫는 버튼. 누르면(마우스, 터치, Enter, Space) 열림 상태를 뒤집는다.
+* `aria-expanded`, 열렸을 때 `aria-controls`, 열렸을 때 `data-open`이 붙는다.
+*/
+function PopoverTrigger({ render, ref, id, className, ...props }) {
+	const { state, triggerRef, triggerProps, triggerId, setTriggerId } = usePopoverContext("PopoverTrigger");
+	const { onPress, ...ariaProps } = triggerProps;
+	const { pressProps } = usePress({
+		onPress,
+		ref: triggerRef
+	});
+	const mergedRef = useMemo(() => mergeRefs(ref, triggerRef), [ref, triggerRef]);
+	const resolvedId = id ?? triggerId;
+	useLayoutEffect(() => {
+		if (resolvedId !== triggerId) setTriggerId(resolvedId);
+	}, [
+		resolvedId,
+		triggerId,
+		setTriggerId
+	]);
+	const merged = {
+		...mergeProps(props, ariaProps, pressProps),
+		id: resolvedId,
+		ref: mergedRef,
+		"data-open": state.isOpen ? "" : void 0
+	};
+	if (!render) return createElement("button", {
+		type: "button",
+		...merged,
+		className
+	});
+	return renderElement({
+		defaultElement: "button",
+		render,
+		baseClassName: "",
+		props: {
+			...merged,
+			className
+		}
+	});
+}
+const contentClass = `isolate z-popover max-w-80 overflow-auto p-4 text-body-md outline-none ${overlaySurfaceClass} ${popoverMotionClass}`;
+/**
+* 트리거 옆에 뜨는 내용(`role="dialog"`). 열릴 때만 `document.body`에 portal로 렌더하고 `z-popover`로 쌓는다.
+* 등장은 opacity + blur 4px + 4px 이동(`normal`), 퇴장은 그 절반(`fast`)이다. 움직임 줄이기에서는 opacity만 바뀐다.
+* 열려 있으면 `data-open`이, 트리거 기준 방향이 `data-placement`(`top`/`bottom`/`left`/`right`)로 붙는다.
+*/
+function PopoverContent(props) {
+	const context = usePopoverContext("PopoverContent");
+	const popoverRef = useRef(null);
+	if (!useOverlayPresence(context.state.isOpen, popoverRef)) return null;
+	return /* @__PURE__ */ jsx(OverlayPortal, {
+		isExiting: !context.state.isOpen,
+		children: /* @__PURE__ */ jsx(PopoverContentInner, {
+			...props,
+			context,
+			popoverRef
+		})
+	});
+}
+/** DOM에 있는 동안만 portal 안에서 렌더한다. React Aria 오버레이 hook은 요소가 있다고 보고 동작한다. */
+function PopoverContentInner({ context, popoverRef, placement = "bottom", offset = 8, ref, className, children, ...props }) {
+	const { state, triggerRef, contentId, triggerId } = context;
+	useOverlayTheme(triggerRef, popoverRef);
+	const { overlayProps } = usePopoverOverlay({
+		triggerRef,
+		popoverRef,
+		placement,
+		offset
+	}, state);
+	const { dialogProps } = useDialog({
+		"aria-label": props["aria-label"],
+		"aria-labelledby": props["aria-labelledby"]
+	}, popoverRef);
+	const labelledBy = dialogProps["aria-labelledby"] ?? (props["aria-label"] ? void 0 : triggerId);
+	const mergedRef = useMemo(() => mergeRefs(ref, popoverRef), [ref, popoverRef]);
+	const { style: _style, ...rest } = mergeProps(props, overlayProps, dialogProps);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		id: contentId,
+		ref: mergedRef,
+		"aria-labelledby": labelledBy,
+		"data-open": state.isOpen ? "" : void 0,
+		className: cn(contentClass, className),
+		style: {
+			...overlayProps.style,
+			...props.style
+		},
+		children: [
+			/* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
+			children,
+			/* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
+		]
+	});
+}
+
+export { Popover, PopoverContent, PopoverTrigger };

package/dist/index.d.ts

@@ -23,5 +23,6 @@ import { Progress, ProgressProps } from "./Progress.js";
 import { Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeaderCell, TableHeaderCellProps, TableProps, TableRow, TableRowProps } from "./Table.js";
 import { Breadcrumb, BreadcrumbCurrent, BreadcrumbCurrentProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbProps } from "./Breadcrumb.js";
 import { Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationProps } from "./Pagination.js";
+import { Popover, PopoverContent, PopoverContentProps, PopoverPlacement, PopoverProps, PopoverTrigger, PopoverTriggerProps } from "./Popover.js";
 import { Color, ColorFamilyName, ColorFamilyRegistry, FillVariant, Role, RoleRegistry, Size } from "./types.js";
-export { Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbCurrent, type BreadcrumbCurrentProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceOrientation, type Color, type ColorFamilyName, type ColorFamilyRegistry, Field, type FieldProps, type FillVariant, IconButton, type IconButtonProps, Input, type InputProps, Link, type LinkProps, Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Role, type RoleRegistry, Separator, type SeparatorProps, type Size, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableProps, TableRow, type TableRowProps, Textarea, type TextareaProps, Typography, type TypographyProps, VisuallyHidden, type VisuallyHiddenProps, cn };
+export { Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbCurrent, type BreadcrumbCurrentProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceOrientation, type Color, type ColorFamilyName, type ColorFamilyRegistry, Field, type FieldProps, type FillVariant, IconButton, type IconButtonProps, Input, type InputProps, Link, type LinkProps, Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, Popover, PopoverContent, type PopoverContentProps, type PopoverPlacement, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type Role, type RoleRegistry, Separator, type SeparatorProps, type Size, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableProps, TableRow, type TableRowProps, Textarea, type TextareaProps, Typography, type TypographyProps, VisuallyHidden, type VisuallyHiddenProps, cn };

package/dist/index.js

@@ -23,5 +23,6 @@ import { Progress } from "./Progress.js";
 import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from "./Table.js";
 import { Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink } from "./Breadcrumb.js";
 import { Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./Pagination.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover.js";
 
-export { Alert, Avatar, Badge, Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, Button, Card, Checkbox, CheckboxGroup, Field, IconButton, Input, Link, Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Progress, Radio, RadioGroup, Separator, Skeleton, Spinner, Switch, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Textarea, Typography, VisuallyHidden, cn };
+export { Alert, Avatar, Badge, Breadcrumb, BreadcrumbCurrent, BreadcrumbItem, BreadcrumbLink, Button, Card, Checkbox, CheckboxGroup, Field, IconButton, Input, Link, Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, Separator, Skeleton, Spinner, Switch, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, Textarea, Typography, VisuallyHidden, cn };

package/dist/overlay-style.js

@@ -0,0 +1,35 @@
+// src/overlay-style.ts
+/**
+* 오버레이 표면. raised 표면(`bg-raised`), `shadow-md`, radius `lg`, 경계 `border-raised`(light 투명 / dark gray-800).
+* - 글자는 `text-default`다. `text-default × bg-raised` 4.5:1이 등록되어 있다.
+* - `border-raised`는 장식용 경계라 대비 검사에서 빠진다. light의 투명 border는 forced-colors에서 CanvasText로 칠해져
+*   그림자 없이도 경계가 남는다(spec Elevation, 사용자 이야기 37). forced-colors에서는 브라우저가 box-shadow를 지운다.
+*/
+const overlaySurfaceClass = "rounded-lg border border-raised bg-raised text-default shadow-md";
+/**
+* 「가끔 씀」 오버레이의 등장·퇴장(spec 「motion 적용」). 요소에 `data-open`(열림)과 `data-placement`(트리거 기준 방향,
+* `top`·`bottom`·`left`·`right`)가 있어야 한다.
+*
+* - 등장: `@starting-style`(`starting:`)에서 opacity 0 + blur 4px(`blur-xs`) + 트리거 쪽으로 4px(`*-translate-*-1`)
+*   떨어진 곳에서 시작해 `normal`(300ms)로 제자리에 온다.
+* - 퇴장: `data-open`이 빠지면 같은 조합의 절반(blur 2px, 2px 이동)으로 `fast`(150ms)에 사라진다.
+*   duration은 도착 상태의 값을 쓰므로 기본 `duration-fast`에 열림만 `data-open:duration-normal`이다. easing은 둘 다 out이다.
+* - 닫힌 상태는 `display: none`(`hidden`)이고 `transition-discrete`(`transition-behavior: allow-discrete`)로 display도
+*   전환 대상에 넣어, 퇴장 전환이 끝날 때 사라진다. 이 둘을 지원하지 않는 브라우저에서는 바로 나타나고 사라진다.
+*   요소를 DOM에서 빼는 시점은 `useOverlayPresence`가 전환이 끝나기를 기다려 정한다.
+* - 퇴장 중에는 `pointer-events-none`으로 눌리지 않는다.
+* - reduced-motion: 이동·blur와 그 전환 대상(filter, translate)은 `motion-safe:`일 때만 둔다. 움직임 줄이기에서는
+*   opacity(와 display)만 같은 시간으로 바뀐다.
+* - `transition-all`은 쓰지 않는다. 전환 대상을 적는다.
+*/
+const popoverMotionClass = [
+	"transition-[opacity,display] transition-discrete duration-fast ease-out data-open:duration-normal motion-safe:transition-[opacity,filter,translate,display]",
+	"not-data-open:pointer-events-none not-data-open:hidden not-data-open:opacity-0 motion-safe:not-data-open:blur-[2px]",
+	"motion-safe:not-data-open:data-[placement=bottom]:-translate-y-0.5 motion-safe:not-data-open:data-[placement=top]:translate-y-0.5",
+	"motion-safe:not-data-open:data-[placement=right]:-translate-x-0.5 motion-safe:not-data-open:data-[placement=left]:translate-x-0.5",
+	"starting:opacity-0 motion-safe:starting:blur-xs",
+	"motion-safe:data-[placement=bottom]:starting:-translate-y-1 motion-safe:data-[placement=top]:starting:translate-y-1",
+	"motion-safe:data-[placement=right]:starting:-translate-x-1 motion-safe:data-[placement=left]:starting:translate-x-1"
+].join(" ");
+
+export { overlaySurfaceClass, popoverMotionClass };

package/dist/overlay.d.ts

@@ -0,0 +1,7 @@
+import "react";
+import "react-stately";
+/**
+ * 트리거 기준 위치. 앞은 트리거의 어느 쪽에 놓을지(주축), 뒤는 그 변에서 어디에 맞출지(교차축)다.
+ * 공간이 모자라면 반대쪽으로 뒤집는다(React Aria `shouldFlip` 기본값).
+ */
+export type OverlayPlacement = "top" | "top start" | "top end" | "bottom" | "bottom start" | "bottom end" | "left" | "left top" | "left bottom" | "right" | "right top" | "right bottom";

package/dist/overlay.js

@@ -0,0 +1,106 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useState } from "react";
+import { Overlay, usePopover } from "react-aria";
+
+// src/overlay.tsx
+const isAxis = (value) => value === "top" || value === "bottom" || value === "left" || value === "right";
+/**
+* 열림 상태가 꺼져도 퇴장 전환이 끝날 때까지 오버레이를 DOM에 남긴다. DOM에 둘지(`true`)를 돌려준다.
+*
+* 닫힌 뒤 요소의 `getAnimations()`(CSS transition 포함)가 모두 끝나면 뺀다. 전환이 없으면(지원하지 않는 브라우저,
+* 전환이 없는 오버레이) 바로 뺀다. 퇴장 중에 다시 열리면 빼지 않는다. React Aria hooks에는 퇴장을 기다리는 hook이
+* 없어서(react-aria-components의 `isExiting`은 Component 층에만 있다) 이 hook이 그 일을 한다.
+*/
+function useOverlayPresence(isOpen, ref) {
+	const [present, setPresent] = useState(isOpen);
+	if (isOpen && !present) setPresent(true);
+	useLayoutEffect(() => {
+		if (isOpen || !present) return;
+		const element = ref.current;
+		if (!element || typeof element.getAnimations !== "function") {
+			setPresent(false);
+			return;
+		}
+		let cancelled = false;
+		const waitForExit = () => {
+			const animations = element.getAnimations();
+			if (animations.length === 0) {
+				setPresent(false);
+				return;
+			}
+			Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+				if (!cancelled) waitForExit();
+			});
+		};
+		waitForExit();
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		isOpen,
+		present,
+		ref
+	]);
+	return isOpen || present;
+}
+/**
+* React Aria가 위치 style에 넣는 `zIndex: 100000`을 빼고 주축 방향을 `data-placement`로 붙인다.
+* 쌓임은 쌓임 단계 class(`z-popover` 등)로만 정한다(spec 「오버레이」).
+*
+* `placement`가 아직 없으면(처음 렌더) 요청한 placement의 주축을 쓴다. 등장 전환의 시작 방향이 첫 스타일 계산에서
+* 정해지기 때문이다. 공간이 없어 뒤집힌 경우에만 첫 프레임의 시작 방향이 요청한 쪽이 된다(4px).
+*/
+function overlayPositionProps(props, placement, requested) {
+	const { zIndex: _zIndex, ...style } = props.style ?? {};
+	const fallback = requested.split(" ")[0];
+	return {
+		...props,
+		style,
+		"data-placement": isAxis(placement) ? placement : fallback
+	};
+}
+/**
+* 트리거에 붙는 오버레이(Popover, Menu, Select·Combobox 목록)의 위치·닫기 동작. React Aria `usePopover`를 감싼다.
+* - 닫기: Esc, 바깥 누름, 포커스가 바깥으로 나감(`usePopover` 기본). 위에 쌓인 오버레이부터 닫힌다.
+* - 모달: 기본은 바깥을 `inert`로 막고 스크롤을 잠근다. `nonModal`이면 둘 다 하지 않는다.
+* - 위치: 공간이 모자라면 반대쪽으로 뒤집고, 주축 길이는 `max-height`로 줄여 트리거를 덮지 않는다(WCAG 2.4.11, Comments 참고).
+* 돌려받은 `overlayProps`(style 포함)를 오버레이 요소에 펼친다. 쌓임 단계 class는 부르는 쪽이 붙인다.
+*/
+function usePopoverOverlay({ triggerRef, popoverRef, placement, offset, nonModal = false }, state) {
+	const { popoverProps, placement: actual } = usePopover({
+		triggerRef,
+		popoverRef,
+		placement,
+		offset,
+		isNonModal: nonModal
+	}, state);
+	return { overlayProps: overlayPositionProps(popoverProps, actual, placement) };
+}
+/**
+* 트리거가 놓인 Theme(`data-theme`)을 portal로 나간 오버레이에 옮긴다. Theme을 `<html>`이 아닌 일부 영역에
+* 붙인 앱에서도 오버레이가 같은 색이 된다. 오버레이에 이미 `data-theme`이 있으면 두고, 트리거 위에 Theme이 없으면
+* 붙이지 않는다(`:root` 기본값을 따른다). 위치를 계산하기 전(첫 스타일 계산 전)에 붙도록 위치 hook보다 먼저 부른다.
+*/
+function useOverlayTheme(triggerRef, overlayRef) {
+	useLayoutEffect(() => {
+		const overlay = overlayRef.current;
+		if (!overlay || overlay.hasAttribute("data-theme")) return;
+		const theme = triggerRef.current?.closest("[data-theme]")?.getAttribute("data-theme");
+		if (theme) overlay.setAttribute("data-theme", theme);
+	}, [triggerRef, overlayRef]);
+}
+/**
+* 오버레이를 `document.body`에 portal한다(React Aria `Overlay`). top-layer(`<dialog>`, popover API)는 쓰지 않는다.
+* 안을 `FocusScope`(`restoreFocus`)로 감싸서, DOM에서 빠질 때 포커스가 열기 전 요소(보통 트리거)로 돌아간다.
+* 역할 hook이 포커스 가두기를 요청하면(`useDialog` 등) Tab이 안에서 돈다. 서버 렌더에서는 아무것도 그리지 않는다.
+*/
+function OverlayPortal({ isExiting, children }) {
+	return /* @__PURE__ */ jsx(Overlay, {
+		isExiting,
+		children
+	});
+}
+
+export { OverlayPortal, overlayPositionProps, useOverlayPresence, useOverlayTheme, usePopoverOverlay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tide-tds/components",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Tide 디자인 시스템의 React Component",
   "license": "MIT",
   "repository": {
@@ -23,8 +23,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "dependencies": {
-    "@tide-tds/foundation": "0.3.0",
-    "@tide-tds/icons": "0.3.0",
+    "@tide-tds/foundation": "0.3.1",
+    "@tide-tds/icons": "0.3.1",
     "clsx": "^2.1.1",
     "react-aria": "^3.53.1",
     "react-stately": "^3.51.0",