@plaidlabs/ui 0.0.1

package/dist/components/basic/avatar/Avatar.css.d.ts

@@ -0,0 +1,53 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    type: {
+        default: {
+            backgroundColor: "#dee0e7";
+        };
+        photo: {
+            backgroundColor: "#c5c7d2";
+        };
+    };
+    status: {
+        off: {};
+        on: {};
+    };
+    size: {
+        24: {
+            width: "1.5rem";
+            height: "1.5rem";
+        };
+        32: {
+            width: "2rem";
+            height: "2rem";
+        };
+        64: {
+            width: "4rem";
+            height: "4rem";
+        };
+    };
+}>;
+export declare const image: string;
+export declare const profileIcon: string;
+export declare const statusIndicator: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        24: {
+            width: "0.375rem";
+            height: "0.375rem";
+            bottom: "-0.0625rem";
+            right: "-0.0625rem";
+        };
+        32: {
+            width: "0.375rem";
+            height: "0.375rem";
+            bottom: "-0.0625rem";
+            right: "-0.0625rem";
+        };
+        64: {
+            width: "0.75rem";
+            height: "0.75rem";
+            bottom: "0.0625rem";
+            right: "0.0625rem";
+            border: "0.13rem solid #ffffff";
+        };
+    };
+}>;

package/dist/components/basic/avatar/Avatar.d.ts

@@ -0,0 +1,13 @@
+import { ImgHTMLAttributes } from 'react';
+export type AvatarType = 'default' | 'photo';
+export type AvatarStatus = 'off' | 'on';
+export type AvatarSize = 24 | 32 | 64;
+export interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'size' | 'src'> {
+    type: AvatarType;
+    status?: AvatarStatus;
+    size?: AvatarSize;
+    src?: string;
+    alt?: string;
+}
+declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Avatar;

package/dist/components/basic/avatar/Avatar.stories.d.ts

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./Avatar.tsx").AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        type: "default";
+        status: "off";
+        size: 32;
+    };
+    argTypes: {
+        type: {
+            control: "select";
+            options: string[];
+        };
+        status: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: number[];
+        };
+        src: {
+            control: "text";
+        };
+        alt: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllVariants: Story;

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

@@ -0,0 +1,2 @@
+export { default } from './Avatar.tsx';
+export type { AvatarProps, AvatarType, AvatarStatus, AvatarSize } from './Avatar.tsx';

package/dist/components/basic/bottom-tab/BottomTab.css.d.ts

@@ -0,0 +1,33 @@
+export declare const labelStyle: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            color: "#0c5dde";
+        };
+        false: {
+            color: "#6e7078";
+        };
+    };
+}>;
+export declare const iconStyle: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            color: "#0c5dde";
+        };
+        false: {
+            color: "#989aa4";
+        };
+    };
+}>;
+export declare const bottomTabRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import("@vanilla-extract/css").ComplexStyleRule;
+    };
+}>;
+export declare const tabItemRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            backgroundColor: "#f3f7fd";
+        };
+        false: {};
+    };
+}>;

package/dist/components/basic/bottom-tab/BottomTab.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface BottomTabItem {
+    value: string;
+    icon: React.ReactNode;
+    label: string;
+    ariaLabel?: string;
+}
+export interface BottomTabProps {
+    items: BottomTabItem[];
+    selectedValue: string;
+    onChange: (value: string) => void;
+    className?: string;
+}
+export default function BottomTab({ items, selectedValue, onChange, className }: BottomTabProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/basic/bottom-tab/BottomTab.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react-vite';
+import BottomTab from './BottomTab';
+declare const meta: {
+    title: string;
+    component: typeof BottomTab;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        selectedValue: {
+            control: "text";
+            description: string;
+        };
+        onChange: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithLongLabel: Story;

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

@@ -0,0 +1,2 @@
+export { default as BottomTab } from './BottomTab.tsx';
+export type { BottomTabProps, BottomTabItem } from './BottomTab.tsx';

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

@@ -0,0 +1,58 @@
+export declare const loadingWrapper: string;
+export declare const buttonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        xlarge: (string | {
+            borderRadius: "0.375rem";
+            gap: "0.5rem";
+        })[];
+        large: (string | {
+            borderRadius: "0.375rem";
+            gap: "0.5rem";
+        })[];
+        medium: (string | {
+            borderRadius: "0.25rem";
+            gap: "0.5rem";
+        })[];
+        small: (string | {
+            borderRadius: "0.25rem";
+            gap: "0.5rem";
+        })[];
+        xsmall: (string | {
+            borderRadius: "0.25rem";
+            gap: "0.25rem";
+        })[];
+        xxsmall: (string | {
+            borderRadius: "0.25rem";
+            gap: "0.25rem";
+        })[];
+    };
+    variant: {
+        filled: {
+            color: "#ffffff";
+        };
+        outline: {
+            backgroundColor: "#ffffff";
+            borderStyle: "solid";
+            borderWidth: "0.09375rem";
+        };
+        light: {
+            border: "none";
+        };
+        no_bg: {
+            backgroundColor: "transparent";
+        };
+    };
+    color: {
+        blue: {};
+        green: {};
+        red: {};
+        gray: {};
+    };
+    iconPosition: {
+        none: {};
+        left: {};
+        right: {};
+        duo: {};
+        only: {};
+    };
+}>;

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

