@bspk/ui 1.1.31 → 1.1.33

package/dist/base.css.js

@@ -0,0 +1,306 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`/**
+  * Base Styles
+  * This file is not generated or distributed through @bspk/styles.
+  * If not using a StylesProvider (recommended), this file should be imported first in the main stylesheet .
+  * This file will contain only the most basic styles that are applied across all applications.
+  * This file will NOT contain any component-specific styles.
+  * This file will NOT contain any media queries.
+  * This file will NOT contain any classes
+*/
+/**
+ * This file is generated by the build-css script.
+ * Do not edit this file directly.
+ * Instead, edit the script and run it again. */
+[data-color=grey] {
+  --foreground: var(--foreground-neutral-on-surface-variant-01);
+  --background: var(--surface-neutral-t2-lowest);
+}
+
+[data-color=white] {
+  --foreground: var(--foreground-neutral-on-surface-variant-01);
+  --background: var(--surface-neutral-t1-base);
+}
+
+[data-color=primary] {
+  --foreground: var(--foreground-brand-primary-depth);
+  --background: var(--surface-brand-primary-highlight);
+}
+
+[data-color=secondary] {
+  --foreground: var(--foreground-brand-secondary-depth);
+  --background: var(--surface-brand-secondary-highlight);
+}
+
+[data-color=blue] {
+  --foreground: var(--foreground-spectrum-blue);
+  --background: var(--surface-spectrum-blue);
+}
+
+[data-color=green] {
+  --foreground: var(--foreground-spectrum-green);
+  --background: var(--surface-spectrum-green);
+}
+
+[data-color=lime] {
+  --foreground: var(--foreground-spectrum-lime);
+  --background: var(--surface-spectrum-lime);
+}
+
+[data-color=magenta] {
+  --foreground: var(--foreground-spectrum-magenta);
+  --background: var(--surface-spectrum-magenta);
+}
+
+[data-color=orange] {
+  --foreground: var(--foreground-spectrum-orange);
+  --background: var(--surface-spectrum-orange);
+}
+
+[data-color=pink] {
+  --foreground: var(--foreground-spectrum-pink);
+  --background: var(--surface-spectrum-pink);
+}
+
+[data-color=purple] {
+  --foreground: var(--foreground-spectrum-purple);
+  --background: var(--surface-spectrum-purple);
+}
+
+[data-color=red] {
+  --foreground: var(--foreground-spectrum-red);
+  --background: var(--surface-spectrum-red);
+}
+
+[data-color=teal] {
+  --foreground: var(--foreground-spectrum-teal);
+  --background: var(--surface-spectrum-teal);
+}
+
+[data-color=yellow] {
+  --foreground: var(--foreground-spectrum-yellow);
+  --background: var(--surface-spectrum-yellow);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --z-index-tooltip-popover: 1100;
+  --z-index-dialog: 1000;
+  --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) {
+  [data-animated] {
+    animation: none !important;
+  }
+}
+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);
+  min-width: 343px;
+}
+body[data-bspk] a {
+  color: var(--foreground-link-text-default);
+}
+body[data-bspk] a:not([disabled]):hover, body[data-bspk] a:not([disabled])[data-pseudo=hover] {
+  color: var(--foreground-link-text-default-hovered);
+}
+body[data-bspk] a:not([disabled]):active, body[data-bspk] a:not([disabled])[data-pseudo=active] {
+  color: var(--foreground-link-text-default);
+  filter: brightness(80%);
+}
+body[data-bspk] a:not([disabled]):visited, body[data-bspk] a:not([disabled])[data-pseudo=visited] {
+  color: var(--foreground-link-text-default-visited);
+}
+body[data-bspk] a[disabled] {
+  pointer-events: none;
+  cursor: text;
+  color: var(--foreground-link-text-default-disabled);
+}
+body[data-bspk] a[data-subtle] {
+  text-decoration: none;
+  color: var(--foreground-neutral-on-surface);
+}
+body[data-bspk] a[data-subtle]:not([disabled]):hover, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=hover] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-hovered);
+}
+body[data-bspk] a[data-subtle]:not([disabled]):active, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=active] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-pressed);
+}
+body[data-bspk] a[data-subtle]:not([disabled]):visited, body[data-bspk] a[data-subtle]:not([disabled])[data-pseudo=visited] {
+  color: var(--foreground-neutral-on-surface);
+}
+body[data-bspk] a[data-subtle][disabled] {
+  pointer-events: none;
+  color: var(--foreground-link-text-subtle-disabled);
+}
+body[data-bspk] a[data-subtle-inverse] {
+  text-decoration: none;
+  color: var(--foreground-neutral-inverse-on-surface);
+}
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):hover, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=hover] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-inverse-hovered);
+}
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):active, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=active] {
+  text-decoration: underline;
+  color: var(--foreground-link-text-subtle-inverse-pressed);
+}
+body[data-bspk] a[data-subtle-inverse]:not([disabled]):visited, body[data-bspk] a[data-subtle-inverse]:not([disabled])[data-pseudo=visited] {
+  color: var(--foreground-neutral-on-inverse-surface);
+}
+body[data-bspk] a[data-subtle-inverse][disabled] {
+  pointer-events: none;
+  color: var(--foreground-link-text-subtle-inversed-disabled);
+}
+
+[data-touch-target-parent] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+[data-touch-target] {
+  display: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+  position: absolute;
+  z-index: 1;
+  height: 100%;
+  width: 100%;
+  top: auto;
+  left: auto;
+}
+
+[data-sr-only] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+[data-touch-target] ~ * {
+  position: relative;
+  z-index: 2;
+}
+
+/* if touchscreen */
+@media (any-pointer: coarse) {
+  [data-touch-target] {
+    display: block;
+  }
+}
+@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-bspk=skeleton-text] [data-line] {
+  width: 100%;
+  background: var(--foreground-neutral-skeleton-element);
+  border-radius: var(--radius-small);
+  height: var(--text-height);
+}
+[data-bspk=skeleton-text]: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-bspk=skeleton][data-variant=rectangular], [data-bspk=skeleton][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-small);
+}
+[data-bspk=skeleton][data-variant=photo] {
+  border-radius: var(--radius-medium);
+}
+[data-bspk=skeleton][data-variant=circular] {
+  border-radius: 100%;
+  width: var(--width);
+  aspect-ratio: 1/1;
+}
+[data-bspk=skeleton][data-variant=profile] {
+  border-radius: 100%;
+  width: var(--spacing-sizing-10);
+  aspect-ratio: 1/1;
+}
+[data-bspk=skeleton][data-variant=thumbnail] {
+  width: var(--spacing-sizing-12);
+  height: var(--spacing-sizing-12);
+  border-radius: var(--radius-small);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/colors.css

@@ -1 +1,75 @@
-[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}
+/**
+ * This file is generated by the build-css script.
+ * Do not edit this file directly.
+ * Instead, edit the script and run it again. */
+[data-color=grey] {
+  --foreground: var(--foreground-neutral-on-surface-variant-01);
+  --background: var(--surface-neutral-t2-lowest);
+}
+
+[data-color=white] {
+  --foreground: var(--foreground-neutral-on-surface-variant-01);
+  --background: var(--surface-neutral-t1-base);
+}
+
+[data-color=primary] {
+  --foreground: var(--foreground-brand-primary-depth);
+  --background: var(--surface-brand-primary-highlight);
+}
+
+[data-color=secondary] {
+  --foreground: var(--foreground-brand-secondary-depth);
+  --background: var(--surface-brand-secondary-highlight);
+}
+
+[data-color=blue] {
+  --foreground: var(--foreground-spectrum-blue);
+  --background: var(--surface-spectrum-blue);
+}
+
+[data-color=green] {
+  --foreground: var(--foreground-spectrum-green);
+  --background: var(--surface-spectrum-green);
+}
+
+[data-color=lime] {
+  --foreground: var(--foreground-spectrum-lime);
+  --background: var(--surface-spectrum-lime);
+}
+
+[data-color=magenta] {
+  --foreground: var(--foreground-spectrum-magenta);
+  --background: var(--surface-spectrum-magenta);
+}
+
+[data-color=orange] {
+  --foreground: var(--foreground-spectrum-orange);
+  --background: var(--surface-spectrum-orange);
+}
+
+[data-color=pink] {
+  --foreground: var(--foreground-spectrum-pink);
+  --background: var(--surface-spectrum-pink);
+}
+
+[data-color=purple] {
+  --foreground: var(--foreground-spectrum-purple);
+  --background: var(--surface-spectrum-purple);
+}
+
+[data-color=red] {
+  --foreground: var(--foreground-spectrum-red);
+  --background: var(--surface-spectrum-red);
+}
+
+[data-color=teal] {
+  --foreground: var(--foreground-spectrum-teal);
+  --background: var(--surface-spectrum-teal);
+}
+
+[data-color=yellow] {
+  --foreground: var(--foreground-spectrum-yellow);
+  --background: var(--surface-spectrum-yellow);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/colors.css.js

@@ -0,0 +1,81 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`/**
+ * This file is generated by the build-css script.
+ * Do not edit this file directly.
+ * Instead, edit the script and run it again. */
+[data-color=grey] {
+  --foreground: var(--foreground-neutral-on-surface-variant-01);
+  --background: var(--surface-neutral-t2-lowest);
+}
+
+[data-color=white] {
+  --foreground: var(--foreground-neutral-on-surface-variant-01);
+  --background: var(--surface-neutral-t1-base);
+}
+
+[data-color=primary] {
+  --foreground: var(--foreground-brand-primary-depth);
+  --background: var(--surface-brand-primary-highlight);
+}
+
+[data-color=secondary] {
+  --foreground: var(--foreground-brand-secondary-depth);
+  --background: var(--surface-brand-secondary-highlight);
+}
+
+[data-color=blue] {
+  --foreground: var(--foreground-spectrum-blue);
+  --background: var(--surface-spectrum-blue);
+}
+
+[data-color=green] {
+  --foreground: var(--foreground-spectrum-green);
+  --background: var(--surface-spectrum-green);
+}
+
+[data-color=lime] {
+  --foreground: var(--foreground-spectrum-lime);
+  --background: var(--surface-spectrum-lime);
+}
+
+[data-color=magenta] {
+  --foreground: var(--foreground-spectrum-magenta);
+  --background: var(--surface-spectrum-magenta);
+}
+
+[data-color=orange] {
+  --foreground: var(--foreground-spectrum-orange);
+  --background: var(--surface-spectrum-orange);
+}
+
+[data-color=pink] {
+  --foreground: var(--foreground-spectrum-pink);
+  --background: var(--surface-spectrum-pink);
+}
+
+[data-color=purple] {
+  --foreground: var(--foreground-spectrum-purple);
+  --background: var(--surface-spectrum-purple);
+}
+
+[data-color=red] {
+  --foreground: var(--foreground-spectrum-red);
+  --background: var(--surface-spectrum-red);
+}
+
+[data-color=teal] {
+  --foreground: var(--foreground-spectrum-teal);
+  --background: var(--surface-spectrum-teal);
+}
+
+[data-color=yellow] {
+  --foreground: var(--foreground-spectrum-yellow);
+  --background: var(--surface-spectrum-yellow);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,86 @@
+import { ColorVariant } from '../../utils/colorVariants';
+import './avatar.scss';
+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
+ */
+declare function Avatar({ initials: initialsProp, color, size, showIcon, image, name: ariaLabel, showTooltip, }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace Avatar {
+    var bspkName: string;
+}
+export { Avatar };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgPerson } from '@bspk/icons/Person';
+import { useMemo } from 'react';
+import { Tooltip } from '../Tooltip';
+import './avatar.css.js';
+const DEFAULT = {
+    size: 'small',
+    color: 'grey',
+    showTooltip: true,
+};
+/**
+ * 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, }) {
+    const children = useMemo(() => {
+        if (image)
+            return _jsx("img", { alt: ariaLabel, src: image });
+        if (showIcon)
+            return (_jsx("span", { "data-icon": true, children: _jsx(SvgPerson, {}) }));
+        let initials = initialsProp;
+        if (ariaLabel && !initials)
+            initials = ariaLabel
+                .split(' ')
+                .map((word) => word.charAt(0))
+                .slice(0, 2)
+                .join('')
+                .toUpperCase();
+        if (initials)
+            return _jsx("span", { "data-initials": true, children: initials.slice(0, 2) });
+        return null;
+    }, [ariaLabel, showIcon, image, initialsProp]);
+    if (!children)
+        return null;
+    const avatar = (_jsx("div", { "aria-label": ariaLabel, "data-bspk": "avatar", "data-color": color, "data-size": size, children: children }));
+    return showTooltip ? _jsx(Tooltip, { label: ariaLabel, children: avatar }) : avatar;
+}
+Avatar.bspkName = 'Avatar';
+export { Avatar };
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,eAAe,CAAC;AAEvB,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;AAiEX;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,SAAS,MAAM,CAAC,EACZ,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,OAAO,CAAC,WAAW,GACvB;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEtD,IAAI,QAAQ;YACR,OAAO,CACH,4CACI,KAAC,SAAS,KAAG,GACV,CACV,CAAC;QAEN,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YAAE,OAAO,gDAAqB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,CAAC;QAEvE,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CACX,4BAAiB,SAAS,eAAY,QAAQ,gBAAa,KAAK,eAAa,IAAI,YAC5E,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC;AAChF,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/Avatar/AvatarExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExample } from '../../utils/demo';
+import { AvatarProps } from '.';
+export declare const AvatarExample: ComponentExample<AvatarProps>;

package/dist/components/Avatar/AvatarExample.js

@@ -0,0 +1,39 @@
+export const AvatarExample = {
+    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,
+            },
+        },
+    ],
+};
+//# sourceMappingURL=AvatarExample.js.map

package/dist/components/Avatar/AvatarExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarExample.js","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;gBAClD,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;aAC9C;SACJ;QACD;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,cAAc;gBACrB,QAAQ,EAAE,KAAK;aAClB;SACJ;KACJ;CACJ,CAAC"}