@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/EntityCard/EntityCard.stories.js

@@ -0,0 +1,187 @@
+import { EntityCard } from './EntityCard';
+import { BadgeColor } from '../UI';
+const meta = {
+    title: 'Design System/Components/EntityCard/EntityCard',
+    component: EntityCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6916-20176',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        view: {
+            control: 'select',
+            options: ['avatar', 'agent'],
+            description: 'View variant — drives default width and image aspect ratio',
+            table: {
+                type: { summary: "'avatar' | 'agent'" },
+                defaultValue: { summary: 'avatar' },
+            },
+        },
+        name: {
+            control: 'text',
+            description: 'Display name shown over the image',
+            table: { type: { summary: 'string' } },
+        },
+        image: {
+            control: 'text',
+            description: 'Image url',
+            table: { type: { summary: 'string' } },
+        },
+        description: {
+            control: 'text',
+            description: 'Optional description shown below the image',
+            table: { type: { summary: 'string' } },
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Whether to show the description',
+            table: { type: { summary: 'boolean' } },
+        },
+        showMenu: {
+            control: 'boolean',
+            description: 'Whether to show the menu on hover',
+            table: { type: { summary: 'boolean' } },
+        },
+        onPreview: {
+            description: 'Preview handler — renders the action button on hover',
+            table: { type: { summary: 'function' } },
+        },
+        previewButtonText: {
+            control: 'text',
+            description: 'Label for the action button; when set it renders text + icon, otherwise icon-only',
+            table: { type: { summary: 'string' } },
+        },
+        previewIcon: {
+            control: 'text',
+            description: 'Icon for the action button',
+            table: {
+                type: { summary: 'IconName' },
+                defaultValue: { summary: 'Play' },
+            },
+        },
+        showStatusBadge: {
+            control: 'boolean',
+            description: 'Whether to show the status badge (top-left)',
+            table: { type: { summary: 'boolean' } },
+        },
+        statusBadgeText: {
+            control: 'text',
+            description: 'Status badge text (e.g. "Active")',
+            table: { type: { summary: 'string' } },
+        },
+        statusBadgeColor: {
+            control: 'select',
+            options: Object.values(BadgeColor),
+            description: 'Status badge color',
+            table: {
+                type: { summary: 'BadgeColor' },
+                defaultValue: { summary: BadgeColor.Green },
+            },
+        },
+        menuItems: {
+            description: 'Menu items for the dropdown',
+            table: { type: { summary: 'array' } },
+        },
+        width: {
+            control: 'text',
+            description: 'Width of the card',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '208px' },
+            },
+        },
+    },
+};
+export default meta;
+const avatarImage = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=600&ixlib=rb-4.0.3';
+export const Default = {
+    args: {
+        name: 'Nelly',
+        image: avatarImage,
+        onPreview: () => { },
+        showMenu: true,
+        menuItems: [
+            { label: 'Copy Avatar ID', icon: 'Copy', onClick: () => { } },
+            { label: 'Create Agent', icon: 'UserCirclePlus', onClick: () => { } },
+            { label: 'Delete', icon: 'Trash', onClick: () => { }, destructive: true },
+        ],
+    },
+};
+export const AgentView = {
+    args: {
+        view: 'agent',
+        name: 'Nelly Customer Support',
+        image: avatarImage,
+        onPreview: () => { },
+        previewButtonText: 'Join',
+        previewIcon: 'VideoCamera',
+        showStatusBadge: true,
+        statusBadgeText: 'Active',
+        showMenu: true,
+        menuItems: [
+            { label: 'Conversation Link', icon: 'ShareNetwork', onClick: () => { } },
+            { label: 'Copy Agent ID', icon: 'CopySimple', onClick: () => { } },
+            { label: 'Embed', icon: 'Code', onClick: () => { } },
+            { label: 'Agent Details', icon: 'IdentificationCard', onClick: () => { } },
+            { label: 'Duplicate', icon: 'Copy', onClick: () => { } },
+            { label: 'Delete', icon: 'Trash', onClick: () => { }, destructive: true },
+        ],
+    },
+    parameters: {
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6919-20599',
+        },
+        docs: {
+            description: {
+                story: 'The agent view — wider, square image, a persistent status badge, and a labelled "Join" action. Hover to reveal the action row.',
+            },
+        },
+    },
+};
+export const WithDescription = {
+    args: {
+        ...Default.args,
+        name: 'Nelly Customer Support',
+        showDescription: true,
+        description: 'Support description',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Avatar card with an optional description below the image.',
+            },
+        },
+    },
+};
+export const NoActions = {
+    args: {
+        name: 'Nelly',
+        image: avatarImage,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A read-only avatar card without preview or menu actions on hover.',
+            },
+        },
+    },
+};
+export const NoImage = {
+    args: {
+        ...Default.args,
+        name: 'No Image',
+        image: undefined,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Fallback placeholder shown when no image is provided or it fails to load.',
+            },
+        },
+    },
+};

