@plaidlabs/ui 0.0.1

package/dist/components/basic/guide-text/GuideText.stories.d.ts

@@ -0,0 +1,34 @@
+import type { StoryObj } from '@storybook/react-vite';
+import GuideText from './GuideText';
+declare const meta: {
+    title: string;
+    component: typeof GuideText;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        color: "gray";
+        icon: undefined;
+        children: string;
+    };
+    argTypes: {
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        icon: {
+            control: false;
+            description: string;
+        };
+        children: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Showcase: Story;

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

@@ -0,0 +1,2 @@
+export { default as GuideText } from './GuideText.tsx';
+export type { GuideTextProps, GuideTextColor } from './GuideText.tsx';

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

@@ -0,0 +1,17 @@
+export declare const link: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        medium: string[];
+        small: string[];
+    };
+    color: {
+        blue: {
+            color: "#0c5dde";
+        };
+        gray700: {
+            color: "#3e3f46";
+        };
+        gray500: {
+            color: "#6e7078";
+        };
+    };
+}>;

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

@@ -0,0 +1,11 @@
+export type LinkColor = 'blue' | 'gray700' | 'gray500';
+export type LinkSize = 'medium' | 'small';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    size: LinkSize;
+    color: LinkColor;
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+    external?: boolean;
+}
+export default function Link({ size, color, href, children, className, external, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Link from './Link';
+declare const meta: {
+    title: string;
+    component: typeof Link;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        href: string;
+        children: string;
+        size: "medium";
+        color: "blue";
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        href: {
+            control: "text";
+            description: string;
+        };
+        external: {
+            control: "boolean";
+            description: string;
+        };
+        children: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Showcase: Story;

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

@@ -0,0 +1,2 @@
+export { default as Link } from './Link.tsx';
+export type { LinkProps, LinkColor, LinkSize } from './Link.tsx';

package/dist/components/basic/lnb-item/LnbItem.css.d.ts

@@ -0,0 +1,54 @@
+export declare const lnbItem: import("@vanilla-extract/recipes").RuntimeFn<{
+    state: {
+        default: (string | {
+            selectors: {
+                '&:hover:not([data-selected="true"])': {
+                    backgroundColor: "#f7f7fa";
+                };
+            };
+        })[];
+        selected: (string | {
+            backgroundColor: "#f3f7fd";
+            color: "#0c5dde";
+        })[];
+    };
+    icon: {
+        left: {};
+        none: {};
+    };
+    arrow: {
+        right: {};
+        none: {};
+    };
+    size: {
+        item: {};
+        option: {
+            height: "2.375rem";
+            backgroundColor: "#ffffff";
+            color: "#53545c";
+            selectors: {
+                '&:hover:not([data-selected="true"])': {
+                    backgroundColor: "#f7f7fa";
+                    color: "#53545c";
+                };
+                '&[data-selected="true"]': {
+                    backgroundColor: "#f3f7fd";
+                    color: "#0c5dde";
+                    ':hover': {
+                        backgroundColor: string;
+                        color: string;
+                    };
+                };
+            };
+        };
+    };
+}>;
+export declare const iconWrapper: string;
+export declare const textWrapper: string;
+export declare const arrowWrapper: string;
+export declare const arrowExpanded: 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/basic/lnb-item/LnbItem.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type ButtonProps as AriaButtonProps } from 'react-aria-components';
+export type LnbItemSize = 'item' | 'option';
+export type LnbItemIcon = 'left' | 'none';
+export type LnbItemArrow = 'right' | 'none';
+export interface LnbItemProps extends Omit<AriaButtonProps, 'children'> {
+    size?: LnbItemSize;
+    icon?: React.ReactNode;
+    iconPosition?: LnbItemIcon;
+    arrow?: LnbItemArrow;
+    isSelected?: boolean;
+    className?: string;
+    children: React.ReactNode;
+    menuItems?: Array<{
+        id: string;
+        label: string;
+        icon?: React.ReactNode;
+    }>;
+    onSubItemClick?: (id: string) => void;
+    isDefaultExpanded?: boolean;
+}
+export default function LnbItem({ size, icon, iconPosition, arrow, isSelected, className, children, menuItems, onSubItemClick, isDefaultExpanded, onPress, ...props }: LnbItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/basic/lnb-item/LnbItem.stories.d.ts

@@ -0,0 +1,59 @@
+import type { StoryObj } from '@storybook/react-vite';
+import LnbItem from './LnbItem';
+declare const meta: {
+    title: string;
+    component: typeof LnbItem;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        size: "item";
+        iconPosition: "none";
+        arrow: "none";
+        isSelected: false;
+        children: string;
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        iconPosition: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        arrow: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        isSelected: {
+            control: "boolean";
+            description: string;
+        };
+        menuItems: {
+            control: "object";
+            description: string;
+        };
+        onSubItemClick: {
+            action: string;
+            description: string;
+        };
+        isDefaultExpanded: {
+            control: "boolean";
+            description: string;
+        };
+        children: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InteractiveTest: Story;
+export declare const SelectionExample: Story;

package/dist/components/basic/lnb-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './LnbItem.tsx';
+export type { LnbItemProps, LnbItemSize, LnbItemIcon, LnbItemArrow } from './LnbItem.tsx';

package/dist/components/basic/loading/Loading.css.d.ts

@@ -0,0 +1,70 @@
+export declare const spinner: string;
+export declare const spinnerSize: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        small: {
+            width: "1rem";
+            height: "1rem";
+            borderWidth: "0.0625rem";
+        };
+        medium: {
+            width: "1.5rem";
+            height: "1.5rem";
+            borderWidth: "0.125rem";
+        };
+        large: {
+            width: "2rem";
+            height: "2rem";
+            borderWidth: "0.1875rem";
+        };
+        xlarge: {
+            width: "2.5rem";
+            height: "2.5rem";
+            borderWidth: "0.1875rem";
+        };
+    };
+}>;
+export declare const track: string;
+export declare const fill: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        blue: {
+            borderLeftColor: "#0c5dde";
+            '@media': {
+                '(prefers-color-scheme: dark)': {
+                    borderLeftColor: "#558ee8";
+                };
+            };
+        };
+        green: {
+            borderLeftColor: "#00903d";
+            '@media': {
+                '(prefers-color-scheme: dark)': {
+                    borderLeftColor: "#66bc8b";
+                };
+            };
+        };
+        yellow: {
+            borderLeftColor: "#f6bd00";
+            '@media': {
+                '(prefers-color-scheme: dark)': {
+                    borderLeftColor: "#f8ca33";
+                };
+            };
+        };
+        red: {
+            borderLeftColor: "#d21b1b";
+            '@media': {
+                '(prefers-color-scheme: dark)': {
+                    borderLeftColor: "#e05f5f";
+                };
+            };
+        };
+        gray: {
+            borderLeftColor: "#989aa4";
+            '@media': {
+                '(prefers-color-scheme: dark)': {
+                    borderLeftColor: "#dee0e7";
+                };
+            };
+        };
+    };
+}>;

