@workday/canvas-kit-preview-react 14.0.0-alpha.1211-next.0 → 14.0.0-alpha.1213-next.0

package/avatar/index.ts

@@ -0,0 +1,5 @@
+export * from './lib/Avatar';
+export * from './lib/AvatarImage';
+export * from './lib/AvatarName';
+export * from './lib/BaseAvatar';
+export * from './lib/getInitialsFromName';

package/avatar/lib/Avatar.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Property} from 'csstype';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+
+import {BaseAvatarProps, BaseAvatar, baseAvatarStencil} from './BaseAvatar';
+import {AvatarNameProps} from './AvatarName';
+
+export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
+  /**
+   * The URL of the user's photo. For best fit, use square images.
+   */
+  url?: string;
+  /**
+   * An objectFit property that can customize how to resize your image to fit its container.
+   * @default "contain"
+   */
+  objectFit?: Property.ObjectFit;
+  /**
+   * If true, the Avatar won't forward the `name` prop to the `alt` attribute of the image. This is useful when the Avatar is purely decorative and is rendered next to a name or text.
+   */
+  isDecorative?: boolean;
+}
+
+export const avatarStencil = createStencil({
+  extends: baseAvatarStencil,
+  parts: {
+    avatarImage: 'avatar-image',
+    avatarName: 'avatar-name',
+  },
+  base: {},
+  modifiers: {
+    imageLoaded: {
+      false: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          display: 'none',
+        },
+      }),
+    },
+    objectFit: {
+      contain: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'contain',
+        },
+      }),
+      cover: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'cover',
+        },
+      }),
+      fill: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'fill',
+        },
+      }),
+      none: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'none',
+        },
+      }),
+      ['scale-down']: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'scale-down',
+        },
+      }),
+      initial: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'initial',
+        },
+      }),
+
+      inherit: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'inherit',
+        },
+      }),
+      unset: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'unset',
+        },
+      }),
+      ['-moz-initial']: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: '-moz-initial',
+        },
+      }),
+      ['revert']: ({avatarImagePart}) => ({
+        [avatarImagePart]: {
+          objectFit: 'revert',
+        },
+      }),
+    },
+  },
+});
+
+/**
+ * JSDoc for Avatar. Will be part of the Component API docs
+ */
+export const Avatar = createComponent('div')({
+  displayName: 'Avatar',
+
+  Component: (
+    {
+      url,
+      name,
+      variant,
+      objectFit = 'cover',
+      preferredInitials,
+      isDecorative,
+      size,
+      ...elemProps
+    }: AvatarProps,
+    ref,
+    Element
+  ) => {
+    const [imageLoaded, setImageLoaded] = React.useState(false);
+
+    const handleImageLoad = () => {
+      if (!imageLoaded) {
+        setImageLoaded(true);
+      }
+    };
+
+    return (
+      <BaseAvatar
+        as={Element}
+        ref={ref}
+        {...handleCsProp(elemProps, avatarStencil({variant, size, imageLoaded, objectFit}))}
+      >
+        {url && (
+          <>
+            <BaseAvatar.Image
+              onLoad={handleImageLoad}
+              src={url}
+              alt={isDecorative ? undefined : name}
+              aria-hidden={isDecorative}
+              {...avatarStencil.parts.avatarImage}
+            />
+          </>
+        )}
+        {name && (!url || !imageLoaded) && (
+          <BaseAvatar.Name
+            name={name}
+            preferredInitials={preferredInitials}
+            {...avatarStencil.parts.avatarName}
+          />
+        )}
+      </BaseAvatar>
+    );
+  },
+});

package/avatar/lib/AvatarImage.tsx

@@ -0,0 +1,20 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+import {handleCsProp, createStencil, CSProps} from '@workday/canvas-kit-styling';
+
+export interface AvatarImageProps extends CSProps {}
+
+export const avatarImageStencil = createStencil({
+  base: {
+    height: '100%',
+    width: '100%',
+    objectFit: 'cover',
+  },
+});
+
+export const AvatarImage = createComponent('img')({
+  displayName: 'AvatarImage',
+  Component: ({...elemProps}: AvatarImageProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, avatarImageStencil())} />;
+  },
+});

package/avatar/lib/AvatarName.tsx

