@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/Navigation/Sidebar.stories.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar } from './Sidebar';
+import { SidebarSize, NavItemState } from './types';
+import { Box, Stack, Typography } from '@mui/material';
+const meta = {
+    title: 'Design System/Components/Navigation/Sidebar',
+    component: Sidebar,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: Object.values(SidebarSize),
+        },
+        logoProps: {
+            control: 'object',
+        },
+    },
+};
+export default meta;
+const defaultNavSections = [
+    {
+        title: '',
+        items: [
+            {
+                text: 'Home',
+                icon: 'House',
+                state: NavItemState.Default,
+                link: '#/home',
+            },
+        ],
+        showSeparator: true,
+    },
+    {
+        title: '',
+        items: [
+            {
+                text: 'Avatars',
+                icon: 'UserFocus',
+                state: NavItemState.Default,
+                link: '#/avatars',
+            },
+        ],
+        showSeparator: true,
+    },
+    {
+        title: 'Videos',
+        items: [
+            {
+                text: 'Text-to-Video',
+                icon: 'VideoCamera',
+                state: NavItemState.Active,
+                link: '#/text-to-video',
+            },
+            {
+                text: 'Outreach Campaigns',
+                icon: 'UsersFour',
+                state: NavItemState.Default,
+                link: '#/outreach-campaigns',
+            },
+        ],
+        showSeparator: true,
+    },
+    {
+        title: 'Conversational Agents',
+        items: [
+            {
+                text: 'My Agents',
+                icon: 'Headset',
+                state: NavItemState.Default,
+                link: '#/my-agents',
+            },
+            {
+                text: 'Knowledge Base',
+                icon: 'Book',
+                state: NavItemState.Default,
+                link: '#/knowledge-base',
+            },
+            {
+                text: 'Conversations',
+                icon: 'ChatCircle',
+                state: NavItemState.Default,
+                link: '#/conversations',
+            },
+        ],
+        showSeparator: true,
+    },
+    {
+        title: 'Analytics',
+        items: [
+            {
+                text: 'Analytics',
+                icon: 'ChartLine',
+                state: NavItemState.Default,
+                showBadge: true,
+                link: '#/analytics',
+            },
+        ],
+    },
+];
+const defaultBottomNavItems = [
+    {
+        text: 'My account',
+        icon: 'Gear',
+        link: '#/account',
+    },
+    {
+        text: 'Feedback',
+        icon: 'ChatCircle',
+        link: '#/feedback',
+    },
+];
+export const InBoxContainer = {
+    render: (args) => (_jsxs(Stack, { direction: 'row', height: '100%', width: '100%', children: [_jsx(Box, { height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', sx: {
+                    border: '1px solid var(--color-border-border-component)',
+                    borderRadius: '8px',
+                    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+                    maxWidth: '280px',
+                }, children: _jsx(Sidebar, { ...args, size: SidebarSize.Expanded, navSections: defaultNavSections.slice(0, 3), bottomNavItems: defaultBottomNavItems, credits: {
+                        maxCredits: 50,
+                        usedCredits: 130,
+                        overUsageEnabled: true,
+                        overUsedCredits: 20,
+                    } }) }), _jsx(Box, { sx: { height: '100dvh', width: 'calc(100dvw)', overflow: 'hidden' }, children: _jsx(Typography, { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos." }) })] })),
+};
+export const Expanded = {
+    args: {
+        size: SidebarSize.Expanded,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+        credits: {
+            maxCredits: 50,
+            usedCredits: 10,
+        },
+    },
+};
+export const Collapsed = {
+    args: {
+        size: SidebarSize.Collapsed,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+        credits: {
+            maxCredits: 50,
+            usedCredits: 102,
+            overUsageEnabled: true,
+            overUsedCredits: 20,
+        },
+    },
+};
+export const LoadingCredits = {
+    args: {
+        size: SidebarSize.Expanded,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+        loadingCredits: true,
+    },
+};
+export const LoadingCreditsCollapsed = {
+    args: {
+        size: SidebarSize.Collapsed,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+        loadingCredits: true,
+    },
+};
+export const WithoutCredits = {
+    args: {
+        size: SidebarSize.Expanded,
+        navSections: defaultNavSections,
+        bottomNavItems: defaultBottomNavItems,
+    },
+};

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

@@ -0,0 +1,6 @@
+export * from './Header';
+export * from './NavItem';
+export * from './Sidebar';
+export * from './types';
+export * from './ProcessHeader';
+export * from './ComplexHeader';

package/dist/stories/Navigation/index.js

@@ -0,0 +1,6 @@
+export * from './Header';
+export * from './NavItem';
+export * from './Sidebar';
+export * from './types';
+export * from './ProcessHeader';
+export * from './ComplexHeader';

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

@@ -0,0 +1,186 @@
+import { SxProps, Theme } from '@mui/material';
+import { IconName } from '../../utils';
+import { AvatarProps } from '../UI';
+import { CreditsCardProps } from '../Credits';
+/**
+ * Header component props
+ */
+export type HeaderProps = {
+    /** Title of the header */
+    title: string;
+    /** Email of the logged in user */
+    email: string;
+    /** Avatar props */
+    avatarProps: AvatarProps;
+    /** Text of the back button */
+    backButtonText?: string;
+    /** CSS class name for additional styling */
+    className?: string;
+    /** Callback function to handle back button click */
+    onBackClick?: () => void;
+    /** Callback function to handle logout button click */
+    onLogoutClick?: () => void;
+};
+export declare enum LayoutType {
+    List = "list",
+    Grid = "grid"
+}
+export type ComplexHeaderProps = {
+    /** Title of the header */
+    title: string;
+    /** Text of the badge */
+    badgeText?: string;
+    /** Text of the new button */
+    newButtonText?: string;
+    /** Callback function to handle new button click */
+    onNewClick?: () => void;
+    /** Callback function to handle output file button click */
+    onOutputFileClick?: () => void;
+    /** Callback function to handle download all button click */
+    onDownloadAllClick?: () => void;
+    /** CSS class name for additional styling */
+    className?: string;
+    /** Callback function to handle layout change */
+    onLayoutChange?: (layoutType: LayoutType) => void;
+    /** Style object to apply to the component */
+    sx?: SxProps<Theme>;
+};
+export declare enum NavItemState {
+    Default = "default",
+    Active = "active",
+    Disabled = "disabled"
+}
+export declare enum NavItemSize {
+    Expanded = "expanded",
+    Collapsed = "collapsed"
+}
+export interface NavItemProps {
+    /**
+     * The text to display in the navigation item
+     */
+    text: string;
+    /**
+     * The icon to display before the text
+     * Uses Phosphor Icons
+     */
+    icon: IconName;
+    /**
+     * The current state of the navigation item
+     */
+    state?: NavItemState;
+    /**
+     * The size of the navigation item
+     */
+    size?: NavItemSize;
+    /**
+     * Whether to show a "Coming Soon" badge
+     */
+    showBadge?: boolean;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+}
+export declare enum SidebarSize {
+    Expanded = "expanded",
+    Collapsed = "collapsed"
+}
+export interface NavItemConfig {
+    /**
+     * The text to display in the navigation item
+     */
+    text: string;
+    /**
+     * The icon to display before the text (Phosphor icon name)
+     */
+    icon: IconName;
+    /**
+     * The current state of the navigation item
+     */
+    state?: 'default' | 'active' | 'disabled';
+    /**
+     * Whether to show a badge (e.g., "Coming Soon")
+     */
+    showBadge?: boolean;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+    /**
+     * Optional link URL for the navigation item
+     */
+    link?: string;
+}
+export interface NavSection {
+    /**
+     * The title of the section
+     */
+    title: string;
+    /**
+     * The navigation items in this section
+     */
+    items: NavItemConfig[];
+    /**
+     * Whether to show a separator after this section
+     */
+    showSeparator?: boolean;
+}
+export interface SidebarProps {
+    /**
+     * The size of the sidebar
+     */
+    size?: SidebarSize;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+    /**
+     * Navigation sections to display in the sidebar
+     */
+    navSections: NavSection[];
+    /**
+     * Bottom navigation items (e.g., account, feedback)
+     */
+    bottomNavItems?: NavItemConfig[];
+    /**
+     * Credits information
+     */
+    credits?: Omit<CreditsCardProps, 'size' | 'className'>;
+    /**
+     * Whether the credits are loading
+     */
+    loadingCredits?: boolean;
+    /**
+     * Optional callback when sidebar is toggled
+     */
+    onToggle?: (size: SidebarSize) => void;
+    /**
+     * Optional logo props
+     */
+    logoProps?: {
+        gradient?: string;
+        color?: string;
+    };
+}
+export interface ProcessHeaderProps {
+    /** The title of the process */
+    title: string;
+    /** The subtitle of the process */
+    subtitle: string;
+    /** The current step of the process */
+    currentStep: number;
+    /** The total steps of the process */
+    totalSteps: number;
+    /** The text to display in the header right */
+    headerRightText?: string;
+    /** The callback to handle the cancel button click */
+    onCancelClick?: () => void;
+    /** The style object to apply to the component */
+    sx?: SxProps<Theme>;
+    /** The class name to apply to the component */
+    className?: string;
+}

package/dist/stories/Navigation/types.js

@@ -0,0 +1,21 @@
+export var LayoutType;
+(function (LayoutType) {
+    LayoutType["List"] = "list";
+    LayoutType["Grid"] = "grid";
+})(LayoutType || (LayoutType = {}));
+export var NavItemState;
+(function (NavItemState) {
+    NavItemState["Default"] = "default";
+    NavItemState["Active"] = "active";
+    NavItemState["Disabled"] = "disabled";
+})(NavItemState || (NavItemState = {}));
+export var NavItemSize;
+(function (NavItemSize) {
+    NavItemSize["Expanded"] = "expanded";
+    NavItemSize["Collapsed"] = "collapsed";
+})(NavItemSize || (NavItemSize = {}));
+export var SidebarSize;
+(function (SidebarSize) {
+    SidebarSize["Expanded"] = "expanded";
+    SidebarSize["Collapsed"] = "collapsed";
+})(SidebarSize || (SidebarSize = {}));

package/dist/stories/PlanCard/PlanCard.d.ts

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

package/dist/stories/PlanCard/PlanCard.js

@@ -0,0 +1,13 @@
+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';
+import { Badge, BadgeColor, BadgeSize, CheckIcon, CheckIconColor, CheckIconSize, CheckIconType, } from '../UI';
+export const PlanCard = ({ title, description, price, priceSuffix = '/month', badgeText, badgeColor = BadgeColor.Lemon, highlighted = false, featuresTitle = 'This includes:', features = [], buttonText = 'Upgrade', onButtonClick, buttonDisabled = false, buttonHierarchy = ButtonHierarchy.Primary, buttonLoading = false, width = '286px', style, testId, }) => {
+    const planKey = title?.toLowerCase()?.replace(/\s+/g, '-');
+    return (_jsxs(Box, { width: width, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: highlighted
+            ? 'var(--color-background-bg-card-highlight)'
+            : 'var(--color-background-bg-component)', border: `1px solid ${highlighted
+            ? 'var(--color-border-border-brand)'
+            : 'var(--color-border-border-subtle)'}`, boxSizing: 'border-box', style: style, "data-testid": testId ?? `${planKey}-plan-card`, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: title }), badgeText && (_jsx(Badge, { text: badgeText, color: badgeColor, size: BadgeSize.xs, fill: true }))] }), description && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description })), price && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '2px', children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: priceSuffix }))] }))] }), buttonText && (_jsx(MainButton, { text: buttonText, hierarchy: buttonHierarchy, size: ButtonSize.md, disabled: buttonDisabled, loading: buttonLoading, onClick: onButtonClick, style: { width: '100%' }, testId: `${planKey}-plan-button` })), features.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-paragraph)', children: featuresTitle }), features.map((feature, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: feature })] }, `${index}-${feature}`)))] }))] }));
+};

