@shipfox/react-ui 0.16.0 → 0.18.0

package/dist/components/card/card.d.ts

@@ -0,0 +1,24 @@
+import { Header, Text } from '../../components/typography';
+import type { ComponentProps } from 'react';
+export interface CardProps extends ComponentProps<'div'> {
+}
+export declare function Card({ className, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export interface CardHeaderProps extends ComponentProps<'div'> {
+}
+export declare function CardHeader({ className, children, ...props }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface CardTitleProps extends ComponentProps<typeof Header> {
+}
+export declare function CardTitle({ className, children, variant, ...props }: CardTitleProps): import("react/jsx-runtime").JSX.Element;
+export interface CardDescriptionProps extends ComponentProps<typeof Text> {
+}
+export declare function CardDescription({ className, children, size, ...props }: CardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export interface CardActionProps extends ComponentProps<'div'> {
+}
+export declare function CardAction({ className, children, ...props }: CardActionProps): import("react/jsx-runtime").JSX.Element;
+export interface CardContentProps extends ComponentProps<'div'> {
+}
+export declare function CardContent({ className, children, ...props }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+export interface CardFooterProps extends ComponentProps<'div'> {
+}
+export declare function CardFooter({ className, children, ...props }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card/card.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Header, Text } from '../../components/typography/index.js';
+import { cn } from '../../utils/cn.js';
+export function Card({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('p-12 rounded-8 bg-background-neutral-base border border-border-neutral-base flex flex-col gap-16', className),
+        ...props,
+        children: children
+    });
+}
+export function CardHeader({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('flex flex-col gap-4', className),
+        ...props,
+        children: children
+    });
+}
+export function CardTitle({ className, children, variant = 'h3', ...props }) {
+    return /*#__PURE__*/ _jsx(Header, {
+        variant: variant,
+        className: cn('text-foreground-neutral-base', className),
+        ...props,
+        children: children
+    });
+}
+export function CardDescription({ className, children, size = 'sm', ...props }) {
+    return /*#__PURE__*/ _jsx(Text, {
+        size: size,
+        className: cn('text-foreground-neutral-muted', className),
+        ...props,
+        children: children
+    });
+}
+export function CardAction({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('ml-auto', className),
+        ...props,
+        children: children
+    });
+}
+export function CardContent({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('flex-1', className),
+        ...props,
+        children: children
+    });
+}
+export function CardFooter({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('flex items-center gap-8', className),
+        ...props,
+        children: children
+    });
+}
+
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.stories.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/button/index.js';
+import { Input } from '../../components/input/index.js';
+import { Label } from '../../components/label/index.js';
+import { Text } from '../../components/typography/index.js';
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card.js';
+const meta = {
+    title: 'Components/Card',
+    component: Card,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                children: [
+                    /*#__PURE__*/ _jsxs(CardHeader, {
+                        children: [
+                            /*#__PURE__*/ _jsx(CardTitle, {
+                                children: "Card Title"
+                            }),
+                            /*#__PURE__*/ _jsx(CardDescription, {
+                                children: "This is a description of the card content."
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Card content goes here. This is where the main information is displayed."
+                        })
+                    })
+                ]
+            })
+        })
+};
+export const WithFooter = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                children: [
+                    /*#__PURE__*/ _jsxs(CardHeader, {
+                        children: [
+                            /*#__PURE__*/ _jsx(CardTitle, {
+                                children: "Card with Footer"
+                            }),
+                            /*#__PURE__*/ _jsx(CardDescription, {
+                                children: "This card includes a footer with actions."
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Main content area with important information."
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(CardFooter, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                size: "sm",
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                size: "sm",
+                                children: "Save"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+};
+export const WithAction = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                children: [
+                    /*#__PURE__*/ _jsx(CardHeader, {
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-start justify-between gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4 flex-1",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CardTitle, {
+                                            children: "Card with Action"
+                                        }),
+                                        /*#__PURE__*/ _jsx(CardDescription, {
+                                            children: "This card has an action button in the header."
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(CardAction, {
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        size: "sm",
+                                        children: "Edit"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Content that can be edited using the action button."
+                        })
+                    })
+                ]
+            })
+        })
+};
+export const LoginForm = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsxs(Card, {
+                children: [
+                    /*#__PURE__*/ _jsx(CardHeader, {
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-start justify-between gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4 flex-1",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(CardTitle, {
+                                            children: "Login to your account"
+                                        }),
+                                        /*#__PURE__*/ _jsx(CardDescription, {
+                                            children: "Enter your email below to login to your account"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(CardAction, {
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparent",
+                                        size: "sm",
+                                        children: "Sign Up"
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(CardContent, {
+                        children: /*#__PURE__*/ _jsxs("form", {
+                            className: "flex flex-col gap-16",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "grid gap-6",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Label, {
+                                            htmlFor: "email",
+                                            children: "Email"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Input, {
+                                            id: "email",
+                                            type: "email",
+                                            placeholder: "m@example.com",
+                                            required: true
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "grid gap-6",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Label, {
+                                                    htmlFor: "password",
+                                                    children: "Password"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Button, {
+                                                    variant: "transparent",
+                                                    size: "xs",
+                                                    className: "ml-auto",
+                                                    children: "Forgot password?"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Input, {
+                                            id: "password",
+                                            type: "password",
+                                            required: true
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(CardFooter, {
+                        className: "flex-col gap-8",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                className: "w-full",
+                                children: "Login"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                type: "submit",
+                                variant: "secondary",
+                                className: "w-full",
+                                children: "Login with Google"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+};
+
+//# sourceMappingURL=card.stories.js.map

package/dist/components/card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './card';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/card/index.js

@@ -0,0 +1,3 @@
+export * from './card.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/count-up/count-up.d.ts

@@ -0,0 +1,14 @@
+export interface CountUpProps {
+    to: number;
+    from?: number;
+    direction?: 'up' | 'down';
+    delay?: number;
+    duration?: number;
+    className?: string;
+    startWhen?: boolean;
+    separator?: string;
+    onStart?: () => void;
+    onEnd?: () => void;
+}
+export declare function CountUp({ to, from, direction, delay, duration, className, startWhen, separator, onStart, onEnd, }: CountUpProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=count-up.d.ts.map

package/dist/components/count-up/count-up.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useInView, useMotionValue, useSpring } from 'framer-motion';
+import { useCallback, useEffect, useRef } from 'react';
+export function CountUp({ to, from = 0, direction = 'up', delay = 0, duration = 2, className = '', startWhen = true, separator = '', onStart, onEnd }) {
+    const ref = useRef(null);
+    const motionValue = useMotionValue(direction === 'down' ? to : from);
+    const damping = 20 + 40 * (1 / duration);
+    const stiffness = 100 * (1 / duration);
+    const springValue = useSpring(motionValue, {
+        damping,
+        stiffness
+    });
+    const isInView = useInView(ref, {
+        once: true,
+        margin: '0px'
+    });
+    const getDecimalPlaces = (num)=>{
+        const str = num.toString();
+        if (str.includes('.')) {
+            const decimals = str.split('.')[1];
+            if (parseInt(decimals, 10) !== 0) {
+                return decimals.length;
+            }
+        }
+        return 0;
+    };
+    const maxDecimals = Math.max(getDecimalPlaces(from), getDecimalPlaces(to));
+    const formatValue = useCallback((latest)=>{
+        const hasDecimals = maxDecimals > 0;
+        const options = {
+            useGrouping: !!separator,
+            minimumFractionDigits: hasDecimals ? maxDecimals : 0,
+            maximumFractionDigits: hasDecimals ? maxDecimals : 0
+        };
+        const formattedNumber = Intl.NumberFormat('en-US', options).format(latest);
+        return separator ? formattedNumber.replace(/,/g, separator) : formattedNumber;
+    }, [
+        maxDecimals,
+        separator
+    ]);
+    useEffect(()=>{
+        if (ref.current) {
+            ref.current.textContent = formatValue(direction === 'down' ? to : from);
+        }
+    }, [
+        from,
+        to,
+        direction,
+        formatValue
+    ]);
+    useEffect(()=>{
+        if (isInView && startWhen) {
+            if (typeof onStart === 'function') {
+                onStart();
+            }
+            const timeoutId = setTimeout(()=>{
+                motionValue.set(direction === 'down' ? from : to);
+            }, delay * 1000);
+            const durationTimeoutId = setTimeout(()=>{
+                if (typeof onEnd === 'function') {
+                    onEnd();
+                }
+            }, delay * 1000 + duration * 1000);
+            return ()=>{
+                clearTimeout(timeoutId);
+                clearTimeout(durationTimeoutId);
+            };
+        }
+    }, [
+        isInView,
+        startWhen,
+        motionValue,
+        direction,
+        from,
+        to,
+        delay,
+        onStart,
+        onEnd,
+        duration
+    ]);
+    useEffect(()=>{
+        const unsubscribe = springValue.on('change', (latest)=>{
+            if (ref.current) {
+                ref.current.textContent = formatValue(latest);
+            }
+        });
+        return ()=>unsubscribe();
+    }, [
+        springValue,
+        formatValue
+    ]);
+    return /*#__PURE__*/ _jsx("span", {
+        className: className,
+        ref: ref
+    });
+}
+
+//# sourceMappingURL=count-up.js.map