@beydesign/storybook 0.1.16 → 0.1.19

package/dist/stories/Form/TextInput.js

@@ -1,23 +1,57 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
-export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, }) => {
+import { getIconComponent } from '../../utils';
+export const TextInput = ({ label, value, onChange, placeholder, type = 'text', hintText, errorText, disabled, trailingText, style, hintBubbleText, hintBubbleProps, required, labelTrailingElement, labelContainerStyle, showPasswordToggle = true, }) => {
     const [focused, setFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const isPassword = type === 'password';
+    const enablePasswordToggle = isPassword && showPasswordToggle;
+    const inputType = enablePasswordToggle && showPassword ? 'text' : type;
+    // Reset visibility whenever the toggle is removed, so the field never
+    // reappears revealed after `type` switches away from password or
+    // `showPasswordToggle` is turned off.
+    useEffect(() => {
+        if (!enablePasswordToggle)
+            setShowPassword(false);
+    }, [enablePasswordToggle]);
+    const togglePasswordVisibility = () => {
+        if (!disabled)
+            setShowPassword((prev) => !prev);
+    };
+    const iconColor = disabled
+        ? 'var(--colors-light-text-text-disabled)'
+        : 'var(--colors-light-foreground-fg-secondary)';
     return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
                         ? 'none'
-                        : '1px solid var(--colors-light-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Box, { display: 'flex', flexDirection: 'row', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
+                        : '1px solid var(--colors-light-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
                                 ? '1px solid var(--colors-light-border-border-error)'
                                 : focused
                                     ? '1px solid var(--colors-light-border-border-component-active)'
-                                    : 'transparent'}`, children: _jsx("input", { type: type, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
-                                    border: 'none',
-                                    outline: 'none',
-                                    width: '100%',
-                                    color: disabled
-                                        ? 'var(--colors-light-text-text-disabled)'
-                                        : 'var(--colors-light-text-text-title)',
-                                    backgroundColor: 'transparent',
-                                }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--colors-light-border-border-component)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: hintText }))] }) }));
+                                    : 'transparent'}`, children: [_jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
+                                        border: 'none',
+                                        outline: 'none',
+                                        width: '100%',
+                                        color: disabled
+                                            ? 'var(--colors-light-text-text-disabled)'
+                                            : 'var(--colors-light-text-text-title)',
+                                        backgroundColor: 'transparent',
+                                    }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }), enablePasswordToggle && (_jsx(Box, { component: 'button', type: 'button', onClick: togglePasswordVisibility, disabled: disabled, "aria-label": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, sx: {
+                                        padding: 0,
+                                        border: 'none',
+                                        borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',
+                                        backgroundColor: 'transparent',
+                                        cursor: disabled ? 'not-allowed' : 'pointer',
+                                        '&:focus-visible': {
+                                            outline: '2px solid var(--colors-light-border-border-component-active)',
+                                            outlineOffset: '2px',
+                                        },
+                                    }, children: getIconComponent(showPassword ? 'EyeSlash' : 'Eye', {
+                                        width: '20px',
+                                        height: '20px',
+                                        color: iconColor,
+                                        'aria-hidden': 'true',
+                                    }) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--colors-light-border-border-component)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: hintText }))] }) }));
 };

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

@@ -133,10 +133,23 @@ declare const meta: {
                 };
             };
         };
+        showPasswordToggle: {
+            control: "boolean";
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Password: Story;
+export declare const PasswordWithoutToggle: Story;
 export declare const Email: Story;

package/dist/stories/Form/TextInput.stories.js

@@ -105,6 +105,14 @@ const meta = {
                 type: { summary: 'ReactNode' },
             },
         },
+        showPasswordToggle: {
+            control: 'boolean',
+            description: 'Whether to show the password visibility toggle (only applies when type is "password")',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
     },
 };
 export default meta;
