@kkkarsss/ui 1.0.0

package/dist/src/ui/information/text/typo.stories.js

@@ -0,0 +1,60 @@
+import { Typo } from './typo';
+const meta = {
+    title: 'Information/Typo',
+    component: Typo,
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['inherit', 'xs', 's', 'm', 'l', 'xl'],
+        },
+        weight: {
+            control: 'select',
+            options: ['300', '400', '500'],
+        },
+        color: {
+            control: 'text',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: 'This is a default typography example.',
+        size: 'm',
+        weight: '400',
+        color: 'default',
+    },
+};
+export const LargeHeading = {
+    args: {
+        children: 'Large Heading (XL)',
+        size: 'xl',
+        weight: '500',
+        color: 'default',
+    },
+};
+export const AccentText = {
+    args: {
+        children: 'Accentuated text',
+        size: 'm',
+        weight: '500',
+        color: 'accent',
+    },
+};
+export const ErrorText = {
+    args: {
+        children: 'This is an error message',
+        size: 's',
+        weight: '400',
+        color: 'error',
+    },
+};
+export const CustomColor = {
+    args: {
+        children: 'Text with custom hex color',
+        size: 'm',
+        weight: '400',
+        color: '#8b5cf6',
+    },
+};

package/dist/src/ui/layout/dropdown/dropdown.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode, type RefObject } from 'react';
+type DropdownProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    anchorRef: RefObject<HTMLElement | null>;
+    children: ReactNode;
+    className?: string;
+    matchWidth?: boolean;
+};
+export declare const Dropdown: ({ isOpen, onClose, anchorRef, children, className, matchWidth }: DropdownProps) => import("react").ReactPortal | null;
+export {};

package/dist/src/ui/layout/dropdown/dropdown.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { jc } from '../../../utils';
+export const Dropdown = ({ isOpen, onClose, anchorRef, children, className, matchWidth = true }) => {
+    const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
+    const dropdownRef = useRef(null);
+    const updatePosition = useCallback(() => {
+        if (anchorRef.current) {
+            const rect = anchorRef.current.getBoundingClientRect();
+            setCoords({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+                width: rect.width,
+            });
+        }
+    }, [anchorRef]);
+    useLayoutEffect(() => {
+        if (isOpen) {
+            updatePosition();
+        }
+    }, [isOpen, anchorRef, updatePosition]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleResize = () => updatePosition();
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                anchorRef.current &&
+                !anchorRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize, true);
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize, true);
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose, anchorRef, updatePosition]);
+    if (!isOpen)
+        return null;
+    return createPortal(_jsx("div", { ref: dropdownRef, style: {
+            position: 'absolute',
+            top: `${coords.top + 4}px`,
+            left: `${coords.left}px`,
+            width: matchWidth ? `${coords.width}px` : 'auto',
+        }, className: jc('z-[1000] py-m overflow-hidden rounded border-x-2 border-secondary bg-background-accent shadow-lg', className), children: children }), document.body);
+};

package/dist/src/ui/layout/dropdown/dropdown.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Dropdown } from './dropdown';
+declare const meta: Meta<typeof Dropdown>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/ui/layout/dropdown/dropdown.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Dropdown } from './dropdown';
+import { Typo } from '../../information';
+const meta = {
+    title: 'Layout/Dropdown',
+    component: Dropdown,
+    tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx("div", { style: { height: '200px', padding: '20px' }, children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+const DropdownWithTrigger = (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const anchorRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: anchorRef, onClick: () => setIsOpen(!isOpen), className: "px-4 py-2 bg-primary text-white rounded", children: "Toggle Dropdown" }), _jsx(Dropdown, { ...args, isOpen: isOpen, onClose: () => setIsOpen(false), anchorRef: anchorRef, children: _jsxs("div", { className: "p-2", children: [_jsx(Typo, { children: "Dropdown Content" }), _jsx(Typo, { size: "s", color: "secondary", children: "More details here..." })] }) })] }));
+};
+export const Default = {
+    render: (args) => _jsx(DropdownWithTrigger, { ...args }),
+    args: {
+        matchWidth: true,
+    },
+};

package/dist/src/ui/layout/flex/flex.d.ts

