@beydesign/storybook 0.1.17 → 0.1.20

package/dist/App.js

@@ -1,10 +1,109 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import reactLogo from './assets/react.svg';
-import viteLogo from '/vite.svg';
+import { EntityCard, EntityCardSkeleton } from './stories/EntityCard';
 import './App.css';
+const avatars = [
+    {
+        id: 'nelly',
+        name: 'Nelly',
+        image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=600&ixlib=rb-4.0.3',
+    },
+    {
+        id: 'ava',
+        name: 'Ava',
+        image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?fm=jpg&q=60&w=600&ixlib=rb-4.0.3',
+    },
+    {
+        id: 'leo',
+        name: 'Leo',
+        image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?fm=jpg&q=60&w=600&ixlib=rb-4.0.3',
+    },
+    {
+        id: 'maya',
+        name: 'Maya Customer Support',
+        image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?fm=jpg&q=60&w=600&ixlib=rb-4.0.3',
+    },
+    {
+        id: 'no-image',
+        name: 'No Image',
+        image: undefined,
+    },
+];
+const agentMenuItems = [
+    {
+        label: 'Conversation Link',
+        icon: 'ShareNetwork',
+        onClick: () => { },
+    },
+    { label: 'Copy Agent ID', icon: 'CopySimple', onClick: () => { } },
+    { label: 'Embed', icon: 'Code', onClick: () => { } },
+    {
+        label: 'Agent Details',
+        icon: 'IdentificationCard',
+        onClick: () => { },
+    },
+    { label: 'Duplicate', icon: 'Copy', onClick: () => { } },
+    {
+        label: 'Delete',
+        icon: 'Trash',
+        onClick: () => { },
+        destructive: true,
+    },
+];
 function App() {
-    const [count, setCount] = useState(0);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("a", { href: "https://vite.dev", target: "_blank", children: _jsx("img", { src: viteLogo, className: "logo", alt: "Vite logo" }) }), _jsx("a", { href: "https://react.dev", target: "_blank", children: _jsx("img", { src: reactLogo, className: "logo react", alt: "React logo" }) })] }), _jsx("h1", { children: "Vite + React" }), _jsxs("div", { className: "card", children: [_jsxs("button", { onClick: () => setCount((count) => count + 1), children: ["count is ", count] }), _jsxs("p", { children: ["Edit ", _jsx("code", { children: "src/App.tsx" }), " and save to test HMR"] })] }), _jsx("p", { className: "read-the-docs", children: "Click on the Vite and React logos to learn more" })] }));
+    const [loading, setLoading] = useState(false);
+    return (_jsxs("div", { style: { padding: '32px' }, children: [_jsx("button", { type: "button", onClick: () => setLoading((prev) => !prev), style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    marginBottom: '24px',
+                    padding: '8px 16px',
+                    borderRadius: '6px',
+                    border: '1px solid var(--colors-light-border-border-component)',
+                    background: 'var(--colors-light-background-bg-white)',
+                    color: 'var(--colors-light-text-text-title)',
+                    cursor: 'pointer',
+                }, children: loading ? 'Show loaded cards' : 'Show loading skeletons' }), _jsx("h2", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--colors-light-text-text-title)',
+                    marginBottom: '4px',
+                }, children: "Explore our Avatar Library" }), _jsx("p", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--colors-light-text-text-subtle)',
+                    marginBottom: '24px',
+                }, children: "Select the perfect studio-quality digital human to make your interactions feel personal." }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '16px',
+                }, children: avatars.map((avatar) => loading ? (_jsx(EntityCardSkeleton, { view: "avatar", showDescription: true }, avatar.id)) : (_jsx(EntityCard, { name: avatar.name, image: avatar.image, onPreview: () => console.log('Preview', avatar.name), showMenu: true, menuItems: [
+                        {
+                            label: 'Copy Avatar ID',
+                            icon: 'Copy',
+                            onClick: () => console.log('Copy', avatar.id),
+                        },
+                        {
+                            label: 'Create Agent',
+                            icon: 'UserCirclePlus',
+                            onClick: () => console.log('Create Agent', avatar.name),
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'Trash',
+                            onClick: () => console.log('Delete', avatar.name),
+                            destructive: true,
+                        },
+                    ], description: "daijdaij pa oapopao ao opaop op", showDescription: true }, avatar.id))) }), _jsx("h2", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--colors-light-text-text-title)',
+                    margin: '40px 0 4px',
+                }, children: "Explore our Agent library" }), _jsx("p", { style: {
+                    fontFamily: 'Figtree, sans-serif',
+                    color: 'var(--colors-light-text-text-subtle)',
+                    marginBottom: '24px',
+                }, children: "Your active agents \u2014 hover a card to join a live conversation." }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    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}`))) })] }));
 }
 export default App;

package/dist/index.d.ts

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

package/dist/index.js

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

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' : '218px');
+    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(--colors-light-background-bg-card-highlight)', border: '1px solid var(--colors-light-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(--colors-light-background-bg-element)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: _jsx(UserCircle, { size: 74, weight: 'thin', color: 'var(--colors-light-text-text-subtle)' }) })), _jsx(Box, { position: 'absolute', left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', padding: '24px 12px 12px', 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(--colors-light-text-text-white)', textStyle: { wordBreak: 'break-word' }, children: name }) }), showBadge && (_jsx(Box, { position: 'absolute', top: '8px', left: '8px', sx: { zIndex: 2 }, children: _jsx(Badge, { text: statusBadgeText, color: statusBadgeColor, size: BadgeSize.md, showIcon: true, icon: 'Circle', iconWeight: 'fill', iconSize: '8px', iconColor: 'var(--colors-light-background-bg-success)' }) })), showActions && (_jsxs(Box, { position: 'absolute', top: '8px', right: '8px', 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 12px', width: '100%', boxSizing: 'border-box', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-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;

package/dist/stories/EntityCard/EntityCard.stories.js

@@ -0,0 +1,187 @@
+import { EntityCard } from './EntityCard';
+import { BadgeColor } from '../UI';
+const meta = {
+    title: 'Design System/Components/EntityCard/EntityCard',
+    component: EntityCard,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6916-20176',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        view: {
+            control: 'select',
+            options: ['avatar', 'agent'],
+            description: 'View variant — drives default width and image aspect ratio',
+            table: {
+                type: { summary: "'avatar' | 'agent'" },
+                defaultValue: { summary: 'avatar' },
+            },
+        },
+        name: {
+            control: 'text',
+            description: 'Display name shown over the image',
+            table: { type: { summary: 'string' } },
+        },
+        image: {
+            control: 'text',
+            description: 'Image url',
+            table: { type: { summary: 'string' } },
+        },
+        description: {
+            control: 'text',
+            description: 'Optional description shown below the image',
+            table: { type: { summary: 'string' } },
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Whether to show the description',
+            table: { type: { summary: 'boolean' } },
+        },
+        showMenu: {
+            control: 'boolean',
+            description: 'Whether to show the menu on hover',
+            table: { type: { summary: 'boolean' } },
+        },
+        onPreview: {
+            description: 'Preview handler — renders the action button on hover',
+            table: { type: { summary: 'function' } },
+        },
+        previewButtonText: {
+            control: 'text',
+            description: 'Label for the action button; when set it renders text + icon, otherwise icon-only',
+            table: { type: { summary: 'string' } },
+        },
+        previewIcon: {
+            control: 'text',
+            description: 'Icon for the action button',
+            table: {
+                type: { summary: 'IconName' },
+                defaultValue: { summary: 'Play' },
+            },
+        },
+        showStatusBadge: {
+            control: 'boolean',
+            description: 'Whether to show the status badge (top-left)',
+            table: { type: { summary: 'boolean' } },
+        },
+        statusBadgeText: {
+            control: 'text',
+            description: 'Status badge text (e.g. "Active")',
+            table: { type: { summary: 'string' } },
+        },
+        statusBadgeColor: {
+            control: 'select',
+            options: Object.values(BadgeColor),
+            description: 'Status badge color',
+            table: {
+                type: { summary: 'BadgeColor' },
+                defaultValue: { summary: BadgeColor.Green },
+            },
+        },
+        menuItems: {
+            description: 'Menu items for the dropdown',
+            table: { type: { summary: 'array' } },
+        },
+        width: {
+            control: 'text',
+            description: 'Width of the card',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '218px' },
+            },
+        },
+    },
+};
+export default meta;
+const avatarImage = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=600&ixlib=rb-4.0.3';
+export const Default = {
+    args: {
+        name: 'Nelly',
+        image: avatarImage,
+        onPreview: () => { },
+        showMenu: true,
+        menuItems: [
+            { label: 'Copy Avatar ID', icon: 'Copy', onClick: () => { } },
+            { label: 'Create Agent', icon: 'UserCirclePlus', onClick: () => { } },
+            { label: 'Delete', icon: 'Trash', onClick: () => { }, destructive: true },
+        ],
+    },
+};
+export const AgentView = {
+    args: {
+        view: 'agent',
+        name: 'Nelly Customer Support',
+        image: avatarImage,
+        onPreview: () => { },
+        previewButtonText: 'Join',
+        previewIcon: 'VideoCamera',
+        showStatusBadge: true,
+        statusBadgeText: 'Active',
+        showMenu: true,
+        menuItems: [
+            { label: 'Conversation Link', icon: 'ShareNetwork', onClick: () => { } },
+            { label: 'Copy Agent ID', icon: 'CopySimple', onClick: () => { } },
+            { label: 'Embed', icon: 'Code', onClick: () => { } },
+            { label: 'Agent Details', icon: 'IdentificationCard', onClick: () => { } },
+            { label: 'Duplicate', icon: 'Copy', onClick: () => { } },
+            { label: 'Delete', icon: 'Trash', onClick: () => { }, destructive: true },
+        ],
+    },
+    parameters: {
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=6919-20599',
+        },
+        docs: {
+            description: {
+                story: 'The agent view — wider, square image, a persistent status badge, and a labelled "Join" action. Hover to reveal the action row.',
+            },
+        },
+    },
+};
+export const WithDescription = {
+    args: {
+        ...Default.args,
+        name: 'Nelly Customer Support',
+        showDescription: true,
+        description: 'Support description',
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Avatar card with an optional description below the image.',
+            },
+        },
+    },
+};
+export const NoActions = {
+    args: {
+        name: 'Nelly',
+        image: avatarImage,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A read-only avatar card without preview or menu actions on hover.',
+            },
+        },
+    },
+};
+export const NoImage = {
+    args: {
+        ...Default.args,
+        name: 'No Image',
+        image: undefined,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Fallback placeholder shown when no image is provided or it fails to load.',
+            },
+        },
+    },
+};

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

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

package/dist/stories/EntityCard/EntityCardSkeleton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SkeletonLoader } from '../UI';
+export const EntityCardSkeleton = ({ view = 'avatar', width, showDescription = false, style, }) => {
+    const isAgent = view === 'agent';
+    const cardWidth = width ?? (isAgent ? '280px' : '218px');
+    const imageAspectRatio = isAgent ? '1 / 1' : '203 / 264';
+    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(--colors-light-background-bg-card-highlight)', border: '1px solid var(--colors-light-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', style: style, children: [_jsx(Box, { width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', overflow: 'hidden', sx: { aspectRatio: imageAspectRatio }, children: _jsx(SkeletonLoader, {}) }), showDescription && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: '0 12px', width: '100%', boxSizing: 'border-box', children: [_jsx(SkeletonLoader, { width: '100%', height: '16px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), _jsx(SkeletonLoader, { width: '70%', height: '16px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }))] }));
+};

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { EntityCardSkeleton } from './EntityCardSkeleton';
+declare const meta: Meta<typeof EntityCardSkeleton>;
+export default meta;
+type Story = StoryObj<typeof EntityCardSkeleton>;
+export declare const Avatar: Story;
+export declare const AvatarWithDescription: Story;
+export declare const Agent: Story;
+export declare const Grid: Story;
+export declare const LoadingState: Story;

package/dist/stories/EntityCard/EntityCardSkeleton.stories.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { EntityCardSkeleton } from './EntityCardSkeleton';
+const meta = {
+    title: 'Design System/Components/EntityCard/EntityCardSkeleton',
+    component: EntityCardSkeleton,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        view: {
+            control: 'select',
+            options: ['avatar', 'agent'],
+            description: 'View variant — drives default width and image aspect ratio',
+            table: {
+                type: { summary: "'avatar' | 'agent'" },
+                defaultValue: { summary: 'avatar' },
+            },
+        },
+        width: {
+            control: 'text',
+            description: 'Width of the card (overrides the view default)',
+            table: {
+                type: { summary: 'string | number' },
+                defaultValue: { summary: '218px (avatar) / 280px (agent)' },
+            },
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Show the description placeholder',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        style: {
+            control: 'object',
+            description: 'Custom style for the skeleton',
+            table: {
+                type: { summary: 'React.CSSProperties' },
+                defaultValue: { summary: 'undefined' },
+            },
+        },
+    },
+};
+export default meta;
+export const Avatar = {
+    args: {
+        view: 'avatar',
+    },
+};
+export const AvatarWithDescription = {
+    args: {
+        view: 'avatar',
+        showDescription: true,
+    },
+};
+export const Agent = {
+    args: {
+        view: 'agent',
+    },
+};
+export const Grid = {
+    render: () => (_jsxs(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: [_jsx(EntityCardSkeleton, { view: "avatar" }), _jsx(EntityCardSkeleton, { view: "avatar", showDescription: true }), _jsx(EntityCardSkeleton, { view: "agent" })] })),
+};
+export const LoadingState = {
+    render: () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { children: [_jsx("h3", { children: "Loading state example" }), _jsx("p", { children: "How a row of entity cards appears while data is loading." })] }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: Array(5)
+                    .fill(0)
+                    .map((_, index) => (_jsx(EntityCardSkeleton, { view: "avatar" }, index))) }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, children: Array(4)
+                    .fill(0)
+                    .map((_, index) => (_jsx(EntityCardSkeleton, { view: "agent" }, index))) })] })),
+};

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

@@ -0,0 +1,3 @@
+export * from './EntityCard';
+export * from './EntityCardSkeleton';
+export * from './types';

package/dist/stories/EntityCard/index.js

@@ -0,0 +1,3 @@
+export * from './EntityCard';
+export * from './EntityCardSkeleton';
+export * from './types';

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

@@ -0,0 +1,54 @@
+import { MenuItemProps, BadgeColor } from '../UI';
+import { IconName } from '../../utils';
+/**
+ * Entity card view variants.
+ * - `avatar`: portrait avatar tile (icon-only preview action)
+ * - `agent`: wider, square agent tile (labelled action + status badge)
+ */
+export type EntityCardView = 'avatar' | 'agent';
+/**
+ * Entity card component props
+ */
+export interface EntityCardProps {
+    /** View variant — drives default width and image aspect ratio */
+    view?: EntityCardView;
+    /** Display name shown over the image */
+    name: string;
+    /** Image url */
+    image?: string;
+    /** Optional description shown below the image */
+    description?: string;
+    /** Whether to show the description */
+    showDescription?: boolean;
+    /** Preview handler — renders the action button on hover */
+    onPreview?: () => void;
+    /** Label for the action button; when set it renders text + icon, otherwise icon-only */
+    previewButtonText?: string;
+    /** Icon for the action button (defaults to `Play`) */
+    previewIcon?: IconName;
+    /** Whether to show the status badge (top-left) */
+    showStatusBadge?: boolean;
+    /** Status badge text (e.g. "Active") */
+    statusBadgeText?: string;
+    /** Status badge color (defaults to Green) */
+    statusBadgeColor?: BadgeColor;
+    /** Menu items for the dropdown — renders the menu button on hover */
+    menuItems?: MenuItemProps[];
+    /** Whether to show the menu */
+    showMenu?: boolean;
+    /** Width of the card (overrides the view default) */
+    width?: string | number;
+}
+/**
+ * Entity card skeleton props
+ */
+export interface EntityCardSkeletonProps {
+    /** View variant — drives default width and image aspect ratio */
+    view?: EntityCardView;
+    /** Width of the card (overrides the view default) */
+    width?: string | number;
+    /** Show the description placeholder */
+    showDescription?: boolean;
+    /** Custom style for the skeleton */
+    style?: React.CSSProperties;
+}

package/dist/stories/EntityCard/types.js

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

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;