@plaidlabs/ui 0.0.1

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

@@ -0,0 +1,10 @@
+export type StepperColor = 'blue' | 'gray';
+export type StepperSize = 'medium' | 'small';
+export interface StepperProps {
+    totalSteps: number;
+    currentStep: number;
+    size: StepperSize;
+    color: StepperColor;
+    className?: string;
+}
+export default function Stepper({ totalSteps, currentStep, size, color, className, }: StepperProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Stepper from './Stepper';
+declare const meta: {
+    title: string;
+    component: typeof Stepper;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        totalSteps: number;
+        currentStep: number;
+        size: "medium";
+        color: "blue";
+    };
+    argTypes: {
+        totalSteps: {
+            control: {
+                type: "number";
+                min: number;
+            };
+            description: string;
+        };
+        currentStep: {
+            control: {
+                type: "number";
+                min: number;
+            };
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Showcase: Story;

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

@@ -0,0 +1,2 @@
+export { default as Stepper } from './Stepper.tsx';
+export type { StepperProps, StepperColor, StepperSize } from './Stepper.tsx';

package/dist/components/basic/tab/Tab.css.d.ts

@@ -0,0 +1,3 @@
+export declare const root: string;
+export declare const tabList: string;
+export declare const tab: string;

package/dist/components/basic/tab/Tab.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type TabsProps as AriaTabsProps } from 'react-aria-components';
+export interface TabItemBase {
+    id: string | number;
+    label: React.ReactNode;
+    isDisabled?: boolean;
+}
+export interface TabItemWithContent extends TabItemBase {
+    content: React.ReactNode;
+}
+export interface TabPropsWithPanel extends Omit<AriaTabsProps, 'children'> {
+    items: TabItemWithContent[];
+    withPanel?: true;
+    className?: string;
+}
+export interface TabPropsWithoutPanel extends Omit<AriaTabsProps, 'children'> {
+    items: TabItemBase[];
+    withPanel: false;
+    className?: string;
+}
+export type TabProps = TabPropsWithPanel | TabPropsWithoutPanel;
+export default function Tab({ items, withPanel, className, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/basic/tab/Tab.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Tab from './Tab';
+declare const meta: {
+    title: string;
+    component: typeof Tab;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDisabled: Story;

package/dist/components/basic/tab/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tab } from './Tab.tsx';
+export type { TabProps, TabPropsWithPanel, TabPropsWithoutPanel, TabItemBase, TabItemWithContent, } from './Tab.tsx';

package/dist/components/basic/text-area/TextArea.css.d.ts

@@ -0,0 +1,69 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    state: {
+        default: {
+            borderColor: "#f1f2f6";
+            selectors: {
+                '&:hover:not(:focus-within)': {
+                    '@media': {
+                        '(hover: hover)': {
+                            borderColor: "#cedff8";
+                        };
+                    };
+                };
+            };
+        };
+        error: {
+            borderColor: "#f1bbbb";
+            selectors: {
+                '&:hover:not(:focus-within)': {
+                    '@media': {
+                        '(hover: hover)': {
+                            borderColor: "#e98d8d";
+                        };
+                    };
+                };
+            };
+        };
+        disabled: {
+            backgroundColor: string;
+            border: string;
+        };
+        filledDisabled: {
+            backgroundColor: string;
+            border: string;
+        };
+    };
+}>;
+export declare const contentWrapper: string;
+export declare const label: string;
+export declare const labelText: import("@vanilla-extract/recipes").RuntimeFn<{
+    state: {
+        default: {};
+        error: {};
+        disabled: {
+            color: "#c5c7d2";
+        };
+        filledDisabled: {
+            color: "#c5c7d2";
+        };
+    };
+}>;
+export declare const required: string;
+export declare const textarea: string;
+export declare const textareaWithScroll: string;
+export declare const limitWrapper: string;
+export declare const limitCurrent: import("@vanilla-extract/recipes").RuntimeFn<{
+    state: {
+        default: {};
+        error: {};
+        disabled: {
+            color: "#c5c7d2";
+        };
+        filledDisabled: {
+            color: "#c5c7d2";
+        };
+    };
+}>;
+export declare const limitSeparator: string;
+export declare const limitMax: string;
+export declare const guideTextContainer: string;

package/dist/components/basic/text-area/TextArea.d.ts

@@ -0,0 +1,10 @@
+import { TextareaHTMLAttributes, ReactNode } from 'react';
+export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    label: string;
+    state?: 'default' | 'error';
+    required?: boolean;
+    guideText?: ReactNode;
+    maxLength?: number;
+}
+declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

package/dist/components/basic/text-area/TextArea.stories.d.ts

@@ -0,0 +1,42 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./TextArea.tsx").TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        label: string;
+        placeholder: string;
+        rows: number;
+    };
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        required: {
+            control: "boolean";
+        };
+        guideText: {
+            control: "text";
+        };
+        maxLength: {
+            control: "number";
+        };
+        rows: {
+            control: "number";
+        };
+        state: {
+            control: "select";
+            options: string[];
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllStates: Story;

package/dist/components/basic/text-area/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextArea.tsx';
+export type { TextAreaProps } from './TextArea.tsx';

package/dist/components/basic/text-field/TextField.css.d.ts

@@ -0,0 +1,84 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    state: {
+        default: {
+            borderColor: "#f1f2f6";
+            selectors: {
+                '&:hover:not(:focus-within)': {
+                    '@media': {
+                        '(hover: hover)': {
+                            borderColor: "#cedff8";
+                        };
+                    };
+                };
+            };
+        };
+        error: {
+            borderColor: "#f1bbbb";
+            selectors: {
+                '&:hover:not(:focus-within)': {
+                    '@media': {
+                        '(hover: hover)': {
+                            borderColor: "#e98d8d";
+                        };
+                    };
+                };
+            };
+        };
+        disabled: {
+            readonly backgroundColor: "#f7f7fa";
+            readonly border: "none";
+        };
+        filledDisabled: {
+            readonly backgroundColor: "#f7f7fa";
+            readonly border: "none";
+        };
+    };
+}>;
+export declare const contentWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+    paddingVariant: {
+        default: {
+            padding: "0.5rem 0.75rem";
+        };
+        leftIcon: {
+            padding: "0.5rem 0.75rem 0.5rem 0";
+        };
+        rightIcon: {
+            padding: "0.5rem 0 0.5rem 0.75rem";
+        };
+    };
+}>;
+export declare const label: string;
+export declare const labelText: import("@vanilla-extract/recipes").RuntimeFn<{
+    state: {
+        default: {};
+        error: {
+            color: "#989aa4";
+        };
+        disabled: {
+            color: "#c5c7d2";
+        };
+        filledDisabled: {
+            color: "#c5c7d2";
+        };
+    };
+}>;
+export declare const required: string;
+export declare const input: string;
+export declare const iconWrapper: string;
+export declare const limitWrapper: string;
+export declare const limitCurrent: import("@vanilla-extract/recipes").RuntimeFn<{
+    state: {
+        default: {};
+        error: {};
+        disabled: {
+            color: "#c5c7d2";
+        };
+        filledDisabled: {
+            color: "#c5c7d2";
+        };
+    };
+}>;
+export declare const limitSeparator: string;
+export declare const limitMax: string;
+export declare const rightContentWrapper: string;
+export declare const guideTextContainer: string;