@@ -0,0 +1,17 @@
+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 ButtonIconPosition = 'none' | 'left' | 'right' | 'duo' | 'only';
+export interface ButtonProps extends Omit<AriaButtonProps, 'children'> {
+    variant: ButtonVariant;
+    color: ButtonColor;
+    size: ButtonSize;
+    icon?: React.ReactElement;
+    iconPosition?: ButtonIconPosition;
+    loading?: boolean;
+    children?: React.ReactNode;
+    type?: 'button' | 'submit' | 'reset';
+}
+export default function Button({ children, variant, color, size, icon, iconPosition, loading, isDisabled, type, 'aria-label': ariaLabel, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Button from './Button.tsx';
+declare const meta: {
+    title: string;
+    component: typeof Button;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        variant: "filled";
+        color: "blue";
+        size: "medium";
+    };
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        color: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        isDisabled: {
+            control: "boolean";
+        };
+        loading: {
+            control: "boolean";
+        };
+        iconPosition: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const FilledBlue: Story;
+export declare const AllVariants: Story;
+export declare const DesignSystemGrid: Story;
+export declare const CompleteButtonGrid: Story;

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

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.tsx';
+export type { ButtonProps, ButtonVariant, ButtonColor, ButtonSize, ButtonIconPosition, } from './Button.tsx';

package/dist/components/basic/checkbox/Checkbox.css.d.ts

@@ -0,0 +1,64 @@
+export declare const checkboxRoot: string;
+export declare const checkboxBox: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        '20': {
+            width: "1rem";
+            height: "1rem";
+            borderRadius: "0.13rem";
+        };
+        '24': {
+            width: "1.25rem";
+            height: "1.25rem";
+            borderRadius: "0.25rem";
+        };
+    };
+    color: {
+        blue_1000: {
+            selectors: {
+                ':not([data-selected="true"]) &': {
+                    borderColor: "#b6cef5";
+                };
+                '[data-selected="true"] &': {
+                    backgroundColor: "#0c5dde";
+                    borderColor: "#0c5dde";
+                };
+                '[data-hovered="true"]:not([data-disabled="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) &': {
+                    borderColor: "#558ee8";
+                    boxShadow: "0 0 0 0.12rem #0c5dde33";
+                };
+                '[data-disabled="true"] &': {
+                    borderColor: "#c5c7d2";
+                };
+            };
+        };
+        gray_700: {
+            selectors: {
+                ':not([data-selected="true"]) &': {
+                    borderColor: "#6e7078";
+                };
+                '[data-selected="true"] &': {
+                    backgroundColor: "#3e3f46";
+                    borderColor: "#3e3f46";
+                };
+                '[data-hovered="true"]:not([data-disabled="true"]):not([data-selected="true"]):not([data-indeterminate="true"]) &': {
+                    borderColor: "#3e3f46";
+                    boxShadow: "0 0 0 0.12rem #dee0e7";
+                };
+                '[data-disabled="true"] &': {
+                    borderColor: "#c5c7d2";
+                };
+            };
+        };
+    };
+}>;
+export declare const checkboxIcon: string;
+export declare const checkboxLabel: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        '20': (string | {
+            marginLeft: "0.38rem";
+        })[];
+        '24': (string | {
+            marginLeft: "0.5rem";
+        })[];
+    };
+}>;

