@plaidlabs/ui 0.0.7 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Plaid Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/basic/button/Button.css.d.ts

@@ -1,27 +1,27 @@
 export declare const loadingWrapper: string;
 export declare const buttonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
-        xlarge: (string | {
+        xl: (string | {
             borderRadius: "0.375rem";
             gap: "0.5rem";
         })[];
-        large: (string | {
+        lg: (string | {
             borderRadius: "0.375rem";
             gap: "0.5rem";
         })[];
-        medium: (string | {
+        md: (string | {
             borderRadius: "0.25rem";
             gap: "0.5rem";
         })[];
-        small: (string | {
+        sm: (string | {
             borderRadius: "0.25rem";
             gap: "0.5rem";
         })[];
-        xsmall: (string | {
+        xs: (string | {
             borderRadius: "0.25rem";
             gap: "0.25rem";
         })[];
-        xxsmall: (string | {
+        xxs: (string | {
             borderRadius: "0.25rem";
             gap: "0.25rem";
         })[];

package/dist/components/basic/button/Button.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
 export type ButtonVariant = 'filled' | 'outline' | 'light' | 'no_bg';
 export type ButtonColor = 'blue' | 'green' | 'red' | 'gray';
-export type ButtonSize = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type ButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ButtonIconPosition = 'none' | 'left' | 'right' | 'duo' | 'only';
 export interface ButtonProps extends Omit<AriaButtonProps, 'children'> {
     variant: ButtonVariant;

package/dist/components/basic/button/Button.stories.d.ts

@@ -10,7 +10,7 @@ declare const meta: {
     args: {
         variant: "filled";
         color: "blue";
-        size: "medium";
+        size: "md";
     };
     argTypes: {
         variant: {

package/dist/components/basic/chip/Chip.css.d.ts

@@ -18,13 +18,13 @@ export declare const chipRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
     size: {
-        large: (string | {
+        lg: (string | {
             height: "1.75rem";
         })[];
-        medium: (string | {
+        md: (string | {
             height: "1.5rem";
         })[];
-        small: (string | {
+        sm: (string | {
             height: "1.25rem";
         })[];
     };

package/dist/components/basic/chip/Chip.stories.d.ts

@@ -40,7 +40,7 @@ declare const meta: {
         children: string;
         variant: "filled";
         color: "blue";
-        size: "medium";
+        size: "md";
         shape: "round";
     };
 };

package/dist/components/basic/link/Link.css.d.ts

@@ -1,7 +1,7 @@
 export declare const link: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
-        medium: string[];
-        small: string[];
+        md: string[];
+        sm: string[];
     };
     color: {
         blue: {

package/dist/components/basic/link/Link.d.ts

@@ -1,5 +1,5 @@
 export type LinkColor = 'blue' | 'gray700' | 'gray500';
-export type LinkSize = 'medium' | 'small';
+export type LinkSize = 'md' | 'sm';
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     size: LinkSize;
     color: LinkColor;

package/dist/components/basic/link/Link.stories.d.ts

@@ -10,7 +10,7 @@ declare const meta: {
     args: {
         href: string;
         children: string;
-        size: "medium";
+        size: "md";
         color: "blue";
     };
     argTypes: {

package/dist/components/basic/stepper/Stepper.css.d.ts

@@ -11,12 +11,12 @@ export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
 export declare const stepList: string;
 export declare const stepItem: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
-        medium: {
+        md: {
             height: "2rem";
             minWidth: "2rem";
             padding: "0.5rem";
         };
-        small: {
+        sm: {
             height: "1.5rem";
             minWidth: "1.5rem";
             padding: "0.25rem";

package/dist/components/basic/stepper/Stepper.d.ts

@@ -1,5 +1,5 @@
 export type StepperColor = 'blue' | 'gray';
-export type StepperSize = 'medium' | 'small';
+export type StepperSize = 'md' | 'sm';
 export interface StepperProps {
     totalSteps: number;
     currentStep: number;

package/dist/components/basic/stepper/Stepper.stories.d.ts

@@ -10,7 +10,7 @@ declare const meta: {
     args: {
         totalSteps: number;
         currentStep: number;
-        size: "medium";
+        size: "md";
         color: "blue";
     };
     argTypes: {

package/dist/components/complex/chat-widget/ChatWidget.css.d.ts

@@ -0,0 +1,13 @@
+export declare const themeVars: {
+    mainColor: `var(--${string})`;
+    backgroundColor: `var(--${string})`;
+    userBubbleBg: `var(--${string})`;
+    userTextColor: `var(--${string})`;
+    zIndex: `var(--${string})`;
+};
+export declare const root: string;
+export declare const launcherButton: string;
+export declare const header: string;
+export declare const headerLeft: string;
+export declare const headerTitle: string;
+export declare const closeButton: string;

package/dist/components/complex/chat-widget/ChatWidget.d.ts

@@ -0,0 +1,43 @@
+export interface ChatWidgetTheme {
+    mainColor?: string;
+    backgroundColor?: string;
+    userBubbleBg?: string;
+    userTextColor?: string;
+    zIndex?: number | string;
+}
+export interface ChatWidgetHeaderConfig {
+    title?: string;
+    avatarSrc?: string;
+    avatarAlt?: string;
+}
+export interface ChatWidgetInputConfig {
+    label?: string;
+    placeholder?: string;
+    maxLength?: number;
+}
+export interface ChatWidgetProps {
+    flow: unknown;
+    onUserInput?: ChatExternalHandler;
+    settings?: unknown;
+    themes?: unknown;
+    chatbotStyles?: Record<string, unknown>;
+    theme?: ChatWidgetTheme;
+    header?: ChatWidgetHeaderConfig;
+    input?: ChatWidgetInputConfig;
+    slots?: Record<string, unknown>;
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    portal?: boolean;
+    className?: string;
+}
+export type ChatContext = Record<string, unknown>;
+export type ChatExternalHandler = (params: {
+    input: string;
+    nodeId: string | null;
+    context: ChatContext;
+}) => Promise<{
+    message?: string;
+    nextNode?: string;
+    context?: Partial<ChatContext>;
+}>;
+export default function ChatWidget({ flow, onUserInput, settings, themes, chatbotStyles, theme, header, input, slots, isOpen, onOpenChange, portal, className, }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/complex/chat-widget/ChatWidget.stories.d.ts

@@ -0,0 +1,56 @@
+import type { StoryObj } from '@storybook/react-vite';
+import ChatWidget from './ChatWidget';
+declare const meta: {
+    title: string;
+    component: typeof ChatWidget;
+    parameters: {
+        layout: string;
+        docs: {
+            story: {
+                inline: boolean;
+                iframeHeight: number;
+            };
+        };
+    };
+    tags: string[];
+    args: {
+        flow: {
+            readonly start: {
+                readonly message: "안녕하세요! 무엇을 도와드릴까요?";
+                readonly options: readonly ["주문/배송", "기타"];
+                readonly path: (params: {
+                    userInput: string;
+                }) => "waitInput" | "order";
+            };
+            readonly order: {
+                readonly message: "주문/배송 문의네요. 주문번호를 알려주세요.";
+                readonly path: "waitInput";
+            };
+            readonly waitInput: {
+                readonly message: (params: {
+                    userInput: string;
+                }) => string;
+                readonly path: "end";
+            };
+            readonly end: {
+                readonly message: "감사합니다! 필요하면 언제든 다시 불러주세요.";
+            };
+        };
+    };
+    argTypes: {
+        theme: {
+            control: "object";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+/**
+ * 사내 챗봇 케이스: Pladdy Bot
+ **/
+export declare const PladdyBot: Story;
+/**
+ * 커스텀 케이스: 브랜드 챗봇
+ **/
+export declare const Custom: Story;

package/dist/components/complex/chat-widget/chatWidgetConfig.d.ts

@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react';
+import { type ChatWidgetInputConfig, type ChatWidgetProps, type ChatWidgetTheme } from './ChatWidget';
+export type ThemeValues = {
+    mainColor: string;
+    backgroundColor: string;
+    userBubbleBg: string;
+    userTextColor: string;
+    zIndex: string;
+};
+export declare function createThemeValues(theme: ChatWidgetTheme): ThemeValues;
+export declare function createMergedSettings(settings: ChatWidgetProps['settings'], input: ChatWidgetInputConfig | undefined, themeValues: ThemeValues, sendButtonIcon: unknown): {
+    tooltip: {
+        mode: unknown;
+        text: unknown;
+    };
+    chatHistory: {
+        viewChatHistoryButtonText: string;
+        chatHistoryLineBreakText: string;
+    };
+    chatInput: {
+        enabledPlaceholderText: string;
+        characterLimit: number | undefined;
+        sendButtonIcon: unknown;
+    };
+    general: {
+        embedded: boolean;
+        showFooter: boolean;
+        primaryColor?: string | undefined;
+    };
+    device: {
+        applyMobileOptimizations: boolean;
+        desktopEnabled: boolean;
+    };
+    chatWindow: {
+        defaultOpen: boolean;
+    };
+};
+export declare function createMergedStyles(chatbotStyles: ChatWidgetProps['chatbotStyles'], themeValues: ThemeValues): Record<string, CSSProperties>;

package/dist/components/complex/chat-widget/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ChatWidget } from './ChatWidget.tsx';
+export type { ChatWidgetProps } from './ChatWidget.tsx';

package/dist/components/complex/modal/Modal.css.d.ts

@@ -2,7 +2,7 @@ export declare const overlay: string;
 export declare const dialog: string;
 export declare const content: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
-        small: {
+        sm: {
             width: "19.5rem";
             maxWidth: "19.5rem";
             minWidth: "14.5rem";
@@ -13,11 +13,11 @@ export declare const content: import("@vanilla-extract/recipes").RuntimeFn<{
                 };
             };
         };
-        medium: {
+        md: {
             width: "26rem";
             maxWidth: "26rem";
         };
-        large: {
+        lg: {
             width: "57.625rem";
             maxWidth: "57.625rem";
         };
@@ -27,9 +27,9 @@ export declare const wrapper: string;
 export declare const closeButtonWrapper: string;
 export declare const titleArea: import("@vanilla-extract/recipes").RuntimeFn<{
     size: {
-        small: {};
-        medium: {};
-        large: {};
+        sm: {};
+        md: {};
+        lg: {};
     };
 }>;
 export declare const title: import("@vanilla-extract/recipes").RuntimeFn<{

package/dist/components/complex/modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DialogProps as AriaDialogProps, ModalOverlayProps } from 'react-aria-components';
-export type ModalSize = 'small' | 'medium' | 'large';
+export type ModalSize = 'sm' | 'md' | 'lg';
 export interface ModalProps extends Omit<AriaDialogProps, 'children'> {
     size: ModalSize;
     children: React.ReactNode;

package/dist/components/index.d.ts

@@ -17,3 +17,4 @@ export * from './complex/popup/index.ts';
 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';

package/dist/icons/components/filled/IconFilledMessage2.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IconProps } from '@icons/types';
+export declare const IconFilledMessage2: React.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/icons/components/filled/index.d.ts

@@ -3,7 +3,9 @@
  *
  * 이 파일은 자동 생성됩니다. 수동으로 수정하지 마세요.
  */
+import { IconFilledMessage2 } from './IconFilledMessage2.tsx';
 import { IconOnline } from './IconOnline.tsx';
 import { IconUserProfile } from './IconUserProfile.tsx';
+export { IconFilledMessage2 };
 export { IconOnline };
 export { IconUserProfile };