@liner-fe/prism 3.4.6 → 3.4.7

package/lib/index.css

@@ -1917,3 +1917,336 @@
 ._border-accent-pink_b57yu_124 {
   border: 1px solid var(--accent-label-pink);
 }
+
+/* esbuild-sass-plugin:css-chunk:src/components/AlertDialog/style.module.scss */
+@keyframes _overlayShow_6ipeu_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes _contentShow_6ipeu_1 {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+._overlay_6ipeu_20 {
+  position: fixed;
+  inset: 0;
+  background: var(--cover-dim-page);
+  z-index: 1000;
+}
+._overlay_6ipeu_20[data-state=open] {
+  animation: _overlayShow_6ipeu_1 150ms ease-out;
+}
+._content_6ipeu_30 {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  gap: var(--lp-sys-gap-positive-500);
+  width: 400px;
+  max-width: calc(100% - 32px);
+  box-sizing: border-box;
+  padding: var(--lp-sys-padding-component-600);
+  background: var(--neutral-container-variation-lowest);
+  border-radius: var(--lp-sys-radius-xl);
+  box-shadow:
+    0px 0px 1px 0px rgba(0, 0, 0, 0.06),
+    0px 2px 12px 0px rgba(0, 0, 0, 0.08),
+    0px 1px 8px 0px rgba(0, 0, 0, 0.06);
+}
+._content_6ipeu_30:focus {
+  outline: none;
+}
+._content_6ipeu_30[data-state=open] {
+  animation: _contentShow_6ipeu_1 150ms ease-out;
+}
+._contents_6ipeu_55 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lp-sys-padding-component-200);
+  padding-top: var(--lp-sys-padding-component-100);
+  padding-bottom: var(--lp-sys-padding-component-100);
+  width: 100%;
+  color: var(--neutral-label-primary);
+}
+._title_6ipeu_65 {
+  margin: 0;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+._description_6ipeu_75 {
+  margin: 0;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+._actions_6ipeu_85 {
+  display: flex;
+  gap: var(--lp-sys-padding-component-200);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+}
+@media (max-width: 600px) {
+  ._content_6ipeu_30 {
+    gap: var(--lp-sys-gap-positive-600);
+  }
+  ._contents_6ipeu_55 {
+    text-align: center;
+  }
+  ._contents_6ipeu_55 ._description_6ipeu_75 {
+    font-size: var(--lp-pri-font-size-15);
+    line-height: var(--lp-pri-font-lineheight-130);
+  }
+  ._actions_6ipeu_85 :where(button) {
+    flex: 1 1 0;
+    width: 100%;
+  }
+}
+
+/* esbuild-sass-plugin:css-chunk:src/components/Dialog/style.module.scss */
+@keyframes _overlayShow_qs97t_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes _contentShow_qs97t_1 {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+._overlay_qs97t_20 {
+  position: fixed;
+  inset: 0;
+  background: var(--cover-dim-page);
+  z-index: 1000;
+}
+._overlay_qs97t_20[data-state=open] {
+  animation: _overlayShow_qs97t_1 150ms ease-out;
+}
+._content_qs97t_30 {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  max-width: calc(100% - 32px);
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--neutral-container-variation-lowest);
+  border-radius: var(--lp-sys-radius-l);
+  box-shadow:
+    0px 0px 1px 0px rgba(0, 0, 0, 0.06),
+    0px 2px 12px 0px rgba(0, 0, 0, 0.08),
+    0px 1px 8px 0px rgba(0, 0, 0, 0.06);
+}
+._content_qs97t_30:focus {
+  outline: none;
+}
+._content_qs97t_30[data-state=open] {
+  animation: _contentShow_qs97t_1 150ms ease-out;
+}
+._illust_qs97t_55 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--lp-sys-padding-component-500) 0;
+}
+._close_qs97t_63 {
+  position: absolute;
+  top: 12px;
+  right: 16px;
+  z-index: 1;
+}
+._header_qs97t_70 {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  padding: var(--lp-sys-padding-component-500) var(--lp-sys-padding-component-600);
+}
+._body_qs97t_80 {
+  box-sizing: border-box;
+  padding: var(--lp-sys-padding-component-200) var(--lp-sys-padding-component-600);
+}
+._title_qs97t_85 {
+  margin: 0;
+  word-break: break-word;
+}
+._description_qs97t_90 {
+  margin: 0;
+  color: var(--neutral-label-secondary);
+  word-break: break-word;
+}
+._footer_qs97t_96 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lp-sys-padding-component-200);
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--lp-sys-padding-component-400) var(--lp-sys-padding-component-600) var(--lp-sys-padding-component-600);
+}
+._actions_qs97t_107 {
+  display: flex;
+  gap: var(--lp-sys-padding-component-200);
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+}
+._actions_qs97t_107 :where(button) {
+  flex: 1 0 0;
+  min-width: 0;
+}
+._extra_qs97t_122 {
+  display: flex;
+  justify-content: center;
+}
+._extra_qs97t_122 :where(p) {
+  margin: 0;
+}
+
+/* esbuild-sass-plugin:css-chunk:src/components/BottomSheet/style.module.scss */
+._overlay_xv7lo_2 {
+  position: fixed;
+  inset: 0;
+  background: var(--cover-dim-page);
+  z-index: 1000;
+}
+._content_xv7lo_9 {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1001;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+._content_xv7lo_9[data-mode=auto] {
+  max-height: 80dvh;
+}
+._content_xv7lo_9 {
+}
+._content_xv7lo_9[data-mode=snap] {
+  height: 100dvh;
+  max-height: 100dvh;
+}
+._content_xv7lo_9 {
+  background: var(--neutral-container-variation-lowest);
+  border-top-left-radius: var(--lp-sys-radius-xl);
+  border-top-right-radius: var(--lp-sys-radius-xl);
+  box-shadow:
+    0px 0px 1px 0px rgba(0, 0, 0, 0.06),
+    0px -2px 12px 0px rgba(0, 0, 0, 0.08),
+    0px -1px 8px 0px rgba(0, 0, 0, 0.06);
+}
+._content_xv7lo_9:focus {
+  outline: none;
+}
+._inner_xv7lo_18 {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding-top: var(--lp-sys-padding-component-300);
+}
+[data-mode=auto] ._inner_xv7lo_18 {
+  max-height: 80dvh;
+}
+._inner_xv7lo_18 {
+}
+[data-mode=snap] ._inner_xv7lo_18 {
+  height: calc(100dvh - var(--snap-point-height, 0px));
+  padding-top: max(var(--lp-sys-padding-component-300), env(safe-area-inset-top));
+  transition: height 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+._handle_xv7lo_90 {
+  margin: 0 auto;
+  width: 40px;
+  height: 4px;
+  flex-shrink: 0;
+  border-radius: 999px;
+  background: var(--neutral-border-opaque-subtle);
+}
+._illust_xv7lo_100 {
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+._header_xv7lo_106 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lp-sys-padding-component-200);
+  box-sizing: border-box;
+  padding: var(--lp-sys-padding-component-500) var(--lp-sys-padding-component-600);
+}
+._body_xv7lo_18 {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  box-sizing: border-box;
+  padding: var(--lp-sys-padding-component-200) var(--lp-sys-padding-component-600);
+}
+._title_xv7lo_126 {
+  margin: 0;
+  word-break: break-word;
+}
+._description_xv7lo_131 {
+  margin: 0;
+  color: var(--neutral-label-secondary);
+  word-break: break-word;
+}
+._footer_xv7lo_137 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lp-sys-padding-component-200);
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--lp-sys-padding-component-400) var(--lp-sys-padding-component-600) var(--lp-sys-padding-component-600);
+}
+._actions_xv7lo_148 {
+  display: flex;
+  gap: var(--lp-sys-padding-component-200);
+  align-items: center;
+  width: 100%;
+}
+._actions_xv7lo_148 :where(button) {
+  flex: 1 0 0;
+  min-width: 0;
+}
+._extra_xv7lo_162 {
+  display: flex;
+  justify-content: center;
+}
+._extra_xv7lo_162 :where(p) {
+  margin: 0;
+}

