@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/UI/Logo.stories.js

@@ -0,0 +1,65 @@
+import { Logo } from './Logo';
+import { LogoVariant } from './types';
+const meta = {
+    title: 'Design System/Foundations/UI/Logo',
+    component: Logo,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=278-2962&m=dev',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: Object.values(LogoVariant),
+        },
+        color: {
+            control: 'color',
+        },
+        gradient: {
+            control: 'text',
+            description: 'CSS gradient value to apply to the logo',
+        },
+        svgUrl: {
+            control: 'text',
+            description: 'URL to an external SVG file to override the default logo',
+        },
+    },
+};
+export default meta;
+export const Horizontal = {
+    args: {
+        variant: LogoVariant.Horizontal,
+    },
+};
+export const Vertical = {
+    args: {
+        variant: LogoVariant.Vertical,
+    },
+};
+export const Icon = {
+    args: {
+        variant: LogoVariant.Icon,
+    },
+};
+export const CustomColor = {
+    args: {
+        variant: LogoVariant.Horizontal,
+        color: 'var(--color-foreground-fg-success)',
+    },
+};
+export const WithGradient = {
+    args: {
+        variant: LogoVariant.Horizontal,
+        gradient: 'var(--global-logo-gradient)',
+    },
+};
+export const ExternalSvg = {
+    args: {
+        svgUrl: 'https://storage.googleapis.com/bey-dev-public/testTavus.svg',
+        color: '#181717',
+    },
+};

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

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

package/dist/stories/UI/Menu.js