package/dist/stories/PlanCard/PlanCard.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PlanCard } from './PlanCard';
+declare const meta: Meta<typeof PlanCard>;
+export default meta;
+type Story = StoryObj<typeof PlanCard>;
+export declare const Pro: Story;
+export declare const Free: Story;
+export declare const Personal: Story;
+export declare const Custom: Story;

package/dist/stories/PlanCard/PlanCard.stories.js

@@ -0,0 +1,125 @@
+import { PlanCard } from './PlanCard';
+import { BadgeColor } from '../UI';
+import { ButtonHierarchy } from '../Buttons';
+const meta = {
+    title: 'Design System/Components/PlanCard/PlanCard',
+    component: PlanCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=7002-19848',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        title: { control: 'text', description: 'Plan name' },
+        description: { control: 'text', description: 'Short plan description' },
+        price: {
+            control: 'text',
+            description: 'Price text (e.g. "€210" or "Custom")',
+        },
+        priceSuffix: {
+            control: 'text',
+            description: 'Price suffix',
+            table: { defaultValue: { summary: '/month' } },
+        },
+        badgeText: { control: 'text', description: 'Badge text' },
+        badgeColor: {
+            control: 'select',
+            options: Object.values(BadgeColor),
+            description: 'Badge color',
+            table: { defaultValue: { summary: BadgeColor.Lemon } },
+        },
+        highlighted: {
+            control: 'boolean',
+            description: 'Brand background + border highlight',
+        },
+        featuresTitle: {
+            control: 'text',
+            table: { defaultValue: { summary: 'This includes:' } },
+        },
+        features: { control: 'object', description: 'Feature list' },
+        buttonText: {
+            control: 'text',
+            table: { defaultValue: { summary: 'Upgrade' } },
+        },
+        buttonDisabled: { control: 'boolean' },
+        buttonHierarchy: {
+            control: 'select',
+            options: Object.values(ButtonHierarchy),
+            table: { defaultValue: { summary: ButtonHierarchy.Primary } },
+        },
+        buttonLoading: { control: 'boolean' },
+        width: {
+            control: 'text',
+            table: { defaultValue: { summary: '286px' } },
+        },
+    },
+};
+export default meta;
+export const Pro = {
+    args: {
+        title: 'Pro',
+        description: 'Designed for professionals looking to expand their reach.',
+        price: '€210',
+        priceSuffix: '/month',
+        badgeText: 'Most Popular',
+        badgeColor: BadgeColor.Lemon,
+        highlighted: true,
+        buttonText: 'Upgrade',
+        features: [
+            '300 credits (300 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+            '3 active Conversational Agents',
+            'Priority support',
+        ],
+    },
+};
+export const Free = {
+    args: {
+        title: 'Free',
+        description: 'Discover what Beyond Presence has to offer.',
+        price: '€0',
+        priceSuffix: '/month',
+        badgeText: 'Current Plan',
+        badgeColor: BadgeColor.Green,
+        buttonText: 'Current plan',
+        buttonDisabled: true,
+        features: [
+            '1 credit (1 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+        ],
+    },
+};
+export const Personal = {
+    args: {
+        title: 'Personal',
+        description: 'Tailored for personal projects and independent creators.',
+        price: '€50',
+        priceSuffix: '/month',
+        buttonText: 'Upgrade',
+        features: [
+            '50 credits (50 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+            '1 active Conversational Agent',
+        ],
+    },
+};
+export const Custom = {
+    args: {
+        title: 'Professional',
+        description: 'For businesses with high volume and custom needs.',
+        price: 'Custom',
+        priceSuffix: '',
+        buttonText: 'Upgrade',
+        features: ['5000+ credits (5000+ min of Conversational Agent video)'],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A custom-priced plan — the price suffix is omitted.',
+            },
+        },
+    },
+};

