@beydesign/storybook 0.2.27 → 0.2.28

package/dist/stories/Form/Dropdown.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { DropdownProps } from './types';
-export declare const Dropdown: React.FC<DropdownProps>;
+export declare const Dropdown: <T extends string = string>({ disabled, placeholder, label, showLeadingIcon, leadingIcon, showClear, options, required, showCheckboxes, showTicks, onEndReached, isLoadingMore, ...props }: DropdownProps<T>) => React.JSX.Element;

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

@@ -248,9 +248,9 @@ export declare enum DropdownType {
  * when present, render a leading avatar and a trailing badge pill (matching the
  * "Avatar leading" variant in Figma).
  */
-export type DropdownOption = {
+export type DropdownOption<T extends string = string> = {
     /** Stable identifier used for selection and returned by onChange */
-    value: string;
+    value: T;
     /** Human-readable text shown for the option */
     label: string;
     /** Optional leading avatar image URL (rendered as a 24px rounded avatar) */
@@ -258,24 +258,30 @@ export type DropdownOption = {
     /** Optional trailing badge pill text (e.g. "Screening Interview") */
     badge?: string;
 };
-type SingleSelectDropdownProps = {
+type SingleSelectDropdownProps<T extends string = string> = {
     /** The value of the selected option */
-    value: string;
+    value: T;
     /** The onChange handler for the selected option */
-    onChange: (value: string) => void;
+    onChange: (value: T) => void;
     /** The type of the dropdown */
     type: DropdownType.SingleSelect;
 };
-type MultiSelectDropdownProps = {
+type MultiSelectDropdownProps<T extends string = string> = {
     /** The value of the selected options */
-    value: string[];
+    value: T[];
     /** The onChange handler for the selected options */
-    onChange: (value: string[]) => void;
+    onChange: (value: T[]) => void;
     /** The type of the dropdown */
     type: DropdownType.MultiSelect;
 };
-type DropdownBaseProps = SingleSelectDropdownProps | MultiSelectDropdownProps;
-export type DropdownProps = DropdownBaseProps & {
+type DropdownBaseProps<T extends string = string> = SingleSelectDropdownProps<T> | MultiSelectDropdownProps<T>;
+/**
+ * Props for the {@link Dropdown}. Generic over the option value type `T`
+ * (constrained to `string`). Leaving `T` unspecified defaults it to `string`,
+ * so existing consumers are unaffected; passing a string-literal union (e.g.
+ * `Dropdown<'a' | 'b'>`) gives type-safe `value`/`onChange` with no casts.
+ */
+export type DropdownProps<T extends string = string> = DropdownBaseProps<T> & {
     /** The label of the dropdown */
     label?: string | null;
     /**
@@ -284,7 +290,7 @@ export type DropdownProps = DropdownBaseProps & {
      * {@link DropdownOption} objects for id-based selection and avatar/badge
      * support.
      */
-    options: string[] | DropdownOption[];
+    options: T[] | DropdownOption<T>[];
     /** The placeholder of the dropdown */
     placeholder?: string;
     /** Whether the dropdown is disabled */

package/dist/stories/UI/Avatar.js

@@ -1,10 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { AvatarImage, AvatarSize, AvatarStyle } from './types';
+import { AvatarSize, AvatarStyle } from './types';
 import { Avatar as MuiAvatar, } from '@mui/material';
 import { User } from '@phosphor-icons/react';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getInitials } from '../../utils';
-export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false, image = AvatarImage, size = AvatarSize.xxl, style: customStyle, text = 'Scarlett Johansson', }) => {
+export const Avatar = ({ avatarStyle, border = false, image, size = AvatarSize.xxl, style: customStyle, text, }) => {
+    // When the caller doesn't pin a style, derive it from the data so
+    // `<Avatar image={url} text={name} />` "just works": an image wins, then any
+    // non-empty text renders initials, otherwise the placeholder icon.
+    const resolvedStyle = avatarStyle ??
+        (image?.trim()
+            ? AvatarStyle.Picture
+            : text?.trim()
+                ? AvatarStyle.Letters
+                : AvatarStyle.Placeholder);
     const getDimensions = (avatarSize) => {
         switch (avatarSize) {
             case AvatarSize.xs:
@@ -58,16 +67,16 @@ export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false,
                 ? '1px solid var(--color-border-border-component)'
                 : 'none',
             backgroundColor: 'var(--color-background-bg-card-highlight)',
-            color: getColor(avatarStyle),
+            color: getColor(resolvedStyle),
             fontSize: getTextSize(),
             borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)',
             ...customStyle,
         },
     };
-    if (avatarStyle === AvatarStyle.Letters) {
-        return (_jsx(MuiAvatar, { ...props, children: _jsx(Typography, { size: getTextSize(), weight: TypographyWeight.Medium, children: getInitials(text) }) }));
+    if (resolvedStyle === AvatarStyle.Letters) {
+        return (_jsx(MuiAvatar, { ...props, children: _jsx(Typography, { size: getTextSize(), weight: TypographyWeight.Medium, children: getInitials(text ?? '') }) }));
     }
-    else if (avatarStyle === AvatarStyle.Picture) {
+    else if (resolvedStyle === AvatarStyle.Picture) {
         return _jsx(MuiAvatar, { ...props, src: image });
     }
     else {

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

@@ -118,8 +118,12 @@ export declare const AvatarImage = "https://encrypted-tbn0.gstatic.com/images?q=
  * Avatar component props
  */
 export type AvatarProps = {
-    /** Style variant of the avatar */
-    avatarStyle: AvatarStyle;
+    /**
+     * Style variant of the avatar. When omitted, it is derived from the data:
+     * `image` present → `Picture`, else non-empty `text` → `Letters`, else
+     * `Placeholder`. Pass explicitly to override the derivation.
+     */
+    avatarStyle?: AvatarStyle;
     /** Text content of the avatar if avatarStyle is Letters */
     text?: string;
     /** Image source of the avatar if avatarStyle is Picture  */

package/package.json

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