@beydesign/storybook 0.0.1 → 0.0.2

package/dist/stories/Buttons/ToggleButtonGroup.stories.js

@@ -0,0 +1,78 @@
+import { ToggleButtonGroup } from './ToggleButtonGroup';
+import { ToggleButtonGroupSize } from './types';
+const meta = {
+    title: 'Design System/Components/Buttons/ToggleButtonGroup',
+    component: ToggleButtonGroup,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4730-7941&m=dev',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        options: {
+            control: 'radio',
+            description: 'Options for the toggle button',
+            table: {
+                type: { summary: 'string[]' },
+            },
+        },
+        selectedOption: {
+            control: 'text',
+            description: 'Selected option for the toggle button',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the toggle button is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        size: {
+            control: 'select',
+            options: Object.values(ToggleButtonGroupSize),
+            description: 'Size of the toggle button',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: ToggleButtonGroupSize.md },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+    },
+};
+export const Size_SM = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+        size: ToggleButtonGroupSize.sm,
+    },
+};
+export const Size_MD = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+        size: ToggleButtonGroupSize.md,
+    },
+};
+export const Size_LG = {
+    args: {
+        options: ['Option 1', 'Option 2', 'Option 3'],
+        selectedOption: 'Option 1',
+        onChange: () => { },
+        size: ToggleButtonGroupSize.lg,
+    },
+};

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

@@ -0,0 +1,3 @@
+export * from './MainButton';
+export * from './ToggleButtonGroup';
+export * from './types';

package/dist/stories/Buttons/index.js

@@ -0,0 +1,3 @@
+export * from './MainButton';
+export * from './ToggleButtonGroup';
+export * from './types';

package/dist/stories/{types/button.d.ts → Buttons/types.d.ts}

@@ -1,5 +1,7 @@
-import type { SxProps, Theme } from '@mui/material';
-import * as PhosphorIcons from '@phosphor-icons/react';
+import type { CSSProperties } from 'react';
+import { IconName } from '../../utils';
+import { SxProps } from '@mui/material';
+import { Theme } from '@mui/material';
 /**
  * Button size variants
  */
