@beydesign/storybook 0.1.20 → 0.1.21

package/dist/App.js

@@ -1,7 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { EntityCard, EntityCardSkeleton } from './stories/EntityCard';
+import { PlanCard, PlanCardSkeleton } from './stories/PlanCard';
+import { BadgeColor } from './stories/UI';
 import './App.css';
+const plans = [
+    {
+        id: 'free',
+        title: 'Free',
+        description: 'Discover what Beyond Presence has to offer.',
+        price: '€0',
+        badgeText: 'Current Plan',
+        badgeColor: BadgeColor.Green,
+        buttonText: 'Current plan',
+        buttonDisabled: true,
+        features: [
+            '1 credit (1 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+        ],
+    },
+    {
+        id: 'personal',
+        title: 'Personal',
+        description: 'Tailored for personal projects and independent creators.',
+        price: '€50',
+        features: [
+            '50 credits (50 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+            '1 active Conversational Agent',
+        ],
+    },
+    {
+        id: 'pro',
+        title: 'Pro',
+        description: 'Designed for professionals looking to expand their reach.',
+        price: '€210',
+        badgeText: 'Most Popular',
+        badgeColor: BadgeColor.Lemon,
+        highlighted: true,
+        features: [
+            '300 credits (300 min of Conversational Agent video)',
+            '5 stock Digital Twins',
+            '3 active Conversational Agents',
+            'Priority support',
+        ],
+    },
+];
 const avatars = [
     {
         id: 'nelly',
@@ -104,6 +148,19 @@ function App() {
                     gap: '16px',
                 }, children: avatars
                     .slice(0, 4)
-                    .map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "agent" }, `agent-${avatar.id}`)) : (_jsx(EntityCard, { view: "agent", name: `${avatar.name} Customer Support`, image: avatar.image, showStatusBadge: true, statusBadgeText: "Active", onPreview: () => console.log('Join', avatar.name), previewButtonText: "Join", previewIcon: "VideoCamera", showMenu: true, menuItems: agentMenuItems }, `agent-${avatar.id}`))) })] }));
+                    .map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "agent" }, `agent-${avatar.id}`)) : (_jsx(EntityCard, { view: "agent", name: `${avatar.name} Customer Support`, image: avatar.image, showStatusBadge: true, statusBadgeText: "Active", onPreview: () => console.log('Join', avatar.name), previewButtonText: "Join", previewIcon: "VideoCamera", showMenu: true, menuItems: agentMenuItems }, `agent-${avatar.id}`))) }), _jsx("h2", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--colors-light-text-text-title)',
+                    margin: '40px 0 4px',
+                }, children: "Subscription plans" }), _jsx("p", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--colors-light-text-text-subtle)',
+                    marginBottom: '24px',
+                }, children: "Choose the plan that's right for you." }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'flex-start',
+                    gap: '16px',
+                }, children: plans.map((plan) => loading ? (_jsx(PlanCardSkeleton, { featuresCount: plan.features.length }, plan.id)) : (_jsx(PlanCard, { title: plan.title, description: plan.description, price: plan.price, badgeText: plan.badgeText, badgeColor: plan.badgeColor, highlighted: plan.highlighted, buttonText: plan.buttonText, buttonDisabled: plan.buttonDisabled, features: plan.features, onButtonClick: () => console.log('Plan action', plan.title) }, plan.id))) })] }));
 }
 export default App;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export * from './stories/UI';
 export * from './stories/Agent';
 export * from './stories/EntityCard';
+export * from './stories/PlanCard';
 export * from './stories/Form';
 export * from './stories/Buttons';
 export * from './stories/Typography';

package/dist/index.js

@@ -1,6 +1,7 @@
 export * from './stories/UI';
 export * from './stories/Agent';
 export * from './stories/EntityCard';
