@beydesign/storybook 0.2.13 → 0.2.15

package/dist/stories/Buttons/MainButton.js

@@ -220,7 +220,7 @@ const StyledButton = styled.button `
       var(--global-shadows-shadow-xs-color);
   }
 `;
-export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', testId, }) => {
+export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, iconWeight = 'regular', displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', testId, }) => {
     const getIconSize = () => {
         const sizes = {
             [ButtonSize.xl]: 24,
@@ -282,7 +282,7 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
     const iconProps = {
         size: getIconSize(),
         color: disabled ? 'var(--color-text-text-disabled)' : 'currentColor',
-        weight: 'regular',
+        weight: iconWeight,
     };
     const sizeStyles = getButtonSize();
     const renderContent = () => {

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

@@ -1,4 +1,5 @@
 import type { CSSProperties } from 'react';
+import type { IconWeight } from '@phosphor-icons/react';
 import { IconName } from '../../utils';
 import { SxProps } from '@mui/material';
 import { Theme } from '@mui/material';
@@ -86,6 +87,8 @@ export interface MainButtonProps {
     hierarchy?: ButtonHierarchy;
     /** Icon to display when in icon mode */
     displayIcon?: IconName;
+    /** Weight of the rendered icons (defaults to `regular`) */
+    iconWeight?: IconWeight;
     /** How to display the icon */
     displayIconMode?: ButtonDisplayMode;
     /** Current state of the button */

package/dist/stories/EntityCard/EntityCard.js

@@ -17,12 +17,13 @@ export const EntityCard = ({ view = 'avatar', name, image, description = '', sho
     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: hovered
             ? '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), sx: { transition: 'background-color 0.15s ease-in-out' }, "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 }, 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', top: 0, left: 0, right: 0, bottom: 0, bgcolor: 'var(--color-background-bg-card-highlight-hover)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
+            : '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), sx: { transition: 'background-color 0.15s ease-in-out' }, "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 }, 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', top: 0, left: 0, right: 0, bottom: 0, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: {
+                            backgroundImage: 'linear-gradient(180deg, rgba(21, 0, 73, 0) 0%, rgba(72, 29, 180, 0.152) 16.76%, rgba(32, 13, 82, 0.36) 100%)',
                             opacity: hovered ? 1 : 0,
                             transition: 'opacity 0.15s ease-in-out',
                             pointerEvents: 'none',
                         } }), _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 }) }))] }));
