@beydesign/storybook 0.0.33 → 0.0.35

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { CreditsCard } from './stories/CreditsCard';
 export { Sidebar } from './stories/Sidebar';
 export { Menu } from './stories/Menu';
 export { AgentCard } from './stories/AgentCard';
+export { SkeletonLoader, AgentCardSkeleton } from './stories/SkeletonLoader';
 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';
@@ -28,3 +29,4 @@ export { CreditsCardSize, type CreditsCardProps, } from './stories/types/credits
 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';
+export { type SkeletonLoaderProps, type AgentCardSkeletonProps, } from './stories/SkeletonLoader';

package/dist/index.js

@@ -14,6 +14,7 @@ export { CreditsCard } from './stories/CreditsCard';
 export { Sidebar } from './stories/Sidebar';
 export { Menu } from './stories/Menu';
 export { AgentCard } from './stories/AgentCard';
+export { SkeletonLoader, AgentCardSkeleton } from './stories/SkeletonLoader';
 // Button Types
 export { ButtonSize, ButtonHierarchy, ButtonState, ButtonShape, ButtonDisplayMode, ButtonType, } from './stories/types/button';
 // Badge Types

package/dist/stories/AgentCard.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { AgentState, } from './types/agent-card';
 import { Box } from '@mui/material';
 import { Typography } from './Typography';