package/dist/components/basic/text-field/TextField.d.ts

@@ -0,0 +1,12 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label: string;
+    state?: 'default' | 'error';
+    required?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    guideText?: ReactNode;
+    maxLength?: number;
+}
+declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TextField;

package/dist/components/basic/text-field/TextField.stories.d.ts

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./TextField.tsx").TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        label: string;
+        placeholder: string;
+    };
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        required: {
+            control: "boolean";
+        };
+        guideText: {
+            control: "text";
+        };
+        maxLength: {
+            control: "number";
+        };
+        state: {
+            control: "select";
+            options: string[];
+        };
+        disabled: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllStates: Story;

package/dist/components/basic/text-field/index.d.ts

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

package/dist/components/basic/toggle/Toggle.css.d.ts

@@ -0,0 +1,52 @@
+export declare const base: string;
+export declare const track: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        blue: {
+            selectors: {
+                '&[data-focus="true"]:not([data-disabled="true"])': {
+                    outline: "0.125rem solid #85aeef";
+                    outlineOffset: "0.12rem";
+                };
+            };
+        };
+        green: {
+            selectors: {
+                '&[data-focus="true"]:not([data-disabled="true"])': {
+                    outline: "0.125rem solid #80c79e";
+                    outlineOffset: "0.12rem";
+                };
+            };
+        };
+    };
+    checked: {
+        false: {
+            backgroundColor: "#dee0e7";
+        };
+        true: {};
+    };
+}>;
+export declare const thumb: import("@vanilla-extract/recipes").RuntimeFn<{
+    checked: {
+        false: {
+            transform: "translateX(0)";
+        };
+        true: {
+            transform: "translateX(1.5rem)";
+        };
+    };
+}>;
+export declare const textContainer: string;
+export declare const text: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        blue: {};
+        green: {};
+    };
+    position: {
+        left: {};
+        right: {};
+    };
+    checked: {
+        true: {};
+        false: {};
+    };
+}>;

package/dist/components/basic/toggle/Toggle.d.ts

