@plaidlabs/ui 0.1.3 → 0.1.5

package/dist/components/complex/toast/Toast.css.d.ts

@@ -0,0 +1,104 @@
+export declare const region: string;
+export declare const toast: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        default: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        error: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        warning: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        info: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        success: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        loading: {
+            backgroundColor: string;
+            borderColor: "transparent";
+            borderWidth: number;
+            borderRadius: "0.25rem";
+            width: "15.25rem";
+            minWidth: "15.25rem";
+            maxWidth: "15.25rem";
+            gap: "0.625rem";
+        };
+    };
+    size: {
+        sm: {};
+        md: {};
+    };
+}>;
+export declare const content: string;
+export declare const textStack: string;
+export declare const title: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}>;
+export declare const description: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}>;
+export declare const iconWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        default: {
+            color: string;
+        };
+        error: {
+            color: string;
+        };
+        warning: {
+            color: string;
+        };
+        info: {
+            color: string;
+        };
+        success: {
+            color: string;
+        };
+        loading: {
+            color: string;
+        };
+    };
+    size: {
+        sm: {
+            width: "1rem";
+            height: "1rem";
+        };
+        md: {
+            width: "1.25rem";
+            height: "1.25rem";
+        };
+    };
+}>;
+export declare const loadingIconWrapper: string;
+export declare const loadingIcon: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            transform: "scale(1)";
+        };
+        md: {
+            transform: "scale(1.25)";
+        };
+    };
+}>;
+export declare const actionWrapper: string;
+export declare const actionButton: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}>;
+export declare const closeButton: string;

package/dist/components/complex/toast/Toast.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { UNSTABLE_ToastQueue as ToastQueue, type ToastProps, type ToastRegionProps as AriaToastRegionProps } from 'react-aria-components';
+export type ToastVariant = 'default' | 'error' | 'warning' | 'info' | 'success' | 'loading';
+export type ToastSize = 'sm' | 'md';
+export interface ToastAction {
+    label: React.ReactNode;
+    onPress?: () => void;
+}
+export interface DSYToastContent {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: ToastVariant;
+    size?: ToastSize;
+    action?: ToastAction;
+    showCloseButton?: boolean;
+}
+export declare const toastQueue: ToastQueue<DSYToastContent>;
+export declare const queue: ToastQueue<DSYToastContent>;
+export type ToastQueueOptions = Parameters<typeof toastQueue.add>[1];
+export type ToastAddContent = Omit<DSYToastContent, 'variant'> & {
+    variant?: ToastVariant;
+};
+export declare const toast: {
+    add: (content: ToastAddContent, options?: ToastQueueOptions) => string;
+    default: (content: Omit<ToastAddContent, "variant">, options?: ToastQueueOptions) => string;
+    info: (content: Omit<ToastAddContent, "variant">, options?: ToastQueueOptions) => string;
+    success: (content: Omit<ToastAddContent, "variant">, options?: ToastQueueOptions) => string;
+    warning: (content: Omit<ToastAddContent, "variant">, options?: ToastQueueOptions) => string;
+    error: (content: Omit<ToastAddContent, "variant">, options?: ToastQueueOptions) => string;
+    loading: (content: Omit<ToastAddContent, "variant">, options?: ToastQueueOptions) => string;
+    close: (key: string) => void;
+};
+export interface ToastRegionProps extends Omit<AriaToastRegionProps<DSYToastContent>, 'queue' | 'children'> {
+    className?: string;
+    queue?: ToastQueue<DSYToastContent>;
+}
+export declare function ToastRegion({ className, queue, ...props }: ToastRegionProps): import("react/jsx-runtime").JSX.Element;
+export declare function DSYToast({ className, toast, ...props }: ToastProps<DSYToastContent>): import("react/jsx-runtime").JSX.Element;
+export default DSYToast;

package/dist/components/complex/toast/Toast.stories.d.ts

@@ -0,0 +1,125 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { type ToastVariant, type ToastSize } from './Toast.tsx';
+interface ToastStoryArgs {
+    variant: ToastVariant;
+    size: ToastSize;
+    showCloseButton: boolean;
+    withDescription: boolean;
+    withAction: boolean;
+    title: string;
+    description: string;
+    timeout?: number;
+}
+declare function ToastPlayground(args: ToastStoryArgs): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof ToastPlayground;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+            story: {
+                inline: boolean;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        showCloseButton: {
+            control: "boolean";
+            description: string;
+        };
+        withDescription: {
+            control: "boolean";
+            description: string;
+        };
+        withAction: {
+            control: "boolean";
+            description: string;
+        };
+        title: {
+            control: "text";
+            description: string;
+        };
+        description: {
+            control: "text";
+            description: string;
+        };
+        timeout: {
+            control: "number";
+            description: string;
+        };
+    };
+    args: {
+        variant: "info";
+        size: "md";
+        showCloseButton: true;
+        withDescription: true;
+        withAction: false;
+        title: string;
+        description: string;
+        timeout: number;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * 1. Playground
+ * - 운영에서 가장 많이 쓰는 조합을 빠르게 확인합니다.
+ * - 설명 텍스트/액션/닫기 버튼 유무를 토글하여 확인합니다.
+ */
+export declare const Playground: Story;
+/**
+ * 2. Variant 비교
+ * - 각 상태별 컬러/아이콘 적용 상태를 확인합니다.
+ * - 기본(default)과 로딩(loading)도 함께 확인합니다.
+ */
+export declare const Variants: Story;
+/**
+ * 3. Size 비교
+ * - sm/md 사이즈 차이를 확인합니다.
+ * - 텍스트 길이 변화에 대한 여유 공간도 같이 체크합니다.
+ */
+export declare const Sizes: Story;
+/**
+ * 4. Description 없는 경우
+ * - 타이틀만 있는 짧은 알림 케이스입니다.
+ * - 액션/설명 없이도 수직 정렬이 자연스러운지 확인합니다.
+ */
+export declare const TitleOnly: Story;
+/**
+ * 5. 액션 버튼 포함
+ * - 되돌리기 등 1차 액션 제공 케이스입니다.
+ * - 액션 버튼 규격/컬러가 Figma와 일치하는지 확인합니다.
+ */
+export declare const WithAction: Story;
+/**
+ * 6. 닫기 버튼 없음
+ * - 비차단성 정보성 알림에 사용되는 케이스입니다.
+ * - 접근성상 자동 닫힘 시간을 충분히 확보하는 것을 권장합니다.
+ */
+export declare const NoCloseButton: Story;
+/**
+ * 7. 긴 텍스트 케이스
+ * - 긴 제목/설명에서 레이아웃 깨짐 여부를 확인합니다.
+ * - 줄바꿈/overflow 정책을 점검합니다.
+ */
+export declare const LongText: Story;
+/**
+ * 8. Programmatic 닫기 예시
+ * - `toast.loading()`으로 시작 후 `toast.close()`로 종료하는 흐름입니다.
+ * - 진행 중 상태 표시와 사용자 취소 흐름을 검증합니다.
+ */
+export declare const ProgrammaticDismiss: Story;

package/dist/components/complex/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Toast, ToastRegion, toastQueue, queue, toast } from './Toast.tsx';
+export type { ToastVariant, ToastSize, ToastAction, DSYToastContent, ToastQueueOptions, ToastAddContent, ToastRegionProps, } from './Toast.tsx';

package/dist/components/index.d.ts

@@ -20,3 +20,4 @@ export * from './basic/bottom-tab/index.ts';
 export * from './basic/page-header/index.ts';
 export * from './basic/tab/index.ts';
 export * from './complex/chat-widget/index.ts';
+export * from './complex/toast/index.ts';