@@ -16,11 +18,12 @@ export declare enum ButtonSize {
  */
 export declare enum ButtonHierarchy {
     Primary = "Primary",
+    PrimaryLemon = "Primary-lemon",
     Secondary = "Secondary",
     SecondaryColor = "Secondary-color",
     SecondaryTransparent = "Secondary-transparent",
-    Tetriary = "Tetriary",
-    TetriaryColor = "Tetriary-color"
+    Tertiary = "Tertiary",
+    TertiaryColor = "Tertiary-color"
 }
 /**
  * Button states
@@ -56,8 +59,6 @@ export declare enum ButtonType {
  * Size configuration for a button
  */
 export interface ButtonSizeConfig {
-    width: string;
-    height: string;
     padding: string;
     fontSize: string;
     gap: string;
@@ -67,9 +68,9 @@ export interface ButtonSizeConfig {
  */
 export interface MainButtonProps {
     /** Click handler for the button */
-    onClick?: () => void | Promise<boolean> | Promise<void>;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** Text content of the button */
-    text: string;
+    text?: string;
     /** Whether the button is disabled */
     disabled?: boolean;
     /** Whether the button is in loading state */
@@ -77,13 +78,13 @@ export interface MainButtonProps {
     /** HTML button type */
     type?: ButtonType;
     /** Custom styles for the button */
-    style?: SxProps<Theme>;
+    style?: CSSProperties;
     /** Size variant of the button */
     size?: ButtonSize;
     /** Visual hierarchy of the button */
     hierarchy?: ButtonHierarchy;
     /** Icon to display when in icon mode */
-    displayIcon?: keyof typeof PhosphorIcons;
+    displayIcon?: IconName;
     /** How to display the icon */
     displayIconMode?: ButtonDisplayMode;
     /** Current state of the button */
@@ -97,12 +98,34 @@ export interface MainButtonProps {
     /** Whether to show the trailing icon */
     showTrailingIcon?: boolean;
     /** Icon to show at the start of the button */
-    leadingIcon?: keyof typeof PhosphorIcons;
+    leadingIcon?: IconName;
     /** Icon to show at the end of the button */
-    trailingIcon?: keyof typeof PhosphorIcons;
+    trailingIcon?: IconName;
+    /** Test Id */
+    testId?: string;
 }
 /**
- * Props for the Components wrapper
+ * Toggle button size variants
  */
-export interface ComponentsProps {
+export declare enum ToggleButtonGroupSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
 }
+/**
+ * Toggle button component props
+ */
+export type ToggleButtonGroupProps = {
+    /** Size variant of the toggle button */
+    size?: ToggleButtonGroupSize;
+    /** Selected option of the toggle button */
+    selectedOption: string;
+    /** Options of the toggle button */
+    options: string[];
+    /** Whether the toggle button is disabled */
+    disabled?: boolean;
+    /** Callback function when the toggle button is selected */
+    onChange: (option: string) => void;
+    /** Custom style of the toggle button */
+    style?: SxProps<Theme>;
+};

package/dist/stories/{types/button.js → Buttons/types.js}

@@ -16,11 +16,12 @@ export var ButtonSize;
 export var ButtonHierarchy;
 (function (ButtonHierarchy) {
     ButtonHierarchy["Primary"] = "Primary";
+    ButtonHierarchy["PrimaryLemon"] = "Primary-lemon";
     ButtonHierarchy["Secondary"] = "Secondary";
     ButtonHierarchy["SecondaryColor"] = "Secondary-color";
     ButtonHierarchy["SecondaryTransparent"] = "Secondary-transparent";
-    ButtonHierarchy["Tetriary"] = "Tetriary";
-    ButtonHierarchy["TetriaryColor"] = "Tetriary-color";
+    ButtonHierarchy["Tertiary"] = "Tertiary";
+    ButtonHierarchy["TertiaryColor"] = "Tertiary-color";
 })(ButtonHierarchy || (ButtonHierarchy = {}));
 /**
  * Button states
@@ -56,3 +57,12 @@ export var ButtonType;
     ButtonType["Submit"] = "submit";
     ButtonType["Reset"] = "reset";
 })(ButtonType || (ButtonType = {}));
+/**
+ * Toggle button size variants
+ */
+export var ToggleButtonGroupSize;
+(function (ToggleButtonGroupSize) {
+    ToggleButtonGroupSize["lg"] = "lg";
+    ToggleButtonGroupSize["md"] = "md";
+    ToggleButtonGroupSize["sm"] = "sm";
+})(ToggleButtonGroupSize || (ToggleButtonGroupSize = {}));

package/dist/stories/Credits/CreditsCard.d.ts

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

package/dist/stories/Credits/CreditsCard.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import styled from '@emotion/styled';
+import { CreditsCardSize } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Box } from '@mui/material';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+import { formatNumberShort } from '../../utils';
+const StyledCard = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md);
+  padding: ${({ $size }) => $size === CreditsCardSize.Collapsed
+    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+    : 'var(--spacing-tokens-size-in-px-spacing-spacing-md) var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
+  background-color: ${({ $warning }) => $warning
+    ? 'var(--color-background-bg-badge-accent-red)'
+    : 'var(--color-background-bg-card-highlight)'};
+  border: 1px solid var(--color-border-border-component);
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md);
+  padding: ${({ $collapsed }) => $collapsed
+    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+    : '8px var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
+  opacity: 1;
+  transition:
+    padding 0.3s ease-in-out,
+    width 0.3s ease-in-out,
+    height 0.3s ease-in-out;
+  width: 100%;
+  height: auto;
+  position: relative;
+`;
+const CreditRow = styled.div `
+  display: flex;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'space-between'};
+  align-items: center;
+  width: 100%;
+  transition: justify-content 0.3s ease-in-out;
+`;
+const TextWrapper = styled.span `
+  display: inline-block;
+  white-space: nowrap;
+`;
+export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, managedAgentsInfoText = 'Managed Agents 1 Min = 100 Credits', speechToVideoInfoText = 'Speech-to-Video 1 Min = 50 Credits', overUsageEnabled = false, overUsedCredits = 0, }) => {
+    const isCollapsed = size === CreditsCardSize.Collapsed;
+    const creditsLimitReached = usedCredits >= maxCredits;
+    const case1 = overUsageEnabled && overUsedCredits > 0; // if over usage is enabled and over used credits are greater than 0
+    const case2 = case1 || !creditsLimitReached; // if case 1 is true or credits limit is not reached
+    const case3 = !overUsageEnabled && creditsLimitReached; // if over usage is not enabled and credits limit is reached
+    const availableCredits = creditsLimitReached ? 0 : maxCredits - usedCredits;
+    const isValid = maxCredits !== undefined && availableCredits !== undefined;
+    return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, "$warning": case3, children: [!isCollapsed && isValid && (_jsxs(React.Fragment, { children: [case2 && (_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })), _jsxs(CreditRow, { children: [case2 && (_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: "My Credits:" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: `${availableCredits}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-paragraph)", children: `${maxCredits}` }) })] })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: "Credits Limit Reached" }) })), !case2 && (_jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }))] }), case1 && (_jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: `Overused: ${overUsedCredits}` }) }) })), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-subtle)", children: managedAgentsInfoText }) }) }), _jsx(CreditRow, { children: _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-subtle)", children: speechToVideoInfoText }) }) })] })), isCollapsed && isValid && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [case2 && (_jsx(CreditRow, { "$collapsed": true, children: _jsxs(Box, { display: "flex", flexDirection: "row", gap: "2px", children: [_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: `${formatNumberShort(availableCredits)}/` }) }), _jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--color-text-text-paragraph)", children: `${formatNumberShort(maxCredits)}` }) })] }) })), case3 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", textStyle: { textOverflow: 'ellipsis' }, title: "Credits Limit Reached", children: "Cred..." }) })), case1 && (_jsx(TextWrapper, { children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-title)", children: `${formatNumberShort(overUsedCredits)}` }) })), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TertiaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => onUpgradeClick?.() }) })] }))] }));
+};

