@shipfox/react-ui 0.24.0 → 0.26.0

package/dist/colors.stories.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Code, Header } from './components/typography/index.js';
-import { cn } from './utils/cn.js';
-import { primitiveColors } from './colors.stories.conts.js';
-const meta = {
-    title: 'Assets/Colors'
-};
-export default meta;
-function ColorItem({ variant }) {
-    const value = variant.split('-').pop();
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "flex flex-col items-center gap-1",
-        children: [
-            /*#__PURE__*/ _jsx("div", {
-                className: cn('h-24 w-full rounded-6 border border-border', variant)
-            }),
-            /*#__PURE__*/ _jsx(Code, {
-                variant: "label",
-                className: "text-foreground-neutral-subtle",
-                children: value
-            })
-        ]
-    });
-}
-function ColorPalette({ title, rootKey, variants }) {
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "grid grid-cols-16 gap-8",
-        children: [
-            /*#__PURE__*/ _jsx(Code, {
-                variant: "label",
-                className: "text-foreground-neutral-subtle",
-                children: title
-            }),
-            variants.map((variant)=>/*#__PURE__*/ _jsx(ColorItem, {
-                    variant: variant,
-                    color: rootKey
-                }, variant))
-        ]
-    });
-}
-export const Palette = {
-    render: ()=>/*#__PURE__*/ _jsx("div", {
-            className: "flex flex-col gap-16",
-            children: /*#__PURE__*/ _jsxs("section", {
-                className: "flex flex-col gap-8",
-                children: [
-                    /*#__PURE__*/ _jsx(Header, {
-                        variant: "h2",
-                        children: "Primitive Colors"
-                    }),
-                    Object.entries(primitiveColors).map(([color, variants])=>/*#__PURE__*/ _jsx(ColorPalette, {
-                            title: color.replace('-', ' '),
-                            rootKey: color,
-                            variants: variants.variants
-                        }, color))
-                ]
-            })
-        })
-};
-
-//# sourceMappingURL=colors.stories.js.map

package/dist/components/alert/alert.stories.js

