@beydesign/storybook 0.0.28 → 0.0.30

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { Header } from './stories/Header';
 export { NavItem } from './stories/NavItem';
 export { CreditsCard } from './stories/CreditsCard';
 export { Sidebar } from './stories/Sidebar';
+export { Menu } from './stories/Menu';
+export { AgentCard } from './stories/AgentCard';
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, type MainButtonProps, } from './stories/types/button';
 export { BadgeColor, BadgeSize, type BadgeProps } from './stories/types/badge';
 export { AvatarStyle, AvatarSize, type AvatarProps, } from './stories/types/avatar';
@@ -24,3 +26,5 @@ export { type HeaderProps } from './stories/types/header';
 export { NavItemState, NavItemSize, type NavItemProps, } from './stories/types/nav-item';
 export { CreditsCardSize, type CreditsCardProps, } from './stories/types/credits-card';
 export { SidebarSize, type SidebarProps, type NavItemConfig, type NavSection, } from './stories/types/sidebar';
+export { type MenuProps, type MenuItemProps } from './stories/types/menu';
+export { type AgentCardProps, AgentState } from './stories/types/agent-card';

package/dist/index.js

@@ -12,6 +12,8 @@ export { Header } from './stories/Header';
 export { NavItem } from './stories/NavItem';
 export { CreditsCard } from './stories/CreditsCard';
 export { Sidebar } from './stories/Sidebar';
+export { Menu } from './stories/Menu';
+export { AgentCard } from './stories/AgentCard';
 // Button Types
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
 // Badge Types
@@ -36,3 +38,5 @@ export { NavItemState, NavItemSize, } from './stories/types/nav-item';
 export { CreditsCardSize, } from './stories/types/credits-card';
 // Sidebar Types
 export { SidebarSize, } from './stories/types/sidebar';
+// Agent Card Types
+export { AgentState } from './stories/types/agent-card';

package/dist/stories/AgentCard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AgentCardProps, ComponentsProps } from './types/agent-card';
+export declare const AgentCard: React.FC<AgentCardProps>;
+export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/AgentCard.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AgentState, } from './types/agent-card';
+import { Box } from '@mui/material';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+import { Toggle } from './Toggle';
+import { TogglePosition } from './types/toggle';
+import { Badge } from './Bagde';
+import { BadgeColor, BadgeSize } from './types/badge';
+import { MainButton } from './Button';
+import { ButtonHierarchy, ButtonSize } from './types/button';
+import { Menu } from './Menu';
+import { ArrowsCounterClockwise } from '@phosphor-icons/react';
+import { ProgressIndicator } from './ProgressIndicator';
+import { ProgressIndicatorMode } from './types/progress-indicator';
+export const AgentCard = ({ title, description = '', date = '', showDate = false, badges = [], showBadges = false, showTimeBadge = false, showDescription = false, showMenu = false, menuItems = [], active = false, showActiveToggle = false, onActiveToggleChange, activeToggleDisabled = false, agentImage, time, onPreview, agentState, }) => {
+    const [hovered, setHovered] = useState(false);
+    // const isError = agentState === AgentState.error;
+    // const isDraft = agentState === AgentState.pending;
+    const isProcessing = agentState === AgentState.processing;
+    const isReady = agentState === AgentState.ready;
+    return (_jsxs(Box, { width: '300px', display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: 'var(--colors-light-background-bg-component)', boxShadow: '0px 2px 8px 0px #2207380A', children: [_jsxs(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative', width: '100%', sx: { aspectRatio: 1 }, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [agentImage && (_jsx("img", { src: agentImage, alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover' } })), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
+                            position: 'absolute',
+                            right: '8px',
+                            bottom: '8px',
+                            zIndex: 2,
+                        }, color: BadgeColor.Violet })), showMenu && menuItems.length > 0 && (_jsx(Menu, { items: menuItems, style: {
+                            zIndex: 2,
+                            position: 'absolute',
+                            right: '8px',
+                            top: '8px',
+                        } })), isReady && hovered && (_jsx(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', sx: { opacity: 0.5, zIndex: 1 } })), isProcessing && (_jsxs(Box, { position: 'absolute', top: '0', left: '0', width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-component-hover)', style: { zIndex: 1 }, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(Typography, { text: "Agent creation in progress", size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: 'var(--primitives-desktop-primary-white-100)' }), _jsx(ProgressIndicator, { mode: ProgressIndicatorMode.Percentage, currentValue: 50, maxValue: 100, textColor: 'var(--primitives-desktop-primary-white-100)' })] })), isReady && onPreview && (_jsx(Box, { position: 'absolute', sx: { zIndex: 2 }, children: _jsx(MainButton, { text: "Preview", onClick: onPreview, showTrailingIcon: true, trailingIcon: "Play", hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, style: { border: 'none' } }) }))] }), _jsx(Typography, { text: title, size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }), (showDate || showActiveToggle) && (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [showDate && (_jsx(Typography, { text: date, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', style: { flex: 1 } })), showActiveToggle && (_jsx(Toggle, { checked: active, onChange: (checked) => onActiveToggleChange?.(checked), disabled: activeToggleDisabled, text: "Active", togglePosition: TogglePosition.Right, style: { flex: 1 } }))] })), showBadges && (_jsx(Box, { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: badges.map((badge) => (_jsx(Badge, { text: badge, size: BadgeSize.lg, fill: true }))) })), showDescription && (_jsx(Typography, { text: description, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)' }))] }));
+};
+export const Components = () => {
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Avatars" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx("div", { children: _jsx("h2", { children: "Size: sm, Avatar Style: Letters" }) }) })] }));
+};

