@beydesign/storybook 0.5.3 → 0.5.5

package/dist/stories/EntityCard/EntityCard.js

@@ -3,22 +3,11 @@ import { useState } from 'react';
 import { Box } from '@mui/material';
 import { keyframes } from '@emotion/react';
 import { ArrowsClockwise, Warning } from '@phosphor-icons/react';
+import { ASPECT_RATIO_BY_VIEW, WIDTH_BY_VIEW } from './constants';
 import { AvatarSilhouette } from './AvatarSilhouette';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Menu, Badge, BadgeColor, BadgeSize } from '../UI';
 import { MainButton, ButtonHierarchy, ButtonSize, ButtonDisplayMode, } from '../Buttons';
-/** Default card width per view variant. */
-const WIDTH_BY_VIEW = {
-    avatar: '208px',
-    agent: '280px',
-    video: '340px',
-};
-/** Default image aspect ratio per view variant. */
-const ASPECT_RATIO_BY_VIEW = {
-    avatar: '203 / 264',
-    agent: '264 / 268',
-    video: '16 / 9',
-};
 /** Empty-state label per view variant, shown over the silhouette when there is no image. */
 const EMPTY_TEXT_BY_VIEW = {
     avatar: 'Avatar is not available',

package/dist/stories/EntityCard/EntityCardSkeleton.js

@@ -1,18 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { ASPECT_RATIO_BY_VIEW, WIDTH_BY_VIEW } from './constants';
 import { SkeletonLoader } from '../UI';
-/** Default card width per view variant. */
-const WIDTH_BY_VIEW = {
-    avatar: '208px',
-    agent: '280px',
-    video: '340px',
-};
-/** Default image aspect ratio per view variant. */
-const ASPECT_RATIO_BY_VIEW = {
-    avatar: '203 / 264',
-    agent: '1 / 1',
-    video: '16 / 9',
-};
 export const EntityCardSkeleton = ({ view = 'avatar', aspectRatio, width, showDescription = false, style, }) => {
     const cardWidth = width ?? WIDTH_BY_VIEW[view];
     const imageAspectRatio = aspectRatio ?? ASPECT_RATIO_BY_VIEW[view];

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

@@ -0,0 +1,9 @@
+import { EntityCardView } from './types';
+/**
+ * Card metrics shared by EntityCard and EntityCardSkeleton — the skeleton
+ * stands in for the card while its media loads, so both must measure the same.
+ */
+/** Default card width per view variant. */
+export declare const WIDTH_BY_VIEW: Record<EntityCardView, string>;
+/** Default image aspect ratio per view variant. */
+export declare const ASPECT_RATIO_BY_VIEW: Record<EntityCardView, string>;

package/dist/stories/EntityCard/constants.js

@@ -0,0 +1,16 @@
+/**
+ * Card metrics shared by EntityCard and EntityCardSkeleton — the skeleton
+ * stands in for the card while its media loads, so both must measure the same.
+ */
+/** Default card width per view variant. */
+export const WIDTH_BY_VIEW = {
+    avatar: '208px',
+    agent: '280px',
+    video: '340px',
+};
+/** Default image aspect ratio per view variant. */
+export const ASPECT_RATIO_BY_VIEW = {
+    avatar: '203 / 264',
+    agent: '264 / 268',
+    video: '16 / 9',
+};

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

@@ -62,7 +62,7 @@ export interface EntityCardProps {
 export interface EntityCardSkeletonProps {
     /** View variant — drives default width and image aspect ratio */
     view?: EntityCardView;
-    /** Aspect ratio of the placeholder — overrides the per-view default */
+    /** Aspect ratio of the placeholder — overrides the per-view default (`203 / 264` avatar, `264 / 268` agent, `16 / 9` video) */
     aspectRatio?: string;
     /** Width of the card (overrides the view default) */
     width?: string | number;

package/dist/stories/PlanCard/PlanCard.js

@@ -11,7 +11,7 @@ export const PlanCard = ({ title, description, price, priceSuffix = '/month', ba
             ? 'var(--color-border-border-brand)'
             : 'var(--color-border-border-subtle)'}`, boxSizing: 'border-box', style: style, "data-testid": testId ?? `${planKey}-plan-card`, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: title }), badgeText && (_jsx(Badge, { text: badgeText, color: badgeColor, size: BadgeSize.xs, fill: true }))] }), description && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description })), price && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '2px', children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: priceSuffix }))] }))] }), buttonText && (_jsx(MainButton, { text: buttonText, hierarchy: buttonHierarchy, size: ButtonSize.md, disabled: buttonDisabled, loading: buttonLoading, onClick: onButtonClick, style: { width: '100%' }, testId: `${planKey}-plan-button` })), features.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-paragraph)', children: featuresTitle }), features.map((feature, index) => {
                         const isHeading = feature?.startsWith('-');
-                        return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [!isHeading && (_jsx(Box, { display: 'flex', alignItems: 'center', flexShrink: 0, height: '1lh', fontFamily: 'var(--global-text-m-regular-font-family), sans-serif', fontSize: 'var(--global-text-m-regular-font-size)', lineHeight: 'calc(var(--global-text-m-regular-line-height) * 1px)', children: _jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone }) })), _jsx(Typography, { size: TypographySize.TextM, weight: isHeading
+                        return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [!isHeading && (_jsx(Box, { display: 'flex', alignItems: 'center', flexShrink: 0, height: '1lh', fontFamily: 'var(--global-text-m-regular-font-family), sans-serif', fontSize: 'var(--global-text-m-regular-font-size)', lineHeight: 'calc(var(--global-text-m-regular-line-height) * 1px)', children: _jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.md, type: CheckIconType.Duotone }) })), _jsx(Typography, { size: TypographySize.TextM, weight: isHeading
                                         ? TypographyWeight.Medium
                                         : TypographyWeight.Regular, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: isHeading ? feature?.slice(1)?.trim() : feature })] }, `${index}-${feature}`));
                     })] }))] }));

package/dist/stories/UI/CheckIcon.js

@@ -1,7 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIconColor, CheckIconSize, CheckIconType, } from './types';
-import { getIconComponent } from '../../utils';
 const WHITE = 'var(--color-foreground-fg-on-primary-accent-color)';
 const COLOR_MAP = {
     [CheckIconColor.Violet]: {
@@ -12,25 +10,48 @@ const COLOR_MAP = {
         accent: 'var(--color-foreground-fg-success)',
         subtle: 'var(--color-background-bg-badge-accent-success)',
     },
+    /**
+     * Pinned to the primitives the offboarding screens use, not the
+     * `fg-accent-lemon` / `bg-badge-accent-brand-lemon` semantics the other
+     * colors follow — those resolve to different values per theme and would not
+     * match the design. The tint is 12% alpha rather than an opaque wash, so this
+     * variant is theme-invariant and is meant for dark surfaces.
+     */
+    [CheckIconColor.Lemon]: {
+        accent: 'var(--primitives-white-primary-brand-lemon-500)',
+        subtle: 'var(--primitives-white-primary-transparent-lemon-12)',
+    },
+};
+/** Nominal frame of the icon in px — the space the component occupies. */
+const FRAME_MAP = {
+    [CheckIconSize.xs]: 16,
+    [CheckIconSize.sm]: 20,
+    [CheckIconSize.md]: 24,
+    [CheckIconSize.lg]: 28,
 };
-const SIZE_MAP = {
-    [CheckIconSize.xs]: { container: 16, check: 11, border: 1.5 },
-    [CheckIconSize.sm]: { container: 20, check: 13, border: 1.5 },
-    [CheckIconSize.md]: { container: 24, check: 16, border: 2 },
-    [CheckIconSize.lg]: { container: 28, check: 18, border: 2 },
+/**
+ * Figma draws the glyph on a grid of 32 units per frame, with the ink inset
+ * inside the frame: the circle is 75% of the frame (r = 12/32) and the check
+ * runs (11,17) → (14,20) → (21,13). Keeping the geometry in grid units lets a
+ * single path serve every size; only the stroke widths are converted back to px.
+ */
+const GRID = 32;
+const CENTER = GRID / 2;
+const RADIUS = 12;
+const CHECK_PATH = 'M11 17L14 20L21 13';
+/** Ring stroke in px — constant across sizes in Figma, not scaled with the frame. */
+const RING_STROKE_PX = 1.5;
+/** Check stroke in px — Duotone is drawn heavier than Filled/Line. */
+const CHECK_STROKE_PX = {
+    [CheckIconType.Filled]: 1.5,
+    [CheckIconType.Line]: 1.5,
+    [CheckIconType.Duotone]: 2,
 };
 export const CheckIcon = ({ color = CheckIconColor.Violet, size = CheckIconSize.md, type = CheckIconType.Duotone, style, testId, }) => {
     const { accent, subtle } = COLOR_MAP[color];
-    const { container, check, border } = SIZE_MAP[size];
-    const background = type === CheckIconType.Filled
-        ? accent
-        : type === CheckIconType.Duotone
-            ? subtle
-            : 'transparent';
+    const frame = FRAME_MAP[size];
+    // Grid units per px, so a px stroke keeps its width at any frame size.
+    const unitsPerPx = GRID / frame;
     const checkColor = type === CheckIconType.Filled ? WHITE : accent;
-    return (_jsx(Box, { width: `${container}px`, height: `${container}px`, flexShrink: 0, boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)', bgcolor: background, border: type === CheckIconType.Line ? `${border}px solid ${accent}` : undefined, style: style, "data-testid": testId, children: getIconComponent('Check', {
-            size: `${check}px`,
-            weight: 'bold',
-            color: checkColor,
-        }) }));
+    return (_jsxs("svg", { width: frame, height: frame, viewBox: `0 0 ${GRID} ${GRID}`, fill: 'none', xmlns: 'http://www.w3.org/2000/svg', "aria-hidden": true, focusable: 'false', style: { display: 'block', flexShrink: 0, ...style }, "data-testid": testId, children: [type === CheckIconType.Line ? (_jsx("circle", { cx: CENTER, cy: CENTER, r: RADIUS, stroke: accent, strokeWidth: RING_STROKE_PX * unitsPerPx })) : (_jsx("circle", { cx: CENTER, cy: CENTER, r: RADIUS, fill: type === CheckIconType.Filled ? accent : subtle })), _jsx("path", { d: CHECK_PATH, stroke: checkColor, strokeWidth: CHECK_STROKE_PX[type] * unitsPerPx, strokeLinecap: 'round', strokeLinejoin: 'round' })] }));
 };

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

@@ -9,7 +9,7 @@ const meta = {
         layout: 'centered',
         design: {
             type: 'figspec',
-            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4781-5580',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4781-5383',
         },
     },
     tags: ['autodocs'],

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

@@ -225,10 +225,13 @@ export type MenuProps = {
  */
 export declare enum CheckIconColor {
     Violet = "Violet",
-    Green = "Green"
+    Green = "Green",
+    Lemon = "Lemon"
 }
 /**
- * Check icon size variants (xs = 16px, sm = 20px, md = 24px, lg = 28px)
+ * Check icon size variants. The value is the frame the icon occupies
+ * (xs = 16px, sm = 20px, md = 24px, lg = 28px); the circle itself is drawn at
+ * 75% of that (12 / 15 / 18 / 21px), matching Figma.
  */
 export declare enum CheckIconSize {
     xs = "xs",
@@ -238,9 +241,9 @@ export declare enum CheckIconSize {
 }
 /**
  * Check icon type variants.
- * - `Filled`: solid accent background + white check
- * - `Line`: transparent background, accent ring + accent check
- * - `Duotone`: light badge background + accent-colored check
+ * - `Filled`: solid accent circle + white check (1.5px)
+ * - `Line`: transparent circle, 1.5px accent ring + accent check (1.5px)
+ * - `Duotone`: subtle badge circle + accent check, drawn heavier (2px)
  */
 export declare enum CheckIconType {
     Filled = "Filled",
@@ -253,7 +256,7 @@ export declare enum CheckIconType {
 export interface CheckIconProps {
     /** Color variant */
     color?: CheckIconColor;
-    /** Size variant (xs = 16px, md = 24px) */
+    /** Size variant — the frame the icon occupies (xs = 16px … lg = 28px) */
     size?: CheckIconSize;
     /** Fill style */
     type?: CheckIconType;

package/dist/stories/UI/types.js

@@ -77,9 +77,12 @@ export var CheckIconColor;
 (function (CheckIconColor) {
     CheckIconColor["Violet"] = "Violet";
     CheckIconColor["Green"] = "Green";
+    CheckIconColor["Lemon"] = "Lemon";
 })(CheckIconColor || (CheckIconColor = {}));
 /**
- * Check icon size variants (xs = 16px, sm = 20px, md = 24px, lg = 28px)
+ * Check icon size variants. The value is the frame the icon occupies
+ * (xs = 16px, sm = 20px, md = 24px, lg = 28px); the circle itself is drawn at
+ * 75% of that (12 / 15 / 18 / 21px), matching Figma.
  */
 export var CheckIconSize;
 (function (CheckIconSize) {
@@ -90,9 +93,9 @@ export var CheckIconSize;
 })(CheckIconSize || (CheckIconSize = {}));
 /**
  * Check icon type variants.
- * - `Filled`: solid accent background + white check
- * - `Line`: transparent background, accent ring + accent check
- * - `Duotone`: light badge background + accent-colored check
+ * - `Filled`: solid accent circle + white check (1.5px)
+ * - `Line`: transparent circle, 1.5px accent ring + accent check (1.5px)
+ * - `Duotone`: subtle badge circle + accent check, drawn heavier (2px)
  */
 export var CheckIconType;
 (function (CheckIconType) {

package/package.json

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