@@ -1,227 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Button } from '../../components/button/index.js';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../components/form/index.js';
-import { Input } from '../../components/input/index.js';
-import { Header } from '../../components/typography/index.js';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { Alert, AlertAction, AlertActions, AlertClose, AlertContent, AlertDescription, AlertTitle } from './alert.js';
-const meta = {
-    title: 'Components/Alert',
-    component: Alert,
-    tags: [
-        'autodocs'
-    ],
-    argTypes: {
-        variant: {
-            control: 'select',
-            options: [
-                'default',
-                'info',
-                'success',
-                'warning',
-                'error'
-            ]
-        }
-    },
-    args: {
-        variant: 'default'
-    }
-};
-export default meta;
-const variants = [
-    'default',
-    'info',
-    'success',
-    'warning',
-    'error'
-];
-export const Default = {
-    render: (args)=>{
-        return /*#__PURE__*/ _jsxs(Alert, {
-            ...args,
-            children: [
-                /*#__PURE__*/ _jsxs(AlertContent, {
-                    children: [
-                        /*#__PURE__*/ _jsx(AlertTitle, {
-                            children: "Title"
-                        }),
-                        /*#__PURE__*/ _jsx(AlertDescription, {
-                            children: "Description"
-                        }),
-                        /*#__PURE__*/ _jsxs(AlertActions, {
-                            children: [
-                                /*#__PURE__*/ _jsx(AlertAction, {
-                                    children: "Download"
-                                }),
-                                /*#__PURE__*/ _jsx(AlertAction, {
-                                    children: "View"
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(AlertClose, {})
-            ]
-        });
-    }
-};
-const validationFormSchema = z.object({
-    email: z.string().email('Please enter a valid email address'),
-    password: z.string().min(8, 'Password must be at least 8 characters')
-});
-function ErrorValidationToasterExample() {
-    const [showError, setShowError] = useState(false);
-    const form = useForm({
-        resolver: zodResolver(validationFormSchema),
-        defaultValues: {
-            email: '',
-            password: ''
-        }
-    });
-    function onSubmit(data) {
-        // biome-ignore lint/suspicious/noConsole: <we need to log the data for the story>
-        console.log('Form submitted:', data);
-        setShowError(false);
-    }
-    function onError() {
-        setShowError(true);
-    }
-    const errors = form.formState.errors;
-    const errorCount = Object.keys(errors).length;
-    const errorMessage = errorCount > 0 ? `Please fix ${errorCount} error${errorCount > 1 ? 's' : ''} before submitting.` : '';
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "flex flex-col gap-16 w-full max-w-md",
-        children: [
-            errorCount > 0 && /*#__PURE__*/ _jsxs(Alert, {
-                variant: "error",
-                open: showError,
-                autoClose: 5000,
-                onOpenChange: setShowError,
-                children: [
-                    /*#__PURE__*/ _jsxs(AlertContent, {
-                        children: [
-                            /*#__PURE__*/ _jsx(AlertTitle, {
-                                children: "Validation Error"
-                            }),
-                            /*#__PURE__*/ _jsx(AlertDescription, {
-                                children: errorMessage
-                            }),
-                            /*#__PURE__*/ _jsx(AlertActions, {
-                                children: /*#__PURE__*/ _jsx(AlertAction, {
-                                    onClick: ()=>{
-                                        form.clearErrors();
-                                        setShowError(false);
-                                    },
-                                    children: "Dismiss"
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx(AlertClose, {})
-                ]
-            }),
-            /*#__PURE__*/ _jsx(Form, {
-                ...form,
-                children: /*#__PURE__*/ _jsxs("form", {
-                    onSubmit: form.handleSubmit(onSubmit, onError),
-                    className: "space-y-8",
-                    children: [
-                        /*#__PURE__*/ _jsx(FormField, {
-                            control: form.control,
-                            name: "email",
-                            render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(FormLabel, {
-                                            children: "Email"
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormControl, {
-                                            children: /*#__PURE__*/ _jsx(Input, {
-                                                type: "email",
-                                                placeholder: "email@example.com",
-                                                ...field
-                                            })
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormMessage, {})
-                                    ]
-                                })
-                        }),
-                        /*#__PURE__*/ _jsx(FormField, {
-                            control: form.control,
-                            name: "password",
-                            render: ({ field })=>/*#__PURE__*/ _jsxs(FormItem, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(FormLabel, {
-                                            children: "Password"
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormControl, {
-                                            children: /*#__PURE__*/ _jsx(Input, {
-                                                type: "password",
-                                                placeholder: "Enter password",
-                                                ...field
-                                            })
-                                        }),
-                                        /*#__PURE__*/ _jsx(FormMessage, {})
-                                    ]
-                                })
-                        }),
-                        /*#__PURE__*/ _jsx(Button, {
-                            type: "submit",
-                            children: "Submit"
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-}
-export const WithFormValidation = {
-    render: ()=>/*#__PURE__*/ _jsx(ErrorValidationToasterExample, {})
-};
-export const DesignMock = {
-    render: ()=>{
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base",
-            children: [
-                /*#__PURE__*/ _jsx(Header, {
-                    variant: "h3",
-                    className: "text-foreground-neutral-subtle",
-                    children: "ALERTS"
-                }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: "flex flex-col gap-16",
-                    children: variants.map((variant)=>/*#__PURE__*/ _jsxs(Alert, {
-                            variant: variant,
-                            children: [
-                                /*#__PURE__*/ _jsxs(AlertContent, {
-                                    children: [
-                                        /*#__PURE__*/ _jsx(AlertTitle, {
-                                            children: "Title"
-                                        }),
-                                        /*#__PURE__*/ _jsx(AlertDescription, {
-                                            children: "Description"
-                                        }),
-                                        /*#__PURE__*/ _jsxs(AlertActions, {
-                                            children: [
-                                                /*#__PURE__*/ _jsx(AlertAction, {
-                                                    children: "Download"
-                                                }),
-                                                /*#__PURE__*/ _jsx(AlertAction, {
-                                                    children: "View"
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsx(AlertClose, {})
-                            ]
-                        }, variant))
-                })
-            ]
-        });
-    }
-};
-
-//# sourceMappingURL=alert.stories.js.map

package/dist/components/avatar/avatar.stories.js

@@ -1,267 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Code } from '../../components/typography/index.js';
-import { Avatar } from './avatar.js';
-import { AvatarGroup, AvatarGroupTooltip } from './avatar-group.js';
-const contentOptions = [
-    'letters',
-    'logo',
-    'logoPlaceholder',
-    'image',
-    'upload'
-];
-const radiusOptions = [
-    'full',
-    'rounded'
-];
-const sizeOptions = [
-    '3xs',
-    '2xs',
-    'xs',
-    'sm',
-    'md',
-    'lg',
-    'xl',
-    '2xl',
-    '3xl'
-];
-const logoNameOptions = [
-    'shipfox',
-    'slack',
-    'stripe',
-    'github'
-];
-const meta = {
-    title: 'Components/Avatar',
-    component: Avatar,
-    tags: [
-        'autodocs'
-    ],
-    argTypes: {
-        content: {
-            control: 'select',
-            options: contentOptions
-        },
-        radius: {
-            control: 'select',
-            options: radiusOptions
-        },
-        size: {
-            control: 'select',
-            options: sizeOptions
-        },
-        fallback: {
-            control: 'text'
-        },
-        src: {
-            control: 'text'
-        },
-        alt: {
-            control: 'text'
-        },
-        logoName: {
-            control: 'select',
-            options: logoNameOptions,
-            description: 'Logo icon name to display when content is "logo" or "logoPlaceholder"'
-        }
-    },
-    args: {
-        content: 'letters',
-        radius: 'full',
-        size: 'md',
-        fallback: 'John Doe',
-        logoName: 'shipfox'
-    }
-};
-export default meta;
-export const Default = {
-    args: {
-        content: 'logo',
-        fallback: 'Shipfox'
-    },
-    render: (args)=>/*#__PURE__*/ _jsx("div", {
-            className: "flex flex-wrap items-end gap-16",
-            children: sizeOptions.map((size)=>/*#__PURE__*/ _jsxs("div", {
-                    className: "flex flex-col items-center gap-8",
-                    children: [
-                        /*#__PURE__*/ _jsx(Avatar, {
-                            ...args,
-                            size: size
-                        }),
-                        /*#__PURE__*/ _jsx(Code, {
-                            variant: "label",
-                            className: "text-foreground-neutral-base",
-                            children: size
-                        })
-                    ]
-                }, size))
-        })
-};
-// AvatarGroup Stories
-const avatarGroupMeta = {
-    title: 'Components/AvatarGroup',
-    component: AvatarGroup,
-    tags: [
-        'autodocs'
-    ],
-    argTypes: {
-        size: {
-            control: 'select',
-            options: sizeOptions
-        },
-        maxVisible: {
-            control: 'number'
-        }
-    },
-    args: {
-        size: 'md',
-        children: []
-    }
-};
-export const AvatarGroupDefault = {
-    args: {
-        children: []
-    },
-    render: ()=>{
-        const avatars = [
-            {
-                name: 'John Doe',
-                content: 'image'
-            },
-            {
-                name: 'Jane Smith',
-                content: 'image'
-            },
-            {
-                name: 'Bob Johnson',
-                content: 'image'
-            },
-            {
-                name: 'Alice Brown',
-                content: 'image'
-            }
-        ];
-        return /*#__PURE__*/ _jsx("div", {
-            className: "flex flex-col gap-16",
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: "flex flex-col gap-8",
-                children: [
-                    /*#__PURE__*/ _jsx(Code, {
-                        variant: "label",
-                        className: "text-foreground-neutral-base",
-                        children: "Default (without tooltips)"
-                    }),
-                    /*#__PURE__*/ _jsx(AvatarGroup, {
-                        size: "md",
-                        children: avatars.map((avatar)=>/*#__PURE__*/ _jsx(Avatar, {
-                                content: avatar.content,
-                                fallback: avatar.name
-                            }, avatar.name))
-                    })
-                ]
-            })
-        });
-    }
-};
-export const AvatarGroupWithTooltips = {
-    args: {
-        children: []
-    },
-    render: ()=>{
-        const avatars = [
-            {
-                name: 'John Doe',
-                content: 'image'
-            },
-            {
-                name: 'Jane Smith',
-                content: 'image'
-            },
-            {
-                name: 'Bob Johnson',
-                content: 'image'
-            },
-            {
-                name: 'Alice Brown',
-                content: 'image'
-            },
-            {
-                name: 'Carlos Vega',
-                content: 'image'
-            },
-            {
-                name: 'Linda Tran',
-                content: 'image'
-            }
-        ];
-        return /*#__PURE__*/ _jsxs("div", {
-            className: "flex flex-col gap-16",
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    className: "flex flex-col gap-8",
-                    children: [
-                        /*#__PURE__*/ _jsx(Code, {
-                            variant: "label",
-                            className: "text-foreground-neutral-base",
-                            children: "With Tooltips"
-                        }),
-                        /*#__PURE__*/ _jsx(AvatarGroup, {
-                            size: "md",
-                            children: avatars.map((avatar)=>/*#__PURE__*/ _jsx(Avatar, {
-                                    content: avatar.content,
-                                    fallback: avatar.name,
-                                    children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                        children: avatar.name
-                                    })
-                                }, avatar.name))
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: "flex flex-col gap-8",
-                    children: [
-                        /*#__PURE__*/ _jsx(Code, {
-                            variant: "label",
-                            className: "text-foreground-neutral-base",
-                            children: "With Tooltips (maxVisible: 4)"
-                        }),
-                        /*#__PURE__*/ _jsx(AvatarGroup, {
-                            size: "md",
-                            maxVisible: 4,
-                            children: avatars.map((avatar)=>/*#__PURE__*/ _jsx(Avatar, {
-                                    content: avatar.content,
-                                    fallback: avatar.name,
-                                    children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                        children: avatar.name
-                                    })
-                                }, avatar.name))
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: "flex flex-col gap-8",
-                    children: [
-                        /*#__PURE__*/ _jsx(Code, {
-                            variant: "label",
-                            className: "text-foreground-neutral-base",
-                            children: "With Tooltips and Hover Animation"
-                        }),
-                        /*#__PURE__*/ _jsx(AvatarGroup, {
-                            size: "md",
-                            maxVisible: 4,
-                            animateOnHover: true,
-                            children: avatars.map((avatar)=>/*#__PURE__*/ _jsx(Avatar, {
-                                    content: avatar.content,
-                                    fallback: avatar.name,
-                                    children: /*#__PURE__*/ _jsx(AvatarGroupTooltip, {
-                                        children: avatar.name
-                                    })
-                                }, avatar.name))
-                        })
-                    ]
-                })
-            ]
-        });
-    }
-};
-
-//# sourceMappingURL=avatar.stories.js.map