@bspk/ui 1.1.32 → 1.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.32",
+    "version": "1.1.34",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -9,15 +9,13 @@
         "README.md",
         "LICENSE",
         "meta.ts",
-        "meta-types.ts"
+        "meta-types.ts",
+        "build.ts",
+        "tsconfig.json"
     ],
-    "exports": {
-        "./*": "./dist/*.js",
-        ".": "./dist/index.js"
-    },
     "scripts": {
-        "sass": "sass --style=compressed --no-source-map src:dist",
-        "build": "tsx build.ts",
+        "sass": "npx sass --no-source-map --silence-deprecation=mixed-decls src:dist",
+        "build": "npx tsx build.ts",
         "lint:css": "npx stylelint '**/*.scss'",
         "lint": "eslint && tsc --noEmit && stylelint '**/*.scss'",
         "lint:fix": "eslint --fix",
@@ -25,9 +23,173 @@
         "test": "jest",
         "prepare": "husky",
         "pre:commit": "tsx .scripts/pre-commit.ts",
-        "tsc": "tsc",
+        "tsc": "npx tsc && npx tsc-alias",
         "meta": "tsx meta.ts",
-        "pretty": "npx prettier --write src/"
+        "pretty": "npx prettier --write src/",
+        "newc": "tsx .scripts/tasks/new-component.ts",
+        "pr-check": "npx tsx .scripts/tasks/lint-components.ts && npm run lint && npm run lint:css && npx tsx .scripts/check-css-vars.ts &&  npm run build"
+    },
+    "static-exports": {
+        "./*": "./dist/*.js",
+        ".": "./dist/index.js"
+    },
+    "exports": {
+        "./*": "./dist/*.js",
+        ".": "./dist/index.js",
+        "./Avatar/*": "./dist/components/Avatar/*.js",
+        "./Avatar": "./dist/components/Avatar/index.js",
+        "./AvatarGroup/*": "./dist/components/AvatarGroup/*.js",
+        "./AvatarGroup": "./dist/components/AvatarGroup/index.js",
+        "./Badge/*": "./dist/components/Badge/*.js",
+        "./Badge": "./dist/components/Badge/index.js",
+        "./BannerAlert/*": "./dist/components/BannerAlert/*.js",
+        "./BannerAlert": "./dist/components/BannerAlert/index.js",
+        "./Breadcrumb/*": "./dist/components/Breadcrumb/*.js",
+        "./Breadcrumb": "./dist/components/Breadcrumb/index.js",
+        "./Button/*": "./dist/components/Button/*.js",
+        "./Button": "./dist/components/Button/index.js",
+        "./Card/*": "./dist/components/Card/*.js",
+        "./Card": "./dist/components/Card/index.js",
+        "./Checkbox/*": "./dist/components/Checkbox/*.js",
+        "./Checkbox": "./dist/components/Checkbox/index.js",
+        "./CheckboxGroup/*": "./dist/components/CheckboxGroup/*.js",
+        "./CheckboxGroup": "./dist/components/CheckboxGroup/index.js",
+        "./CheckboxOption/*": "./dist/components/CheckboxOption/*.js",
+        "./CheckboxOption": "./dist/components/CheckboxOption/index.js",
+        "./Chip/*": "./dist/components/Chip/*.js",
+        "./Chip": "./dist/components/Chip/index.js",
+        "./ChipAssist/*": "./dist/components/ChipAssist/*.js",
+        "./ChipAssist": "./dist/components/ChipAssist/index.js",
+        "./ChipFilter/*": "./dist/components/ChipFilter/*.js",
+        "./ChipFilter": "./dist/components/ChipFilter/index.js",
+        "./ChipGroup/*": "./dist/components/ChipGroup/*.js",
+        "./ChipGroup": "./dist/components/ChipGroup/index.js",
+        "./ChipInput/*": "./dist/components/ChipInput/*.js",
+        "./ChipInput": "./dist/components/ChipInput/index.js",
+        "./ChipSuggestion/*": "./dist/components/ChipSuggestion/*.js",
+        "./ChipSuggestion": "./dist/components/ChipSuggestion/index.js",
+        "./ChipUtility/*": "./dist/components/ChipUtility/*.js",
+        "./ChipUtility": "./dist/components/ChipUtility/index.js",
+        "./Combobox/*": "./dist/components/Combobox/*.js",
+        "./Combobox": "./dist/components/Combobox/index.js",
+        "./Dialog/*": "./dist/components/Dialog/*.js",
+        "./Dialog": "./dist/components/Dialog/index.js",
+        "./Divider/*": "./dist/components/Divider/*.js",
+        "./Divider": "./dist/components/Divider/index.js",
+        "./EmptyState/*": "./dist/components/EmptyState/*.js",
+        "./EmptyState": "./dist/components/EmptyState/index.js",
+        "./ExamplePlaceholder/*": "./dist/components/ExamplePlaceholder/*.js",
+        "./ExamplePlaceholder": "./dist/components/ExamplePlaceholder/index.js",
+        "./Fab/*": "./dist/components/Fab/*.js",
+        "./Fab": "./dist/components/Fab/index.js",
+        "./FormField/*": "./dist/components/FormField/*.js",
+        "./FormField": "./dist/components/FormField/index.js",
+        "./Img/*": "./dist/components/Img/*.js",
+        "./Img": "./dist/components/Img/index.js",
+        "./InlineAlert/*": "./dist/components/InlineAlert/*.js",
+        "./InlineAlert": "./dist/components/InlineAlert/index.js",
+        "./Layout/*": "./dist/components/Layout/*.js",
+        "./Layout": "./dist/components/Layout/index.js",
+        "./Link/*": "./dist/components/Link/*.js",
+        "./Link": "./dist/components/Link/index.js",
+        "./ListItem/*": "./dist/components/ListItem/*.js",
+        "./ListItem": "./dist/components/ListItem/index.js",
+        "./Listbox/*": "./dist/components/Listbox/*.js",
+        "./Listbox": "./dist/components/Listbox/index.js",
+        "./Menu/*": "./dist/components/Menu/*.js",
+        "./Menu": "./dist/components/Menu/index.js",
+        "./MenuButton/*": "./dist/components/MenuButton/*.js",
+        "./MenuButton": "./dist/components/MenuButton/index.js",
+        "./Modal/*": "./dist/components/Modal/*.js",
+        "./Modal": "./dist/components/Modal/index.js",
+        "./NumberField/*": "./dist/components/NumberField/*.js",
+        "./NumberField": "./dist/components/NumberField/index.js",
+        "./NumberInput/*": "./dist/components/NumberInput/*.js",
+        "./NumberInput": "./dist/components/NumberInput/index.js",
+        "./PhoneNumberField/*": "./dist/components/PhoneNumberField/*.js",
+        "./PhoneNumberField": "./dist/components/PhoneNumberField/index.js",
+        "./PhoneNumberInput/*": "./dist/components/PhoneNumberInput/*.js",
+        "./PhoneNumberInput": "./dist/components/PhoneNumberInput/index.js",
+        "./Popover/*": "./dist/components/Popover/*.js",
+        "./Popover": "./dist/components/Popover/index.js",
+        "./Portal/*": "./dist/components/Portal/*.js",
+        "./Portal": "./dist/components/Portal/index.js",
+        "./ProgressBar/*": "./dist/components/ProgressBar/*.js",
+        "./ProgressBar": "./dist/components/ProgressBar/index.js",
+        "./ProgressCircle/*": "./dist/components/ProgressCircle/*.js",
+        "./ProgressCircle": "./dist/components/ProgressCircle/index.js",
+        "./ProgressionStepper/*": "./dist/components/ProgressionStepper/*.js",
+        "./ProgressionStepper": "./dist/components/ProgressionStepper/index.js",
+        "./ProgressionStepperBar/*": "./dist/components/ProgressionStepperBar/*.js",
+        "./ProgressionStepperBar": "./dist/components/ProgressionStepperBar/index.js",
+        "./Radio/*": "./dist/components/Radio/*.js",
+        "./Radio": "./dist/components/Radio/index.js",
+        "./RadioGroup/*": "./dist/components/RadioGroup/*.js",
+        "./RadioGroup": "./dist/components/RadioGroup/index.js",
+        "./RadioOption/*": "./dist/components/RadioOption/*.js",
+        "./RadioOption": "./dist/components/RadioOption/index.js",
+        "./Scrim/*": "./dist/components/Scrim/*.js",
+        "./Scrim": "./dist/components/Scrim/index.js",
+        "./SearchBar/*": "./dist/components/SearchBar/*.js",
+        "./SearchBar": "./dist/components/SearchBar/index.js",
+        "./SegmentedControl/*": "./dist/components/SegmentedControl/*.js",
+        "./SegmentedControl": "./dist/components/SegmentedControl/index.js",
+        "./Select/*": "./dist/components/Select/*.js",
+        "./Select": "./dist/components/Select/index.js",
+        "./SelectField/*": "./dist/components/SelectField/*.js",
+        "./SelectField": "./dist/components/SelectField/index.js",
+        "./Skeleton/*": "./dist/components/Skeleton/*.js",
+        "./Skeleton": "./dist/components/Skeleton/index.js",
+        "./SkeletonText/*": "./dist/components/SkeletonText/*.js",
+        "./SkeletonText": "./dist/components/SkeletonText/index.js",
+        "./StylesProviderAnywhere/*": "./dist/components/StylesProviderAnywhere/*.js",
+        "./StylesProviderAnywhere": "./dist/components/StylesProviderAnywhere/index.js",
+        "./StylesProviderBetterHomesGardens/*": "./dist/components/StylesProviderBetterHomesGardens/*.js",
+        "./StylesProviderBetterHomesGardens": "./dist/components/StylesProviderBetterHomesGardens/index.js",
+        "./StylesProviderCartus/*": "./dist/components/StylesProviderCartus/*.js",
+        "./StylesProviderCartus": "./dist/components/StylesProviderCartus/index.js",
+        "./StylesProviderCentury21/*": "./dist/components/StylesProviderCentury21/*.js",
+        "./StylesProviderCentury21": "./dist/components/StylesProviderCentury21/index.js",
+        "./StylesProviderColdwellBanker/*": "./dist/components/StylesProviderColdwellBanker/*.js",
+        "./StylesProviderColdwellBanker": "./dist/components/StylesProviderColdwellBanker/index.js",
+        "./StylesProviderCorcoran/*": "./dist/components/StylesProviderCorcoran/*.js",
+        "./StylesProviderCorcoran": "./dist/components/StylesProviderCorcoran/index.js",
+        "./StylesProviderDenaliBoss/*": "./dist/components/StylesProviderDenaliBoss/*.js",
+        "./StylesProviderDenaliBoss": "./dist/components/StylesProviderDenaliBoss/index.js",
+        "./StylesProviderEra/*": "./dist/components/StylesProviderEra/*.js",
+        "./StylesProviderEra": "./dist/components/StylesProviderEra/index.js",
+        "./StylesProviderSothebys/*": "./dist/components/StylesProviderSothebys/*.js",
+        "./StylesProviderSothebys": "./dist/components/StylesProviderSothebys/index.js",
+        "./Switch/*": "./dist/components/Switch/*.js",
+        "./Switch": "./dist/components/Switch/index.js",
+        "./SwitchOption/*": "./dist/components/SwitchOption/*.js",
+        "./SwitchOption": "./dist/components/SwitchOption/index.js",
+        "./TabGroup/*": "./dist/components/TabGroup/*.js",
+        "./TabGroup": "./dist/components/TabGroup/index.js",
+        "./Table/*": "./dist/components/Table/*.js",
+        "./Table": "./dist/components/Table/index.js",
+        "./Tag/*": "./dist/components/Tag/*.js",
+        "./Tag": "./dist/components/Tag/index.js",
+        "./TextField/*": "./dist/components/TextField/*.js",
+        "./TextField": "./dist/components/TextField/index.js",
+        "./TextInput/*": "./dist/components/TextInput/*.js",
+        "./TextInput": "./dist/components/TextInput/index.js",
+        "./Textarea/*": "./dist/components/Textarea/*.js",
+        "./Textarea": "./dist/components/Textarea/index.js",
+        "./TextareaField/*": "./dist/components/TextareaField/*.js",
+        "./TextareaField": "./dist/components/TextareaField/index.js",
+        "./ToggleOption/*": "./dist/components/ToggleOption/*.js",
+        "./ToggleOption": "./dist/components/ToggleOption/index.js",
+        "./Tooltip/*": "./dist/components/Tooltip/*.js",
+        "./Tooltip": "./dist/components/Tooltip/index.js",
+        "./TopNavigation/*": "./dist/components/TopNavigation/*.js",
+        "./TopNavigation": "./dist/components/TopNavigation/index.js",
+        "./Truncated/*": "./dist/components/Truncated/*.js",
+        "./Truncated": "./dist/components/Truncated/index.js",
+        "./Txt/*": "./dist/components/Txt/*.js",
+        "./Txt": "./dist/components/Txt/index.js",
+        "./UIProvider/*": "./dist/components/UIProvider/*.js",
+        "./UIProvider": "./dist/components/UIProvider/index.js"
     },
     "publishConfig": {
         "access": "public"
@@ -36,9 +198,10 @@
         "node": ">=20"
     },
     "dependencies": {
-        "@bspk/styles": "^1.0.0",
+        "@bspk/styles": "^1.0.1",
         "@floating-ui/dom": "^1.6.13",
-        "focus-trap-react": "^11.0.1"
+        "focus-trap-react": "^11.0.1",
+        "libphonenumber-js": "^1.12.9"
     },
     "peerDependencies": {
         "@bspk/icons": "^1.0.3",
@@ -59,6 +222,7 @@
         "@types/node": "^22.10.2",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.5",
+        "chokidar": "^4.0.3",
         "eslint": "9.14.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.6.3",
@@ -70,16 +234,55 @@
         "husky": "^9.1.7",
         "jest": "^29.7.0",
         "prettier-plugin-jsdoc": "^1.3.0",
-        "sass": "^1.89.0",
+        "sass": "^1.89.2",
         "semantic-release": "^24.2.0",
         "stylelint": "^16.19.1",
         "stylelint-config-standard": "^38.0.0",
         "stylelint-config-standard-scss": "^14.0.0",
         "ts-jest": "^29.2.5",
+        "tsc-alias": "^1.8.16",
         "tslib": "^2.8.1",
         "tsx": "^4.19.4",
         "typescript": "5.6.3",
         "typescript-eslint": "8.13.0",
         "typescript-json-schema": "^0.65.1"
-    }
+    },
+    "brands": [
+        {
+            "title": "Anywhere",
+            "slug": "anywhere"
+        },
+        {
+            "title": "Better Homes & Gardens",
+            "slug": "better-homes-gardens"
+        },
+        {
+            "title": "Cartus",
+            "slug": "cartus"
+        },
+        {
+            "title": "Century 21",
+            "slug": "century-21"
+        },
+        {
+            "title": "Coldwell Banker",
+            "slug": "coldwell-banker"
+        },
+        {
+            "title": "Corcoran",
+            "slug": "corcoran"
+        },
+        {
+            "title": "Denali Boss",
+            "slug": "denali-boss"
+        },
+        {
+            "title": "ERA",
+            "slug": "era"
+        },
+        {
+            "title": "Sotheby's",
+            "slug": "sothebys"
+        }
+    ]
 }