@@ -0,0 +1,32 @@
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {CSProps, handleCsProp, createStencil} from '@workday/canvas-kit-styling';
+import {getInitialsFromName} from './getInitialsFromName';
+
+export interface AvatarNameProps extends CSProps {
+  /**
+   * The alt text of the Avatar image. This prop is also used for the initials. The first letter of the first name and the first letter of the second name are chosen for the initials.
+   */
+  name: string;
+  /**
+   * If you want full control over the initials, use `preferredInitials` instead.
+   */
+  preferredInitials?: string;
+}
+
+export const avatarNameStencil = createStencil({
+  base: {
+    textTransform: 'uppercase',
+    cursor: 'default',
+  },
+});
+
+export const AvatarName = createComponent('span')({
+  displayName: 'AvatarName',
+  Component: ({name, preferredInitials, ...elemProps}: AvatarNameProps, ref, Element) => {
+    return (
+      <Element ref={ref} {...handleCsProp(elemProps, avatarNameStencil())}>
+        {preferredInitials || getInitialsFromName(name)}
+      </Element>
+    );
+  },
+});

package/avatar/lib/BaseAvatar.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+
+import {AvatarImage} from './AvatarImage';
+import {AvatarName} from './AvatarName';
+import {createStencil, cssVar, calc, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
+import {system, base} from '@workday/canvas-tokens-web';
+
+export interface BaseAvatarProps extends CSProps {
+  /**
+   * Children of the BaseAvatar.
+   */
+  children?: React.ReactNode;
+  /**
+   * The variant of the Avatar.
+   * @default "blue"
+   */
+  variant?: 'blue' | 'amber' | 'teal' | 'purple';
+
+  /**
+   * The size of the Avatar.
+   * `extraExtraSmall` is 24px x 24px
+   * `extraSmall` is 32px x 32px
+   * `small` is 40px x 40px
+   * `medium` is 48px x 48px
+   * `large` is 72px x 72px
+   * `extraLarge` is 96px x 96px
+   * `extraExtraLarge` is 120px x 120px
+   * @default "medium"
+   */
+  size?:
+    | 'extraExtraSmall'
+    | 'extraSmall'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'extraLarge'
+    | 'extraExtraLarge'
+    | (string & {});
+}
+
+export const baseAvatarStencil = createStencil({
+  vars: {
+    backgroundColor: '',
+    color: '',
+    size: '',
+  },
+  base: ({backgroundColor, color, size}) => ({
+    borderRadius: system.shape.round,
+    width: cssVar(size, calc.add(system.space.x10, system.space.x2)),
+    height: cssVar(size, calc.add(system.space.x10, system.space.x2)),
+    backgroundColor: cssVar(backgroundColor, base.blue300),
+    color: cssVar(color, base.blue800),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    border: 'none',
+    ...system.type.body.medium,
+  }),
+  modifiers: {
+    variant: {
+      blue: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.blue300),
+        color: cssVar(color, base.blue800),
+      }),
+      amber: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.amber200),
+        color: cssVar(color, base.amber700),
+      }),
+
+      teal: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.teal300),
+        color: cssVar(color, base.teal800),
+      }),
+      purple: ({backgroundColor, color}) => ({
+        backgroundColor: cssVar(backgroundColor, base.purple300),
+        color: cssVar(color, base.purple800),
+      }),
+    },
+    size: {
+      extraExtraSmall: ({size}) => ({
+        [size]: system.space.x6,
+        ...system.type.subtext.small,
+      }),
+      extraSmall: ({size}) => ({
+        [size]: system.space.x8,
+        ...system.type.subtext.medium,
+      }),
+      small: ({size}) => ({
+        [size]: system.space.x10,
+        ...system.type.body.small,
+      }),
+      medium: ({size}) => ({
+        [size]: calc.add(system.space.x10, system.space.x2),
+        ...system.type.body.medium,
+      }),
+      large: ({size}) => ({
+        [size]: calc.add(system.space.x16, system.space.x2),
+        ...system.type.heading.medium,
+      }),
+      extraLarge: ({size}) => ({
+        [size]: calc.add(system.space.x20, system.space.x4),
+        ...system.type.title.small,
+      }),
+      extraExtraLarge: ({size}) => ({
+        [size]: calc.multiply(system.space.x10, 3),
+        ...system.type.title.medium,
+      }),
+    },
+  },
+});
+
+/**
+ * JSDoc for Avatar. Will be part of the Component API docs
+ */
+export const BaseAvatar = createComponent('div')({
+  displayName: 'BaseAvatar',
+  subComponents: {
+    Image: AvatarImage,
+    Name: AvatarName,
+  },
+  Component: ({variant, size, ...elemProps}: BaseAvatarProps, ref, Element) => {
+    return <Element ref={ref} {...handleCsProp(elemProps, baseAvatarStencil({variant, size}))} />;
+  },
+});