package/dist/stories/Credits/CreditsCard.stories.d.ts

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

package/dist/stories/Credits/CreditsCard.stories.js

@@ -0,0 +1,34 @@
+import { CreditsCard } from './CreditsCard';
+import { CreditsCardSize } from './types';
+const meta = {
+    title: 'Design System/Components/Credits/CreditsCard',
+    component: CreditsCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: Object.values(CreditsCardSize),
+        },
+        maxCredits: { control: 'number' },
+        usedCredits: { control: 'number' },
+        managedAgentsInfoText: { control: 'text' },
+        speechToVideoInfoText: { control: 'text' },
+        overUsageEnabled: { control: 'boolean' },
+        overUsedCredits: { control: 'number' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: CreditsCardSize.Expanded,
+    },
+};
+export const Collapsed = {
+    args: {
+        ...Default.args,
+        size: CreditsCardSize.Collapsed,
+    },
+};

package/dist/stories/Credits/CreditsCardSkeleton.d.ts

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

package/dist/stories/Credits/CreditsCardSkeleton.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '@mui/material';
+import styled from '@emotion/styled';
+import { SkeletonLoader } from '../UI';
+import { CreditsCardSize } from './types';
+const StyledSkeletonCard = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-tokens-size-in-px-spacing-spacing-md);
+  padding: ${({ $collapsed }) => $collapsed
+    ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
+    : '8px var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
+  background-color: var(--color-background-bg-card-highlight);
+  border: 1px solid var(--color-border-border-component);
+  border-radius: var(--spacing-tokens-size-in-px-spacing-spacing-md);
+  width: 100%;
+  height: auto;
+  position: relative;
+`;
+const CreditRow = styled.div `
+  display: flex;
+  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'space-between'};
+  align-items: center;
+  width: 100%;
+`;
+export const CreditsCardSkeleton = ({ size = CreditsCardSize.Expanded, style, }) => {
+    const isCollapsed = size === CreditsCardSize.Collapsed;
+    return (_jsxs(StyledSkeletonCard, { "$collapsed": isCollapsed, "$size": size, style: style, children: [!isCollapsed && (_jsxs(React.Fragment, { children: [_jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(SkeletonLoader, { width: "80px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) }), _jsx(CreditRow, { children: _jsx(Box, { gap: "4px", display: "flex", flexDirection: "row", children: _jsx(SkeletonLoader, { width: "140px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) }) }), _jsx(CreditRow, { children: _jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) }), _jsx(CreditRow, { children: _jsx(SkeletonLoader, { width: "100%", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) })] })), isCollapsed && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", alignItems: "center", justifyContent: "center", children: [_jsx(CreditRow, { "$collapsed": true, children: _jsx(SkeletonLoader, { width: "40px", height: "16px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) }), _jsx(SkeletonLoader, { width: "60px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }))] }));
+};

package/dist/stories/Credits/CreditsCardSkeleton.stories.d.ts

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

package/dist/stories/Credits/CreditsCardSkeleton.stories.js

@@ -0,0 +1,40 @@
+import { CreditsCardSkeleton } from './CreditsCardSkeleton';
+import { CreditsCardSize } from './types';
+const meta = {
+    title: 'Design System/Components/Credits/CreditsCardSkeleton',
+    component: CreditsCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: Object.values(CreditsCardSize),
+            description: 'Size variant of the skeleton',
+            table: {
+                type: { summary: 'CreditsCardSize' },
+                defaultValue: { summary: 'CreditsCardSize.Expanded' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Optional inline styles',
+            table: {
+                type: { summary: 'React.CSSProperties' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        size: CreditsCardSize.Expanded,
+    },
+};
+export const Collapsed = {
+    args: {
+        size: CreditsCardSize.Collapsed,
+    },
+};

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

@@ -0,0 +1,3 @@
+export * from './CreditsCard';
+export * from './CreditsCardSkeleton';
+export * from './types';

package/dist/stories/Credits/index.js

@@ -0,0 +1,3 @@
+export * from './CreditsCard';
+export * from './CreditsCardSkeleton';
+export * from './types';

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

@@ -0,0 +1,57 @@
+export declare enum CreditsCardSize {
+    Expanded = "expanded",
+    Collapsed = "collapsed"
+}
+export declare enum CreditsCardState {
+    Default = "default",
+    Active = "active",
+    Disabled = "disabled"
+}
+export interface CreditsCardProps {
+    /**
+     * The size of the card
+     */
+    size?: CreditsCardSize;
+    /**
+     * Optional className for additional styling
+     */
+    className?: string;
+    /**
+     * Maximum available credits
+     */
+    maxCredits?: number;
+    /**
+     * Currently used credits
+     */
+    usedCredits?: number;
+    /**
+     * Function to handle upgrade button click
+     */
+    onUpgradeClick?: () => void;
+    /**
+     * Text explaining speech to video usage (e.g., "1 Min = 100 Credits")
+     */
+    speechToVideoInfoText?: string;
+    /**
+     * Text explaining managed agents usage (e.g., "Managed Agents 1 Min = 100 Credits")
+     */
+    managedAgentsInfoText?: string;
+    /**
+     * Whether to enable over usage
+     */
+    overUsageEnabled?: boolean;
+    /**
+     * Over used credits
+     */
+    overUsedCredits?: number;
+}
+export interface CreditsCardSkeletonProps {
+    /**
+     * The size of the skeleton card
+     */
+    size?: CreditsCardSize;
+    /**
+     * Optional inline styles
+     */
+    style?: React.CSSProperties;
+}

package/dist/stories/Credits/types.js

@@ -0,0 +1,11 @@
+export var CreditsCardSize;
+(function (CreditsCardSize) {
+    CreditsCardSize["Expanded"] = "expanded";
+    CreditsCardSize["Collapsed"] = "collapsed";
+})(CreditsCardSize || (CreditsCardSize = {}));
+export var CreditsCardState;
+(function (CreditsCardState) {
+    CreditsCardState["Default"] = "default";
+    CreditsCardState["Active"] = "active";
+    CreditsCardState["Disabled"] = "disabled";
+})(CreditsCardState || (CreditsCardState = {}));

package/dist/stories/EntityCard/EntityCard.d.ts

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

package/dist/stories/EntityCard/EntityCard.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { Menu, Badge, BadgeColor, BadgeSize } from '../UI';
+import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
+import { UserCircle } from '@phosphor-icons/react';
+export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, onPreview, previewButtonText, previewIcon = 'Play', showStatusBadge = false, statusBadgeText = '', statusBadgeColor = BadgeColor.Green, menuItems = [], showMenu = false, width, }) => {
+    const [hovered, setHovered] = useState(false);
+    const [imageError, setImageError] = useState(false);
+    const isAgent = view === 'agent';
+    const cardWidth = width ?? (isAgent ? '280px' : '208px');
+    const imageAspectRatio = isAgent ? '1 / 1' : '203 / 264';
+    const entityKey = name?.toLowerCase()?.replace(/\s+/g, '-');
+    const hasMenu = showMenu && menuItems.length > 0;
+    const showActions = hovered && (!!onPreview || hasMenu);
+    const showBadge = showStatusBadge && !!statusBadgeText;
+    return (_jsxs(Box, { width: cardWidth, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', bgcolor: 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', "data-testid": `${entityKey}-entity-card`, children: [_jsxs(Box, { position: 'relative', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), children: [image && !imageError ? (_jsx("img", { src: image, alt: name, width: '100%', height: '100%', style: { objectFit: 'cover', height: '100%', width: '100%' }, onError: () => setImageError(true) })) : (_jsx(Box, { width: '100%', height: '100%', bgcolor: 'var(--color-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(UserCircle, { size: 74, weight: 'thin', color: 'var(--color-text-text-subtle)' }) })), _jsx(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) var(--spacing-tokens-size-in-px-spacing-spacing-lg) var(--spacing-tokens-size-in-px-spacing-spacing-lg)', sx: {
+                            backgroundImage: 'linear-gradient(rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)',
+                        }, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-white)', textStyle: { wordBreak: 'break-word' }, children: name }) }), showBadge && (_jsx(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', left: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: _jsx(Badge, { text: statusBadgeText, color: statusBadgeColor, size: BadgeSize.md, showIcon: true, icon: 'Circle', iconWeight: 'fill', iconSize: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', iconColor: 'var(--color-foreground-fg-accent-success)' }) })), showActions && (_jsxs(Box, { position: 'absolute', top: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', right: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { zIndex: 2 }, children: [onPreview &&
+                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, hierarchy: ButtonHierarchy.Primary, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.Primary, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` }))), hasMenu && (_jsx(Menu, { items: menuItems, testKey: entityKey, size: ButtonSize.sm }))] }))] }), showDescription && description && (_jsx(Box, { display: 'flex', alignItems: 'center', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', boxSizing: 'border-box', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-label)', textStyle: { wordBreak: 'break-word' }, children: description }) }))] }));
+};

package/dist/stories/EntityCard/EntityCard.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EntityCard } from './EntityCard';
+declare const meta: Meta<typeof EntityCard>;
+export default meta;
+type Story = StoryObj<typeof EntityCard>;
+export declare const Default: Story;
+export declare const AgentView: Story;
+export declare const WithDescription: Story;
+export declare const NoActions: Story;
+export declare const NoImage: Story;