+export * from './stories/PlanCard';
 export * from './stories/Form';
 export * from './stories/Buttons';
 export * from './stories/Typography';

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(--colors-light-background-bg-card-highlight)'
+            : 'var(--colors-light-background-bg-white)', border: `1px solid ${highlighted
+            ? 'var(--colors-light-border-border-brand)'
+            : 'var(--colors-light-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(--colors-light-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(--colors-light-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(--colors-light-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-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(--colors-light-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(--colors-light-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(--colors-light-background-bg-white)', border: '1px solid var(--colors-light-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';

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { BadgeColor } from '../UI';
+import { ButtonHierarchy } from '../Buttons';
+/**
+ * Plan card component props — a compact, in-app subscription plan card.
+ */
+export interface PlanCardProps {
+    /** Plan name (e.g. "Pro") */
+    title: string;
+    /** Short plan description */
+    description?: string;
+    /** Price text (e.g. "€210" or "Custom") */
+    price?: string;
+    /** Price suffix shown next to the price (e.g. "/month") */
+    priceSuffix?: string;
+    /** Badge text (e.g. "Most Popular", "Current Plan") */
+    badgeText?: string;
+    /** Badge color (defaults to Lemon) */
+    badgeColor?: BadgeColor;
+    /** Highlights the card with a brand background + border */
+    highlighted?: boolean;
+    /** Heading above the feature list */
+    featuresTitle?: string;
+    /** Feature list */
+    features?: string[];
+    /** Action button label (defaults to "Upgrade"); hidden when omitted */
+    buttonText?: string;
+    /** Action button click handler */
+    onButtonClick?: () => void;
+    /** Disable the action button (e.g. for the current plan) */
+    buttonDisabled?: boolean;
+    /** Action button hierarchy (defaults to Primary) */
+    buttonHierarchy?: ButtonHierarchy;
+    /** Show a loading spinner on the action button */
+    buttonLoading?: boolean;
+    /** Width of the card */
+    width?: string | number;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test id */
+    testId?: string;
+}
+/**
+ * Plan card skeleton props
+ */
+export interface PlanCardSkeletonProps {
+    /** Whether to show the badge placeholder */
+    showBadge?: boolean;
+    /** Whether to show the button placeholder */
+    showButton?: boolean;
+    /** Whether to show the features placeholder */
+    showFeatures?: boolean;
+    /** Number of feature placeholders */
+    featuresCount?: number;
+    /** Width of the card */
+    width?: string | number;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test id */
+    testId?: string;
+}

package/dist/stories/PlanCard/types.js

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

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

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

package/dist/stories/UI/CheckIcon.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { CheckIconColor, CheckIconSize, CheckIconType, } from './types';
+import { getIconComponent } from '../../utils';
+const WHITE = 'var(--semantic-colors-light-foreground-fg-on-primary-accent-color)';
+const COLOR_MAP = {
+    [CheckIconColor.Violet]: {
+        accent: 'var(--semantic-colors-light-foreground-fg-accent-violet)',
+        subtle: 'var(--semantic-colors-light-background-bg-badge-accent-brand-violet)',
+    },
+    [CheckIconColor.Green]: {
+        accent: 'var(--colors-light-foreground-fg-success)',
+        subtle: 'var(--semantic-colors-light-background-bg-badge-accent-success)',
+    },
+};
+const SIZE_MAP = {
+    [CheckIconSize.xs]: { container: 16, check: 11, border: 1.5 },
+    [CheckIconSize.sm]: { container: 20, check: 13, border: 1.5 },
+    [CheckIconSize.md]: { container: 24, check: 16, border: 2 },
+    [CheckIconSize.lg]: { container: 28, check: 18, border: 2 },
+};
+export const CheckIcon = ({ color = CheckIconColor.Violet, size = CheckIconSize.md, type = CheckIconType.Duotone, style, testId, }) => {
+    const { accent, subtle } = COLOR_MAP[color];
+    const { container, check, border } = SIZE_MAP[size];
+    const background = type === CheckIconType.Filled
+        ? accent
+        : type === CheckIconType.Duotone
+            ? subtle
+            : 'transparent';
+    const checkColor = type === CheckIconType.Filled ? WHITE : accent;
+    return (_jsx(Box, { width: `${container}px`, height: `${container}px`, flexShrink: 0, boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)', bgcolor: background, border: type === CheckIconType.Line ? `${border}px solid ${accent}` : undefined, style: style, "data-testid": testId, children: getIconComponent('Check', {
+            size: `${check}px`,
+            weight: 'bold',
+            color: checkColor,
+        }) }));
+};

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

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

package/dist/stories/UI/CheckIcon.stories.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { CheckIcon } from './CheckIcon';
+import { CheckIconColor, CheckIconSize, CheckIconType } from './types';
+const meta = {
+    title: 'Design System/Components/UI/CheckIcon',
+    component: CheckIcon,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4781-5580',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: Object.values(CheckIconColor),
+            table: { defaultValue: { summary: CheckIconColor.Violet } },
+        },
+        size: {
+            control: 'select',
+            options: Object.values(CheckIconSize),
+            table: { defaultValue: { summary: CheckIconSize.md } },
+        },
+        type: {
+            control: 'select',
+            options: Object.values(CheckIconType),
+            table: { defaultValue: { summary: CheckIconType.Duotone } },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        color: CheckIconColor.Violet,
+        size: CheckIconSize.md,
+        type: CheckIconType.Duotone,
+    },
+};
+export const AllVariants = {
+    render: () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: 3, children: Object.values(CheckIconType).map((type) => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsx("span", { style: {
+                        fontFamily: 'Figtree, sans-serif',
+                        fontSize: 12,
+                        color: 'var(--colors-light-text-text-subtle)',
+                    }, children: type }), Object.values(CheckIconColor).map((color) => (_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: Object.values(CheckIconSize).map((size) => (_jsx(CheckIcon, { color: color, type: type, size: size }, `${color}-${type}-${size}`))) }, color)))] }, type))) })),
+};

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

@@ -1,5 +1,6 @@
 export * from './Badge';
 export * from './Avatar';
+export * from './CheckIcon';
 export * from './FeatureBanner';
 export * from './HintBubble';
 export * from './Logo';

package/dist/stories/UI/index.js

@@ -1,5 +1,6 @@
 export * from './Badge';
 export * from './Avatar';
+export * from './CheckIcon';
 export * from './FeatureBanner';
 export * from './HintBubble';
 export * from './Logo';

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

@@ -169,6 +169,48 @@ export type MenuProps = {
     /** Hierarchy of the trigger button */
     hierarchy?: ButtonHierarchy;
 };
+/**
+ * Check icon color variants
+ */
+export declare enum CheckIconColor {
+    Violet = "Violet",
+    Green = "Green"
+}
+/**
+ * Check icon size variants (xs = 16px, sm = 20px, md = 24px, lg = 28px)
+ */
+export declare enum CheckIconSize {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg"
+}
+/**
+ * Check icon type variants.
+ * - `Filled`: solid accent background + white check
+ * - `Line`: transparent background, accent ring + accent check
+ * - `Duotone`: light badge background + accent-colored check
+ */
+export declare enum CheckIconType {
+    Filled = "Filled",
+    Line = "Line",
+    Duotone = "Duotone"
+}
+/**
+ * Check icon component props
+ */
+export interface CheckIconProps {
+    /** Color variant */
+    color?: CheckIconColor;
+    /** Size variant (xs = 16px, md = 24px) */
+    size?: CheckIconSize;
+    /** Fill style */
+    type?: CheckIconType;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test id */
+    testId?: string;
+}
 /**
  * Progress indicator mode variants
  */

package/dist/stories/UI/types.js

@@ -61,6 +61,36 @@ export var LogoVariant;
     LogoVariant["Vertical"] = "vertical";
     LogoVariant["Icon"] = "icon";
 })(LogoVariant || (LogoVariant = {}));
+/**
+ * Check icon color variants
+ */
+export var CheckIconColor;
+(function (CheckIconColor) {
+    CheckIconColor["Violet"] = "Violet";
+    CheckIconColor["Green"] = "Green";
+})(CheckIconColor || (CheckIconColor = {}));
+/**
+ * Check icon size variants (xs = 16px, sm = 20px, md = 24px, lg = 28px)
+ */
+export var CheckIconSize;
+(function (CheckIconSize) {
+    CheckIconSize["xs"] = "xs";
+    CheckIconSize["sm"] = "sm";
+    CheckIconSize["md"] = "md";
+    CheckIconSize["lg"] = "lg";
+})(CheckIconSize || (CheckIconSize = {}));
+/**
+ * Check icon type variants.
+ * - `Filled`: solid accent background + white check
+ * - `Line`: transparent background, accent ring + accent check
+ * - `Duotone`: light badge background + accent-colored check
+ */
+export var CheckIconType;
+(function (CheckIconType) {
+    CheckIconType["Filled"] = "Filled";
+    CheckIconType["Line"] = "Line";
+    CheckIconType["Duotone"] = "Duotone";
+})(CheckIconType || (CheckIconType = {}));
 /**
  * Progress indicator mode variants
  */

package/package.json

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