@@ -0,0 +1,12 @@
+import type { FC, PropsWithChildren, RefObject } from 'react';
+type TProps = {
+    direction?: 'row' | 'column';
+    type?: 'hug' | 'fill';
+    justify?: 'start' | 'center' | 'end' | 'space-between';
+    align?: 'start' | 'center' | 'end';
+    gap?: '0' | '4px' | '8px' | '16px';
+    ref?: RefObject<HTMLDivElement | null>;
+    offset?: '0' | '4px' | '8px' | '16px';
+};
+export declare const Flex: FC<PropsWithChildren<TProps>>;
+export {};

package/dist/src/ui/layout/flex/flex.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jc } from '../../../utils';
+const directionMap = {
+    row: 'flex-row',
+    column: 'flex-col',
+};
+const typeMap = {
+    hug: 'w-auto h-auto',
+    fill: 'w-full h-auto',
+};
+const justifyMap = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    'space-between': 'justify-between',
+};
+const alignMap = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+};
+const gapMap = {
+    '0': 'gap-0',
+    '4px': 'gap-s',
+    '8px': 'gap-m',
+    '16px': 'gap-l',
+};
+const offsetMap = {
+    '0': 'p-0',
+    '4px': 'p-s',
+    '8px': 'p-m',
+    '16px': 'p-l',
+};
+export const Flex = ({ children, justify, align, direction = 'row', type = 'hug', gap = '4px', ref, offset = '0', }) => {
+    return (_jsx("div", { className: jc('flex', 'scrollbar-none', 'overflow-hidden', 'overflow-x-auto', directionMap[direction], typeMap[type], gapMap[gap], offsetMap[offset], align && alignMap[align], justify && justifyMap[justify]), ref: ref, children: children }));
+};

package/dist/src/ui/layout/flex/flex.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Flex } from './flex';
+declare const meta: Meta<typeof Flex>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Row: Story;
+export declare const Column: Story;
+export declare const SpaceBetween: Story;

package/dist/src/ui/layout/flex/flex.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from './flex';
+const meta = {
+    title: 'Layout/Flex',
+    component: Flex,
+    tags: ['autodocs'],
+    argTypes: {
+        direction: {
+            control: 'select',
+            options: ['row', 'column'],
+        },
+        justify: {
+            control: 'select',
+            options: ['start', 'center', 'end', 'space-between'],
+        },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+        },
+        gap: {
+            control: 'select',
+            options: ['0', '4px', '8px', '16px'],
+        },
+        offset: {
+            control: 'select',
+            options: ['0', '4px', '8px', '16px'],
+        },
+    },
+};
+export default meta;
+const Box = ({ children }) => _jsx("div", { className: "bg-accent p-4 text-white rounded", children: children });
+export const Row = {
+    args: {
+        direction: 'row',
+        gap: '8px',
+        children: [_jsx(Box, { children: "Box 1" }, "1"), _jsx(Box, { children: "Box 2" }, "2"), _jsx(Box, { children: "Box 3" }, "3")],
+    },
+};
+export const Column = {
+    args: {
+        direction: 'column',
+        gap: '16px',
+        children: [_jsx(Box, { children: "Row 1" }, "1"), _jsx(Box, { children: "Row 2" }, "2"), _jsx(Box, { children: "Row 3" }, "3")],
+    },
+};
+export const SpaceBetween = {
+    args: {
+        direction: 'row',
+        justify: 'space-between',
+        type: 'fill',
+        children: [_jsx(Box, { children: "Left" }, "1"), _jsx(Box, { children: "Right" }, "2")],
+    },
+};

package/dist/src/ui/layout/icon-action/icon-action.d.ts

@@ -0,0 +1,9 @@
+import type { LucideProps } from 'lucide-react';
+import type { FC, ReactElement } from 'react';
+type TIconActionProps = {
+    icon: ReactElement<LucideProps>;
+    onClick?: VoidFunction;
+    bgc?: CSSStyleDeclaration['backgroundColor'];
+};
+export declare const IconAction: FC<TIconActionProps>;
+export {};

package/dist/src/ui/layout/icon-action/icon-action.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jc } from '../../../utils';
+export const IconAction = ({ onClick, icon, bgc }) => {
+    const onClickHandler = (e) => {
+        e.stopPropagation();
+        if (onClick) {
+            onClick();
+        }
+    };
+    return (_jsx("div", { className: jc('relative z-10 flex h-8 w-8 items-center justify-center rounded transition-all duration-200 ease-in-out', onClick ? 'hover:bg-[var(--shadow)] cursor-pointer' : undefined), onClick: onClickHandler, children: _jsx("span", { className: "absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full", style: { backgroundColor: bgc }, children: icon }) }));
+};