package/dist/components/basic/checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import { type CheckboxProps as AriaCheckboxProps } from 'react-aria-components';
+export type CheckboxColor = 'blue_1000' | 'gray_700';
+export type CheckboxSize = '20' | '24';
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children'> {
+    size: CheckboxSize;
+    color: CheckboxColor;
+    children?: React.ReactNode;
+    className?: string;
+}
+export default function Checkbox({ size, color, isDisabled, children, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/basic/checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,45 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Checkbox from './Checkbox';
+declare const meta: {
+    title: string;
+    component: typeof Checkbox;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        size: "20";
+        color: "blue_1000";
+        isIndeterminate: false;
+        isDisabled: false;
+        children: string;
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        isIndeterminate: {
+            control: "boolean";
+            description: string;
+        };
+        isDisabled: {
+            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/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox.tsx';
+export type { CheckboxProps, CheckboxColor, CheckboxSize } from './Checkbox.tsx';

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

@@ -0,0 +1,46 @@
+import { RecipeVariants } from '@vanilla-extract/recipes';
+export declare const chipRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        filled: {
+            color: "#ffffff";
+        };
+        outlined: {
+            border: "1px solid";
+        };
+        light: {};
+    };
+    shape: {
+        square: {
+            borderRadius: "0.25rem";
+        };
+        round: {
+            borderRadius: "2.5rem";
+        };
+    };
+    size: {
+        large: (string | {
+            height: "1.75rem";
+        })[];
+        medium: (string | {
+            height: "1.5rem";
+        })[];
+        small: (string | {
+            height: "1.25rem";
+        })[];
+    };
+    color: {
+        blue: {};
+        green: {};
+        red: {};
+        yellow: {};
+        gray500: {};
+        gray800: {};
+    };
+    iconType: {
+        none: {};
+        left: {};
+        right: {};
+        only: {};
+    };
+}>;
+export type ChipVariants = RecipeVariants<typeof chipRecipe>;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type ChipVariants } from './Chip.css';
+export type ChipVariant = NonNullable<ChipVariants>['variant'];
+export type ChipColor = NonNullable<ChipVariants>['color'];
+export type ChipSize = NonNullable<ChipVariants>['size'];
+export type ChipShape = NonNullable<ChipVariants>['shape'];
+export type ChipIconPosition = 'none' | 'left' | 'right' | 'only';
+export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant: ChipVariant;
+    color: ChipColor;
+    size: ChipSize;
+    shape: ChipShape;
+    icon?: React.ReactElement;
+    iconPosition?: ChipIconPosition;
+}
+export default function Chip({ children, variant, color, size, shape, icon, iconPosition, className, 'aria-label': ariaLabel, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Chip from './Chip';
+declare const meta: {
+    title: string;
+    component: typeof Chip;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+        color: {
+            control: "select";
+            options: string[];
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        shape: {
+            control: "radio";
+            options: string[];
+        };
+        iconPosition: {
+            control: "radio";
+            options: string[];
+        };
+        icon: {
+            control: "boolean";
+            mapping: {
+                false: undefined;
+                true: import("react/jsx-runtime").JSX.Element;
+            };
+        };
+    };
+    args: {
+        children: string;
+        variant: "filled";
+        color: "blue";
+        size: "medium";
+        shape: "round";
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const AllVariants: Story;

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

@@ -0,0 +1,2 @@
+export { default as Chip } from './Chip.tsx';
+export type { ChipProps, ChipVariant, ChipColor, ChipSize, ChipShape, ChipIconPosition, } from './Chip.tsx';

package/dist/components/basic/close/Close.css.d.ts

@@ -0,0 +1,15 @@
+export declare const close: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        gray600: {
+            color: "#53545c";
+        };
+        gray100: {
+            color: "#f1f2f6";
+        };
+    };
+    size: {
+        16: {};
+        20: {};
+        24: {};
+    };
+}>;

package/dist/components/basic/close/Close.d.ts

@@ -0,0 +1,10 @@
+export type CloseColor = 'gray600' | 'gray100';
+export type CloseSize = 16 | 20 | 24;
+export interface CloseProps {
+    color?: CloseColor;
+    size?: CloseSize;
+    onPress?: () => void;
+    className?: string;
+    'aria-label'?: string;
+}
+export default function Close({ color, size, onPress, className, 'aria-label': ariaLabel, }: CloseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/basic/close/Close.stories.d.ts

@@ -0,0 +1,39 @@
+import type { StoryObj } from '@storybook/react-vite';
+import Close from './Close';
+declare const meta: {
+    title: string;
+    component: typeof Close;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        color: "gray600";
+        size: 24;
+        onPress: () => void;
+    };
+    argTypes: {
+        color: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: number[];
+            description: string;
+        };
+        onPress: {
+            action: 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;

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

@@ -0,0 +1,2 @@
+export { default } from './Close.tsx';
+export type { CloseProps, CloseColor, CloseSize } from './Close.tsx';

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

@@ -0,0 +1,17 @@
+export declare const guideText: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        gray: {
+            color: "#989aa4";
+        };
+        red: {
+            color: "#d21b1b";
+        };
+        blue: {
+            color: "#0c5dde";
+        };
+        green: {
+            color: "#00903d";
+        };
+    };
+}>;
+export declare const guideTextIcon: string;

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

@@ -0,0 +1,8 @@
+export type GuideTextColor = 'gray' | 'red' | 'blue' | 'green';
+export interface GuideTextProps {
+    color: GuideTextColor;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+export default function GuideText({ color, icon, children, className }: GuideTextProps): import("react/jsx-runtime").JSX.Element;