@liner-fe/prism 3.1.0 → 3.1.1

package/lib/index.css

@@ -463,134 +463,99 @@
 }
 
 /* esbuild-sass-plugin:css-chunk:src/components/Toast/style.module.scss */
-._Root_1el8w_1 {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 16px;
-  border-radius: 8px;
-  background-color: var(--inverse-container-static-high);
-  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
-  box-sizing: border-box;
-  min-width: 350px;
-  min-height: 70px;
-  width: fit-content;
-  max-width: 400px;
+@keyframes _hide_5dhgy_1 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
-@media (max-width: 600px) {
-  ._Root_1el8w_1 {
-    width: 100%;
-    min-width: unset;
-    max-width: calc(100vw - 40px);
+@keyframes _slideIn_5dhgy_1 {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
   }
 }
-._Icon_1el8w_23 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+@keyframes _swipeOut_5dhgy_1 {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+._Icon_5dhgy_25 {
   width: fit-content;
   height: 24px;
 }
-._Content_1el8w_32 {
+@media (max-width: 360px) {
+  ._TitleText_5dhgy_31 {
+    max-width: 227px;
+  }
+}
+._ToastViewport_5dhgy_36 {
+  position: fixed;
+  top: 29px;
+  left: 50%;
+  right: 0;
+  transform: translateX(-50%);
   display: flex;
   flex-direction: column;
-  gap: var(--lp-sys-gap-positive-100);
-  flex: 1;
-  min-width: 0;
-}
-._Content_1el8w_32 p {
+  align-items: center;
+  gap: 8px;
   margin: 0;
-  padding: 0;
+  list-style: none;
+  z-index: 2147483647;
+  outline: none;
+  padding-left: 0;
+  max-width: 400px;
+  width: fit-content;
+}
+@media (max-width: 600px) {
+  ._ToastViewport_5dhgy_36 {
+    width: calc(100vw - 40px);
+  }
 }
-._Actions_1el8w_44 {
+._ToastRoot_5dhgy_60 {
+  background-color: var(--inverse-container-static-high);
+  border-radius: 8px;
+  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.2509803922);
+  padding: 16px;
   display: flex;
   align-items: center;
-  gap: var(--lp-sys-gap-positive-200);
-  flex-shrink: 0;
-}
-._Spinner_1el8w_51 {
-  display: inline-block;
-  position: relative;
-  width: 24px;
-  height: 24px;
-  color: var(--inverse-label-static-primary);
-}
-._Spinner_1el8w_51 div {
-  transform-origin: 12px 12px;
-  animation: _lds-spinner_1el8w_1 1.2s linear infinite;
-}
-._Spinner_1el8w_51 div::after {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 1px;
-  left: 11px;
-  width: 2px;
-  height: 5.5px;
-  border-radius: 20%;
-  background: currentColor;
-}
-._Spinner_1el8w_51 div:nth-child(1) {
-  transform: rotate(0deg);
-  animation-delay: -1.2s;
-}
-._Spinner_1el8w_51 div:nth-child(2) {
-  transform: rotate(30deg);
-  animation-delay: -1.1s;
-}
-._Spinner_1el8w_51 div:nth-child(3) {
-  transform: rotate(60deg);
-  animation-delay: -1s;
-}
-._Spinner_1el8w_51 div:nth-child(4) {
-  transform: rotate(90deg);
-  animation-delay: -0.9s;
-}
-._Spinner_1el8w_51 div:nth-child(5) {
-  transform: rotate(120deg);
-  animation-delay: -0.8s;
-}
-._Spinner_1el8w_51 div:nth-child(6) {
-  transform: rotate(150deg);
-  animation-delay: -0.7s;
+  width: fit-content;
+  gap: 6px;
 }
-._Spinner_1el8w_51 div:nth-child(7) {
-  transform: rotate(180deg);
-  animation-delay: -0.6s;
+@media (max-width: 600px) {
+  ._ToastRoot_5dhgy_60 {
+    width: 100%;
+  }
 }
-._Spinner_1el8w_51 div:nth-child(8) {
-  transform: rotate(210deg);
-  animation-delay: -0.5s;
+._ToastTitle_5dhgy_76 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--lp-sys-gap-positive-300);
 }
-._Spinner_1el8w_51 div:nth-child(9) {
-  transform: rotate(240deg);
-  animation-delay: -0.4s;
+._ToastRoot_5dhgy_60[data-state=open] {
+  animation: _slideIn_5dhgy_1 0.5s cubic-bezier(0.16, 1, 0.3, 1);
 }
-._Spinner_1el8w_51 div:nth-child(10) {
-  transform: rotate(270deg);
-  animation-delay: -0.3s;
+._ToastRoot_5dhgy_60[data-state=closed] {
+  animation: _hide_5dhgy_1 300ms ease-in;
 }
-._Spinner_1el8w_51 div:nth-child(11) {
-  transform: rotate(300deg);
-  animation-delay: -0.2s;
+._ToastRoot_5dhgy_60[data-swipe=move] {
+  transform: translateY(var(--radix-toast-swipe-move-y));
 }
-._Spinner_1el8w_51 div:nth-child(12) {
-  transform: rotate(330deg);
-  animation-delay: -0.1s;
+._ToastRoot_5dhgy_60[data-swipe=cancel] {
+  transform: translateX(0);
+  transition: transform 200ms ease-out;
 }
-@keyframes _lds-spinner_1el8w_1 {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  ._Spinner_1el8w_51 div {
-    animation: none;
-  }
+._ToastRoot_5dhgy_60[data-swipe=end] {
+  animation: _swipeOut_5dhgy_1 100ms ease-out;
 }
 
 /* esbuild-sass-plugin:css-chunk:src/components/Typography/Set/style.module.scss */
@@ -1517,6 +1482,159 @@
   margin-left: var(--lp-sys-padding-component-150);
 }
 
+/* esbuild-sass-plugin:css-chunk:src/components/Snackbar/style.module.scss */
+._Viewport_1q9l5_1 {
+  --viewport-padding: 25px;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--viewport-padding);
+  gap: 10px;
+  max-width: 400px;
+  margin: 0;
+  list-style: none;
+  z-index: 2147483647;
+  outline: none;
+}
+@media (max-width: 500px) {
+  ._Viewport_1q9l5_1 {
+    max-width: calc(100vw - 50px);
+  }
+}
+._ViewportRight_1q9l5_21 {
+  right: var(--right-distance, 0px);
+}
+._ViewportLeft_1q9l5_25 {
+  left: var(--left-distance, 0px);
+}
+._extendedContainer_1q9l5_29 {
+  min-width: 320px;
+}
+._NavigationWrapper_1q9l5_33 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+._Wrapper_1q9l5_40 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+._Root_1q9l5_46 {
+  padding: var(--lp-sys-padding-component-400);
+  border-radius: var(--lp-sys-radius-m);
+  background: var(--inverse-container-static-high);
+  position: relative;
+}
+._Root_1q9l5_46:hover ._CloseButton_1q9l5_52 {
+  display: flex !important;
+}
+._CloseButton_1q9l5_52 {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  display: none !important;
+}
+._Content_1q9l5_63 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lp-sys-gap-positive-100);
+}
+._MarginRight12_1q9l5_69 {
+  margin-right: var(--lp-pri-size-12);
+}
+._ContentWrapper_1q9l5_73 {
+  display: flex;
+  align-items: center;
+  gap: var(--lp-sys-gap-positive-200);
+}
+._gap300_1q9l5_79 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lp-sys-gap-positive-300);
+}
+._minWidth32_1q9l5_85 {
+  min-width: 32px;
+  min-height: 32px;
+}
+._minWidth24_1q9l5_90 {
+  min-width: 24px;
+  min-height: 24px;
+}
+._JustifyEnd_1q9l5_95 {
+  justify-content: end;
+}
+._Root_1q9l5_46[data-state=open] {
+  animation: _slideIn_1q9l5_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+._Root_1q9l5_46[data-state=closed] {
+  animation: _hide_1q9l5_1 100ms ease-in;
+}
+._Root_1q9l5_46[data-swipe=move] {
+  transform: translateX(var(--radix-toast-swipe-move-x));
+}
+._Root_1q9l5_46[data-swipe=cancel] {
+  transform: translateX(0);
+  transition: transform 200ms ease-out;
+}
+._Root_1q9l5_46[data-swipe=end] {
+  animation: _swipeOut_1q9l5_1 100ms ease-out;
+}
+._ViewportLeft_1q9l5_25 ._Root_1q9l5_46[data-state=open] {
+  animation: _slideInLeft_1q9l5_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+._ViewportLeft_1q9l5_25 ._Root_1q9l5_46[data-swipe=end] {
+  animation: _swipeOutLeft_1q9l5_1 100ms ease-out;
+}
+@keyframes _hide_1q9l5_1 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes _slideIn_1q9l5_1 {
+  from {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes _slideInLeft_1q9l5_1 {
+  from {
+    transform: translateX(calc(-100% - var(--viewport-padding)));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes _swipeOut_1q9l5_1 {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+}
+@keyframes _swipeOutLeft_1q9l5_1 {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(-100% - var(--viewport-padding)));
+  }
+}
+
+/* esbuild-sass-plugin:css-chunk:src/components/Snackbar/SnackbarIcon/style.module.scss */
+._container_1jxdi_1 {
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
 /* esbuild-sass-plugin:css-chunk:src/components/TextButton/style.module.scss */
 ._button_zsyf9_1 {
   position: relative;
@@ -1576,6 +1694,18 @@
   justify-content: center;
 }
 
+/* esbuild-sass-plugin:css-chunk:src/components/Snackbar/SnackbarButton/style.module.scss */
+._Container_4sip5_1 {
+  display: flex;
+  align-items: center;
+  gap: var(--lp-sys-gap-positive-400);
+  padding: 0 4px;
+  flex-shrink: 0;
+}
+._button_4sip5_9 p {
+  margin: 0;
+}
+
 /* esbuild-sass-plugin:css-chunk:src/components/coach-mark/primitive/style.module.scss */
 ._anchor_1d9jc_1 {
   transform: rotate(270deg) translateX(7px);

package/lib/index.d.ts

@@ -1,13 +1,14 @@
 import { SystemKeys, TypographyCaptionPrefix, TypographyParagraphPrefix, TypographyHeadingPrefix, TypographyTitlePrefix, TypographyDisplayPrefix, BasicColorType } from '@liner-fe/design-token-primitive';
 import * as react from 'react';
-import react__default, { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, ComponentProps, LiHTMLAttributes, MouseEventHandler } from 'react';
+import react__default, { ButtonHTMLAttributes, RefAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, ComponentProps, LiHTMLAttributes, MouseEventHandler } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import { IconProps, IconComponentType } from '@liner-fe/icon';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Toast, 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 * 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 * as jotai from 'jotai';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
 import { IllustProps } from '@liner-fe/illust';
@@ -54,38 +55,40 @@ type ButtonProps = DefaultButtonProps;
 declare const DefaultButton: react.ForwardRefExoticComponent<DefaultButtonProps & react.RefAttributes<HTMLButtonElement>>;
 declare const Button: react.ForwardRefExoticComponent<DefaultButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-/**
- * 공개 API 시맨틱 타입.
- * - 'default': 아이콘 없음
- * - 'success', 'error', 'caution': 각 시맨틱 아이콘 표시
- * - 'promise': loading 아이콘 표시 (toast.promise() 내부에서만 사용)
- */
-type ToastType = 'default' | 'success' | 'error' | 'caution' | 'promise';
-type ToastActionType = {
-    label: string;
-    onClick: () => void;
-};
-type ToastOptions = {
-    description?: string;
-    action?: ToastActionType;
-    id?: string | number;
-    duration?: number;
-};
-type PromiseToastOptions<T> = {
-    loading: string;
-    success: string | ((data: T) => string);
-    error: string | ((error: unknown) => string);
-    description?: string;
-};
-declare const toast: ((title: string, options?: ToastOptions) => string | number) & {
-    success: (title: string, options?: ToastOptions) => string | number;
-    error: (title: string, options?: ToastOptions) => string | number;
-    caution: (title: string, options?: ToastOptions) => string | number;
-    promise: <T>(promise: Promise<T>, options: PromiseToastOptions<T>) => string | number;
-    dismiss: (id?: number | string) => string | number;
-};
+type ToastProps$1 = Toast.ToastProps;
+
+interface IToastBase extends ToastProps$1, RefAttributes<HTMLLIElement> {
+    toastId: number;
+    message: string;
+    timer: number;
+    isLoading?: boolean;
+}
+interface IToastIcon {
+    icon: {
+        icon: IconComponentType;
+    } & Pick<IconProps, 'fill' | 'type' | 'fillType'>;
+    button?: never;
+}
+interface IToastButton {
+    icon?: never;
+    button: {
+        onClick: () => void;
+        label: string;
+    };
+}
+type ToastProp = IToastBase & (IToastIcon | IToastButton);
 declare const Toaster: () => react_jsx_runtime.JSX.Element;
 
+type StrictOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+declare const useToast: () => {
+    open: (toast: StrictOmit<ToastProp, "toastId" | "timer">) => {
+        toastId: number;
+    };
+    endLoading: (toastId: number) => void;
+    setMessage: (toastId: number, message: string) => void;
+};
+
 interface ITypographyCommon<T extends HTMLElement = HTMLParagraphElement> extends Omit<HTMLAttributes<T>, 'color'>, WithHTMLAsProps {
     color?: SystemKeys;
 }
@@ -418,6 +421,57 @@ declare const List: (({ children, className, ...props }: ListRootProps) => react
     Item: ({ value, text, disabled, icon, onClick }: ItemProps) => react_jsx_runtime.JSX.Element;
 };
 
+type ToastProps = Toast.ToastProps;
+interface ISnackbarBase extends ToastProps {
+    title: string;
+    description?: string;
+    position?: 'left' | 'right';
+    timer?: number;
+}
+interface ButtonType {
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    text: string;
+}
+interface ISnackbarBasic {
+    kind?: 'basic';
+    icon?: {
+        icon: IconComponentType;
+    } & Pick<IconProps, 'fill' | 'type' | 'fillType'>;
+    button?: {
+        text?: ButtonType;
+        basic?: ButtonType;
+    };
+}
+interface ISnackbarNavigation {
+    kind: 'navigation';
+    button: {
+        onClick: () => void;
+    };
+}
+interface ISnackbarExtended {
+    kind: 'extended';
+    button?: {
+        text?: ButtonType;
+        basic?: ButtonType;
+    };
+}
+type SnackbarProp = ISnackbarBase & (ISnackbarBasic | ISnackbarNavigation | ISnackbarExtended);
+type SnackbarPropWithId = SnackbarProp & {
+    snackbarId: number;
+};
+
+declare const Snackbar: () => react_jsx_runtime.JSX.Element;
+declare const SingleSnackbar: (props: SnackbarPropWithId & {
+    position: "left" | "right";
+}) => react_jsx_runtime.JSX.Element;
+
+declare const snackbarAtom: jotai.PrimitiveAtom<SnackbarPropWithId[]> & {
+    init: SnackbarPropWithId[];
+};
+declare const useSnackbar: () => {
+    open: (info: SnackbarProp) => void;
+};
+
 declare const defaultLabelVariants: (props?: ({
     level?: "primary" | "secondary" | undefined;
     position?: "right" | "top" | undefined;
@@ -604,4 +658,4 @@ 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 BaseCoachMarkContentProps, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, 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, Label, List, Loading, type LoadingLevelType, Logo, 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 };
+export { Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, type BaseCoachMarkContentProps, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, 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, Label, List, Loading, type LoadingLevelType, Logo, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, Radio, Select, type SelectItemProps, type SelectProps, SingleSnackbar, Snackbar, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, snackbarAtom, useSnackbar, useToast };