package/dist/src/ui/layout/icon-action/icon-action.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { IconAction } from './icon-action';
+declare const meta: Meta<typeof IconAction>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithBackground: Story;

package/dist/src/ui/layout/icon-action/icon-action.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Settings } from 'lucide-react';
+import { IconAction } from './icon-action';
+const meta = {
+    title: 'Layout/IconAction',
+    component: IconAction,
+    tags: ['autodocs'],
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        icon: _jsx(Settings, { size: 16 }),
+    },
+};
+export const WithBackground = {
+    args: {
+        icon: _jsx(Settings, { size: 16, color: "white" }),
+        bgc: '#ef4444',
+    },
+};

package/dist/src/ui/layout/index.d.ts

@@ -0,0 +1,5 @@
+export * from './dropdown/dropdown';
+export * from './flex/flex';
+export * from './icon-action/icon-action';
+export * from './main-page-layout/main-page-layout';
+export * from './offset/offset';

package/dist/src/ui/layout/index.js

@@ -0,0 +1,5 @@
+export * from './dropdown/dropdown';
+export * from './flex/flex';
+export * from './icon-action/icon-action';
+export * from './main-page-layout/main-page-layout';
+export * from './offset/offset';

package/dist/src/ui/layout/main-page-layout/main-page-layout.d.ts

@@ -0,0 +1,7 @@
+import { type FC, type PropsWithChildren, type ReactNode } from 'react';
+type TProps = {
+    leftPanel?: ReactNode;
+    rightPanel?: ReactNode;
+};
+export declare const MainPageLayout: FC<PropsWithChildren<TProps>>;
+export {};

package/dist/src/ui/layout/main-page-layout/main-page-layout.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { useWidget } from '../../../providers';
+import { Flex } from '../flex/flex';
+export const MainPageLayout = ({ children, leftPanel, rightPanel }) => {
+    const { widget } = useWidget();
+    return (_jsxs("main", { className: "grid h-[100dvh] w-full grid-cols-[300px_1fr_300px] py-xl px-l gap-l", children: [_jsx("aside", { className: "h-full w-full", children: leftPanel }), _jsxs(Flex, { justify: 'center', gap: '16px', type: 'fill', children: [children, widget && _jsx(Fragment, { children: widget.ui }, widget.id)] }), _jsx("aside", { className: "h-full w-full", children: rightPanel })] }));
+};

package/dist/src/ui/layout/main-page-layout/main-page-layout.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MainPageLayout } from './main-page-layout';
+declare const meta: Meta<typeof MainPageLayout>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/ui/layout/main-page-layout/main-page-layout.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MainPageLayout } from './main-page-layout';
+import { Typo } from '../../information';
+const meta = {
+    title: 'Layout/MainPageLayout',
+    component: MainPageLayout,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        leftPanel: (_jsxs("div", { className: "h-full bg-secondary/20 p-4 border-r border-border", children: [_jsx(Typo, { weight: "500", children: "Left Panel" }), _jsx(Typo, { size: "s", children: "Navigation or filters" })] })),
+        rightPanel: (_jsxs("div", { className: "h-full bg-secondary/20 p-4 border-l border-border", children: [_jsx(Typo, { weight: "500", children: "Right Panel" }), _jsx(Typo, { size: "s", children: "Additional info" })] })),
+        children: (_jsxs("div", { className: "w-full h-full bg-background-accent p-4 rounded-xl shadow-sm", children: [_jsx(Typo, { size: "xl", weight: "500", children: "Main Content Area" }), _jsxs("div", { className: "mt-4 space-y-2", children: [_jsx(Typo, { children: "This is where the main application content goes." }), _jsx(Typo, { color: "secondary", children: "It is centered and has a gap between panels." })] })] })),
+    },
+};

package/dist/src/ui/layout/offset/offset.d.ts

@@ -0,0 +1,6 @@
+import { type FC, type PropsWithChildren } from 'react';
+type TProps = {
+    type?: 'horizontal' | 'vertical' | 'both';
+};
+export declare const Offset: FC<PropsWithChildren<TProps>>;
+export {};