@@ -0,0 +1,56 @@
+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, ButtonDisplayMode, ButtonHierarchy, ButtonType, ButtonSize, } from '../Buttons';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+export const Menu = ({ icon = 'DotsThree', items, style, testKey, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Secondary, }) => {
+    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(--color-text-text-error)';
+        return 'var(--color-text-text-title)';
+    };
+    return (_jsxs(Fragment, { children: [_jsx(MainButton, { displayIcon: icon, onClick: handleClick, type: ButtonType.Button, displayIconMode: ButtonDisplayMode.Only, hierarchy: hierarchy, size: size, style: style, testId: `${testKey}-menu-button` }), _jsx(MuiMenu, { id: "basic-menu", "data-testid": `${testKey}-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)',
+                            backgroundColor: 'var(--color-background-bg-component)',
+                            border: '1px solid var(--color-border-border-component)',
+                        },
+                    },
+                    root: { style: { gap: '4px' } },
+                }, children: items?.map((action, index) => {
+                    if (action) {
+                        return (_jsxs(MuiMenuItem, { onClick: (e) => handleMenuItemClick(action, e), sx: {
+                                gap: '8px',
+                                '&:hover': {
+                                    backgroundColor: 'var(--color-background-bg-component-hover)',
+                                },
+                            }, disableRipple: true, "data-testid": `${testKey}-menu-item-${index}`, children: [action?.icon &&
+                                    getIconComponent(action.icon, {
+                                        width: '20px',
+                                        height: '20px',
+                                        color: getColor(action),
+                                    }), action?.label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: getColor(action), children: action.label }))] }, index));
+                    }
+                }) })] }));
+};

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

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

package/dist/stories/UI/Menu.stories.js

@@ -0,0 +1,80 @@
+import { Menu } from './Menu';
+import { ButtonSize, ButtonHierarchy } from '../Buttons';
+const meta = {
+    title: 'Design System/Components/UI/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' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: Object.values(ButtonSize),
+            description: 'Size of the trigger button',
+            table: {
+                type: { summary: 'ButtonSize' },
+                defaultValue: { summary: ButtonSize.xl },
+            },
+        },
+        hierarchy: {
+            control: 'select',
+            options: Object.values(ButtonHierarchy),
+            description: 'Hierarchy of the trigger button',
+            table: {
+                type: { summary: 'ButtonHierarchy' },
+                defaultValue: { summary: ButtonHierarchy.Secondary },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        icon: 'DotsThree',
+        items: [
+            { label: 'Edit', onClick: () => { }, destructive: false, icon: 'Pencil' },
+            { label: 'Delete', onClick: () => { }, destructive: true, icon: 'Trash' },
+        ],
+    },
+};
+export const Small = {
+    args: {
+        ...Default.args,
+        size: ButtonSize.sm,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The trigger button rendered at the small size, used in compact contexts such as the EntityCard action row.',
+            },
+        },
+    },
+};

package/dist/stories/UI/ProgressIndicator.d.ts

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

package/dist/stories/UI/ProgressIndicator.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProgressIndicatorMode } from './types';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, overriddenText = null, currentValue = 40, maxValue = 100, fillColor = 'var(--color-background-bg-brand-primary)', backgroundColor = 'var(--color-background-bg-component)', text = 'used', textColor = 'var(--color-text-text-title)', style, textStyle, testId, }) => {
+    let errorText = '';
+    const calculateFill = () => {
+        if (currentValue > maxValue)
+            return 100;
+        return (currentValue / maxValue) * 100;
+    };
+    if (isNaN(currentValue) || !isFinite(currentValue)) {
+        errorText = 'Current value must be a valid number';
+    }
+    else if (isNaN(maxValue) || !isFinite(maxValue)) {
+        errorText = 'Max value must be a valid number';
+    }
+    else if (currentValue < 0) {
+        errorText = 'Invalid current value';
+    }
+    else if (mode === ProgressIndicatorMode.Percentage) {
+        if (maxValue > 100 || maxValue < 0) {
+            errorText = 'Invalid max value for percentage mode';
+        }
+        else if (currentValue > maxValue) {
+            errorText = 'Current value is greater than max value for percentage mode';
+        }
+    }
+    if (errorText) {
+        return (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, children: errorText }));
+    }
+    return (_jsxs(Box, { display: "flex", flexDirection: mode === ProgressIndicatorMode.Value ? 'column' : 'row', justifyContent: 'space-between', alignItems: mode === ProgressIndicatorMode.Value ? 'flex-end' : 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, minWidth: 200, "data-testid": testId, children: [mode === ProgressIndicatorMode.Value && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, textStyle: textStyle, children: overriddenText ||
+                    `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} / ${maxValue.toLocaleString(undefined, { maximumFractionDigits: 2 })} ${text}` })), _jsx(Box, { display: "flex", flexGrow: 1, flexDirection: "row", alignItems: "center", borderRadius: '4px', sx: { backgroundColor, overflow: 'hidden' }, height: '4px', width: '100%', children: _jsx(Box, { height: '100%', borderRadius: '4px', sx: { backgroundColor: fillColor, width: `${calculateFill()}%` } }) }), mode === ProgressIndicatorMode.Percentage && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: textColor, textStyle: textStyle, children: overriddenText ||
+                    `${currentValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}%` }))] }));
+};

package/dist/stories/UI/ProgressIndicator.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProgressIndicator } from './ProgressIndicator';
+declare const meta: Meta<typeof ProgressIndicator>;
+export default meta;
+type Story = StoryObj<typeof ProgressIndicator>;
+export declare const Default: Story;
+export declare const ValueWithOverriddenText: Story;
+export declare const Percentage: Story;
+export declare const PercentageWithOverriddenText: Story;
+export declare const Custom: Story;

package/dist/stories/UI/ProgressIndicator.stories.js

@@ -0,0 +1,98 @@
+import { ProgressIndicator } from './ProgressIndicator';
+import { ProgressIndicatorMode } from './types';
+const meta = {
+    title: 'Design System/Components/UI/ProgressIndicator',
+    component: ProgressIndicator,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4793-22258&t=3PJghL9RdZ71sldb-1',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        currentValue: {
+            control: 'number',
+            description: 'Current value of the progress indicator',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        maxValue: {
+            control: 'number',
+            description: 'Maximum value of the progress indicator',
+            table: {
+                type: { summary: 'number' },
+            },
+        },
+        mode: {
+            control: 'select',
+            description: 'Mode of the progress indicator',
+            options: Object.values(ProgressIndicatorMode),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        text: {
+            control: 'text',
+            description: 'Text of the progress indicator',
+        },
+        textColor: {
+            control: 'color',
+            description: 'Text color of the progress indicator',
+        },
+        fillColor: {
+            control: 'color',
+            description: 'Fill color of the progress indicator',
+        },
+        backgroundColor: {
+            control: 'color',
+            description: 'Background color of the progress indicator',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        mode: ProgressIndicatorMode.Value,
+        currentValue: 10,
+        maxValue: 100,
+    },
+};
+export const ValueWithOverriddenText = {
+    args: {
+        mode: ProgressIndicatorMode.Value,
+        currentValue: 10,
+        maxValue: 100,
+        overriddenText: 'Step 10 of 100',
+    },
+};
+export const Percentage = {
+    args: {
+        mode: ProgressIndicatorMode.Percentage,
+        currentValue: 30,
+        maxValue: 100,
+    },
+};
+export const PercentageWithOverriddenText = {
+    args: {
+        mode: ProgressIndicatorMode.Percentage,
+        currentValue: 30,
+        maxValue: 100,
+        overriddenText: 'Step 30 of 100',
+        style: { width: '400px' },
+        textStyle: { width: '120px' },
+    },
+};
+export const Custom = {
+    args: {
+        mode: ProgressIndicatorMode.Value,
+        currentValue: 10,
+        maxValue: 100,
+        backgroundColor: 'red',
+        fillColor: 'blue',
+        text: 'consumed',
+        textColor: 'purple',
+    },
+};

package/dist/stories/UI/PromoBanner.d.ts

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

package/dist/stories/UI/PromoBanner.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+const DEFAULT_BACKGROUND = 'linear-gradient(180deg, rgba(194, 171, 252, 0.08) 0%, rgba(128, 96, 198, 0.2) 100%)';
+export const PromoBanner = ({ title = 'Real-time AI avatars for every conversation.', description = 'Trusted by developers, startups, educators, and enterprises to build engaging AI experiences at scale:', features = [
+    'Real-Time',
+    'Multilingual',
+    'API-first',
+    'Enterprise-ready',
+    'GDPR Compliant',
+], promoCode, promoCodeLabel = 'YOUR PROMO CODE', onCopyPromoCode, ctaText, onCtaClick, footerText, leftImage, rightImage, showImages = true, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+    const handleCopyPromoCode = () => {
+        if (!promoCode)
+            return;
+        navigator.clipboard?.writeText(promoCode);
+        onCopyPromoCode?.(promoCode);
+    };
+    const featuresText = features?.length
+        ? features.map((feature) => `✓ ${feature}`).join(', ') + '.'
+        : '';
+    const renderSideImage = (image) => {
+        if (!showImages || !image)
+            return null;
+        return (_jsx(Box, { component: "img", src: image, alt: "", height: "100%", flexShrink: 0, sx: { objectFit: 'contain' } }));
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "40px", height: "220px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", paddingX: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: { background, boxSizing: 'border-box', ...customStyle }, "data-testid": testId, children: [renderSideImage(leftImage), _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", flex: 1, minWidth: 0, paddingY: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl)", children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", textStyle: { textAlign: 'center' }, children: title })), (description || featuresText) && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", children: description })), featuresText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: featuresText }))] }))] }), (promoCode || ctaText) && (_jsxs(Box, { display: "flex", justifyContent: "center", alignItems: "stretch", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: "Copy", onClick: handleCopyPromoCode, style: {
+                                            border: '1px dashed var(--color-border-border-component)',
+                                            height: '100%',
+                                        }, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", bgcolor: "var(--color-background-bg-icon-badge)", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xxs) var(--spacing-tokens-size-in-px-spacing-spacing-sm)", whiteSpace: "nowrap", zIndex: 1, children: _jsx(Typography, { size: TypographySize.Text2XS, weight: TypographyWeight.SemiBold, 
+                                            // Invariant violet label (bg-icon-badge) -> pin to the
+                                            // invariant dark text so it stays legible in both themes.
+                                            color: "var(--color-text-text-dark)", children: promoCodeLabel }) }))] })), ctaText && (_jsx(MainButton, { text: ctaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, testId: testId ? `${testId}-cta` : undefined }))] })), footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderSideImage(rightImage)] }));
+};

package/dist/stories/UI/PromoBanner.stories.d.ts

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

package/dist/stories/UI/PromoBanner.stories.js

@@ -0,0 +1,159 @@
+import { PromoBanner } from './PromoBanner';
+import bannerAvatarsLeft from '../assets/banner/banner-avatars-left.png';
+import bannerAvatarsRight from '../assets/banner/banner-avatars-right.png';
+const meta = {
+    title: 'Design System/Components/UI/PromoBanner',
+    component: PromoBanner,
+    parameters: {
+        layout: 'padded',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7020-10224',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the banner',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: 'text',
+            description: 'Description text shown below the title',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        features: {
+            control: 'object',
+            description: 'Feature highlights rendered as a checkmark list',
+            table: {
+                type: { summary: 'string[]' },
+            },
+        },
+        promoCode: {
+            control: 'text',
+            description: 'Promo code to display',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        promoCodeLabel: {
+            control: 'text',
+            description: 'Label shown on top of the promo code',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onCopyPromoCode: {
+            action: 'promo code copied',
+            description: 'Called after the promo code is copied to the clipboard',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        ctaText: {
+            control: 'text',
+            description: 'Call-to-action button text',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onCtaClick: {
+            action: 'cta clicked',
+            description: 'Called when the call-to-action button is clicked',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        footerText: {
+            control: 'text',
+            description: 'Footer note shown below the actions',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        leftImage: {
+            control: 'text',
+            description: 'Image URL of the avatar collage shown on the left side',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        rightImage: {
+            control: 'text',
+            description: 'Image URL of the avatar collage shown on the right side',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        showImages: {
+            control: 'boolean',
+            description: 'Whether to show the avatar images',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        background: {
+            control: 'text',
+            description: 'Background of the banner',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the banner',
+            table: {
+                type: { summary: 'object' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: 'Real-time AI avatars for every conversation.',
+        description: 'Trusted by developers, startups, educators, and enterprises to build engaging AI experiences at scale:',
+        features: [
+            'Real-Time',
+            'Multilingual',
+            'API-first',
+            'Enterprise-ready',
+            'GDPR Compliant',
+        ],
+        promoCode: 'PKAJ2HGO',
+        promoCodeLabel: 'YOUR PROMO CODE',
+        ctaText: 'Enjoy 1 month free on Starter',
+        footerText: 'Use Promo code at checkout and get 90 End-to-End API minutes or 180 Audio-to-Video API minutes free.',
+        leftImage: bannerAvatarsLeft,
+        rightImage: bannerAvatarsRight,
+    },
+};
+export const WithoutImages = {
+    args: {
+        ...Default.args,
+        showImages: false,
+    },
+};
+export const WithoutPromoCode = {
+    args: {
+        ...Default.args,
+        promoCode: undefined,
+        footerText: undefined,
+        ctaText: 'Upgrade to Starter',
+    },
+};
+export const TitleAndCtaOnly = {
+    args: {
+        title: 'Real-time AI avatars for every conversation.',
+        description: undefined,
+        features: [],
+        ctaText: 'Get Started',
+        leftImage: bannerAvatarsLeft,
+        rightImage: bannerAvatarsRight,
+    },
+};

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

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

package/dist/stories/UI/SkeletonLoader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } 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(--color-background-bg-element) 25%, var(--color-background-bg-component) 50%, var(--color-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;
+          }
+        }
+      ` }) }));
+};

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SkeletonLoader } 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;