@@ -14,16 +14,61 @@ 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, }) => {
+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, previewButtonText = 'Preview', }) => {
     const [hovered, setHovered] = useState(false);
     const [imageError, setImageError] = useState(false);
+    const [isLoading, setIsLoading] = useState(!!agentImage);
     // const isError = agentState === AgentState.error;
     const isDraft = agentState === AgentState.pending;
     const isProcessing = agentState === AgentState.processing;
     const isReady = agentState === AgentState.ready;
+    // Handle image loading and errors
+    React.useEffect(() => {
+        if (!agentImage) {
+            setIsLoading(false);
+            return;
+        }
+        setIsLoading(true);
+        setImageError(false);
+        // Preload the image to check if it exists
+        const img = new Image();
+        img.onload = () => {
+            setImageError(false);
+            setIsLoading(false);
+        };
+        img.onerror = () => {
+            setImageError(true);
+            setIsLoading(false);
+        };
+        img.src = agentImage;
+        // Cleanup
+        return () => {
+            img.onload = null;
+            img.onerror = null;
+        };
+    }, [agentImage]);
+    // Render loading state or placeholder
+    const renderImageContent = () => {
+        if (isLoading) {
+            return (_jsxs(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(ArrowsCounterClockwise, { size: 24, weight: "bold", color: 'var(--colors-light-text-text-subtle)', style: { animation: 'spin 1.5s linear infinite' } }), _jsx(Typography, { text: "Loading preview...", size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)' })] }), _jsx("style", { children: `
+            @keyframes spin {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          ` })] }));
+        }
+        if (imageError || !agentImage) {
+            return (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { text: "No Preview Available", size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }) }));
+        }
+        return (_jsx("img", { src: agentImage, alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover' } }));
+    };
     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: isDraft
             ? 'var(--colors-light-background-bg-element)'
-            : '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: [imageError && (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(Typography, { text: "No Preview Available", size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold }) })), agentImage && !imageError && (_jsx("img", { src: 'f', alt: "Agent", width: '100%', height: '100%', style: { objectFit: 'cover' }, onError: () => setImageError(true), onLoad: () => setImageError(false) })), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
+            : 'var(--colors-light-background-bg-component)', boxShadow: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, 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: [renderImageContent(), showTimeBadge && time && (_jsx(Badge, { text: time, size: BadgeSize.md, fill: true, style: {
                             position: 'absolute',
                             right: '8px',
                             bottom: '8px',
@@ -33,7 +78,7 @@ export const AgentCard = ({ title, description = '', date = '', showDate = false
                             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)' }))] }));
+                        } })), 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: previewButtonText, 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

@@ -4,3 +4,6 @@ declare const meta: Meta<typeof AgentCard>;
 export default meta;
 type Story = StoryObj<typeof AgentCard>;
 export declare const Placeholder: Story;
+export declare const CustomPreviewText: Story;
+export declare const LoadingPreview: Story;
+export declare const NoImage: Story;

package/dist/stories/AgentCard.stories.js

@@ -116,6 +116,14 @@ const meta = {
                 type: { summary: 'string' },
             },
         },
+        previewButtonText: {
+            control: 'text',
+            description: 'Text for the preview button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'Preview' },
+            },
+        },
     },
 };
 export default meta;
@@ -134,11 +142,48 @@ export const Placeholder = {
         showTimeBadge: true,
         time: '10:00',
         onPreview: () => { },
+        previewButtonText: 'Preview',
         menuItems: [
             { label: 'Edit', icon: 'Pencil', onClick: () => { } },
             { label: 'Delete', icon: 'Trash', onClick: () => { }, destructive: true },
         ],
         showMenu: true,
-        agentState: AgentState.processing,
+        agentState: AgentState.ready,
+    },
+};
+export const CustomPreviewText = {
+    args: {
+        ...Placeholder.args,
+        previewButtonText: 'View Agent',
+        agentState: AgentState.ready,
+    },
+};
+export const LoadingPreview = {
+    args: {
+        ...Placeholder.args,
+        title: 'Loading Preview Example',
+        // Using a non-existent image to force loading state
+        agentImage: 'https://example.com/non-existent-image.jpg',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the loading state of the agent card image.',
+            },
+        },
+    },
+};
+export const NoImage = {
+    args: {
+        ...Placeholder.args,
+        title: 'No Image Example',
+        agentImage: undefined,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'This example demonstrates the agent card when no image is provided.',
+            },
+        },
     },
 };

package/dist/stories/AgentCardSkeleton.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AgentCardSkeleton } from './SkeletonLoader';
+declare const meta: Meta<typeof AgentCardSkeleton>;
+export default meta;
+type Story = StoryObj<typeof AgentCardSkeleton>;
+export declare const Default: Story;
+export declare const WithDate: Story;
+export declare const WithBadges: Story;
+export declare const WithDescription: Story;
+export declare const Complete: Story;
+export declare const CustomWidth: Story;
+export declare const Grid: Story;
+export declare const LoadingState: Story;

package/dist/stories/AgentCardSkeleton.stories.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AgentCardSkeleton } from './SkeletonLoader';
+import { Box } from '@mui/material';
+const meta = {
+    title: 'Design System/Components/AgentCardSkeleton',
+    component: AgentCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        width: {
+            control: 'text',
+            description: 'Width of the card',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '300px' },
+            },
+        },
+        showDate: {
+            control: 'boolean',
+            description: 'Show date placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showBadges: {
+            control: 'boolean',
+            description: 'Show badges placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Show 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 Default = {
+    args: {
+        width: '300px',
+    },
+};
+export const WithDate = {
+    args: {
+        width: '300px',
+        showDate: true,
+    },
+};
+export const WithBadges = {
+    args: {
+        width: '300px',
+        showBadges: true,
+    },
+};
+export const WithDescription = {
+    args: {
+        width: '300px',
+        showDescription: true,
+    },
+};
+export const Complete = {
+    args: {
+        width: '300px',
+        showDate: true,
+        showBadges: true,
+        showDescription: true,
+    },
+};
+export const CustomWidth = {
+    args: {
+        width: '400px',
+        showDate: true,
+        showBadges: true,
+        showDescription: true,
+    },
+};
+export const Grid = {
+    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(AgentCardSkeleton, { showDate: true }), _jsx(AgentCardSkeleton, { showBadges: true }), _jsx(AgentCardSkeleton, { showDescription: true }), _jsx(AgentCardSkeleton, { showDate: true, showBadges: true, showDescription: true })] })),
+};
+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: "This demonstrates how multiple skeletons might appear during a loading state" })] }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: Array(6)
+                    .fill(0)
+                    .map((_, index) => (_jsx(AgentCardSkeleton, { showDate: index % 2 === 0, showBadges: index % 3 === 0, showDescription: index % 2 !== 0 }, index))) })] })),
+};

package/dist/stories/Bagde.js

@@ -82,7 +82,7 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, s
             case BadgeSize.lg:
                 return 'var(--spacing-tokens-size-in-px-spacing-spacing-sm) var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
             case BadgeSize.md:
-                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) var(--spacing-tokens-size-in-px-spacing-spacing-md)';
+                return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 10px';
             case BadgeSize.xs:
                 return 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) var(--spacing-tokens-size-in-px-spacing-spacing-md)';
         }
@@ -90,13 +90,23 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, s
     const getIconSize = (size) => {
         switch (size) {
             case BadgeSize.lg:
-                return '20px';
+                return '16px';
             case BadgeSize.md:
                 return '16px';
             case BadgeSize.xs:
                 return '12px';
         }
     };
+    const getTypographySize = (size) => {
+        switch (size) {
+            case BadgeSize.lg:
+                return TypographySize.TextS;
+            case BadgeSize.md:
+                return TypographySize.TextS;
+            case BadgeSize.xs:
+                return TypographySize.TextXS;
+        }
+    };
     const backgroundColor = getBackgroundColor(color);
     const border = getBorder(color);
     const padding = getPadding(size);
@@ -105,5 +115,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: [showIcon && 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, margin: 0, gap: "4px", sx: customStyle, children: [showIcon && icon && getIconComponent(icon, iconProps), text && (_jsx(Typography, { text: text, size: getTypographySize(size), weight: TypographyWeight.Medium, color: getTextColor() }))] }));
 };

package/dist/stories/Sidebar.js

@@ -35,8 +35,7 @@ const SidebarContainer = styled.div `
 const LogoContainer = styled.div `
   display: flex;
   align-items: center;
-  justify-content: ${({ $size }) => $size === SidebarSize.Expanded ? 'flex-start' : 'center'};
-  padding: ${({ $size }) => ($size === SidebarSize.Expanded ? '0 24px' : '0')};
+  justify-content: center;
   margin-bottom: 32px;
   min-height: 38px;
   height: 38px;
@@ -56,7 +55,6 @@ const ToggleButtonWrapper = styled.div `
 const NavItemsContainer = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 8px;
   flex: 1;
 `;
 const NavSection = styled.div `
@@ -74,10 +72,10 @@ const SectionTitle = styled.div `
   transition: all 0.3s ease-in-out;
 `;
 const Separator = styled.div `
-  height: 0.31px;
+  height: 0.1px;
   background-color: var(--primitives-desktop-primary-brand-violet-950);
-  padding: 0 28px;
-  margin: 10px;
+  padding: ${({ $size }) => $size === SidebarSize.Collapsed ? '0px 8px' : '0px 28px'};
+  margin: ${({ $size }) => $size === SidebarSize.Collapsed ? '16px 12px' : '16px 18px'};
   opacity: 0.05;
   transition: all 0.3s ease-in-out;
 `;
@@ -112,7 +110,7 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
     };
     const isCollapsed = sidebarSize === SidebarSize.Collapsed;
     return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { text: section.title, size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--primitives-desktop-primary-gray-700)", className: isCollapsed ? 'hidden' : '' }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
-                                    section.showSeparator && _jsx(Separator, {})] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(Box, { sx: {
+                                    section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [credits && (_jsx(Box, { sx: {
                                         display: 'flex',
                                         justifyContent: 'center',
                                         padding: isCollapsed ? '8px' : '0px 12px',

package/dist/stories/SkeletonLoader.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export interface SkeletonLoaderProps {
+    /**
+     * Width of the skeleton
+     */
+    width?: string | number;
+    /**
+     * Height of the skeleton
+     */
+    height?: string | number;
+    /**
+     * Border radius of the skeleton
+     */
+    borderRadius?: string;
+    /**
+     * Animation duration in seconds
+     */
+    animationDuration?: number;
+    /**
+     * Custom style for the skeleton
+     */
+    style?: React.CSSProperties;
+}
+export declare const SkeletonLoader: React.FC<SkeletonLoaderProps>;
+export interface AgentCardSkeletonProps {
+    /**
+     * Width of the card
+     */
+    width?: string | number;
+    /**
+     * Show date placeholder
+     */
+    showDate?: boolean;
+    /**
+     * Show badges placeholder
+     */
+    showBadges?: boolean;
+    /**
+     * Show description placeholder
+     */
+    showDescription?: boolean;
+    /**
+     * Custom style for the skeleton
+     */
+    style?: React.CSSProperties;
+}
+export declare const AgentCardSkeleton: React.FC<AgentCardSkeletonProps>;

package/dist/stories/SkeletonLoader.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+export const SkeletonLoader = ({ width = '100%', height = '100%', borderRadius = 'var(--spacing-tokens-size-in-px-spacing-sm)', animationDuration = 1.5, style, }) => {
+    return (_jsx(Box, { width: width, height: height, borderRadius: borderRadius, sx: {
+            background: 'linear-gradient(90deg, var(--colors-light-background-bg-element) 25%, var(--colors-light-background-bg-component) 50%, var(--colors-light-background-bg-element) 75%)',
+            backgroundSize: '200% 100%',
+            animation: `shimmer ${animationDuration}s infinite linear`,
+            ...style,
+        }, children: _jsx("style", { children: `
+        @keyframes shimmer {
+          0% {
+            background-position: 200% 0;
+          }
+          100% {
+            background-position: -200% 0;
+          }
+        }
+      ` }) }));
+};
+export const AgentCardSkeleton = ({ width = '300px', showDate = false, showBadges = false, showDescription = false, style, }) => {
+    return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: "var(--spacing-tokens-size-in-px-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: `var(--global-shadows-shadow-xs-offset-x) var(--global-shadows-shadow-xs-offset-y) var(--global-shadows-shadow-xs-blur) var(--global-shadows-shadow-xs-spread) var(--global-shadows-shadow-xs-color)`, style: style, children: [_jsx(Box, { width: "100%", sx: { aspectRatio: 1 }, borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", overflow: "hidden", children: _jsx(SkeletonLoader, {}) }), _jsx(SkeletonLoader, { width: "70%", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showDate && (_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })), showBadges && (_jsxs(Box, { display: "flex", flexDirection: "row", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [_jsx(SkeletonLoader, { width: "60px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] })), showDescription && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", children: [_jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
+};

package/dist/stories/SkeletonLoader.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SkeletonLoader, AgentCardSkeleton } from './SkeletonLoader';
+declare const meta: Meta<typeof SkeletonLoader>;
+export default meta;
+type Story = StoryObj<typeof SkeletonLoader>;
+export declare const Default: Story;
+export declare const CustomAnimation: Story;
+export declare const RoundedSkeleton: Story;
+export declare const agentCardSkeletonMeta: Meta<typeof AgentCardSkeleton>;
+export declare const AgentCardSkeletonStory: StoryObj<typeof AgentCardSkeleton>;
+export declare const AgentCardSkeletonGrid: StoryObj<typeof AgentCardSkeleton>;

package/dist/stories/SkeletonLoader.stories.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SkeletonLoader, AgentCardSkeleton } from './SkeletonLoader';
+import { Box } from '@mui/material';
+const meta = {
+    title: 'Design System/Components/SkeletonLoader',
+    component: SkeletonLoader,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        width: {
+            control: 'text',
+            description: 'Width of the skeleton',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '100%' },
+            },
+        },
+        height: {
+            control: 'text',
+            description: 'Height of the skeleton',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '100%' },
+            },
+        },
+        borderRadius: {
+            control: 'text',
+            description: 'Border radius of the skeleton',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: {
+                    summary: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+                },
+            },
+        },
+        animationDuration: {
+            control: 'number',
+            description: 'Animation duration in seconds',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '1.5' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the skeleton',
+            table: {
+                type: { summary: 'React.CSSProperties' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        width: 200,
+        height: 100,
+    },
+};
+export const CustomAnimation = {
+    args: {
+        width: 200,
+        height: 100,
+        animationDuration: 3,
+    },
+};
+export const RoundedSkeleton = {
+    args: {
+        width: 100,
+        height: 100,
+        borderRadius: '50%',
+    },
+};
+// AgentCardSkeleton meta and stories
+export const agentCardSkeletonMeta = {
+    title: 'Design System/Components/AgentCardSkeleton',
+    component: AgentCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        width: {
+            control: 'text',
+            description: 'Width of the card',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '300px' },
+            },
+        },
+        showDate: {
+            control: 'boolean',
+            description: 'Show date placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showBadges: {
+            control: 'boolean',
+            description: 'Show badges placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Show 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' },
+            },
+        },
+    },
+};
+// AgentCardSkeleton stories
+export const AgentCardSkeletonStory = {
+    name: 'Agent Card Skeleton',
+    render: (args) => _jsx(AgentCardSkeleton, { ...args }),
+    args: {
+        showDate: true,
+        showBadges: true,
+        showDescription: true,
+    },
+};
+export const AgentCardSkeletonGrid = {
+    name: 'Agent Card Skeleton Grid',
+    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(AgentCardSkeleton, { showDate: true }), _jsx(AgentCardSkeleton, { showBadges: true }), _jsx(AgentCardSkeleton, { showDescription: true }), _jsx(AgentCardSkeleton, { showDate: true, showBadges: true, showDescription: true })] })),
+};

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

@@ -45,6 +45,8 @@ export type AgentCardProps = {
     onPreview?: () => void;
     /** Agent state */
     agentState?: AgentState;
+    /** Preview button text */
+    previewButtonText?: string;
 };
 /**
  * Props for the Components wrapper

package/package.json

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