@nation-a/ui 0.11.4 → 0.11.7

package/dist/styled-system/styles.css

@@ -1616,14 +1616,6 @@ html:not(#\#),body:not(#\#) {
   color: currentcolor;
 }
 
-.min-w_6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  min-width: var(--sizes-6);
-}
-
-.min-h_6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  min-height: var(--sizes-6);
-}
-
 .max-w_328px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   max-width: 328px;
 }
@@ -1636,24 +1628,20 @@ html:not(#\#),body:not(#\#) {
   color: var(--colors-content-neutral-inverse-bold);
 }
 
-.anim_fadeIn_0\.25s_ease-out:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  animation: fadeIn 0.25s ease-out;
+.px_3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding-inline: var(--spacing-3);
 }
 
-.trf_translateY\(20px\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  transform: translateY(20px);
-}
-
-.trs_transform_0\.25s_ease-out:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  transition: transform 0.25s ease-out;
+.td_underline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  text-decoration: underline;
 }
 
-.trs_opacity_0\.2s_ease:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  transition: opacity 0.2s ease;
+.min-w_6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  min-width: var(--sizes-6);
 }
 
-.td_underline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  text-decoration: underline;
+.min-h_6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  min-height: var(--sizes-6);
 }
 
 .ai_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2183,16 +2171,8 @@ html:not(#\#),body:not(#\#) {
   font-style: body.md;
 }
 