package/avatar/lib/getInitialsFromName.ts

@@ -0,0 +1,11 @@
+export const getInitialsFromName = (name: string) => {
+  // Trim and split by one or more whitespace characters
+  const nameParts = name.trim().split(/\s+/).filter(Boolean);
+
+  const first = nameParts[0];
+  const firstInitial = first?.[0] || '';
+  const last = nameParts.length > 1 ? nameParts[nameParts.length - 1] : undefined;
+  const lastInitial = last?.[0] || '';
+
+  return `${firstInitial}${lastInitial}`;
+};

package/avatar/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/avatar",
+  "module": "../dist/es6/avatar",
+  "sideEffects": false,
+  "types": "../dist/es6/avatar"
+}

package/dist/commonjs/avatar/index.d.ts

@@ -0,0 +1,6 @@
+export * from './lib/Avatar';
+export * from './lib/AvatarImage';
+export * from './lib/AvatarName';
+export * from './lib/BaseAvatar';
+export * from './lib/getInitialsFromName';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}

package/dist/commonjs/avatar/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/Avatar"), exports);
+__exportStar(require("./lib/AvatarImage"), exports);
+__exportStar(require("./lib/AvatarName"), exports);
+__exportStar(require("./lib/BaseAvatar"), exports);
+__exportStar(require("./lib/getInitialsFromName"), exports);

package/dist/commonjs/avatar/lib/Avatar.d.ts

@@ -0,0 +1,234 @@
+import { Property } from 'csstype';
+import { BaseAvatarProps } from './BaseAvatar';
+import { AvatarNameProps } from './AvatarName';
+export interface AvatarProps extends BaseAvatarProps, AvatarNameProps {
+    /**
+     * The URL of the user's photo. For best fit, use square images.
+     */
+    url?: string;
+    /**
+     * An objectFit property that can customize how to resize your image to fit its container.
+     * @default "contain"
+     */
+    objectFit?: Property.ObjectFit;
+    /**
+     * If true, the Avatar won't forward the `name` prop to the `alt` attribute of the image. This is useful when the Avatar is purely decorative and is rendered next to a name or text.
+     */
+    isDecorative?: boolean;
+}
+export declare const avatarStencil: import("@workday/canvas-kit-styling").Stencil<{
+    imageLoaded: {
+        false: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                display: "none";
+            };
+        };
+    };
+    objectFit: {
+        contain: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "contain";
+            };
+        };
+        cover: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "cover";
+            };
+        };
+        fill: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "fill";
+            };
+        };
+        none: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "none";
+            };
+        };
+        "scale-down": ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "scale-down";
+            };
+        };
+        initial: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "initial";
+            };
+        };
+        inherit: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "inherit";
+            };
+        };
+        unset: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "unset";
+            };
+        };
+        "-moz-initial": ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "-moz-initial";
+            };
+        };
+        revert: ({ avatarImagePart }: {} & import("@workday/canvas-kit-styling").StencilVarsParts<{
+            readonly avatarImage: "avatar-image";
+            readonly avatarName: "avatar-name";
+        }>) => {
+            "[data-part=\"avatar-image\"]": {
+                objectFit: "revert";
+            };
+        };
+    };
+}, {
+    readonly avatarImage: "avatar-image";
+    readonly avatarName: "avatar-name";
+}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        blue: ({ backgroundColor, color }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: string;
+            color: string;
+        };
+        amber: ({ backgroundColor, color }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: string;
+            color: string;
+        };
+        teal: ({ backgroundColor, color }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: string;
+            color: string;
+        };
+        purple: ({ backgroundColor, color }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            backgroundColor: string;
+            color: string;
+        };
+    };
+    size: {
+        extraExtraSmall: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-subtext-small";
+            fontSize: "--cnvs-sys-font-size-subtext-small";
+            letterSpacing: "--cnvs-base-letter-spacing-50";
+        };
+        extraSmall: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-subtext-medium";
+            fontSize: "--cnvs-sys-font-size-subtext-medium";
+            letterSpacing: "--cnvs-base-letter-spacing-100";
+        };
+        small: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-body-small";
+            fontSize: "--cnvs-sys-font-size-body-small";
+            letterSpacing: "--cnvs-base-letter-spacing-200";
+        };
+        medium: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-normal";
+            lineHeight: "--cnvs-sys-line-height-body-medium";
+            fontSize: "--cnvs-sys-font-size-body-medium";
+        };
+        large: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-heading-medium";
+            fontSize: "--cnvs-sys-font-size-heading-medium";
+        };
+        extraLarge: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-title-small";
+            fontSize: "--cnvs-sys-font-size-title-small";
+        };
+        extraExtraLarge: ({ size }: {
+            backgroundColor: string;
+            color: string;
+            size: string;
+        } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
+            fontFamily: "--cnvs-sys-font-family-default";
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            lineHeight: "--cnvs-sys-line-height-title-medium";
+            fontSize: "--cnvs-sys-font-size-title-medium";
+        };
+    };
+}, {}, {
+    backgroundColor: string;
+    color: string;
+    size: string;
+}, never, never>, never>;
+/**
+ * JSDoc for Avatar. Will be part of the Component API docs
+ */
+export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"div", AvatarProps>;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/commonjs/avatar/lib/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAGjC,OAAO,EAAC,eAAe,EAAgC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,WAAY,SAAQ,eAAe,EAAE,eAAe;IACnE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAqExB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,MAAM,iFAoDjB,CAAC"}