@@ -121,8 +129,19 @@ export const Password = {
         label: 'Password',
         value: 'password',
         type: 'password',
+        placeholder: 'Enter your password',
+        onChange: () => { },
+        hintText: 'Use at least 8 characters',
+    },
+};
+export const PasswordWithoutToggle = {
+    args: {
+        label: 'Password',
+        value: 'password',
+        type: 'password',
+        showPasswordToggle: false,
+        placeholder: 'Enter your password',
         onChange: () => { },
-        hintBubbleText: 'This is a hint bubble',
     },
 };
 export const Email = {

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

@@ -75,6 +75,11 @@ export type TextInputProps = {
     labelTrailingElement?: React.ReactNode;
     /** Text input label container style */
     labelContainerStyle?: SxProps<Theme>;
+    /**
+     * Whether to show the password visibility toggle (eye icon).
+     * Only applies when `type` is `password`. Defaults to `true`.
+     */
+    showPasswordToggle?: boolean;
 };
 /**
  * Toggle position variants

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

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

package/dist/stories/UI/FeatureBanner.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { FeatureBannerMedia, } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
+const VIOLET_GRADIENT = 'linear-gradient(180deg, rgba(194, 171, 252, 0.08) 0%, rgba(128, 96, 198, 0.2) 100%)';
+const PINK_GRADIENT = 'linear-gradient(90deg, rgba(235, 205, 240, 0.05) 0%, rgba(202, 59, 224, 0.15) 100%)';
+export const FeatureBanner = ({ title, description, actions = [], media = FeatureBannerMedia.None, mediaImage, onPlayClick, mediaCtaText, onMediaCtaClick, background, style: customStyle, testId, }) => {
+    const bannerBackground = background ||
+        (media === FeatureBannerMedia.Video ? PINK_GRADIENT : VIOLET_GRADIENT);
+    const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.md, hierarchy: action.primary
+            ? ButtonHierarchy.Primary
+            : ButtonHierarchy.SecondaryColor, onClick: action.onClick, style: action.primary
+            ? undefined
+            : {
+                border: '1px solid var(--colors-light-border-border-component)',
+            }, testId: testId ? `${testId}-action-${index}` : undefined }, `${action.text}-${index}`));
+    const renderMedia = () => {
+        if (media === FeatureBannerMedia.None || !mediaImage)
+            return null;
+        if (media === FeatureBannerMedia.Video) {
+            return (_jsxs(Box, { position: "relative", width: "296px", height: "150px", flexShrink: 0, overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)", children: [_jsx(Box, { component: "img", src: mediaImage, alt: "", width: "100%", height: "100%", sx: { objectFit: 'cover', display: 'block' } }), _jsx(Box, { position: "absolute", left: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, displayIconMode: ButtonDisplayMode.Only, displayIcon: "Play", onClick: onPlayClick, style: { border: 'none' }, testId: testId ? `${testId}-play` : undefined }) }), mediaCtaText && (_jsx(Box, { position: "absolute", right: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bottom: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: _jsx(MainButton, { text: mediaCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryTransparent, onClick: onMediaCtaClick, style: { border: 'none' }, testId: testId ? `${testId}-media-cta` : undefined }) }))] }));
+        }
+        // Image media spans the full banner height by escaping the vertical padding
+        return (_jsx(Box, { component: "img", src: mediaImage, alt: "", flexShrink: 0, sx: {
+                marginY: 'calc(-1 * var(--spacing-tokens-size-in-px-spacing-spacing-3xl))',
+            } }));
+    };
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "40px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: {
+            background: bannerBackground,
+            boxSizing: 'border-box',
+            ...customStyle,
+        }, "data-testid": testId, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--colors-light-text-text-title)", children: title })), description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-label)", children: description }))] }), actions.length > 0 && (_jsx(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: actions.map(renderAction) }))] }), renderMedia()] }));
+};

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FeatureBanner } from './FeatureBanner';
+declare const meta: Meta<typeof FeatureBanner>;
+export default meta;
+type Story = StoryObj<typeof FeatureBanner>;
+export declare const Video: Story;
+export declare const Image: Story;
+export declare const TextOnly: Story;
+export declare const HomeLayout: Story;

package/dist/stories/UI/FeatureBanner.stories.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FeatureBanner } from './FeatureBanner';
+import { FeatureBannerMedia } from './types';
+import videoPreview from '../assets/banner/video-preview.png';
+import avatarsColumn from '../assets/banner/banner-avatars-column.png';
+const meta = {
+    title: 'Design System/Components/UI/FeatureBanner',
+    component: FeatureBanner,
+    parameters: {
+        layout: 'padded',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7011-27024',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'Title of the banner',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        description: {
+            control: 'text',
+            description: 'Description shown below the title',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        actions: {
+            control: 'object',
+            description: 'Action buttons — set primary: true for the brand (violet) button',
+            table: {
+                type: { summary: 'FeatureBannerAction[]' },
+            },
+        },
+        media: {
+            control: 'select',
+            description: 'Media shown on the right side of the banner',
+            options: Object.values(FeatureBannerMedia),
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        mediaImage: {
+            control: 'text',
+            description: 'Image URL for the media (video thumbnail or image column)',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onPlayClick: {
+            action: 'play clicked',
+            description: 'Called when the play button on the video preview is clicked',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        mediaCtaText: {
+            control: 'text',
+            description: 'CTA text overlaid on the video preview',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        onMediaCtaClick: {
+            action: 'media cta clicked',
+            description: 'Called when the media CTA is clicked',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        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 Video = {
+    args: {
+        title: 'Add a Human Face to your Conversational Voice Agents',
+        description: 'Bring your ideas to life with intelligent conversational avatars.',
+        actions: [
+            { text: 'Create API Key' },
+            { text: 'Go to Docs', primary: true },
+        ],
+        media: FeatureBannerMedia.Video,
+        mediaImage: videoPreview,
+        mediaCtaText: 'How to Get Started',
+    },
+};
+export const Image = {
+    args: {
+        title: 'Introducing Conversational Avatars',
+        description: 'Bring your ideas to life with intelligent conversational avatars.',
+        actions: [{ text: 'Create New Agent' }],
+        media: FeatureBannerMedia.Image,
+        mediaImage: avatarsColumn,
+    },
+};
+export const TextOnly = {
+    args: {
+        title: 'Introducing Conversational Avatars',
+        description: 'Bring your ideas to life with intelligent conversational avatars.',
+        actions: [{ text: 'Create New Agent' }],
+        media: FeatureBannerMedia.None,
+    },
+};
+export const HomeLayout = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Both banners side by side as they appear on the Home screen of the app.',
+            },
+        },
+    },
+    render: () => (_jsxs("div", { style: { display: 'flex', gap: '12px', alignItems: 'stretch' }, children: [_jsx("div", { style: { flex: 3, minWidth: 0, display: 'flex' }, children: _jsx(FeatureBanner, { ...Video.args }) }), _jsx("div", { style: { flex: 2, minWidth: 0, display: 'flex' }, children: _jsx(FeatureBanner, { ...Image.args }) })] })),
+};

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,31 @@
+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(--colors-light-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(--colors-light-text-text-title)", children: description })), featuresText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Bold, color: "var(--colors-light-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(--colors-light-border-border-component)',
+                                            height: '100%',
+                                        }, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", bgcolor: "var(--primitives-desktop-primary-brand-violet-400)", 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, color: "var(--colors-light-text-text-title)", 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(--colors-light-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/index.d.ts

@@ -1,9 +1,11 @@
 export * from './Badge';
 export * from './Avatar';
+export * from './FeatureBanner';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';
 export * from './ProgressIndicator';
+export * from './PromoBanner';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';

package/dist/stories/UI/index.js

@@ -1,9 +1,11 @@
 export * from './Badge';
 export * from './Avatar';
+export * from './FeatureBanner';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';
 export * from './ProgressIndicator';
+export * from './PromoBanner';
 export * from './SkeletonLoader';
 export * from './Topbar';
 export * from './types';

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

@@ -236,6 +236,87 @@ export interface TopbarProps {
     /** Class name */
     className?: string;
 }