package/lib/index.d.ts

@@ -7,9 +7,10 @@ import { IconProps, IconComponentType } from '@liner-fe/icon';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
 import { breakpointOrigin } from '@liner-fe/design-token';
-import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Select as Select$1, Label as Label$1 } from 'radix-ui';
+import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Select as Select$1, Label as Label$1, AlertDialog as AlertDialog$1, Dialog as Dialog$1 } from 'radix-ui';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
+import { Drawer } from 'vaul';
 
 declare const objectToArray: <T extends Record<string, unknown>>(obj: T) => [keyof T, T[keyof T]][];
 declare const arrayToStyleObject: <T extends SystemKeys>(colorKeys: T[], style: {
@@ -641,4 +642,203 @@ type BadgeBaseProps = ComponentPropsWithoutRef<'span'> & {
 type BadgeProps = BadgeBaseProps & BadgeVariantColorProps;
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
-export { Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, type ItemProps, LOGOS, Label, List, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, type PromiseToastOptions, Radio, Select, type SelectItemProps, type SelectProps, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, toast };
+/**
+ * AlertDialogRoot
+ *
+ * ESC·Overlay 클릭으로 닫히지 않는다. dismiss/confirm 액션이 유일한 탈출구다.
+ */
+type AlertDialogRootProps = react.ComponentProps<typeof AlertDialog$1.Root>;
+/**
+ * AlertDialogTrigger
+ */
+interface AlertDialogTriggerProps {
+    by?: react.ReactNode;
+}
+/**
+ * AlertDialog의 액션 정의
+ */
+interface AlertDialogAction {
+    /** 버튼에 표시할 텍스트 */
+    label: string;
+    /** 버튼 클릭 시 실행할 함수. 실행 후 dialog가 닫힌다. */
+    onClick?: () => void;
+}
+type AlertDialogConfirmAction = AlertDialogAction & {
+    /** confirm 버튼의 레벨. 복구 비용이 큰(파괴적인) 액션은 negative를 사용한다. */
+    level?: 'primary' | 'negative';
+};
+/**
+ * AlertDialogContent
+ */
+interface AlertDialogContentProps extends react.HTMLAttributes<HTMLDivElement> {
+    /** 제목 (선택). 넘기면 표시되고, 없으면 렌더하지 않는다. aria-labelledby로 연결된다. */
+    title?: string;
+    /** 본문. aria-describedby로 연결된다. (필수) */
+    description: react.ReactNode;
+    /** 닫기(취소) 액션 (필수) */
+    dismiss: AlertDialogAction;
+    /** 확인(주요 처리) 액션 (필수) */
+    confirm: AlertDialogConfirmAction;
+    /** Portal이 렌더링될 컨테이너 */
+    container?: HTMLElement;
+}
+declare const AlertDialog: ((props: AlertDialogRootProps) => react_jsx_runtime.JSX.Element) & {
+    Trigger: ({ by }: AlertDialogTriggerProps) => react_jsx_runtime.JSX.Element;
+    Content: ({ title, description, dismiss, confirm, container, className, children, ref, ...props }: AlertDialogContentProps & {
+        ref?: react.Ref<HTMLDivElement>;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+/**
+ * DialogRoot
+ *
+ * AlertDialog와 달리 ESC·Overlay 클릭으로 닫힌다.
+ */
+type DialogRootProps = react.ComponentProps<typeof Dialog$1.Root>;
+/**
+ * DialogTrigger
+ */
+interface DialogTriggerProps {
+    by?: react.ReactNode;
+}
+/**
+ * Dialog의 액션 정의
+ */
+interface DialogAction {
+    /** 버튼에 표시할 텍스트 */
+    label: string;
+    /** 버튼 클릭 시 실행할 함수. 실행 후 dialog가 닫힌다. */
+    onClick?: () => void;
+}
+type DialogConfirmAction = DialogAction & {
+    /** confirm 버튼의 레벨. 복구 비용이 큰(파괴적인) 액션은 negative를 사용한다. */
+    level?: 'primary' | 'negative';
+};
+/**
+ * DialogContent
+ */
+interface DialogContentProps extends react.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 상단 일러스트 슬롯 (선택). `@liner-fe/illust`의 `<Illust>`를 넣는다. 없으면 렌더하지 않는다.
+     * content 상단에 가운데 정렬로 노출된다. (full-bleed 아님)
+     */
+    illust?: react.ReactNode;
+    /** 제목 (필수). aria-labelledby로 연결된다. */
+    title: string;
+    /** 본문. aria-describedby로 연결된다. */
+    description?: react.ReactNode;
+    /** 닫기(취소) 액션 (선택). 없으면 해당 버튼을 렌더하지 않는다. */
+    dismiss?: DialogAction;
+    /** 확인(주요 처리) 액션 (선택). 없으면 해당 버튼을 렌더하지 않는다. */
+    confirm?: DialogConfirmAction;
+    /** 보조 액션 (선택). primary/secondary 아래 가운데 정렬되는 텍스트 버튼. Figma `extra.items` 슬롯. */
+    extra?: DialogAction;
+    /** 우상단 닫기(X) 버튼 노출 여부. 기본 true. */
+    showClose?: boolean;
+    /** Portal이 렌더링될 컨테이너 */
+    container?: HTMLElement;
+}
+declare const Dialog: ((props: DialogRootProps) => react_jsx_runtime.JSX.Element) & {
+    Trigger: ({ by }: DialogTriggerProps) => react_jsx_runtime.JSX.Element;
+    Content: ({ illust, title, description, dismiss, confirm, extra, showClose, container, className, children, ref, ...props }: DialogContentProps & {
+        ref?: react.Ref<HTMLDivElement>;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+/** BottomSheet 동작 모드 (Figma 스펙). */
+type BottomSheetMode = 'auto' | 'snap';
+/**
+ * BottomSheetRoot
+ *
+ * 화면 하단에서 올라오는 시트.
+ * vaul `Drawer`를 사용해 드래그 제스처와 a11y(focus trap·scroll lock)를 위임한다.
+ *
+ * - `mode='auto'`: 콘텐츠 높이에 맞춰 자동으로 올라온다. 최대 80%(고정)까지.
+ *   handle 없음. 드래그/Overlay/ESC 닫기 비활성 → footer 액션 버튼으로만 닫힌다.
+ *   80%보다 큰 콘텐츠가 필요하면 `mode='snap'`을 사용한다.
+ * - `mode='snap'`: 50%로 시작해 handle 드래그로 상태바 직전까지 확장된다.
+ *   드래그/Overlay/ESC로 닫힌다. snap은 vaul `snapPoints`에 위임한다.
+ */
+interface BottomSheetRootProps extends Omit<react.ComponentProps<typeof Drawer.Root>, 'snapPoints' | 'fadeFromIndex'> {
+    /** 동작 모드. 기본 'auto'. */
+    mode?: BottomSheetMode;
+}
+/**
+ * BottomSheetTrigger
+ */
+interface BottomSheetTriggerProps {
+    by?: react.ReactNode;
+}
+/**
+ * BottomSheet의 액션 정의
+ */
+interface BottomSheetAction {
+    /** 버튼에 표시할 텍스트 */
+    label: string;
+    /** 버튼 클릭 시 실행할 함수. 실행 후 시트가 닫힌다. */
+    onClick?: () => void;
+}
+type BottomSheetConfirmAction = BottomSheetAction & {
+    /** confirm 버튼의 레벨. 복구 비용이 큰(파괴적인) 액션은 negative를 사용한다. */
+    level?: 'primary' | 'negative';
+};
+/**
+ * BottomSheetContent
+ */
+interface BottomSheetContentProps extends react.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 상단 미디어/일러스트 슬롯 (선택). `@liner-fe/illust`의 `<Illust>` 등을 넣는다. 없으면 렌더하지 않는다.
+     * content 최상단에 가로 full-bleed로 노출된다. Figma `media` 슬롯에 대응한다.
+     */
+    illust?: react.ReactNode;
+    /** 제목 (필수). aria-labelledby로 연결된다. Figma BottomSheet 스펙상 title은 required 슬롯이다. */
+    title: string;
+    /** 본문. aria-describedby로 연결된다. */
+    description?: react.ReactNode;
+    /** 상단 드래그 핸들(grabber) 노출 여부. 기본: snap이면 true, auto이면 false (mode 기준). */
+    showHandle?: boolean;
+    /** 닫기(취소) 액션 (선택). 없으면 해당 버튼을 렌더하지 않는다. */
+    dismiss?: BottomSheetAction;
+    /** 확인(주요 처리) 액션 (선택). 없으면 해당 버튼을 렌더하지 않는다. */
+    confirm?: BottomSheetConfirmAction;
+    /** 보조 액션 (선택). actions 아래 가운데 정렬되는 텍스트 버튼. Figma `extra.items` 슬롯. */
+    extra?: BottomSheetAction;
+    /** Portal이 렌더링될 컨테이너 */
+    container?: HTMLElement;
+}
+declare const BottomSheet: (({ mode, children, ...props }: BottomSheetRootProps) => react_jsx_runtime.JSX.Element) & {
+    Trigger: ({ by }: BottomSheetTriggerProps) => react_jsx_runtime.JSX.Element;
+    Content: ({ illust, title, description, showHandle, dismiss, confirm, extra, container, className, style: styleProp, children, ref, ...props }: BottomSheetContentProps & {
+        ref?: react.Ref<HTMLDivElement>;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+/**
+ * Figma에 정의된 종횡비(width / height) preset.
+ * 키는 Figma variant 이름(비율)과 동일하다. 직접 숫자를 넘겨도 된다.
+ */
+declare const RATIO: {
+    readonly '1/1': 1;
+    readonly '3/4': number;
+    readonly '4/3': number;
+    readonly '3/2': number;
+    readonly '2/3': number;
+    readonly '16/9': number;
+    readonly '21/9': number;
+};
+interface RatioProps extends react.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 종횡비 (width / height). 기본값 1(정사각형).
+     * `RATIO['16/9']` preset 값을 사용하거나 `16 / 9`처럼 직접 계산해 넘긴다.
+     */
+    ratio?: number;
+    children?: react.ReactNode;
+}
+/**
+ * 자식을 지정한 종횡비에 맞춰 담는 레이아웃 컨테이너다.
+ * radix `AspectRatio`를 그대로 사용해 layout shift 없이 비율을 유지한다.
+ * (이미지/영상은 자식 쪽에서 `width: 100%; height: 100%; object-fit: cover`로 채운다.)
+ */
+declare const Ratio: react.ForwardRefExoticComponent<RatioProps & react.RefAttributes<HTMLDivElement>>;
+
+export { AlertDialog, type AlertDialogAction, type AlertDialogConfirmAction, type AlertDialogContentProps, Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, BottomSheet, type BottomSheetAction, type BottomSheetConfirmAction, type BottomSheetContentProps, type BottomSheetMode, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Dialog, type DialogAction, type DialogConfirmAction, type DialogContentProps, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, type ItemProps, LOGOS, Label, List, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, type PromiseToastOptions, RATIO, Radio, Ratio, type RatioProps, Select, type SelectItemProps, type SelectProps, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, toast };

package/lib/index.js

@@ -2774,8 +2774,304 @@ var Tag = forwardRef20(
     );
   }
 );
+
+// src/components/AlertDialog/index.tsx
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
+import { clsx as clsx22 } from "clsx";
+import { cva as cva12 } from "cva";
+
+// src/components/AlertDialog/style.module.scss
+var style_module_default20 = {
+  "overlay": "_overlay_6ipeu_20",
+  "overlayShow": "_overlayShow_6ipeu_1",
+  "content": "_content_6ipeu_30",
+  "contentShow": "_contentShow_6ipeu_1",
+  "contents": "_contents_6ipeu_55",
+  "title": "_title_6ipeu_65",
+  "description": "_description_6ipeu_75",
+  "actions": "_actions_6ipeu_85"
+};
+
+// src/components/AlertDialog/index.tsx
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+var titleVariants = cva12({ base: [style_module_default20.title, "lp-sys-typo-title4-accent-bold"] });
+var descriptionVariants = cva12({
+  base: [style_module_default20.description, "lp-sys-typo-paragraph2-post-regular"]
+});
+var AlertDialogRoot = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx29(AlertDialogPrimitive.Root, { ...props }), "AlertDialogRoot");
+var AlertDialogTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx29(AlertDialogPrimitive.Trigger, { asChild: true, children: by }), "AlertDialogTrigger");
+var AlertDialogContent = /* @__PURE__ */ __name(({
+  title,
+  description,
+  dismiss,
+  confirm,
+  container,
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs16(AlertDialogPrimitive.Portal, { container, children: [
+    /* @__PURE__ */ jsx29(AlertDialogPrimitive.Overlay, { className: style_module_default20.overlay }),
+    /* @__PURE__ */ jsxs16(
+      AlertDialogPrimitive.Content,
+      {
+        ref,
+        className: clsx22(style_module_default20.content, className),
+        onEscapeKeyDown: (event) => event.preventDefault(),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs16("div", { className: style_module_default20.contents, children: [
+            title && /* @__PURE__ */ jsx29(AlertDialogPrimitive.Title, { className: titleVariants(), children: title }),
+            /* @__PURE__ */ jsx29(AlertDialogPrimitive.Description, { className: descriptionVariants(), children: description })
+          ] }),
+          children,
+          /* @__PURE__ */ jsxs16("div", { className: style_module_default20.actions, children: [
+            /* @__PURE__ */ jsx29(AlertDialogPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx29(Button, { level: "tertiary", size: "l", onClick: dismiss.onClick, children: dismiss.label }) }),
+            /* @__PURE__ */ jsx29(AlertDialogPrimitive.Action, { asChild: true, children: /* @__PURE__ */ jsx29(Button, { level: confirm.level ?? "primary", size: "l", onClick: confirm.onClick, children: confirm.label }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}, "AlertDialogContent");
+var AlertDialog = Object.assign(AlertDialogRoot, {
+  Trigger: AlertDialogTrigger,
+  Content: AlertDialogContent
+});
+
+// src/components/Dialog/index.tsx
+import { Dialog as DialogPrimitive3 } from "radix-ui";
+import { clsx as clsx23 } from "clsx";
+import { IconClose as IconClose2 } from "@liner-fe/icon";
+
+// src/components/Dialog/Header.tsx
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { cva as cva13 } from "cva";
+
+// src/components/Dialog/style.module.scss
+var style_module_default21 = {
+  "overlay": "_overlay_qs97t_20",
+  "overlayShow": "_overlayShow_qs97t_1",
+  "content": "_content_qs97t_30",
+  "contentShow": "_contentShow_qs97t_1",
+  "illust": "_illust_qs97t_55",
+  "close": "_close_qs97t_63",
+  "header": "_header_qs97t_70",
+  "body": "_body_qs97t_80",
+  "title": "_title_qs97t_85",
+  "description": "_description_qs97t_90",
+  "footer": "_footer_qs97t_96",
+  "actions": "_actions_qs97t_107",
+  "extra": "_extra_qs97t_122"
+};
+
+// src/components/Dialog/Header.tsx
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+var titleVariants2 = cva13({ base: [style_module_default21.title, "lp-sys-typo-title4-accent-bold"] });
+var descriptionVariants2 = cva13({
+  base: [style_module_default21.description, "lp-sys-typo-paragraph2-post-regular"]
+});
+var DialogHeader = /* @__PURE__ */ __name(({ title, description }) => /* @__PURE__ */ jsxs17("div", { className: style_module_default21.header, children: [
+  /* @__PURE__ */ jsx30(DialogPrimitive.Title, { className: titleVariants2(), children: title }),
+  description && /* @__PURE__ */ jsx30(DialogPrimitive.Description, { className: descriptionVariants2(), children: description })
+] }), "DialogHeader");
+
+// src/components/Dialog/Footer.tsx
+import { Dialog as DialogPrimitive2 } from "radix-ui";
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+var DialogFooter = /* @__PURE__ */ __name(({ dismiss, confirm, extra }) => {
+  const hasActions = Boolean(dismiss || confirm);
+  const hasFooter = hasActions || Boolean(extra);
+  if (!hasFooter) return null;
+  return /* @__PURE__ */ jsxs18("div", { className: style_module_default21.footer, children: [
+    hasActions && /* @__PURE__ */ jsxs18("div", { className: style_module_default21.actions, children: [
+      dismiss && /* @__PURE__ */ jsx31(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx31(Button, { level: "tertiary", size: "cta", onClick: dismiss.onClick, children: dismiss.label }) }),
+      confirm && /* @__PURE__ */ jsx31(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx31(Button, { level: confirm.level ?? "primary", size: "cta", onClick: confirm.onClick, children: confirm.label }) })
+    ] }),
+    extra && /* @__PURE__ */ jsx31("div", { className: style_module_default21.extra, children: /* @__PURE__ */ jsx31(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx31(TextButton, { level: "tertiary", size: "xs", onClick: extra.onClick, children: extra.label }) }) })
+  ] });
+}, "DialogFooter");
+
+// src/components/Dialog/index.tsx
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+var DialogRoot = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx32(DialogPrimitive3.Root, { ...props }), "DialogRoot");
+var DialogTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx32(DialogPrimitive3.Trigger, { asChild: true, children: by }), "DialogTrigger");
+var DialogContent = /* @__PURE__ */ __name(({
+  illust,
+  title,
+  description,
+  dismiss,
+  confirm,
+  extra,
+  showClose = true,
+  container,
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs19(DialogPrimitive3.Portal, { container, children: [
+    /* @__PURE__ */ jsx32(DialogPrimitive3.Overlay, { className: style_module_default21.overlay }),
+    /* @__PURE__ */ jsxs19(DialogPrimitive3.Content, { ref, className: clsx23(style_module_default21.content, className), ...props, children: [
+      showClose && /* @__PURE__ */ jsx32(DialogPrimitive3.Close, { asChild: true, children: /* @__PURE__ */ jsx32(
+        IconButton,
+        {
+          className: style_module_default21.close,
+          "aria-label": "\uB2EB\uAE30",
+          level: "quinary",
+          size: "m",
+          icon: { icon: IconClose2, type: "neutral-label-secondary" }
+        }
+      ) }),
+      illust && /* @__PURE__ */ jsx32("div", { className: style_module_default21.illust, children: illust }),
+      /* @__PURE__ */ jsx32(DialogHeader, { title, description }),
+      children && /* @__PURE__ */ jsx32("div", { className: style_module_default21.body, children }),
+      /* @__PURE__ */ jsx32(DialogFooter, { dismiss, confirm, extra })
+    ] })
+  ] });
+}, "DialogContent");
+var Dialog = Object.assign(DialogRoot, {
+  Trigger: DialogTrigger,
+  Content: DialogContent
+});
+
+// src/components/BottomSheet/index.tsx
+import * as React4 from "react";
+import { Drawer as Drawer3 } from "vaul";
+import { clsx as clsx24 } from "clsx";
+
+// src/components/BottomSheet/Header.tsx
+import { Drawer } from "vaul";
+import { cva as cva14 } from "cva";
+
+// src/components/BottomSheet/style.module.scss
+var style_module_default22 = {
+  "overlay": "_overlay_xv7lo_2",
+  "content": "_content_xv7lo_9",
+  "inner": "_inner_xv7lo_18",
+  "handle": "_handle_xv7lo_90",
+  "illust": "_illust_xv7lo_100",
+  "header": "_header_xv7lo_106",
+  "body": "_body_xv7lo_18",
+  "title": "_title_xv7lo_126",
+  "description": "_description_xv7lo_131",
+  "footer": "_footer_xv7lo_137",
+  "actions": "_actions_xv7lo_148",
+  "extra": "_extra_xv7lo_162"
+};
+
+// src/components/BottomSheet/Header.tsx
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+var titleVariants3 = cva14({ base: [style_module_default22.title, "lp-sys-typo-title4-accent-bold"] });
+var descriptionVariants3 = cva14({
+  base: [style_module_default22.description, "lp-sys-typo-paragraph2-post-regular"]
+});
+var BottomSheetHeader = /* @__PURE__ */ __name(({ title, description }) => /* @__PURE__ */ jsxs20("div", { className: style_module_default22.header, children: [
+  /* @__PURE__ */ jsx33(Drawer.Title, { className: titleVariants3(), children: title }),
+  description && /* @__PURE__ */ jsx33(Drawer.Description, { className: descriptionVariants3(), children: description })
+] }), "BottomSheetHeader");
+
+// src/components/BottomSheet/Footer.tsx
+import { Drawer as Drawer2 } from "vaul";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+var BottomSheetFooter = /* @__PURE__ */ __name(({ dismiss, confirm, extra }) => {
+  const hasActions = Boolean(dismiss || confirm);
+  const hasFooter = hasActions || Boolean(extra);
+  if (!hasFooter) return null;
+  return /* @__PURE__ */ jsxs21("div", { className: style_module_default22.footer, children: [
+    hasActions && /* @__PURE__ */ jsxs21("div", { className: style_module_default22.actions, children: [
+      dismiss && /* @__PURE__ */ jsx34(Drawer2.Close, { asChild: true, children: /* @__PURE__ */ jsx34(Button, { level: "tertiary", size: "l", onClick: dismiss.onClick, children: dismiss.label }) }),
+      confirm && /* @__PURE__ */ jsx34(Drawer2.Close, { asChild: true, children: /* @__PURE__ */ jsx34(Button, { level: confirm.level ?? "primary", size: "l", onClick: confirm.onClick, children: confirm.label }) })
+    ] }),
+    extra && /* @__PURE__ */ jsx34("div", { className: style_module_default22.extra, children: /* @__PURE__ */ jsx34(Drawer2.Close, { asChild: true, children: /* @__PURE__ */ jsx34(TextButton, { level: "tertiary", size: "xs", onClick: extra.onClick, children: extra.label }) }) })
+  ] });
+}, "BottomSheetFooter");
+
+// src/components/BottomSheet/index.tsx
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+var SNAP_POINTS = [0.5, 1];
+var BottomSheetContext = React4.createContext({
+  mode: "auto"
+});
+var BottomSheetRoot = /* @__PURE__ */ __name(({ mode = "auto", children, ...props }) => {
+  const value = React4.useMemo(() => ({ mode }), [mode]);
+  return /* @__PURE__ */ jsx35(BottomSheetContext.Provider, { value, children: mode === "snap" ? /* @__PURE__ */ jsx35(Drawer3.Root, { snapPoints: SNAP_POINTS, fadeFromIndex: SNAP_POINTS.length - 1, ...props, children }) : (
+    // auto: handle이 없으므로 handleOnly로 드래그 닫기를 막고, overlay·ESC 닫기는 Content에서 막는다.
+    // dismissible은 유지(false면 vaul이 Drawer.Close까지 막는다) → footer 액션 버튼으로만 닫힌다.
+    /* @__PURE__ */ jsx35(Drawer3.Root, { handleOnly: true, ...props, children })
+  ) });
+}, "BottomSheetRoot");
+var BottomSheetTrigger = /* @__PURE__ */ __name(({ by }) => /* @__PURE__ */ jsx35(Drawer3.Trigger, { asChild: true, children: by }), "BottomSheetTrigger");
+var BottomSheetContent = /* @__PURE__ */ __name(({
+  illust,
+  title,
+  description,
+  showHandle,
+  dismiss,
+  confirm,
+  extra,
+  container,
+  className,
+  style: styleProp,
+  children,
+  ref,
+  ...props
+}) => {
+  const { mode } = React4.useContext(BottomSheetContext);
+  const resolvedShowHandle = showHandle ?? mode === "snap";
+  const autoCloseGuards = mode === "auto" ? {
+    onEscapeKeyDown: /* @__PURE__ */ __name((e) => e.preventDefault(), "onEscapeKeyDown"),
+    onInteractOutside: /* @__PURE__ */ __name((e) => e.preventDefault(), "onInteractOutside")
+  } : {};
+  return /* @__PURE__ */ jsxs22(Drawer3.Portal, { container, children: [
+    /* @__PURE__ */ jsx35(Drawer3.Overlay, { className: style_module_default22.overlay }),
+    /* @__PURE__ */ jsx35(
+      Drawer3.Content,
+      {
+        ref,
+        "data-mode": mode,
+        className: clsx24(style_module_default22.content, className),
+        style: styleProp,
+        ...autoCloseGuards,
+        ...props,
+        children: /* @__PURE__ */ jsxs22("div", { className: style_module_default22.inner, children: [
+          resolvedShowHandle && /* @__PURE__ */ jsx35(Drawer3.Handle, { className: style_module_default22.handle }),
+          illust && /* @__PURE__ */ jsx35("div", { className: style_module_default22.illust, children: illust }),
+          /* @__PURE__ */ jsx35(BottomSheetHeader, { title, description }),
+          children && /* @__PURE__ */ jsx35("div", { className: style_module_default22.body, children }),
+          /* @__PURE__ */ jsx35(BottomSheetFooter, { dismiss, confirm, extra })
+        ] })
+      }
+    )
+  ] });
+}, "BottomSheetContent");
+var BottomSheet = Object.assign(BottomSheetRoot, {
+  Trigger: BottomSheetTrigger,
+  Content: BottomSheetContent
+});
+
+// src/components/Ratio/index.tsx
+import * as React5 from "react";
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var RATIO = {
+  "1/1": 1,
+  "3/4": 3 / 4,
+  "4/3": 4 / 3,
+  "3/2": 3 / 2,
+  "2/3": 2 / 3,
+  "16/9": 16 / 9,
+  "21/9": 21 / 9
+};
+var Ratio = React5.forwardRef(
+  ({ ratio = 1, children, ...props }, ref) => /* @__PURE__ */ jsx36(AspectRatioPrimitive.Root, { ref, ratio, ...props, children })
+);
+Ratio.displayName = "Ratio";
 export {
+  AlertDialog,
   Badge2 as Badge,
+  BottomSheet,
   Button,
   Caption,
   Checkbox,
@@ -2784,6 +3080,7 @@ export {
   DEFAULT_LEVEL_OPTIONS,
   DEFAULT_SIZE_OPTIONS,
   DefaultButton,
+  Dialog,
   Display,
   Heading,
   ICON_LEVEL_OPTIONS,
@@ -2799,7 +3096,9 @@ export {
   Paragraph,
   Popover,
   PrimitiveCoachMark,
+  RATIO,
   Radio,
+  Ratio,
   Select,
   TEXT_LEVEL_OPTIONS,
   TEXT_SIZE_OPTIONS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "3.4.6",
+  "version": "3.4.7",
   "type": "module",
   "sideEffects": false,
   "dependencies": {
@@ -16,6 +16,7 @@
     "sonner": "2.0.7",
     "react-dom": "^19.1.0",
     "jotai": "2.18.0",
+    "vaul": "1.1.2",
     "@liner-fe/design-token-primitive": "^0.2.49",
     "@liner-fe/design-token": "^3.0.4",
     "@liner-fe/icon": "^2.0.20",