package/dist/src/ui/layout/offset/offset.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jc } from '../../../utils';
+const typeMap = {
+    horizontal: 'mx-l',
+    vertical: 'my-l',
+    both: 'm-l',
+};
+export const Offset = ({ children, type = 'horizontal', }) => {
+    return _jsx("div", { className: jc(typeMap[type]), children: children });
+};

package/dist/src/ui/layout/offset/offset.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Offset } from './offset';
+declare const meta: Meta<typeof Offset>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Horizontal: Story;
+export declare const Vertical: Story;
+export declare const Both: Story;

package/dist/src/ui/layout/offset/offset.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Offset } from './offset';
+import { Typo } from '../../information';
+const meta = {
+    title: 'Layout/Offset',
+    component: Offset,
+    tags: ['autodocs'],
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['horizontal', 'vertical', 'both'],
+        },
+    },
+};
+export default meta;
+export const Horizontal = {
+    args: {
+        type: 'horizontal',
+        children: (_jsx("div", { className: "bg-accent-secondary p-2", children: _jsx(Typo, { children: "Horizontal Offset (mx-l)" }) })),
+    },
+};
+export const Vertical = {
+    args: {
+        type: 'vertical',
+        children: (_jsx("div", { className: "bg-accent-secondary p-2", children: _jsx(Typo, { children: "Vertical Offset (my-l)" }) })),
+    },
+};
+export const Both = {
+    args: {
+        type: 'both',
+        children: (_jsx("div", { className: "bg-accent-secondary p-2", children: _jsx(Typo, { children: "Both Offset (m-l)" }) })),
+    },
+};

package/dist/src/utils/classes.d.ts

@@ -0,0 +1 @@
+export declare const jc: (...classes: (string | undefined)[]) => string;

package/dist/src/utils/classes.js

@@ -0,0 +1 @@
+export const jc = (...classes) => classes.filter(Boolean).join(' ').trim();

package/dist/src/utils/index.d.ts

@@ -0,0 +1 @@
+export { jc } from './classes';

package/dist/src/utils/index.js

@@ -0,0 +1 @@
+export { jc } from './classes';

package/dist/stories/Button.d.ts

@@ -0,0 +1,15 @@
+import './button.css';
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Button.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './button.css';
+/** Primary UI component for user interaction */
+export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => {
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    return (_jsx("button", { type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: { backgroundColor }, ...props, children: label }));
+};

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+    };
+    args: {
+        onClick: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/stories/Button.stories.js

@@ -0,0 +1,44 @@
+import { fn } from 'storybook/test';
+import { Button } from './Button';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'Example/Button',
+    component: Button,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+    args: { onClick: fn() },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {
+        primary: true,
+        label: 'Button',
+    },
+};
+export const Secondary = {
+    args: {
+        label: 'Button',
+    },
+};
+export const Large = {
+    args: {
+        size: 'large',
+        label: 'Button',
+    },
+};
+export const Small = {
+    args: {
+        size: 'small',
+        label: 'Button',
+    },
+};

package/dist/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/stories/Header.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from './Button';
+import './header.css';
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (_jsx("header", { children: _jsxs("div", { className: "storybook-header", children: [_jsxs("div", { children: [_jsx("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", fillRule: "evenodd", children: [_jsx("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }), _jsx("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }), _jsx("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })] }) }), _jsx("h1", { children: "Acme" })] }), _jsx("div", { children: user ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "welcome", children: ["Welcome, ", _jsx("b", { children: user.name }), "!"] }), _jsx(Button, { size: "small", onClick: onLogout, label: "Log out" })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", onClick: onLogin, label: "Log in" }), _jsx(Button, { primary: true, size: "small", onClick: onCreateAccount, label: "Sign up" })] })) })] }) }));

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import("storybook/test").Mock<(...args: any[]) => any>;
+        onLogout: import("storybook/test").Mock<(...args: any[]) => any>;
+        onCreateAccount: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Header.stories.js

@@ -0,0 +1,26 @@
+import { fn } from 'storybook/test';
+import { Header } from './Header';
+const meta = {
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+        layout: 'fullscreen',
+    },
+    args: {
+        onLogin: fn(),
+        onLogout: fn(),
+        onCreateAccount: fn(),
+    },
+};
+export default meta;
+export const LoggedIn = {
+    args: {
+        user: {
+            name: 'Jane Doe',
+        },
+    },
+};
+export const LoggedOut = {};

package/dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;