+                                (previewButtonText ? (_jsx(MainButton, { text: previewButtonText, showLeadingIcon: true, leadingIcon: previewIcon, iconWeight: 'fill', hierarchy: ButtonHierarchy.SecondaryTransparent, size: ButtonSize.sm, onClick: onPreview, testId: `${entityKey}-preview-button` })) : (_jsx(MainButton, { displayIcon: previewIcon, displayIconMode: ButtonDisplayMode.Only, hierarchy: ButtonHierarchy.SecondaryTransparent, 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/UI/Menu.js

@@ -4,7 +4,7 @@ import { Fragment, useState } from 'react';
 import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonType, ButtonSize, } from '../Buttons';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
-export const Menu = ({ icon = 'DotsThree', items, style, testKey, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Secondary, }) => {
+export const Menu = ({ icon = 'DotsThreeOutline', iconWeight = 'bold', items, style, testKey, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Tertiary, }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const handleClick = (event) => {
@@ -24,7 +24,14 @@ export const Menu = ({ icon = 'DotsThree', items, style, testKey, size = ButtonS
             return 'var(--color-text-text-error)';
         return 'var(--color-text-text-title)';
     };
-    return (_jsxs(Fragment, { children: [_jsx(MainButton, { displayIcon: icon, onClick: handleClick, type: ButtonType.Button, displayIconMode: ButtonDisplayMode.Only, hierarchy: hierarchy, size: size, style: style, testId: `${testKey}-menu-button` }), _jsx(MuiMenu, { id: "basic-menu", "data-testid": `${testKey}-menu`, anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
+    return (_jsxs(Fragment, { children: [_jsx(MainButton, { displayIcon: icon, iconWeight: iconWeight, onClick: handleClick, type: ButtonType.Button, displayIconMode: ButtonDisplayMode.Only, hierarchy: hierarchy, size: size, style: {
+                    // The menu trigger sits on top of media (cards, images), so it uses a
+                    // theme-aware translucent overlay (white 30% in light, black 30% in
+                    // dark) with no shadow. Consumer `style` can still override.
+                    background: 'var(--color-background-bg-button-overlay)',
+                    boxShadow: 'none',
+                    ...style,
+                }, testId: `${testKey}-menu-button` }), _jsx(MuiMenu, { id: "basic-menu", "data-testid": `${testKey}-menu`, anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
                     'aria-labelledby': 'basic-button',
                     style: {
                         padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)',

package/dist/stories/UI/Menu.stories.js

@@ -1,5 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Menu } from './Menu';
 import { ButtonSize, ButtonHierarchy } from '../Buttons';
+// The Menu trigger uses a theme-aware translucent overlay background
+// (`bg-button-overlay`), so it's designed to sit on top of media. This backdrop
+// mirrors how it appears on cards (EntityCard / AgentCard) — without it, the
+// overlay reads as a faint box against the plain page.
+const mediaBackdrop = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?fm=jpg&q=60&w=600&ixlib=rb-4.0.3';
 const meta = {
     title: 'Design System/Components/UI/Menu',
     component: Menu,
@@ -7,16 +13,38 @@ const meta = {
         layout: 'centered',
     },
     tags: ['autodocs'],
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                width: 240,
+                height: 160,
+                borderRadius: 8,
+                overflow: 'hidden',
+                backgroundImage: `url(${mediaBackdrop})`,
+                backgroundSize: 'cover',
+                backgroundPosition: 'center',
+                display: 'flex',
+                alignItems: 'flex-start',
+                justifyContent: 'flex-end',
+                padding: 8,
+            }, children: _jsx(Story, {}) })),
+    ],
     argTypes: {
         icon: {
             control: 'select',
-            options: ['DotsThree', 'Pencil', 'Trash'],
-            defaultValue: 'DotsThree',
-            description: 'The icon to display in the menu',
+            options: ['DotsThreeOutline', 'DotsThree', 'Pencil', 'Trash'],
+            description: 'The icon to display in the menu trigger',
             table: {
-                type: {
-                    summary: 'string',
-                },
+                type: { summary: 'IconName' },
+                defaultValue: { summary: 'DotsThreeOutline' },
+            },
+        },
+        iconWeight: {
+            control: 'select',
+            options: ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'],
+            description: 'Weight of the trigger icon',
+            table: {
+                type: { summary: 'IconWeight' },
+                defaultValue: { summary: 'bold' },
             },
         },
         items: {
@@ -50,7 +78,7 @@ const meta = {
             description: 'Hierarchy of the trigger button',
             table: {
                 type: { summary: 'ButtonHierarchy' },
-                defaultValue: { summary: ButtonHierarchy.Secondary },
+                defaultValue: { summary: ButtonHierarchy.Tertiary },
             },
         },
     },
@@ -58,7 +86,6 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        icon: 'DotsThree',
         items: [
             { label: 'Edit', onClick: () => { }, destructive: false, icon: 'Pencil' },
             { label: 'Delete', onClick: () => { }, destructive: true, icon: 'Trash' },

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

@@ -1,5 +1,6 @@
 import { Theme, SxProps, TooltipProps } from '@mui/material';
 import { ReactElement, ReactNode } from 'react';
+import type { IconWeight } from '@phosphor-icons/react';
 import { IconName } from '../../utils';
 import { ButtonSize, ButtonHierarchy } from '../Buttons';
 /**
@@ -200,6 +201,8 @@ export interface MenuItemProps {
 export type MenuProps = {
     /** Icon */
     icon?: IconName;
+    /** Weight of the trigger icon (defaults to `bold`) */
+    iconWeight?: IconWeight;
     /** Items */
     items?: MenuItemProps[];
     /** Style */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.2.13",
+  "version": "0.2.15",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -35,10 +35,12 @@
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
     "@phosphor-icons/react": "^2.1.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "typescript": "~5.9.3"
   },
+  "peerDependencies": {
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.7",
     "@storybook/addon-designs": "^8.2.1",
@@ -66,6 +68,8 @@
     "eslint-plugin-storybook": "^0.11.6",
     "postcss": "^8.5.8",
     "prettier": "^3.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "storybook": "^8.6.17",
     "typescript-eslint": "^7.18.0",
     "vite": "^5.4.21"