package/dist/commonjs/avatar/lib/Avatar.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = exports.avatarStencil = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const BaseAvatar_1 = require("./BaseAvatar");
+exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
+    extends: BaseAvatar_1.baseAvatarStencil,
+    parts: {
+        avatarImage: 'avatar-image',
+        avatarName: 'avatar-name',
+    },
+    base: { name: "9aw6t", styles: "box-sizing:border-box;" },
+    modifiers: {
+        imageLoaded: {
+            false: { name: "24t5xr", styles: "[data-part=\"avatar-image\"]{display:none;}" }
+        },
+        objectFit: {
+            contain: { name: "1ngso1", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },
+            cover: { name: "346tv9", styles: "[data-part=\"avatar-image\"]{object-fit:cover;}" },
+            fill: { name: "2fmgie", styles: "[data-part=\"avatar-image\"]{object-fit:fill;}" },
+            none: { name: "1u6u1", styles: "[data-part=\"avatar-image\"]{object-fit:none;}" },
+            ['scale-down']: { name: "4d1vf4", styles: "[data-part=\"avatar-image\"]{object-fit:scale-down;}" },
+            initial: { name: "crrue", styles: "[data-part=\"avatar-image\"]{object-fit:initial;}" },
+            inherit: { name: "1jucsi", styles: "[data-part=\"avatar-image\"]{object-fit:inherit;}" },
+            unset: { name: "t95mm", styles: "[data-part=\"avatar-image\"]{object-fit:unset;}" },
+            ['-moz-initial']: { name: "2eu3f2", styles: "[data-part=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['revert']: { name: "1d127p", styles: "[data-part=\"avatar-image\"]{object-fit:revert;}" }
+        }
+    }
+}, "avatar-b17e14");
+/**
+ * JSDoc for Avatar. Will be part of the Component API docs
+ */
+exports.Avatar = (0, common_1.createComponent)('div')({
+    displayName: 'Avatar',
+    Component: ({ url, name, variant, objectFit = 'cover', preferredInitials, isDecorative, size, ...elemProps }, ref, Element) => {
+        const [imageLoaded, setImageLoaded] = react_1.default.useState(false);
+        const handleImageLoad = () => {
+            if (!imageLoaded) {
+                setImageLoaded(true);
+            }
+        };
+        return ((0, jsx_runtime_1.jsxs)(BaseAvatar_1.BaseAvatar, { as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.avatarStencil)({ variant, size, imageLoaded, objectFit })), children: [url && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BaseAvatar_1.BaseAvatar.Image, { onLoad: handleImageLoad, src: url, alt: isDecorative ? undefined : name, "aria-hidden": isDecorative, ...exports.avatarStencil.parts.avatarImage }) })), name && (!url || !imageLoaded) && ((0, jsx_runtime_1.jsx)(BaseAvatar_1.BaseAvatar.Name, { name: name, preferredInitials: preferredInitials, ...exports.avatarStencil.parts.avatarName }))] }));
+    },
+});