-.pr_4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding-right: var(--spacing-4);
-}
-
-.pl_3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding-left: var(--spacing-3);
-}
-
-.ml_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  margin-left: var(--spacing-2);
+.ml_-1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  margin-left: calc(var(--spacing-1) * -1);
 }
 
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:flex-flow_column,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:flex-flow_column,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:flex-flow_column {
@@ -2375,22 +2355,6 @@ html:not(#\#),body:not(#\#) {
   background: var(--colors-background-neutral-selected);
 }
 
-.\[\&\[data-state\=\"open\"\]\]\:anim_slide-in_0\.4s_cubic-bezier\(0\.05\,_0\.7\,_0\.1\,_1\.0\)[data-state="open"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  animation: slide-in 0.4s cubic-bezier(0.05, 0.7, 0.1, 1.0);
-}
-
-.\[\&\[data-state\=\"open\"\]\]\:trf_translateY\(0px\)[data-state="open"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  transform: translateY(0px);
-}
-
-.\[\&\[data-state\=\"closed\"\]\]\:anim_slide-out_0\.2s_cubic-bezier\(0\.3\,_0\.0\,_0\.8\,_0\.15\)[data-state="closed"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  animation: slide-out 0.2s cubic-bezier(0.3, 0.0, 0.8, 0.15);
-}
-
-.\[\&\[data-state\=\"closed\"\]\]\:trf_translateY\(64px\)[data-state="closed"]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  transform: translateY(64px);
-}
-
 :root:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:ai_center,.light:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .light\:ai_center,.dark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .dark\:ai_center {
   align-items: center;
 }

package/dist/types/components/Toast/index.d.ts

@@ -1,29 +1,51 @@
-import { Assign } from '@ark-ui/react';
-import { Toast as ArkToast } from '@ark-ui/react/toast';
-import { ComponentProps, HTMLStyledProps } from 'styled-system/types';
-import { default as React } from 'react';
-export type ToastProps = ComponentProps<typeof Root>;
-type ToastRecipeVariants = {
-    width?: 'full' | 'fit';
+import { ReactNode } from 'react';
+export interface ToastProps {
+    description: string;
+    option?: {
+        icon?: ReactNode;
+        actionLabel?: string;
+        onActionClick?: () => void;
+        duration?: number;
+        asLink?: boolean;
+        disableCloseOnActionClick?: boolean;
+    };
+}
+interface ToastComponent extends React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>> {
+    Root: typeof Root;
+    Content: typeof Content;
+    Description: typeof Description;
+    Icon: typeof Icon;
+    ActionTrigger: typeof ActionTrigger;
+    Toaster: typeof Toaster;
+    show: (description: ToastProps['description'], option?: ToastProps['option']) => void;
+    error: (description: ToastProps['description'], option?: ToastProps['option']) => void;
+}
+declare const Root: import('react').ForwardRefExoticComponent<{
+    children: ReactNode;
+    className?: string;
+    width?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+declare const Content: import('react').ForwardRefExoticComponent<{
+    children: ReactNode;
+    className?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+declare const Description: import('react').ForwardRefExoticComponent<{
+    children: ReactNode;
+    className?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+declare const Icon: import('react').ForwardRefExoticComponent<{
+    icon?: ReactNode;
+    className?: string;
+} & import('react').RefAttributes<HTMLDivElement>>;
+declare const ActionTrigger: import('react').ForwardRefExoticComponent<{
+    onClick: () => void;
+    children: ReactNode;
+    className?: string;
     asLink?: boolean;
+} & import('react').RefAttributes<HTMLButtonElement | null>>;
+declare const Toaster: {
+    (): import('react').ReactPortal;
+    displayName: string;
 };
-type RootProps = Assign<HTMLStyledProps<'div'>, ArkToast.RootProps> & ToastRecipeVariants;
-declare const Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type ActionTriggerProps = Assign<HTMLStyledProps<'button'>, ArkToast.ActionTriggerProps> & {
-    asLink?: boolean;
-    href?: string;
-};
-export declare const ActionTrigger: React.ForwardRefExoticComponent<Omit<ActionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export declare const Description: React.ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"div">, ArkToast.DescriptionProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Content: React.ForwardRefExoticComponent<Omit<HTMLStyledProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Icon: React.ForwardRefExoticComponent<Omit<HTMLStyledProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { ToastContext as Context, Toaster, createToaster, type ToastContextProps as ContextProps, type ToasterProps, } from '@ark-ui/react/toast';
-declare const Toast: {
-    Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    ActionTrigger: React.ForwardRefExoticComponent<Omit<ActionTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<HTMLStyledProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Description: React.ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"div">, ArkToast.DescriptionProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Toaster: React.ForwardRefExoticComponent<import('@ark-ui/react').ToasterProps & React.RefAttributes<HTMLDivElement>>;
-    Icon: React.ForwardRefExoticComponent<Omit<HTMLStyledProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>>;
-};
+declare const Toast: ToastComponent;
 export default Toast;

package/dist/types/components/Toast/toast.recipe.d.ts

@@ -1,5 +1,5 @@
 export type ToastVariantProps = keyof typeof toastRecipe.variantMap;
-export declare const toastRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "group" | "content" | "icon" | "closeTrigger" | "root" | "actionTrigger", {
+export declare const toastRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"description" | "content" | "icon" | "root" | "actionTrigger", {
     width: {
         full: {
             root: {

package/dist/types/components/index.d.ts

@@ -10,4 +10,5 @@ export { Portal, type PortalProps } from '@ark-ui/react';
 export { default as Input, type InputProps } from './Input';
 export { default as TextArea, type TextAreaProps } from './TextArea';
 export { default as Tabs, type TabsProps } from './Tabs';
+export { default as Toast, type ToastProps } from './Toast';
 export * from './Layout';

package/dist/types/contexts/index.d.ts

@@ -1 +1 @@
-export { default as ToastProvider } from './ToastProvider';
+export {};

package/dist/types/utils/index.d.ts

@@ -1 +1 @@
-export { default as toast } from './toast';
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.11.4",
+  "version": "0.11.7",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -18,6 +18,7 @@
     "motion": "^12.6.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.5.2",
     "@nation-a/icons": "0.2.0",
     "@nation-a/tokens": "0.2.1"
   },

package/dist/types/contexts/ToastProvider.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * 토스트 UI 렌더링을 담당하는 컴포넌트
- * 앱의 루트 레벨(_app.tsx)에 배치 필수!
- */
-export declare const ToastProvider: ({ children }: {
-    children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ToastProvider;

package/dist/types/hooks/useBottomSheet.d.ts

@@ -1,20 +0,0 @@
-interface BottomSheetHookProps {
-    isOpen: boolean;
-    onOpen: (() => void) | undefined;
-    onClose: (() => void) | undefined;
-    snapPercent: {
-        min: number;
-        max: number | 'INNER_HEIGHT';
-    };
-    expendOnContentDrag: boolean;
-}
-declare const useBottomSheet: (props: BottomSheetHookProps) => {
-    bottomSheetRef: import('react').RefObject<HTMLDivElement>;
-    contentRef: import('react').RefObject<HTMLDivElement>;
-    snapToMax: () => void;
-    snapToMin: () => void;
-    springs: {
-        transform: import('@react-spring/web').SpringValue<string>;
-    };
-};
-export default useBottomSheet;

package/dist/types/utils/toast.d.ts

@@ -1,57 +0,0 @@
-import { default as React } from 'react';
-type ToastData = {
-    description: string;
-    action?: {
-        label: string;
-        onClick?: () => void;
-    };
-    icon?: React.ReactNode;
-    asLink?: boolean;
-    href?: string;
-    duration?: number;
-};
-type ToastOptions = {
-    icon?: React.ReactNode;
-    actionLabel?: string;
-    onActionClick?: () => void;
-    asLink?: boolean;
-    duration?: number;
-};
-/**
- * Toast 유틸리티
- * 실제 토스트 렌더링은 ToastProvider에서 담당
- */
-declare const toast: {
-    queue: ToastData[];
-    _getQueue: () => ToastData[];
-    /**
-     * ToastProvider가 준비되었는지 확인하는 상태
-     */
-    isReady: boolean;
-    /**
-     * 대기 중인 토스트 메시지 큐
-     */
-    pendingToasts: Array<[string, ToastOptions | undefined]>;
-    /**
-     * ToastProvider에서 호출하여 준비 상태를 설정
-     */
-    _setReady: () => void;
-    show: (message: string, options?: ToastOptions) => void;
-    success: (message: string, options?: {
-        icon?: React.ReactNode;
-        duration?: number;
-    }) => void;
-    error: (message: string, options?: {
-        icon?: React.ReactNode;
-        duration?: number;
-    }) => void;
-    warning: (message: string, options?: {
-        icon?: React.ReactNode;
-        duration?: number;
-    }) => void;
-    info: (message: string, options?: {
-        icon?: React.ReactNode;
-        duration?: number;
-    }) => void;
-};
-export default toast;