package/dist/stories/EntityCard/EntityCardSkeleton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { EntityCardSkeletonProps } from './types';
+export declare const EntityCardSkeleton: React.FC<EntityCardSkeletonProps>;

package/dist/stories/EntityCard/EntityCardSkeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SkeletonLoader } from '../UI';
+export const EntityCardSkeleton = ({ view = 'avatar', width, showDescription = false, style, }) => {
+    const isAgent = view === 'agent';
+    const cardWidth = width ?? (isAgent ? '280px' : '208px');
+    const imageAspectRatio = isAgent ? '1 / 1' : '203 / 264';
+    return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', style: style, children: [_jsx(Box, { width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: _jsx(SkeletonLoader, {}) }), showDescription && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', boxSizing: 'border-box', children: [_jsx(SkeletonLoader, { width: '100%', height: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), _jsx(SkeletonLoader, { width: '70%', height: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }))] }));
+};

package/dist/stories/EntityCard/EntityCardSkeleton.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EntityCardSkeleton } from './EntityCardSkeleton';
+declare const meta: Meta<typeof EntityCardSkeleton>;
+export default meta;
+type Story = StoryObj<typeof EntityCardSkeleton>;
+export declare const Avatar: Story;
+export declare const AvatarWithDescription: Story;
+export declare const Agent: Story;
+export declare const Grid: Story;
+export declare const LoadingState: Story;

package/dist/stories/EntityCard/EntityCardSkeleton.stories.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { EntityCardSkeleton } from './EntityCardSkeleton';
+const meta = {
+    title: 'Design System/Components/EntityCard/EntityCardSkeleton',
+    component: EntityCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        view: {
+            control: 'select',
+            options: ['avatar', 'agent'],
+            description: 'View variant — drives default width and image aspect ratio',
+            table: {
+                type: { summary: "'avatar' | 'agent'" },
+                defaultValue: { summary: 'avatar' },
+            },
+        },
+        width: {
+            control: 'text',
+            description: 'Width of the card (overrides the view default)',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '208px (avatar) / 280px (agent)' },
+            },
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Show the description placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the skeleton',
+            table: {
+                type: { summary: 'React.CSSProperties' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
+};
+export default meta;
+export const Avatar = {
+    args: {
+        view: 'avatar',
+    },
+};
+export const AvatarWithDescription = {
+    args: {
+        view: 'avatar',
+        showDescription: true,
+    },
+};
+export const Agent = {
+    args: {
+        view: 'agent',
+    },
+};
+export const Grid = {
+    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(EntityCardSkeleton, { view: "avatar" }), _jsx(EntityCardSkeleton, { view: "avatar", showDescription: true }), _jsx(EntityCardSkeleton, { view: "agent" })] })),
+};
+export const LoadingState = {
+    render: () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { children: [_jsx("h3", { children: "Loading state example" }), _jsx("p", { children: "How a row of entity cards appears while data is loading." })] }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: Array(5)
+                    .fill(0)
+                    .map((_, index) => (_jsx(EntityCardSkeleton, { view: "avatar" }, index))) }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: Array(4)
+                    .fill(0)
+                    .map((_, index) => (_jsx(EntityCardSkeleton, { view: "agent" }, index))) })] })),
+};

package/dist/stories/EntityCard/index.d.ts

@@ -0,0 +1,3 @@
+export * from './EntityCard';
+export * from './EntityCardSkeleton';
+export * from './types';

package/dist/stories/EntityCard/index.js

@@ -0,0 +1,3 @@
+export * from './EntityCard';
+export * from './EntityCardSkeleton';
+export * from './types';

package/dist/stories/EntityCard/types.d.ts