package/src/base.scss

@@ -21,18 +21,15 @@
     padding: 0;
 }
 
-html:has(body[data-bspk]) {
-    height: 100%;
-    scroll-behavior: smooth;
-}
-
 :root {
     --z-index-tooltip-popover: 1100;
     --z-index-dialog: 1000;
-    --z-index-dropdown: 900;
+    --z-index-dropdown: 1000;
+    --z-index-scrim: 900;
     --z-index-fab: 800;
     --z-index-navbar: 700;
     --z-index-footer: 600;
+    --list-item-height: var(--spacing-sizing-13);
 }
 
 @media (prefers-reduced-motion) {
@@ -41,28 +38,28 @@ html:has(body[data-bspk]) {
     }
 }
 
-body[data-bspk] {
+html:has(body[data-bspk]) {
     height: 100%;
+    scrollbar-gutter: stable;
+    overflow: hidden auto;
     scroll-behavior: smooth;
+}
+
+/* --scrollbar-width: defined inline in UIProvider */
+html:has([data-bspk='scrim']) {
+    overflow: hidden;
+    padding-right: var(--scrollbar-width);
+}
+
+body[data-bspk] {
+    height: 100%;
     font: var(--body-base);
     background-color: var(--background-base);
     color: var(--foreground-neutral-on-surface);
-
-    /** Remove default input autofill styles */
-    input:-internal-autofill-previewed,
-    input:-internal-autofill-selected,
-    textarea:-internal-autofill-previewed,
-    textarea:-internal-autofill-selected,
-    select:-internal-autofill-previewed,
-    select:-internal-autofill-selected {
-        transition:
-            color calc(infinity * 1s) step-end,
-            background-color calc(infinity * 1s) step-end;
-    }
+    min-width: 343px;
 
     a {
         color: var(--foreground-link-text-default);
-        font: var(--labels-base);
 
         &:not([disabled]) {
             &:hover,
@@ -148,6 +145,13 @@ body[data-bspk] {
     }
 }
 
+[data-touch-target-parent] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
 [data-touch-target] {
     display: none;
     touch-action: manipulation;
@@ -186,4 +190,87 @@ body[data-bspk] {
     }
 }
 
+@keyframes skeleton-pulse {
+    0% {
+        opacity: 0.8;
+    }
+
+    50% {
+        opacity: 0.4;
+    }
+
+    100% {
+        opacity: 0.8;
+    }
+}
+
+[data-bspk='skeleton-text'] {
+    /*! 
+    --text-margin: is set via inline style
+    --text-height: is set via inline style
+    */
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--text-margin);
+    animation: skeleton-pulse 1.5s infinite;
+    width: 100%;
+    height: fit-content;
+
+    [data-line] {
+        width: 100%;
+        background: var(--foreground-neutral-skeleton-element);
+        border-radius: var(--radius-sm);
+        height: var(--text-height);
+    }
+
+    // if there are 2 lines or more, make the last line 80% width
+    &:has([data-line]:nth-child(2)) {
+        [data-line]:last-child {
+            width: 80%;
+        }
+    }
+}
+
+[data-bspk='skeleton'] {
+    /*! 
+    --height: is set via inline style
+    --width: is set via inline style
+    */
+
+    animation: skeleton-pulse 1.5s infinite;
+    background: var(--foreground-neutral-skeleton-element);
+
+    &[data-variant='rectangular'],
+    &[data-variant='photo'] {
+        min-width: var(--spacing-sizing-08);
+        min-height: var(--spacing-sizing-08);
+        height: var(--height, var(--width));
+        width: var(--width, var(--height));
+        border-radius: var(--radius-sm);
+    }
+
+    &[data-variant='photo'] {
+        border-radius: var(--radius-md);
+    }
+
+    &[data-variant='circular'] {
+        border-radius: 100%;
+        width: var(--width);
+        aspect-ratio: 1/1;
+    }
+
+    &[data-variant='profile'] {
+        border-radius: 100%;
+        width: var(--spacing-sizing-10);
+        aspect-ratio: 1/1;
+    }
+
+    &[data-variant='thumbnail'] {
+        width: var(--spacing-sizing-12);
+        height: var(--spacing-sizing-12);
+        border-radius: var(--radius-sm);
+    }
+}
+
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/colors.scss

@@ -1,5 +1,5 @@
 /**
- * This file is generated by /.scripts/update-css.ts.
+ * This file is generated by the update-css script.
  * Do not edit this file directly.
  * Instead, edit the script and run it again. */
 

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,152 @@
+import { SvgPerson } from '@bspk/icons/Person';
+import { useMemo } from 'react';
+
+import { Tooltip } from '-/components/Tooltip';
+import { ColorVariant } from '-/utils/colorVariants';
+import './avatar.scss';
+
+const DEFAULT = {
+    size: 'small',
+    color: 'grey',
+    showTooltip: true,
+} as const;
+
+export type SizeVariant =
+    | 'large'
+    | 'medium'
+    | 'small'
+    | 'x-large'
+    | 'x-small'
+    | 'xx-large'
+    | 'xxx-large'
+    | 'xxxx-large'
+    | 'xxxxx-large';
+
+export type AvatarProps = {
+    /**
+     * The name of the person or entity represented by the avatar. This is used for accessibility purposes.
+     *
+     * @example
+     *     Andre Giant
+     *
+     * @required
+     */
+    name: string;
+    /**
+     * The size of the avatar.
+     *
+     * @default small
+     */
+    size?: SizeVariant;
+    /**
+     * The color of the avatar.
+     *
+     * @default grey
+     */
+    color?: Exclude<ColorVariant, 'white'>;
+    /**
+     * The initials to display in the avatar limited to 2 characters.
+     *
+     * If not provided, the first two letters of the name will be used as initials.
+     *
+     * @example
+     *     AG;
+     */
+    initials?: string;
+    /**
+     * Whether to show the icon in the avatar.
+     *
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * The url to the image to display in the avatar.
+     *
+     * @example
+     *     /profile.jpg
+     */
+    image?: string;
+    /**
+     * Whether to show the represeneetd user's name as a tooltip.
+     *
+     * @default true
+     */
+    showTooltip?: boolean;
+};
+
+/**
+ * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, or image.
+ *
+ * @example
+ *     import { Avatar } from '@bspk/ui/Avatar';
+ *     import { SvgPerson } from '@bspk/icons/Person';
+ *
+ *     function Example() {
+ *         return (
+ *             <Avatar
+ *                 color="blue"
+ *                 icon={<SvgPerson />}
+ *                 image="/profile.jpg"
+ *                 initials="AR"
+ *                 name="Andre Giant"
+ *                 showTooltip={true}
+ *                 size="large"
+ *             />
+ *         );
+ *     }
+ *
+ * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
+ *
+ * @name Avatar
+ * @phase DesignReview
+ */
+function Avatar({
+    initials: initialsProp,
+    color = DEFAULT.color,
+    size = DEFAULT.size,
+    showIcon,
+    image,
+    name: ariaLabel,
+    showTooltip = DEFAULT.showTooltip,
+}: AvatarProps) {
+    const children = useMemo(() => {
+        if (image) return <img alt={ariaLabel} src={image} />;
+
+        if (showIcon)
+            return (
+                <span data-icon>
+                    <SvgPerson />
+                </span>
+            );
+
+        let initials = initialsProp;
+
+        if (ariaLabel && !initials)
+            initials = ariaLabel
+                .split(' ')
+                .map((word) => word.charAt(0))
+                .slice(0, 2)
+                .join('')
+                .toUpperCase();
+
+        if (initials) return <span data-initials>{initials.slice(0, 2)}</span>;
+
+        return null;
+    }, [ariaLabel, showIcon, image, initialsProp]);
+
+    if (!children) return null;
+
+    const avatar = (
+        <div aria-label={ariaLabel} data-bspk="avatar" data-color={color} data-size={size}>
+            {children}
+        </div>
+    );
+
+    return showTooltip ? <Tooltip label={ariaLabel}>{avatar}</Tooltip> : avatar;
+}
+
+Avatar.bspkName = 'Avatar';
+
+export { Avatar };
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/Avatar/AvatarExample.tsx

@@ -0,0 +1,42 @@
+import { ComponentExample } from '-/utils/demo';
+
+import { AvatarProps } from '.';
+
+export const AvatarExample: ComponentExample<AvatarProps> = {
+    presets: [
+        {
+            label: 'Name Only',
+            propState: {
+                name: 'Andre Giant',
+                image: undefined, // Ensure no image is set
+                initials: undefined, // Ensure no initials are set
+                showIcon: false,
+            },
+        },
+        {
+            label: 'With Initials',
+            propState: {
+                name: 'Andre Giant',
+                initials: 'GA',
+                image: undefined, // Ensure no image is set
+                showIcon: false,
+            },
+        },
+        {
+            label: 'With Icon',
+            propState: {
+                name: 'Andre Giant',
+                showIcon: true,
+                image: undefined, // Ensure no image is set
+            },
+        },
+        {
+            label: 'With Image',
+            propState: {
+                name: 'Andre Giant',
+                image: '/profile.jpg',
+                showIcon: false,
+            },
+        },
+    ],
+};