package/dist/components/basic/loading/Loading.d.ts

@@ -0,0 +1,9 @@
+export type LoadingSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type LoadingColor = 'blue' | 'green' | 'yellow' | 'red' | 'gray';
+export interface LoadingProps {
+    size: LoadingSize;
+    color: LoadingColor;
+    'aria-label'?: string;
+    className?: string;
+}
+export default function Loading({ size, color, 'aria-label': ariaLabel, className, }: LoadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/basic/loading/Loading.stories.d.ts

@@ -0,0 +1,34 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Loading from './Loading.tsx';
+declare const meta: {
+    title: string;
+    component: typeof Loading;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        'aria-label': {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllVariants: Story;
+export declare const LightMode: Story;
+export declare const DarkMode: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;

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

@@ -0,0 +1,2 @@
+export { default as Loading } from './Loading.tsx';
+export type { LoadingProps, LoadingSize, LoadingColor } from './Loading.tsx';

package/dist/components/basic/notice/Notice.css.d.ts

@@ -0,0 +1,27 @@
+export declare const notice: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        gray: {
+            backgroundColor: "#f7f7fa";
+            color: "#6e7078";
+        };
+        blue: {
+            backgroundColor: "#0c5dde0d";
+            color: "#0c5dde";
+        };
+        red: {
+            backgroundColor: "#d21b1b0d";
+            color: "#d21b1b";
+        };
+        green: {
+            backgroundColor: "#00903d0d";
+            color: "#00903d";
+        };
+        yellow: {
+            backgroundColor: "#f6bd000d";
+            color: "#f6bd00";
+        };
+    };
+}>;
+export declare const icon: string;
+export declare const text: string;
+export declare const time: string;

package/dist/components/basic/notice/Notice.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type NoticeColor = 'gray' | 'blue' | 'red' | 'green' | 'yellow';
+export interface NoticeProps extends React.HTMLAttributes<HTMLDivElement> {
+    color: NoticeColor;
+    icon?: boolean | ReactNode;
+    time?: string | number;
+    children: ReactNode;
+}
+export default function Notice({ color, icon, time, children, className, ...props }: NoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/basic/notice/Notice.stories.d.ts

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Notice from './Notice.tsx';
+declare const meta: {
+    title: string;
+    component: typeof Notice;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        color: "gray";
+        icon: false;
+        children: string;
+    };
+    argTypes: {
+        color: {
+            control: "select";
+            options: string[];
+        };
+        icon: {
+            control: "boolean";
+        };
+        time: {
+            control: "text";
+        };
+        children: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithIcon: Story;
+export declare const WithCheckIcon: Story;
+export declare const WithCountdown: Story;
+export declare const WithIconAndCountdown: Story;
+export declare const AllVariants: Story;

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

@@ -0,0 +1,2 @@
+export { default } from './Notice.tsx';
+export type { NoticeProps, NoticeColor } from './Notice.tsx';

package/dist/components/basic/page-header/PageHeader.css.d.ts

@@ -0,0 +1,16 @@
+export declare const iconWrapper: string;
+export declare const leftContent: string;
+export declare const pageHeaderRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    hasIcons: {
+        true: {};
+        false: {};
+    };
+    hasLeftIcon: {
+        true: {};
+        false: {};
+    };
+    hasRightIcon: {
+        true: {};
+        false: {};
+    };
+}>;

package/dist/components/basic/page-header/PageHeader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    title: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    leftIconAriaLabel?: string;
+    rightIconAriaLabel?: string;
+    onLeftIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onRightIconClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+}
+export default function PageHeader({ title, leftIcon, rightIcon, leftIconAriaLabel, rightIconAriaLabel, onLeftIconClick, onRightIconClick, className, ...props }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/basic/page-header/PageHeader.stories.d.ts

@@ -0,0 +1,47 @@
+import type { StoryObj } from '@storybook/react-vite';
+import PageHeader from './PageHeader';
+declare const meta: {
+    title: string;
+    component: typeof PageHeader;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        title: string;
+    };
+    argTypes: {
+        title: {
+            control: "text";
+            description: string;
+        };
+        leftIcon: {
+            control: false;
+            description: string;
+        };
+        rightIcon: {
+            control: false;
+            description: string;
+        };
+        leftIconAriaLabel: {
+            control: "text";
+            description: string;
+        };
+        rightIconAriaLabel: {
+            control: "text";
+            description: string;
+        };
+        onLeftIconClick: {
+            action: string;
+            description: string;
+        };
+        onRightIconClick: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllVariants: Story;

package/dist/components/basic/page-header/index.d.ts

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

package/dist/components/basic/pagination/Pagination.css.d.ts

@@ -0,0 +1,30 @@
+export declare const pagination: string;
+export declare const paginationItem: import("@vanilla-extract/recipes").RuntimeFn<{
+    type: {
+        number: {};
+        arrow: {};
+        arrowDuo: {};
+    };
+    state: {
+        default: (string | {
+            color: "#6e7078";
+        })[];
+        selected: (string | {
+            backgroundColor: "#f1f2f6";
+            color: "#3e3f46";
+            border: "0.0625rem solid #dee0e7";
+        })[];
+    };
+    disabled: {
+        true: {
+            cursor: "not-allowed";
+            pointerEvents: "none";
+            color: "#dee0e7";
+            backgroundColor: "#ffffff";
+            border: "none";
+        };
+        false: {};
+    };
+}>;
+export declare const arrowGroup: string;
+export declare const numberGroup: string;

package/dist/components/basic/pagination/Pagination.d.ts

@@ -0,0 +1,9 @@
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    maxVisiblePages?: number;
+    isDisabled?: boolean;
+    className?: string;
+}
+export default function Pagination({ currentPage, totalPages, onPageChange, maxVisiblePages, isDisabled, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/basic/pagination/Pagination.stories.d.ts

@@ -0,0 +1,52 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Pagination from './Pagination';
+declare const meta: {
+    title: string;
+    component: typeof Pagination;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        currentPage: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+    };
+    argTypes: {
+        currentPage: {
+            control: {
+                type: "number";
+                min: number;
+            };
+            description: string;
+        };
+        totalPages: {
+            control: {
+                type: "number";
+                min: number;
+            };
+            description: string;
+        };
+        maxVisiblePages: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        isDisabled: {
+            control: "boolean";
+            description: string;
+        };
+        onPageChange: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const AllStates: Story;

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

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

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

@@ -0,0 +1,34 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        blue: {
+            borderColor: "#e7effc";
+        };
+        gray: {
+            borderColor: "#f1f2f6";
+        };
+    };
+}>;
+export declare const stepList: string;
+export declare const stepItem: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        medium: {
+            height: "2rem";
+            minWidth: "2rem";
+            padding: "0.5rem";
+        };
+        small: {
+            height: "1.5rem";
+            minWidth: "1.5rem";
+            padding: "0.25rem";
+        };
+    };
+    color: {
+        blue: {};
+        gray: {};
+    };
+    status: {
+        completed: string[];
+        active: string[];
+        inactive: string[];
+    };
+}>;