package/dist/stories/AgentCard.stories.d.ts

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

package/dist/stories/AgentCard.stories.js

@@ -0,0 +1,144 @@
+import { AgentCard } from './AgentCard';
+import { AgentState } from './types/agent-card';
+const meta = {
+    title: 'Design System/Components/AgentCard',
+    component: AgentCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=5155-1047&t=qmLHvTvP8XX3NuUh-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        agentImage: {
+            control: 'text',
+            description: 'Image of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        showDate: {
+            control: 'boolean',
+            description: 'Whether to show the date',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        badges: {
+            description: 'Badges of the agent',
+            table: {
+                type: { summary: 'array' },
+            },
+        },
+        showBadges: {
+            control: 'boolean',
+            description: 'Whether to show the badges',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showTimeBadge: {
+            control: 'boolean',
+            description: 'Whether to show the time badge',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Whether to show the description',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showMenu: {
+            control: 'boolean',
+            description: 'Whether to show the menu',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        active: {
+            control: 'boolean',
+            description: 'Whether the agent is active',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        activeToggleDisabled: {
+            control: 'boolean',
+            description: 'Whether the active toggle is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showActiveToggle: {
+            control: 'boolean',
+            description: 'Whether to show the active toggle',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        onActiveToggleChange: {
+            description: 'Callback function for active toggle change',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        date: {
+            control: 'text',
+            description: 'Date of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: 'text',
+            description: 'Description of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        title: {
+            control: 'text',
+            description: 'Title of the agent',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        agentState: {
+            control: 'select',
+            description: 'State of the agent',
+            options: Object.values(AgentState),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+    },
+};
+export default meta;
+export const Placeholder = {
+    args: {
+        title: 'Agent Card',
+        active: true,
+        showActiveToggle: true,
+        showDate: true,
+        date: '2024-01-01',
+        badges: ['HR', 'Sales', 'Marketing'],
+        showBadges: true,
+        showDescription: true,
+        description: 'This is a very long description that will wrap to the next line',
+        agentImage: 'https://images.unsplash.com/photo-1575936123452-b67c3203c357?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8aW1hZ2V8ZW58MHx8MHx8fDA%3D',
+        showTimeBadge: true,
+        time: '10:00',
+        onPreview: () => { },
+        menuItems: [
+            { label: 'Edit', icon: 'Pencil', onClick: () => { } },
+            { label: 'Delete', icon: 'Trash', onClick: () => { }, destructive: true },
+        ],
+        showMenu: true,
+        agentState: AgentState.processing,
+    },
+};

package/dist/stories/Badge.stories.js

@@ -35,6 +35,13 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        showIcon: {
+            control: 'boolean',
+            description: 'Whether to show the Icon',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
         icon: {
             control: 'text',
             description: 'Name of the display Phosphor icon (e.g., "Circle")',
@@ -82,6 +89,8 @@ export const Green = {
     args: {
         text: 'Badge',
         color: BadgeColor.Green,
+        showIcon: true,
+        icon: 'Cactus',
     },
 };
 export const Red = {

package/dist/stories/Bagde.js

@@ -1,14 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BadgeColor, BadgeSize } from './types/badge';
-import * as PhosphorIcons from '@phosphor-icons/react';
 import { Box } from '@mui/material';
 import { Typography } from './Typography';
 import { TypographySize, TypographyWeight } from './types/typography';
-const getIconComponent = (iconName, props) => {
-    const Icon = PhosphorIcons[iconName];
-    return Icon ? _jsx(Icon, { ...props }) : null;
-};
-export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', fill = true, }) => {
+import { getIconComponent } from '../utils/icon';
+export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, style: customStyle, icon = 'Cactus', showIcon = false, fill = true, }) => {
     const getBackgroundColor = (color) => {
         switch (color) {
             case BadgeColor.Default:
@@ -109,5 +105,5 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, s
         color: getTextColor(),
         weight: 'regular',
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, gap: "4px", sx: customStyle, children: [icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { text: text, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: getTextColor() }))] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", bgcolor: fill ? backgroundColor : 'transparent', border: fill ? border : 'none', borderRadius: fill ? 'var(--spacing-tokens-size-in-px-radius-radius-full)' : 'none', padding: padding, gap: "4px", sx: customStyle, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { text: text, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: getTextColor() }))] }));
 };

package/dist/stories/Button.js

@@ -1,14 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircularProgress } from '@mui/material';
-import * as PhosphorIcons from '@phosphor-icons/react';
 import styled from '@emotion/styled';
 import { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './types/button';
 import { Typography } from './Typography';
 import { TypographySize, TypographyWeight } from './types/typography';
-const getIconComponent = (iconName, props) => {
-    const Icon = PhosphorIcons[iconName];
-    return Icon ? _jsx(Icon, { ...props }) : null;
-};
+import { getIconComponent } from '../utils/icon';
 const StyledButton = styled.button `
   text-transform: none;
   padding: ${(props) => props.$displayIconMode === ButtonDisplayMode.Only
@@ -283,7 +279,7 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                 gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
             }, children: [showLeadingIcon &&
                     leadingIcon &&
-                    getIconComponent(leadingIcon, iconProps), _jsx(Typography, { text: text, size: getTextSize(), weight: TypographyWeight.SemiBold }), showTrailingIcon &&
+                    getIconComponent(leadingIcon, iconProps), text && (_jsx(Typography, { text: text, size: getTextSize(), weight: TypographyWeight.SemiBold })), showTrailingIcon &&
                     trailingIcon &&
                     getIconComponent(trailingIcon, iconProps)] }));
     };

package/dist/stories/Menu.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComponentsProps, MenuProps } from './types/menu';
+export declare const Menu: React.FC<MenuProps>;
+export declare const Components: React.FC<ComponentsProps>;

package/dist/stories/Menu.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuItem as MuiMenuItem, Menu as MuiMenu, } from '@mui/material';
+import { Fragment, useState } from 'react';
+import { MainButton } from './Button';
+import { ButtonDisplayMode, ButtonHierarchy, ButtonType } from './types/button';
+import { Typography } from './Typography';
+import { TypographySize, TypographyWeight } from './types/typography';
+import { getIconComponent } from '../utils/icon';
+export const Menu = ({ icon = 'DotsThree', items, style, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleMenuItemClick = (item, event) => {
+        handleClose();
+        if (item.onClick) {
+            item?.onClick(event);
+        }
+    };
+    const getColor = (action) => {
+        if (action?.destructive)
+            return 'var(--colors-light-text-text-error)';
+        return 'var(--colors-light-text-text-title)';
+    };
+    return (_jsxs(Fragment, { children: [_jsx(MainButton, { displayIcon: icon, onClick: handleClick, type: ButtonType.Button, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.Secondary, style: style }), _jsx(MuiMenu, { id: "basic-menu", anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
+                    'aria-labelledby': 'basic-button',
+                    style: {
+                        padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+                    },
+                }, slotProps: {
+                    paper: {
+                        style: {
+                            borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+                        },
+                    },
+                    root: { style: { gap: '4px' } },
+                }, children: items?.map((action, index) => {
+                    if (action) {
+                        return (_jsxs(MuiMenuItem, { onClick: (e) => handleMenuItemClick(action, e), sx: { gap: '8px' }, disableRipple: true, children: [action?.icon &&
+                                    getIconComponent(action.icon, {
+                                        width: '20px',
+                                        height: '20px',
+                                        color: getColor(action),
+                                    }), action?.label && (_jsx(Typography, { text: action.label, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: getColor(action) }))] }, index));
+                    }
+                }) })] }));
+};
+export const Components = () => {
+    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h1", { children: "Menu" }), _jsx("div", { style: { display: 'flex', gap: '1rem', flexDirection: 'column' }, children: _jsx(Menu, { icon: "DotsThree", items: [
+                        { label: 'Edit', onClick: () => { }, icon: 'Pencil' },
+                        { label: 'Delete', onClick: () => { }, icon: 'Trash' },
+                    ] }) })] }));
+};

package/dist/stories/Menu.stories.d.ts

@@ -0,0 +1,43 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("..").MenuProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        icon: {
+            control: "select";
+            options: string[];
+            defaultValue: string;
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        items: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        style: {
+            control: "object";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/stories/Menu.stories.js

@@ -0,0 +1,48 @@
+import { Menu } from './Menu';
+const meta = {
+    title: 'Design System/Components/Menu',
+    component: Menu,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        icon: {
+            control: 'select',
+            options: ['DotsThree', 'Pencil', 'Trash'],
+            defaultValue: 'DotsThree',
+            description: 'The icon to display in the menu',
+            table: {
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        items: {
+            control: 'object',
+            description: 'The items to display in the menu',
+            table: {
+                type: {
+                    summary: 'MenuItemProps[]',
+                },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'The style to display in the menu',
+            table: {
+                type: { summary: 'CSSProperties' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        icon: 'DotsThree',
+        items: [
+            { label: 'Edit', onClick: () => { }, destructive: false, icon: 'Pencil' },
+            { label: 'Delete', onClick: () => { }, destructive: true, icon: 'Trash' },
+        ],
+    },
+};

package/dist/stories/NavItem.js

@@ -1,16 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from '@emotion/styled';
-import * as PhosphorIcons from '@phosphor-icons/react';
 import { NavItemState, NavItemSize } from './types/nav-item';
 import { Typography } from './Typography';
 import { TypographySize, TypographyWeight } from './types/typography';
 import { Badge } from './Bagde';
 import { BadgeColor, BadgeSize } from './types/badge';
 import { Box } from '@mui/material';
-const getIconComponent = (iconName, props) => {
-    const Icon = PhosphorIcons[iconName];
-    return Icon ? _jsx(Icon, { ...props }) : null;
-};
+import { getIconComponent } from '../utils/icon';
 const StyledNavItem = styled.div `
   display: flex;
   flex-direction: row;

package/dist/stories/Typography.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TypographySize, TypographyWeight, } from './types/typography';
-export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, }) => {
+export const Typography = ({ text, color, size = TypographySize.HeadingL, weight = TypographyWeight.Bold, className, style, }) => {
     const getTypographySizeToken = () => {
         let sizeLc = size?.toLowerCase() || '';
         if (sizeLc.includes('heading')) {
@@ -47,6 +47,7 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
             textTransform: getTextTransform(),
             textDecoration: textDecoration,
             color: color || 'var(--global-text-text-title)',
+            ...style,
         }, children: text }));
 };
 export const Components = () => {

package/dist/stories/types/agent-card.d.ts

@@ -0,0 +1,53 @@
+import { MenuItemProps } from './menu';
+export declare enum AgentState {
+    pending = "pending",
+    processing = "processing",
+    error = "error",
+    ready = "ready"
+}
+/**
+ * Agent card component props
+ */
+export type AgentCardProps = {
+    /** Agent image */
+    agentImage?: string;
+    /** Show date */
+    showDate?: boolean;
+    /** Badges */
+    badges?: string[];
+    /** Show badges */
+    showBadges?: boolean;
+    /** Time */
+    time?: string;
+    /** Show time badge */
+    showTimeBadge?: boolean;
+    /** Show description */
+    showDescription?: boolean;
+    /** Menu items */
+    menuItems?: MenuItemProps[];
+    /** Show menu */
+    showMenu?: boolean;
+    /** Description */
+    description?: string;
+    /** Title */
+    title: string;
+    /** Date */
+    date?: string;
+    /** Active */
+    active?: boolean;
+    /** Show active toggle */
+    showActiveToggle?: boolean;
+    /** On active toggle change */
+    onActiveToggleChange?: (active: boolean) => void;
+    /** Active toggle disabled */
+    activeToggleDisabled?: boolean;
+    /** On preview */
+    onPreview?: () => void;
+    /** Agent state */
+    agentState?: AgentState;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/agent-card.js

@@ -0,0 +1,7 @@
+export var AgentState;
+(function (AgentState) {
+    AgentState["pending"] = "pending";
+    AgentState["processing"] = "processing";
+    AgentState["error"] = "error";
+    AgentState["ready"] = "ready";
+})(AgentState || (AgentState = {}));

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

@@ -1,5 +1,5 @@
+import { IconName } from '../../utils/icon';
 import type { SxProps, Theme } from '@mui/material';
-import * as PhosphorIcons from '@phosphor-icons/react';
 /**
  * Badge size variants
  */
@@ -35,8 +35,10 @@ export type BadgeProps = {
     text: string;
     /** Custom style of the badge */
     style?: SxProps<Theme>;
+    /** Whether to show the Icon */
+    showIcon?: boolean;
     /** Icon to display in the badge */
-    icon?: keyof typeof PhosphorIcons;
+    icon?: IconName;
     /** Whether to fill the icon */
     fill?: boolean;
 };

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

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import * as PhosphorIcons from '@phosphor-icons/react';
+import { IconName } from '../../utils/icon';
 /**
  * Button size variants
  */
@@ -65,9 +65,9 @@ export interface ButtonSizeConfig {
  */
 export interface MainButtonProps {
     /** Click handler for the button */
-    onClick?: () => void | Promise<boolean> | Promise<void>;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** Text content of the button */
-    text: string;
+    text?: string;
     /** Whether the button is disabled */
     disabled?: boolean;
     /** Whether the button is in loading state */
@@ -81,7 +81,7 @@ export interface MainButtonProps {
     /** Visual hierarchy of the button */
     hierarchy?: ButtonHierarchy;
     /** Icon to display when in icon mode */
-    displayIcon?: keyof typeof PhosphorIcons;
+    displayIcon?: IconName;
     /** How to display the icon */
     displayIconMode?: ButtonDisplayMode;
     /** Current state of the button */
@@ -95,9 +95,9 @@ export interface MainButtonProps {
     /** Whether to show the trailing icon */
     showTrailingIcon?: boolean;
     /** Icon to show at the start of the button */
-    leadingIcon?: keyof typeof PhosphorIcons;
+    leadingIcon?: IconName;
     /** Icon to show at the end of the button */
-    trailingIcon?: keyof typeof PhosphorIcons;
+    trailingIcon?: IconName;
 }
 /**
  * Props for the Components wrapper

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

@@ -0,0 +1,30 @@
+import { IconName } from '../../utils/icon';
+/**
+ * Menu item
+ */
+export interface MenuItemProps {
+    /** Label */
+    label: string;
+    /** Icon */
+    icon: IconName;
+    /** On click */
+    onClick: () => void;
+    /** Destructive */
+    destructive?: boolean;
+}
+/**
+ * Menu component props
+ */
+export type MenuProps = {
+    /** Icon */
+    icon?: IconName;
+    /** Items */
+    items?: MenuItemProps[];
+    /** Style */
+    style?: React.CSSProperties;
+};
+/**
+ * Props for the Components wrapper
+ */
+export interface ComponentsProps {
+}

package/dist/stories/types/menu.js

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

package/dist/stories/types/nav-item.d.ts

@@ -1,3 +1,4 @@
+import { IconName } from '../../utils/icon';
 export declare enum NavItemState {
     Default = "default",
     Active = "active",
@@ -16,7 +17,7 @@ export interface NavItemProps {
      * The icon to display before the text
      * Uses Phosphor Icons
      */
-    icon: string;
+    icon: IconName;
     /**
      * The current state of the navigation item
      */

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

@@ -1,3 +1,4 @@
+import { IconName } from '../../utils/icon';
 export declare enum SidebarSize {
     Expanded = "expanded",
     Collapsed = "collapsed"
@@ -10,7 +11,7 @@ export interface NavItemConfig {
     /**
      * The icon to display before the text (Phosphor icon name)
      */
-    icon: string;
+    icon: IconName;
     /**
      * The current state of the navigation item
      */

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

@@ -37,6 +37,8 @@ export interface TypographyProps {
     color?: string;
     /** CSS class name for additional styling */
     className?: string;
+    /** Style object for additional styling */
+    style?: React.CSSProperties;
 }
 /**
  * Props for the Components wrapper

package/dist/utils/icon.d.ts

@@ -0,0 +1,4 @@
+import * as PhosphorIcons from '@phosphor-icons/react';
+import type { IconProps } from '@phosphor-icons/react';
+export type IconName = keyof typeof PhosphorIcons;
+export declare const getIconComponent: (iconName: IconName, props: IconProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/utils/icon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PhosphorIcons from '@phosphor-icons/react';
+export const getIconComponent = (iconName, props) => {
+    const Icon = PhosphorIcons[iconName];
+    return Icon ? _jsx(Icon, { ...props }) : null;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.0.28",
+  "version": "0.0.30",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",