@@ -0,0 +1,54 @@
+import { MenuItemProps, BadgeColor } from '../UI';
+import { IconName } from '../../utils';
+/**
+ * Entity card view variants.
+ * - `avatar`: portrait avatar tile (icon-only preview action)
+ * - `agent`: wider, square agent tile (labelled action + status badge)
+ */
+export type EntityCardView = 'avatar' | 'agent';
+/**
+ * Entity card component props
+ */
+export interface EntityCardProps {
+    /** View variant — drives default width and image aspect ratio */
+    view?: EntityCardView;
+    /** Display name shown over the image */
+    name: string;
+    /** Image url */
+    image?: string;
+    /** Optional description shown below the image */
+    description?: string;
+    /** Whether to show the description */
+    showDescription?: boolean;
+    /** Preview handler — renders the action button on hover */
+    onPreview?: () => void;
+    /** Label for the action button; when set it renders text + icon, otherwise icon-only */
+    previewButtonText?: string;
+    /** Icon for the action button (defaults to `Play`) */
+    previewIcon?: IconName;
+    /** Whether to show the status badge (top-left) */
+    showStatusBadge?: boolean;
+    /** Status badge text (e.g. "Active") */
+    statusBadgeText?: string;
+    /** Status badge color (defaults to Green) */
+    statusBadgeColor?: BadgeColor;
+    /** Menu items for the dropdown — renders the menu button on hover */
+    menuItems?: MenuItemProps[];
+    /** Whether to show the menu */
+    showMenu?: boolean;
+    /** Width of the card (overrides the view default) */
+    width?: string | number;
+}
+/**
+ * Entity card skeleton props
+ */
+export interface EntityCardSkeletonProps {
+    /** View variant — drives default width and image aspect ratio */
+    view?: EntityCardView;
+    /** Width of the card (overrides the view default) */
+    width?: string | number;
+    /** Show the description placeholder */
+    showDescription?: boolean;
+    /** Custom style for the skeleton */
+    style?: React.CSSProperties;
+}

package/dist/stories/EntityCard/types.js

@@ -0,0 +1 @@
+export {};

package/dist/stories/Form/AutoComplete.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AutoCompleteProps } from './types';
+export declare const AutoComplete: React.FC<AutoCompleteProps>;