package/dist/stories/PlanCard/PlanCardSkeleton.d.ts

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

package/dist/stories/PlanCard/PlanCardSkeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SkeletonLoader } from '../UI';
+export const PlanCardSkeleton = ({ showBadge = true, showButton = true, showFeatures = true, featuresCount = 4, width = '286px', style, testId, }) => {
+    return (_jsxs(Box, { width: width, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', style: style, "data-testid": testId, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(SkeletonLoader, { width: '40%', height: '24px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), showBadge && (_jsx(SkeletonLoader, { width: '88px', height: '24px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)' }))] }), _jsx(SkeletonLoader, { width: '100%', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), _jsx(SkeletonLoader, { width: '50%', height: '32px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }), showButton && (_jsx(SkeletonLoader, { width: '100%', height: '36px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)' })), showFeatures && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(SkeletonLoader, { width: '96px', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), Array.from({ length: featuresCount }).map((_, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(SkeletonLoader, { width: '20px', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)' }), _jsx(SkeletonLoader, { width: index % 2 === 0 ? '80%' : '60%', height: '18px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }, index)))] }))] }));
+};

package/dist/stories/PlanCard/PlanCardSkeleton.stories.d.ts

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

package/dist/stories/PlanCard/PlanCardSkeleton.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { PlanCardSkeleton } from './PlanCardSkeleton';
+const meta = {
+    title: 'Design System/Components/PlanCard/PlanCardSkeleton',
+    component: PlanCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        showBadge: {
+            control: 'boolean',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        showButton: {
+            control: 'boolean',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        showFeatures: {
+            control: 'boolean',
+            table: { defaultValue: { summary: 'true' } },
+        },
+        featuresCount: {
+            control: 'number',
+            table: { defaultValue: { summary: '4' } },
+        },
+        width: {
+            control: 'text',
+            table: { defaultValue: { summary: '286px' } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+export const Grid = {
+    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(PlanCardSkeleton, {}), _jsx(PlanCardSkeleton, { featuresCount: 3 }), _jsx(PlanCardSkeleton, { featuresCount: 5 })] })),
+};

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

@@ -0,0 +1,3 @@
+export * from './PlanCard';
+export * from './PlanCardSkeleton';
+export * from './types';

package/dist/stories/PlanCard/index.js

@@ -0,0 +1,3 @@
+export * from './PlanCard';
+export * from './PlanCardSkeleton';
+export * from './types';