+/**
+ * PromoBanner component props
+ */
+export interface PromoBannerProps {
+    /** Title of the banner */
+    title?: string;
+    /** Description text shown below the title */
+    description?: string;
+    /** Feature highlights rendered as a checkmark list below the description */
+    features?: string[];
+    /** Promo code to display */
+    promoCode?: string;
+    /** Label shown on top of the promo code */
+    promoCodeLabel?: string;
+    /** Called after the promo code is copied to the clipboard */
+    onCopyPromoCode?: (promoCode: string) => void;
+    /** Call-to-action button text */
+    ctaText?: string;
+    /** Called when the call-to-action button is clicked */
+    onCtaClick?: () => void;
+    /** Footer note shown below the actions */
+    footerText?: string;
+    /** Image URL of the avatar collage shown on the left side */
+    leftImage?: string;
+    /** Image URL of the avatar collage shown on the right side */
+    rightImage?: string;
+    /** Whether to show the avatar images */
+    showImages?: boolean;
+    /** Background of the banner */
+    background?: string;
+    /** Custom style of the banner */
+    style?: SxProps<Theme>;
+    /** Test ID of the banner */
+    testId?: string;
+}
+/**
+ * FeatureBanner media variants
+ */
+export declare enum FeatureBannerMedia {
+    Video = "Video",
+    Image = "Image",
+    None = "None"
+}
+/**
+ * FeatureBanner action button
+ */
+export interface FeatureBannerAction {
+    /** Button text */
+    text: string;
+    /** Called when the button is clicked */
+    onClick?: () => void;
+    /** Whether to render as the primary (brand) action */
+    primary?: boolean;
+}
+/**
+ * FeatureBanner component props
+ */
+export interface FeatureBannerProps {
+    /** Title of the banner */
+    title?: string;
+    /** Description shown below the title */
+    description?: string;
+    /** Action buttons */
+    actions?: FeatureBannerAction[];
+    /** Media shown on the right side of the banner */
+    media?: FeatureBannerMedia;
+    /** Image URL for the media (video thumbnail or image column) */
+    mediaImage?: string;
+    /** Called when the play button on the video preview is clicked */
+    onPlayClick?: () => void;
+    /** CTA text overlaid on the video preview */
+    mediaCtaText?: string;
+    /** Called when the media CTA is clicked */
+    onMediaCtaClick?: () => void;
+    /** Background of the banner */
+    background?: string;
+    /** Custom style of the banner */
+    style?: SxProps<Theme>;
+    /** Test ID of the banner */
+    testId?: string;
+}
 export interface StepProps {
     /** Current step of the stepper */
     currentStep: number;

package/dist/stories/UI/types.js

@@ -69,3 +69,12 @@ export var ProgressIndicatorMode;
     ProgressIndicatorMode["Value"] = "Value";
     ProgressIndicatorMode["Percentage"] = "Percentage";
 })(ProgressIndicatorMode || (ProgressIndicatorMode = {}));
+/**
+ * FeatureBanner media variants
+ */
+export var FeatureBannerMedia;
+(function (FeatureBannerMedia) {
+    FeatureBannerMedia["Video"] = "Video";
+    FeatureBannerMedia["Image"] = "Image";
+    FeatureBannerMedia["None"] = "None";
+})(FeatureBannerMedia || (FeatureBannerMedia = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.1.16",
+  "version": "0.1.19",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@beydesign/tokens": "^0.0.11",
+    "@beydesign/tokens": "^0.0.16",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",