package/dist/stories/Form/AutoComplete.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+import { getTypographySizeToken, getTypographyWeightToken, getTextStyles, } from '../../utils';
+export const AutoComplete = ({ options, value, onChange, leadingIcon = 'MagnifyingGlass', placeholder = 'Search', disabled = false, onBlur, onFocus, }) => {
+    const [searchText, setSearchText] = useState('');
+    const [focused, setFocused] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const optionsContainerRef = useRef(null);
+    useEffect(() => {
+        setSearchText(value || '');
+    }, [value]);
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setSearchText(newValue);
+        setHighlightedIndex(-1);
+        if (value !== newValue) {
+            onChange(newValue);
+        }
+    };
+    const handleOptionSelect = (option) => {
+        if (option !== value) {
+            onChange(option);
+        }
+        setSearchText(option);
+        setFocused(false);
+        inputRef.current?.blur();
+    };
+    const handleKeyDown = (e) => {
+        if (!focused)
+            return;
+        const hasOptions = filteredOptions.length > 0;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (hasOptions) {
+                    setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (hasOptions) {
+                    setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+                }
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (hasOptions && highlightedIndex >= 0) {
+                    handleOptionSelect(filteredOptions[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setFocused(false);
+                inputRef.current?.blur();
+                break;
+            case 'Tab':
+                setFocused(false);
+                break;
+            default:
+                break;
+        }
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (optionsContainerRef.current &&
+                !optionsContainerRef.current.contains(event.target) &&
+                inputRef.current &&
+                !inputRef.current.contains(event.target)) {
+                setFocused(false);
+            }
+        };
+        if (focused) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [focused]);
+    useEffect(() => {
+        if (highlightedIndex >= 0 && optionsContainerRef.current) {
+            const highlightedElement = optionsContainerRef.current.children[highlightedIndex];
+            if (highlightedElement) {
+                highlightedElement.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [highlightedIndex]);
+    const handleClear = (event) => {
+        event.stopPropagation();
+        if (!disabled) {
+            onChange('');
+            setSearchText('');
+            inputRef.current?.focus();
+        }
+    };
+    const handleFocus = () => {
+        if (!disabled) {
+            setFocused(true);
+            if (onFocus)
+                onFocus();
+        }
+    };
+    const handleBlur = () => {
+        setTimeout(() => {
+            setFocused(false);
+            if (onBlur)
+                onBlur();
+            if (searchText !== value) {
+                setSearchText(value || '');
+            }
+        }, 150);
+    };
+    const filteredOptions = React.useMemo(() => {
+        return options.filter((option) => option.toLowerCase().includes((searchText || '').toLowerCase()));
+    }, [options, searchText]);
+    const sizeToken = getTypographySizeToken(TypographySize.TextS);
+    const weightToken = getTypographyWeightToken(TypographyWeight.Regular);
+    const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', position: 'relative', width: "100%", children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', alignItems: 'center', justifyContent: 'center', border: `1px solid ${focused ? 'var(--color-border-border-component-active)' : 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
+                    ? 'var(--color-background-bg-component-disabled)'
+                    : 'var(--color-background-bg-component)', children: [getIconComponent(leadingIcon, {
+                        width: '24px',
+                        height: '24px',
+                        color: 'var(--color-foreground-fg-quaternary)',
+                        'aria-hidden': 'true',
+                    }), _jsx("input", { ref: inputRef, type: "text", value: searchText, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, style: {
+                            flexGrow: 1,
+                            border: 'none',
+                            outline: 'none',
+                            fontSize: fontSize,
+                            fontWeight: fontWeight,
+                            fontFamily: fontFamily + ', sans-serif',
+                            lineHeight: lineHeight + 'px',
+                            letterSpacing: letterSpacing,
+                            textIndent: paragraphIndent,
+                            marginBottom: paragraphSpacing,
+                            textTransform: textTransform,
+                            textDecoration: textDecoration,
+                            color: disabled
+                                ? 'var(--color-text-text-disabled)'
+                                : 'var(--color-text-text-title)',
+                            backgroundColor: 'transparent',
+                        }, onFocus: handleFocus, onBlur: handleBlur, "aria-autocomplete": "list", "aria-controls": focused ? 'autocomplete-options' : undefined, "aria-expanded": focused, role: "combobox" }), searchText &&
+                        getIconComponent('X', {
+                            width: '24px',
+                            height: '24px',
+                            color: 'var(--color-foreground-fg-quaternary)',
+                            onClick: handleClear,
+                            style: { cursor: disabled ? 'default' : 'pointer' },
+                            'aria-label': 'Clear input',
+                        })] }), focused && (_jsx(Box, { id: "autocomplete-options", ref: optionsContainerRef, position: 'absolute', top: '100%', left: 0, zIndex: 1000, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No results found" }) })) : (filteredOptions.map((option, index) => (_jsx(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', onClick: () => handleOptionSelect(option), sx: {
+                        cursor: 'pointer',
+                        backgroundColor: highlightedIndex === index
+                            ? 'var(--color-background-bg-page)'
+                            : 'transparent',
+                        '&:hover': {
+                            backgroundColor: 'var(--color-background-bg-page)',
+                        },
+                    }, role: "option", "aria-selected": highlightedIndex === index, tabIndex: -1, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: option }) }, option)))) }))] }));
+};

package/dist/stories/Form/AutoComplete.stories.d.ts

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

package/dist/stories/Form/AutoComplete.stories.js

@@ -0,0 +1,88 @@
+import { AutoComplete } from './AutoComplete';
+const meta = {
+    title: 'Design System/Components/Form/AutoComplete',
+    component: AutoComplete,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4501-25356&t=XsmO3ZzXQ9rb1lu5-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        options: {
+            control: 'select',
+            description: 'The options to display in the autocomplete',
+            table: {
+                type: { summary: 'string[]' },
+            },
+        },
+        value: {
+            control: 'text',
+            description: 'The value of the selected option',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onChange: {
+            description: 'The onChange handler for the selected option',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the autocomplete is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        leadingIcon: {
+            control: 'select',
+            description: 'The leading icon of the autocomplete',
+            options: ['MagnifyingGlass', 'User', 'Calendar', 'Bell'],
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'The placeholder of the autocomplete',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onBlur: {
+            description: 'The onBlur handler for the autocomplete',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        onFocus: {
+            description: 'The onFocus handler for the autocomplete',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        options: [
+            'Option 1',
+            'Option 2',
+            'Option 3',
+            'Option 4',
+            'Option 5',
+            'Option 6',
+            'Option 7',
+            'Option 8',
+            'Option 9',
+            'Option 10',
+        ],
+        value: '',
+        onChange: () => { },
+    },
+};

package/dist/stories/Form/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CheckboxProps } from './types';
+export declare const Checkbox: React.FC<CheckboxProps>;