@nation-a/ui 0.9.2 → 0.10.1

package/dist/styled-system/styles.css

@@ -1604,6 +1604,50 @@ 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;
+}
+
+.ov-wrap_anywhere:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  overflow-wrap: anywhere;
+}
+
+.c_content\.neutralInverse\.bold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  color: var(--colors-content-neutral-inverse-bold);
+}
+
+.bx-sh_overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  box-shadow: var(--shadows-overlay);
+}
+
+.anim_fadeIn_0\.25s_ease-out:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  animation: fadeIn 0.25s ease-out;
+}
+
+.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;
+}
+
+.trs_opacity_0\.2s_ease:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  transition: opacity 0.2s ease;
+}
+
+.td_underline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  text-decoration: underline;
+}
+
 .ai_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   align-items: center;
 }
@@ -2111,6 +2155,26 @@ html:not(#\#),body:not(#\#) {
   font-family: var(--fonts-noto-sans);
 }
 
+.bg-c_background\.neutralInverse\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: var(--colors-background-neutral-inverse-default);
+}
+
+.font-style_body\.md:not(#\#):not(#\#):not(#\#):not(#\#):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);
+}
+
 :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 {
   flex-flow: column;
 }
@@ -2287,6 +2351,22 @@ 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;
 }
@@ -2631,6 +2711,10 @@ html:not(#\#),body:not(#\#) {
   border-color: var(--colors-border-neutral-default);
 }
 
+.\[\&\:hover\]\:op_0\.8:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  opacity: 0.8;
+}
+
 .group:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .placeholder\:groupDisabled\:c_content\.static\.white\.disabled::placeholder, .group:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .placeholder\:groupDisabled\:c_content\.static\.white\.disabled[data-placeholder] {
   color: var(--colors-content-static-white-disabled);
 }

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Toast } from './index';
+declare const meta: Meta<typeof Toast>;
+export default meta;
+type Story = StoryObj<typeof Toast>;
+export declare const DefaultToast: Story;
+export declare const ToastWithAction: Story;
+export declare const ToastWithLink: Story;
+export declare const ToastWithCustomDuration: Story;

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

@@ -0,0 +1,29 @@
+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';
+    asLink?: boolean;
+};
+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>>;
+};
+export default Toast;

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

@@ -0,0 +1,24 @@
+export type ToastVariantProps = keyof typeof toastRecipe.variantMap;
+export declare const toastRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"title" | "description" | "group" | "content" | "icon" | "closeTrigger" | "root" | "actionTrigger", {
+    width: {
+        full: {
+            root: {
+                width: "100%";
+                justifyContent: "space-between";
+            };
+        };
+        fit: {
+            root: {
+                width: "fit-content";
+            };
+        };
+    };
+    asLink: {
+        true: {
+            actionTrigger: {
+                textDecoration: "underline";
+                cursor: "pointer";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,9 @@
+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/contexts/index.d.ts

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

package/dist/types/index.d.ts

@@ -1,2 +1,4 @@
 export * from './components';
 export * from './theme';
+export * from './contexts';
+export * from './utils';

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

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

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

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+/**
+ * Toast 유틸리티
+ * 실제 토스트 렌더링은 ToastProvider에서 담당
+ */
+declare const toast: {
+    queue: Array<{
+        description: string;
+        action?: {
+            label: string;
+            onClick?: () => void;
+        };
+        icon?: React.ReactNode;
+        asLink?: boolean;
+        href?: string;
+        duration?: number;
+    }>;
+    _getQueue: () => {
+        description: string;
+        action?: {
+            label: string;
+            onClick?: () => void;
+        };
+        icon?: React.ReactNode;
+        asLink?: boolean;
+        href?: string;
+        duration?: number;
+    }[];
+    show: (message: string, options?: {
+        icon?: React.ReactNode;
+        actionLabel?: string;
+        onActionClick?: () => void;
+        asLink?: boolean;
+        duration?: number;
+    }) => 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.9.2",
+  "version": "0.10.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -16,7 +16,7 @@
     "@react-spring/web": "^9.7.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@nation-a/icons": "0.1.0",
+    "@nation-a/icons": "0.2.0",
     "@nation-a/tokens": "0.2.1"
   },
   "devDependencies": {