@beydesign/storybook 0.5.1 → 0.5.2

package/dist/stories/Buttons/MainButton.js

@@ -332,5 +332,5 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
                     (trailingIconSlot ??
                         (trailingIcon && getIconComponent(trailingIcon, iconProps)))] }));
     };
-    return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, id: id, className: className, "data-testid": testId, children: renderContent() }));
+    return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, id: id, className: className, "aria-label": displayIconMode === ButtonDisplayMode.Only ? text : undefined, "data-testid": testId, children: renderContent() }));
 };

package/dist/stories/EntityCard/EntityCard.js

@@ -45,7 +45,7 @@ const spin = keyframes `
 `;
 /** A continuously rotating refresh icon, matching the AgentCard processing spinner. */
 const Spinner = () => (_jsx(Box, { display: 'flex', sx: { animation: `${spin} 1.5s linear infinite` }, children: _jsx(ArrowsClockwise, { size: 24, color: 'var(--color-text-text-white)' }) }));
-export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, date, aspectRatio, processing = false, error = false, onPreview, previewButtonText, previewIcon = 'Play', previewButtonClassName, stockAgent = false, menuItems = [], showMenu = false, width, testId, }) => {
+export const EntityCard = ({ view = 'avatar', name, image, description = '', showDescription = false, date, aspectRatio, processing = false, error = false, onPreview, onCardClick, selected = false, previewButtonText, previewIcon = 'Play', previewButtonClassName, stockAgent = false, menuItems = [], showMenu = false, width, testId, }) => {
     const [hovered, setHovered] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
     const [imageError, setImageError] = useState(false);
@@ -58,6 +58,9 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     const isProcessing = processing && !error;
     const canPreview = !!onPreview && !isProcessing && !error;
     const showActions = canPreview || hasMenu;
+    const cardAction = onCardClick ?? (canPreview ? onPreview : undefined);
+    const cardActionLabel = onCardClick ? name : (previewButtonText ?? name);
+    const isSelected = !!cardAction && selected;
     const active = hovered || menuOpen;
     const showBadge = isAgent && stockAgent && !error;
     const showImage = !!image && !imageError && !error;
@@ -69,16 +72,20 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     };
     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: active
             ? 'var(--color-background-bg-card-highlight-hover)'
-            : 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), role: canPreview ? 'button' : undefined, tabIndex: canPreview ? 0 : undefined, "aria-label": canPreview ? (previewButtonText ?? name) : undefined, onClick: canPreview ? onPreview : undefined, onKeyDown: canPreview
+            : 'var(--color-background-bg-card-highlight)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', overflow: 'hidden', onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), role: cardAction ? 'button' : undefined, tabIndex: cardAction ? 0 : undefined, "aria-label": cardAction ? cardActionLabel : undefined, "aria-pressed": cardAction ? isSelected : undefined, onClick: cardAction, onKeyDown: cardAction
             ? (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
-                    onPreview?.();
+                    cardAction();
                 }
             }
             : undefined, sx: {
             transition: 'background-color 0.15s ease-in-out',
-            cursor: canPreview ? 'pointer' : 'default',
+            cursor: cardAction ? 'pointer' : 'default',
+            ...(isSelected && {
+                outline: '2px solid var(--color-text-text-accent)',
+                outlineOffset: '2px',
+            }),
             [`&:hover .${ACTIONS_CLASS}, &:focus-within .${ACTIONS_CLASS}`]: {
                 opacity: 1,
                 pointerEvents: 'auto',

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

@@ -6,6 +6,8 @@ type Story = StoryObj<typeof EntityCard>;
 export declare const Default: Story;
 export declare const AgentView: Story;
 export declare const WithDescription: Story;
+export declare const Selectable: Story;
+export declare const SelectableSelected: Story;
 export declare const NoActions: Story;
 export declare const NoImage: Story;
 export declare const VideoView: Story;

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

@@ -72,6 +72,18 @@ const meta = {
             description: 'Preview handler — renders the action button on hover',
             table: { type: { summary: 'function' } },
         },
+        onCardClick: {
+            description: 'Card click handler — makes the whole card clickable for its primary action, leaving `onPreview` to its action button alone',
+            table: { type: { summary: 'function' } },
+        },
+        selected: {
+            control: 'boolean',
+            description: 'Marks a clickable card as the picked option — accent outline + `aria-pressed`',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
         previewButtonText: {
             control: 'text',
             description: 'Label for the action button; when set it renders text + icon, otherwise icon-only',
@@ -168,6 +180,34 @@ export const WithDescription = {
         },
     },
 };
+export const Selectable = {
+    args: {
+        name: 'Nelly',
+        image: avatarImage,
+        onCardClick: () => { },
+        onPreview: () => { },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'A selectable card — clicking anywhere on it runs `onCardClick` (e.g. picking the avatar), while the hover action button keeps `onPreview` to itself.',
+            },
+        },
+    },
+};
+export const SelectableSelected = {
+    args: {
+        ...Selectable.args,
+        selected: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The picked option — accent outline and `aria-pressed="true"`.',
+            },
+        },
+    },
+};
 export const NoActions = {
     args: {
         name: 'Nelly',

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

@@ -31,6 +31,14 @@ export interface EntityCardProps {
     error?: boolean;
     /** Preview handler — renders the action button on hover */
     onPreview?: () => void;
+    /**
+     * Card click handler — makes the whole card clickable for its primary action
+     * (e.g. selecting the entity). When set it takes over the card's click and
+     * keyboard activation, leaving `onPreview` to its action button alone.
+     */
+    onCardClick?: () => void;
+    /** Marks a clickable card as the picked option — accent outline + `aria-pressed` */
+    selected?: boolean;
     /** Label for the action button; when set it renders text + icon, otherwise icon-only */
     previewButtonText?: string;
     /** Icon for the action button (defaults to `Play`) */

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

@@ -4,6 +4,7 @@ import { SelectAvatarCardProps } from './types';
  * SelectAvatarCard — a media card for the currently selected avatar. Mirrors the
  * Figma "Selected Avatar" component with its Filled (Default + Hover), Empty and
  * Error states. In the Filled state the Change action is always visible and the
- * Preview action is revealed on hover.
+ * Preview action sits next to it as an icon-only button, expanding to its label
+ * over a purple scrim while the card is hovered.
  */
 export declare const SelectAvatarCard: React.FC<SelectAvatarCardProps>;

package/dist/stories/UI/SelectAvatarCard.js

@@ -1,35 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Box } from '@mui/material';
 import { SelectAvatarCardState } from './types';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
-import { MainButton, ButtonHierarchy, ButtonSize, ButtonShape, } from '../Buttons';
+import { MainButton, ButtonHierarchy, ButtonSize, ButtonShape, ButtonDisplayMode, } from '../Buttons';
 import { getIconComponent } from '../../utils';
 // Scrim behind the avatar name, matching the Figma "name section" gradient
 // (transparent at the top, fading to ~64% #2d2637 at the bottom).
 const NAME_GRADIENT = 'linear-gradient(180deg, rgba(45, 38, 55, 0) 0%, rgba(45, 38, 55, 0.047) 11%, rgba(45, 38, 55, 0.094) 20%, rgba(45, 38, 55, 0.16) 34%, rgba(45, 38, 55, 0.64) 100%)';
+/**
+ * Purple scrim laid over the preview while the card is hovered — the second
+ * fill on the Figma Hover variant's image. Ramps to 16% #4019b6 over the top
+ * fifth, then deepens to 35% of a darker purple at the bottom.
+ */
+const HOVER_OVERLAY = 'linear-gradient(180deg, rgba(64, 25, 182, 0) 0%, rgba(64, 25, 182, 0.16) 18%, rgba(30, 10, 80, 0.35) 100%)';
 /**
  * SelectAvatarCard — a media card for the currently selected avatar. Mirrors the
  * Figma "Selected Avatar" component with its Filled (Default + Hover), Empty and
  * Error states. In the Filled state the Change action is always visible and the
- * Preview action is revealed on hover.
+ * Preview action sits next to it as an icon-only button, expanding to its label
+ * over a purple scrim while the card is hovered.
  */
 export const SelectAvatarCard = ({ state = SelectAvatarCardState.Filled, showHeader = true, headerTitle = 'Selected Avatar', avatarImage, avatarName, showChangeButton = true, changeButtonText = 'Change', onChange, showPreviewButton = true, previewButtonText = 'Preview', onPreview, selectButtonText = 'Select Avatar', onSelect, width = '552px', height = '344px', style, testId, }) => {
+    const [hovered, setHovered] = useState(false);
     const isFilled = state === SelectAvatarCardState.Filled;
     const isEmpty = state === SelectAvatarCardState.Empty;
     const isError = state === SelectAvatarCardState.Error;
+    // Only a Filled card with something to act on has a Hover variant; without
+    // actions it stays in its Default look and does not need tracking.
+    const tracksHover = isFilled && (showChangeButton || showPreviewButton);
+    const showHoverState = tracksHover && hovered;
+    const setHoveredWhenTracked = tracksHover ? setHovered : undefined;
     const mediaBackground = isEmpty
         ? 'var(--color-background-bg-element)'
         : isError
             ? 'var(--color-background-bg-button-disabled)'
             : 'transparent';
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: width, height: height, boxSizing: "border-box", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bgcolor: "var(--color-background-bg-page-contrast)", sx: {
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: width, height: height, boxSizing: "border-box", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", bgcolor: "var(--color-background-bg-page-contrast)", onMouseEnter: () => setHoveredWhenTracked?.(true), onMouseLeave: () => setHoveredWhenTracked?.(false), onFocus: () => setHoveredWhenTracked?.(true), onBlur: () => setHoveredWhenTracked?.(false), sx: {
             border: '1px solid var(--color-border-border-subtle)',
             boxShadow: '0px 2px 4px 0px var(--global-shadows-shadow-xs-color)',
-            // Reveal the Preview pill when the card is hovered.
-            '&:hover .select-avatar-card__preview': {
-                opacity: 1,
-                visibility: 'visible',
-            },
             ...style,
         }, "data-testid": testId ?? 'select-avatar-card', children: [showHeader && (_jsx(Box, { display: "flex", alignItems: "center", width: "100%", children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-title)", textStyle: { flex: '1 0 0', minWidth: 0, wordBreak: 'break-word' }, children: headerTitle }) })), _jsxs(Box, { position: "relative", flex: "1 0 0", minHeight: 0, width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)", bgcolor: mediaBackground, children: [isFilled && (_jsxs(_Fragment, { children: [avatarImage && (_jsx(Box, { component: "img", src: avatarImage, alt: avatarName ?? '', position: "absolute", sx: {
                                     inset: 0,
@@ -37,11 +46,25 @@ export const SelectAvatarCard = ({ state = SelectAvatarCardState.Filled, showHea
                                     height: '100%',
                                     objectFit: 'cover',
                                     pointerEvents: 'none',
-                                } })), _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", alignItems: "flex-start", justifyContent: "flex-end", gap: "10px", children: [showPreviewButton && (_jsx(Box, { className: "select-avatar-card__preview", sx: {
-                                            opacity: 0,
-                                            visibility: 'hidden',
-                                            transition: 'opacity 0.15s ease-in-out',
-                                        }, children: _jsx(MainButton, { text: previewButtonText, size: ButtonSize.xxs, hierarchy: ButtonHierarchy.SecondaryTransparent, showLeadingIcon: true, leadingIcon: "Play", onClick: onPreview, testId: testId ? `${testId}-preview` : undefined }) })), showChangeButton && (_jsx(MainButton, { text: changeButtonText, size: ButtonSize.xxs, hierarchy: ButtonHierarchy.WhiteText, showLeadingIcon: true, leadingIcon: "ArrowsLeftRight", onClick: onChange, testId: testId ? `${testId}-change` : undefined }))] }), avatarName && (_jsx(Box, { position: "absolute", left: 0, right: 0, bottom: 0, display: "flex", alignItems: "center", padding: "24px 12px 12px", sx: { background: NAME_GRADIENT }, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-white)", textStyle: {
+                                } })), avatarImage && (_jsx(Box, { "aria-hidden": true, position: "absolute", sx: {
+                                    inset: 0,
+                                    background: HOVER_OVERLAY,
+                                    opacity: showHoverState ? 1 : 0,
+                                    transition: 'opacity 0.15s ease-in-out',
+                                    pointerEvents: 'none',
+                                } })), _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", alignItems: "flex-start", justifyContent: "flex-end", gap: "10px", children: [showPreviewButton && (_jsx(MainButton, { ...(showHoverState
+                                            ? { showLeadingIcon: true, leadingIcon: 'Play' }
+                                            : {
+                                                displayIcon: 'Play',
+                                                displayIconMode: ButtonDisplayMode.Only,
+                                            }), text: previewButtonText, size: ButtonSize.xxs, shape: ButtonShape.Square, hierarchy: ButtonHierarchy.SecondaryTransparent, 
+                                        // Figma draws the expanded pill in the button's own hover
+                                        // fill, so the card's hover carries it too.
+                                        style: showHoverState
+                                            ? {
+                                                background: 'var(--color-background-bg-button-transparent-hover)',
+                                            }
+                                            : undefined, onClick: onPreview, testId: testId ? `${testId}-preview` : undefined })), showChangeButton && (_jsx(MainButton, { text: changeButtonText, size: ButtonSize.xxs, hierarchy: ButtonHierarchy.WhiteText, showLeadingIcon: true, leadingIcon: "ArrowsLeftRight", onClick: onChange, testId: testId ? `${testId}-change` : undefined }))] }), avatarName && (_jsx(Box, { position: "absolute", left: 0, right: 0, bottom: 0, display: "flex", alignItems: "center", padding: "24px 12px 12px", sx: { background: NAME_GRADIENT }, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-white)", textStyle: {
                                         flex: '1 0 0',
                                         minWidth: 0,
                                         wordBreak: 'break-word',

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

@@ -4,8 +4,9 @@ declare const meta: Meta<typeof SelectAvatarCard>;
 export default meta;
 type Story = StoryObj<typeof SelectAvatarCard>;
 /**
- * An avatar is selected. The Change action is always visible; hover the card to
- * reveal the Preview action.
+ * An avatar is selected. Change sits next to a collapsed Preview button; hover
+ * the card to expand Preview to its label and lay the purple scrim over the
+ * preview image.
  */
 export declare const Default: Story;
 /** No avatar picked yet — a centered call to action to select one. */
@@ -16,6 +17,6 @@ export declare const Error: Story;
 export declare const WithoutHeader: Story;
 /**
  * All four states side by side, matching the Figma frame. Hover the first card
- * to reveal its Preview action.
+ * for its Hover variant.
  */
 export declare const AllStates: Story;

package/dist/stories/UI/SelectAvatarCard.stories.js

@@ -28,7 +28,7 @@ const meta = {
         changeButtonText: { control: 'text' },
         showPreviewButton: {
             control: 'boolean',
-            description: 'Reveal the Preview action on hover (Filled)',
+            description: 'Show the Preview action, expanded on hover (Filled)',
         },
         previewButtonText: { control: 'text' },
         selectButtonText: { control: 'text' },
@@ -41,8 +41,9 @@ const meta = {
 };
 export default meta;
 /**
- * An avatar is selected. The Change action is always visible; hover the card to
- * reveal the Preview action.
+ * An avatar is selected. Change sits next to a collapsed Preview button; hover
+ * the card to expand Preview to its label and lay the purple scrim over the
+ * preview image.
  */
 export const Default = {
     args: {
@@ -72,7 +73,7 @@ export const WithoutHeader = {
 };
 /**
  * All four states side by side, matching the Figma frame. Hover the first card
- * to reveal its Preview action.
+ * for its Hover variant.
  */
 export const AllStates = {
     parameters: { layout: 'padded' },

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

@@ -550,7 +550,10 @@ export interface SelectAvatarCardProps {
     changeButtonText?: string;
     /** Called when the Change button is clicked. */
     onChange?: () => void;
-    /** Reveal the Preview action on hover in the `Filled` state. Defaults to `true`. */
+    /**
+     * Show the Preview action in the `Filled` state — icon-only at rest, expanding
+     * to its label while the card is hovered. Defaults to `true`.
+     */
     showPreviewButton?: boolean;
     /** Preview button label. Defaults to "Preview". */
     previewButtonText?: string;

package/package.json

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