@@ -0,0 +1,9 @@
+import { type SwitchProps as AriaSwitchProps } from 'react-aria-components';
+export type ToggleColor = 'blue' | 'green';
+export type ToggleText = 'text' | 'text_none';
+export interface ToggleProps extends Omit<AriaSwitchProps, 'children'> {
+    color: ToggleColor;
+    text?: ToggleText;
+    className?: string;
+}
+export default function Toggle({ color, text, isDisabled, className, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/basic/toggle/Toggle.stories.d.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Toggle from './Toggle.tsx';
+declare const meta: {
+    title: string;
+    component: typeof Toggle;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        color: "blue";
+        text: "text_none";
+    };
+    argTypes: {
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        text: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithText: Story;
+export declare const AllVariants: Story;

package/dist/components/basic/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Toggle.tsx';
+export type { ToggleProps, ToggleColor, ToggleText } from './Toggle.tsx';

package/dist/components/complex/dropdown/Dropdown.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
+export type DropdownSize = 'sm' | 'md';
+export type DropdownSubTextLayout = 'caption' | 'title';
+export interface DropdownProps extends Omit<AriaButtonProps, 'children'> {
+    size: DropdownSize;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+    children: React.ReactNode;
+    subText?: string;
+    subTextLayout?: DropdownSubTextLayout;
+    menuItems: Array<{
+        id: string;
+        label: string;
+        subText?: string;
+    }>;
+    onSubItemClick?: (id: string) => void;
+    isDefaultExpanded?: boolean;
+    selectedMenuItemId?: string;
+}
+export default function Dropdown({ size, isSelected, isDisabled, className, children, subText, subTextLayout, menuItems, onSubItemClick, isDefaultExpanded, selectedMenuItemId, ...props }: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/complex/dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,93 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Dropdown from './Dropdown';
+declare const meta: {
+    title: string;
+    component: typeof Dropdown;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        size: "md";
+        isSelected: false;
+        isDisabled: false;
+        children: string;
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        isSelected: {
+            control: "boolean";
+            description: string;
+        };
+        isDisabled: {
+            control: "boolean";
+            description: string;
+        };
+        subText: {
+            control: "text";
+            description: string;
+        };
+        subTextLayout: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        menuItems: {
+            control: "object";
+            description: string;
+        };
+        onSubItemClick: {
+            action: string;
+            description: string;
+        };
+        isDefaultExpanded: {
+            control: "boolean";
+            description: string;
+        };
+        selectedMenuItemId: {
+            control: "text";
+            description: string;
+        };
+        children: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * 1. 가장 기본 형태
+ */
+export declare const Basic: Story;
+/**
+ * 2. Caption 레이아웃 (하단 설명 텍스트)
+ */
+export declare const WithCaption: Story;
+/**
+ * 3. Title 레이아웃 (상단 고정 타이틀)
+ */
+export declare const WithTitle: Story;
+/**
+ * 4. Disabled 상태
+ */
+export declare const Disabled: Story;
+/**
+ * 5. Size 비교 (sm / md)
+ */
+export declare const Sizes: Story;
+/**
+ * 6. 메뉴 아이템에 SubText가 있는 경우
+ */
+export declare const MenuWithSubText: Story;
+/**
+ * 7. Interactive (최대 케이스 / 실제 사용 예)
+ * - 선택 상태 관리
+ * - Title 레이아웃
+ * - 메뉴 + 체크 아이콘
+ */
+export declare const Interactive: Story;

package/dist/components/complex/dropdown/dropdown.css.d.ts

@@ -0,0 +1,63 @@
+export declare const menuTextWrapper: string;
+export declare const menuMainText: string;
+export declare const menuSubText: string;
+export declare const dropdown: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            backgroundColor: string;
+            border: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: (string | {
+            padding: "0.375rem 0.5rem";
+        })[];
+        md: (string | {
+            padding: "0.5rem 0.5rem";
+        })[];
+    };
+    subTextLayout: {
+        none: {};
+        caption: {};
+        title: {
+            alignItems: "center";
+        };
+    };
+}>;
+export declare const menu: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            backgroundColor: string;
+            border: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {};
+        md: {};
+    };
+}>;
+export declare const textWrapper: string;
+export declare const textWrapperCaption: string;
+export declare const textWrapperTitle: string;
+export declare const mainText: string;
+export declare const titleText: string;
+export declare const bottomTitleText: string;
+export declare const captionText: string;
+export declare const arrowWrapper: string;
+export declare const arrowExpanded: string;
+export declare const checkWrapper: string;
+export declare const disclosureRoot: string;
+export declare const disclosurePanel: string;
+export declare const disclosurePanelOpen: string;
+export declare const subMenuInner: string;
+export declare const subMenuList: string;

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

@@ -0,0 +1,2 @@
+export { default } from './Dropdown.tsx';
+export type { DropdownProps, DropdownSize, DropdownSubTextLayout } from './Dropdown.tsx';