@procore/core-react 11.20.0-vite.1 → 11.20.0

package/.eslintrc.json

@@ -0,0 +1,47 @@
+{
+  "extends": ["prettier", "plugin:jsx-a11y/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "jsx": true,
+    "sourceType": "module",
+    "useJSXTextNode": true
+  },
+  "plugins": ["@typescript-eslint", "react-hooks", "jsx-a11y"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "jsx-a11y/alt-text": "warn",
+    "jsx-a11y/anchor-has-content": "warn",
+    "jsx-a11y/anchor-is-valid": "warn",
+    "jsx-a11y/aria-activedescendant-has-tabindex": "warn",
+    "jsx-a11y/aria-props": "warn",
+    "jsx-a11y/aria-proptypes": "warn",
+    "jsx-a11y/aria-role": "warn",
+    "jsx-a11y/aria-unsupported-elements": "warn",
+    "jsx-a11y/autocomplete-valid": "warn",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/heading-has-content": "warn",
+    "jsx-a11y/html-has-lang": "warn",
+    "jsx-a11y/iframe-has-title": "warn",
+    "jsx-a11y/img-redundant-alt": "warn",
+    "jsx-a11y/interactive-supports-focus": "warn",
+    "jsx-a11y/label-has-associated-control": "warn",
+    "jsx-a11y/media-has-caption": "warn",
+    "jsx-a11y/mouse-events-have-key-events": "warn",
+    "jsx-a11y/no-access-key": "warn",
+    "jsx-a11y/no-autofocus": "warn",
+    "jsx-a11y/no-distracting-elements": "warn",
+    "jsx-a11y/no-interactive-element-to-noninteractive-role": "warn",
+    "jsx-a11y/no-noninteractive-element-interactions": "warn",
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": "warn",
+    "jsx-a11y/no-noninteractive-tabindex": "warn",
+    "jsx-a11y/no-onchange": "warn",
+    "jsx-a11y/no-redundant-roles": "warn",
+    "jsx-a11y/no-static-element-interactions": "warn",
+    "jsx-a11y/role-has-required-aria-props": "warn",
+    "jsx-a11y/role-supports-aria-props": "warn",
+    "jsx-a11y/scope": "warn",
+    "jsx-a11y/tabindex-no-positive": "warn"
+  }
+}

package/__mocks__/@react-aria/utils.js

@@ -0,0 +1,10 @@
+const utils = jest.requireActual('@react-aria/utils')
+
+let prevId = 0
+
+module.exports = {
+  ...utils,
+  useId: jest.fn((id) => {
+    return id ?? `mocked-id-${prevId++}`
+  }),
+}

package/babel.config.js

@@ -0,0 +1,20 @@
+const packageJson = require('./package.json')
+const version = packageJson.version.split('.').join('_')
+
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-object-rest-spread',
+    [
+      'babel-plugin-styled-components',
+      {
+        fileName: false,
+        namespace: `core-${version}`,
+      },
+    ],
+  ],
+}

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { DivAttributes } from '../_utils/types';
+import { AvatarIconProps, AvatarLabelProps, AvatarPortraitProps, AvatarProps, AvatarRef, AvatarRoles, AvatarRoleType, BaseAvatarProps } from './Avatar.types';
+/**
+
+ We use avatars to visually represent our users, places, and things in the app.
+ These can be in the form of rich media or representative illustrations.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-avatar--demo)
+
+ @see [Design Guidelines](https://design.procore.com/avatar)
+
+ @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only
+
+ */
+declare function AvatarInner({ as, clickable, disabled, href, size, children, onBlur, onFocus, rel, role, target, ...props }: AvatarProps<AvatarRoleType>, ref: AvatarRef<AvatarRoleType>): JSX.Element;
+export declare const Icon: React.ForwardRefExoticComponent<DivAttributes & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Label: React.ForwardRefExoticComponent<DivAttributes & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Portrait: React.ForwardRefExoticComponent<DivAttributes & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NextAvatar: (<Role extends AvatarRoles>(props: AvatarProps<Role>) => ReturnType<typeof AvatarInner>) & {
+    Icon: React.ForwardRefExoticComponent<DivAttributes & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<DivAttributes & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
+    Portrait: React.ForwardRefExoticComponent<DivAttributes & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const Avatar: (<Role extends AvatarRoles>(props: AvatarProps<Role> | (BaseAvatarProps & {
+    ref?: React.ComponentPropsWithRef<'div'>['ref'];
+})) => ReturnType<typeof AvatarInner>) & {
+    Icon: React.ForwardRefExoticComponent<DivAttributes & AvatarIconProps & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<DivAttributes & AvatarLabelProps & React.RefAttributes<HTMLDivElement>>;
+    Portrait: React.ForwardRefExoticComponent<DivAttributes & AvatarPortraitProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dist/Avatar/Avatar.js

@@ -0,0 +1,113 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useButton } from '@react-aria/button';
+import React from 'react';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { StyledAvatarContainer, StyledAvatarOverlay, StyledIconContainer, StyledLabelContainer, StyledPortraitContainer, } from './Avatar.styles';
+/**
+
+ We use avatars to visually represent our users, places, and things in the app.
+ These can be in the form of rich media or representative illustrations.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-avatar--demo)
+
+ @see [Design Guidelines](https://design.procore.com/avatar)
+
+ @a11y Avatar's need a `aria-label` and can be enhanced with `role` for interaction. If decorative only, add `aria-hidden`. The inaccessible `clickable` prop is for UI only
+
+ */
+function AvatarInner(_a, ref) {
+    var _b, _c;
+    var as = _a.as, clickable = _a.clickable, disabled = _a.disabled, 
+    // @ts-ignore link only
+    href = _a.href, size = _a.size, children = _a.children, onBlur = _a.onBlur, onFocus = _a.onFocus, 
+    // @ts-ignore link only
+    rel = _a.rel, 
+    // @ts-ignore not on legacy
+    role = _a.role, 
+    // @ts-ignore link only
+    target = _a.target, props = __rest(_a, ["as", "clickable", "disabled", "href", "size", "children", "onBlur", "onFocus", "rel", "role", "target"]);
+    var onPress = props.onPress;
+    var buttonProps = useButton(__assign(__assign({}, props), { onBlur: onBlur, onFocus: onFocus, elementType: as === 'a' ? 'a' : 'div', href: href, isDisabled: disabled, onPress: onPress, rel: rel, target: target, type: 'button' }), ref // TODO fix
+    ).buttonProps;
+    var linkDisabled = disabled || (role === 'link' && !href);
+    var a11yProps = role === 'button'
+        ? __assign(__assign({}, buttonProps), { as: as || 'div', $clickable: !disabled }) : role === 'link'
+        ? (_b = {},
+            _b['aria-disabled'] = linkDisabled ? true : undefined,
+            _b.as = as || 'a',
+            _b.$clickable = !linkDisabled,
+            _b.href = linkDisabled ? undefined : href,
+            _b.onBlur = onBlur,
+            _b.onFocus = onFocus,
+            _b.rel = rel,
+            _b.role = 'link',
+            _b.target = target,
+            _b) : role === 'img'
+        ? (_c = {},
+            _c['aria-disabled'] = disabled ? true : undefined,
+            _c.role = 'img',
+            _c.onBlur = onBlur,
+            _c.onFocus = onFocus,
+            _c) : { onBlur: onBlur, onFocus: onFocus };
+    return (React.createElement(StyledAvatarContainer, __assign({ ref: ref, "$clickable": clickable, "$disabled": disabled, "$size": size, "data-qa": "core-avatar" }, a11yProps, props),
+        React.Children.only(children),
+        React.createElement(StyledAvatarOverlay, { "aria-hidden": true })));
+}
+var Avatar_ = React.forwardRef(AvatarInner);
+var NextAvatar_ = React.forwardRef(AvatarInner);
+export var Icon = React.forwardRef(function Icon(_a, ref) {
+    var icon = _a.icon, props = __rest(_a, ["icon"]);
+    return (React.createElement(StyledIconContainer, __assign({ ref: ref }, props), icon));
+});
+export var Label = React.forwardRef(function Label(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    // Breaking change: Option to make aria-hidden since parent requires a label.
+    // Can add in major once labelling is enforced
+    return (React.createElement(StyledLabelContainer, __assign({ ref: ref }, props), children));
+});
+export var Portrait = React.forwardRef(function Portrait(_a, ref) {
+    var imageUrl = _a.imageUrl, props = __rest(_a, ["imageUrl"]);
+    return (React.createElement(StyledPortraitContainer, __assign({ ref: ref, "$imageUrl": imageUrl }, props),
+        React.createElement(StyledAvatarOverlay, null)));
+});
+// @ts-ignore
+Avatar_.displayName = 'Avatar';
+Icon.displayName = 'Avatar.Icon';
+Label.displayName = 'Avatar.Label';
+Portrait.displayName = 'Avatar.Portrait';
+// @ts-ignore
+NextAvatar_.displayName = 'Avatar';
+export var NextAvatar = addSubcomponents({
+    Icon: Icon,
+    Label: Label,
+    Portrait: Portrait,
+}, NextAvatar_);
+export var Avatar = addSubcomponents({
+    Icon: Icon,
+    Label: Label,
+    Portrait: Portrait,
+}, Avatar_);
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}

package/dist/Avatar/Avatar.styles.d.ts

@@ -0,0 +1,14 @@
+import { BaseAvatarProps } from './Avatar.types';
+interface StyledAvatarProps {
+    $clickable: BaseAvatarProps['clickable'];
+    $disabled: BaseAvatarProps['disabled'];
+    $size: BaseAvatarProps['size'];
+}
+export declare const StyledAvatarOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPortraitContainer: import("styled-components").StyledComponent<"div", any, {
+    $imageUrl: string;
+}, never>;
+export declare const StyledAvatarContainer: import("styled-components").StyledComponent<"div", any, StyledAvatarProps, never>;
+export {};

package/dist/Avatar/Avatar.styles.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { colors } from '../_styles/colors';
+import { getGapOutlineFocus } from '../_styles/mixins';
+var activeOverlayOpacity = 0.3;
+var containerSize = { xl: 96, lg: 40, md: 32 };
+var fontSize = { xl: 40, lg: 14, md: 14 };
+var fontWeights = { xl: 700, lg: 600, md: 600 };
+var iconSize = { xl: 48, lg: 24, md: 16 };
+export var StyledAvatarOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 100%;\n  opacity: 0;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 100%;\n  opacity: 0;\n"])));
+export var StyledIconContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-flex;\n"], ["\n  display: inline-flex;\n"])));
+export var StyledLabelContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  text-transform: uppercase;\n"], ["\n  text-transform: uppercase;\n"])));
+export var StyledPortraitContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  width: 100%;\n  ", "\n"], ["\n  background-color: ", ";\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  height: 100%;\n  width: 100%;\n  ", "\n"])), colors.white, function (_a) {
+    var $imageUrl = _a.$imageUrl;
+    return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background-image: url(", ");\n    "], ["\n      background-image: url(", ");\n    "])), $imageUrl);
+});
+export var StyledAvatarContainer = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100%;\n  overflow: hidden;\n  position: relative;\n  cursor: default;\n  color: ", ";\n  background-color: ", ";\n  text-decoration: none;\n\n  a:has(> &) {\n    text-decoration: none;\n  }\n\n  &:focus {\n    ", "\n  }\n  // For safety, separate rule block with 'has' for supported browsers\n  // this supports any anchor directly wrapping an Avatar.\n  // 'outline' works better on display inline-block and inline-flex,\n  // elements, unfortunately anchors and inline by default.\n  a:focus:has(> &) {\n    ", "\n    border-radius: 100%;\n  }\n\n  ", "\n\n  ", ";\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100%;\n  overflow: hidden;\n  position: relative;\n  cursor: default;\n  color: ", ";\n  background-color: ", ";\n  text-decoration: none;\n\n  a:has(> &) {\n    text-decoration: none;\n  }\n\n  &:focus {\n    ", "\n  }\n  // For safety, separate rule block with 'has' for supported browsers\n  // this supports any anchor directly wrapping an Avatar.\n  // 'outline' works better on display inline-block and inline-flex,\n  // elements, unfortunately anchors and inline by default.\n  a:focus:has(> &) {\n    ", "\n    border-radius: 100%;\n  }\n\n  ", "\n\n  ", ";\n"])), colors.white, colors.gray30, getGapOutlineFocus, getGapOutlineFocus, function (_a) {
+    var _b = _a.$size, $size = _b === void 0 ? 'md' : _b;
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-size: ", "px;\n    font-weight: ", ";\n    height: ", "px;\n    width: ", "px;\n    min-height: ", "px;\n    min-width: ", "px;\n\n    ", " {\n      svg {\n        height: ", "px;\n        width: ", "px;\n      }\n    }\n  "], ["\n    font-size: ", "px;\n    font-weight: ", ";\n    height: ", "px;\n    width: ", "px;\n    min-height: ", "px;\n    min-width: ", "px;\n\n    ", " {\n      svg {\n        height: ", "px;\n        width: ", "px;\n      }\n    }\n  "])), fontSize[$size], fontWeights[$size], containerSize[$size], containerSize[$size], containerSize[$size], containerSize[$size], StyledIconContainer, iconSize[$size], iconSize[$size]);
+}, function (_a) {
+    var $disabled = _a.$disabled, $clickable = _a.$clickable;
+    if (!$disabled && $clickable) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        cursor: pointer;\n\n        &:hover {\n          ", " {\n            opacity: ", ";\n          }\n        }\n\n        ", " {\n          background-color: ", ";\n        }\n      "], ["\n        cursor: pointer;\n\n        &:hover {\n          ", " {\n            opacity: ", ";\n          }\n        }\n\n        ", " {\n          background-color: ", ";\n        }\n      "])), StyledAvatarOverlay, activeOverlayOpacity, StyledAvatarOverlay, colors.black);
+    }
+    if ($disabled && !$clickable) {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        background-color: ", ";\n\n        ", " {\n          background-color: ", ";\n          opacity: ", ";\n        }\n      "], ["\n        background-color: ", ";\n\n        ", " {\n          background-color: ", ";\n          opacity: ", ";\n        }\n      "])), colors.gray85, StyledAvatarOverlay, colors.white, activeOverlayOpacity);
+    }
+    if ($disabled && $clickable) {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        cursor: pointer;\n        background-color: ", ";\n\n        &:hover {\n          ", " {\n            background-color: ", ";\n            opacity: ", ";\n          }\n        }\n\n        ", " {\n          background-color: ", ";\n          opacity: ", ";\n        }\n      "], ["\n        cursor: pointer;\n        background-color: ", ";\n\n        &:hover {\n          ", " {\n            background-color: ", ";\n            opacity: ", ";\n          }\n        }\n\n        ", " {\n          background-color: ", ";\n          opacity: ", ";\n        }\n      "])), colors.gray85, StyledAvatarOverlay, colors.black, activeOverlayOpacity, StyledAvatarOverlay, colors.white, activeOverlayOpacity);
+    }
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+//# sourceMappingURL=Avatar.styles.js.map

package/dist/Avatar/Avatar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.styles.ts"],"names":[],"mappings":"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"}

package/dist/Avatar/Avatar.types.d.ts

@@ -0,0 +1,79 @@
+import { AriaButtonProps } from '@react-aria/button';
+import React from 'react';
+import { Polymorphic } from '../_utils/polymorphic';
+import { AriaLabelled, Props, Size } from '../_utils/types';
+export declare type AvatarSize = Extract<Size, 'md' | 'lg' | 'xl'>;
+export declare type AvatarRoleType = 'link' | 'button' | 'img';
+export interface AvatarPolyMap extends Record<AvatarRoleType, React.ElementType> {
+    button: 'div';
+    img: 'div';
+    link: 'a';
+}
+export declare type AvatarRoles = AvatarRoleType | undefined;
+export declare type AvatarRef<Role extends AvatarRoles = undefined> = Role extends AvatarRoleType ? Polymorphic.Ref<AvatarPolyMap, Role> : React.ComponentPropsWithRef<'div'>['ref'];
+export interface BaseAvatarProps extends Props {
+    /**
+     * Sets the Avatar's clickable UI state. For accessibility, see `role`
+     * @ally This prop is around UI and has 0 UX or JS for interaction, try `role` instead.
+     * @defaultValue false
+     * @deprecated Reviewing for removal from system, prefer accessible `role` for interactive UI.
+     * @deprecatedSince TBD
+     * @since 10.19.0
+     */
+    clickable?: boolean;
+    /**
+     * Sets the Avatar's disabled state
+     *
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Sets the Avatar's size
+     *
+     * @defaultValue md
+     *
+     * @deprecated
+     *
+     * Size "xl" has been deprecated and will be removed in a future version.
+     * Please use "lg" instead of "xl".
+     *
+     * **Before**
+     *
+     * `<Avatar size="xl" />`
+     *
+     * **After**
+     *
+     * `<Avatar size="lg" />`
+     *
+     * @deprecatedSince 10.20.0
+     * @since 10.19.0
+     */
+    size?: AvatarSize;
+}
+declare type DecorativeAvatarProps<Role extends AvatarRoles = undefined> = {
+    'aria-hidden': true;
+    role?: Role;
+} & BaseAvatarProps;
+export declare type AvatarProps<Role extends AvatarRoles = undefined> = Role extends 'link' ? Polymorphic.ComponentPropsWithRef<AvatarPolyMap, 'link', 'href', AriaLabelled<BaseAvatarProps>> : Role extends 'button' ? Polymorphic.ComponentPropsWithRef<AvatarPolyMap, 'button', never, AriaLabelled<{
+    onPress: AriaButtonProps['onPress'];
+} & BaseAvatarProps>> : Role extends 'img' ? Polymorphic.ComponentPropsWithRef<AvatarPolyMap, 'img', never, AriaLabelled<BaseAvatarProps>> : DecorativeAvatarProps & {
+    ref?: AvatarRef<undefined>;
+};
+export interface AvatarIconProps extends Props {
+    /**
+     * The icon to display
+     *
+     * @since 10.19.0
+     */
+    icon: React.ReactNode;
+}
+export interface AvatarPortraitProps extends Props {
+    /**
+     * The Avatar rich media url
+     * @since 10.19.0
+     */
+    imageUrl: string;
+}
+export interface AvatarLabelProps extends Props {
+}
+export {};

package/dist/Avatar/Avatar.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Avatar.types.js.map

package/dist/Avatar/Avatar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.types.ts"],"names":[],"mappings":""}

package/dist/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+export { AvatarIconProps, AvatarPortraitProps, AvatarProps, } from './Avatar.types';

package/dist/Avatar/index.js

@@ -0,0 +1,2 @@
+export { Avatar } from './Avatar';
+//# sourceMappingURL=index.js.map

package/dist/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA"}

package/dist/AvatarStack/AvatarStack.constants.d.ts

@@ -0,0 +1,5 @@
+import { Color } from '../_styles/colors';
+export declare const visibleItemsCap = 5;
+export declare const foldedItemsCap = 4;
+export declare const restCountThreshold = 99;
+export declare const colorsOrder: Color[];

package/dist/AvatarStack/AvatarStack.constants.js

@@ -0,0 +1,5 @@
+export var visibleItemsCap = 5;
+export var foldedItemsCap = 4;
+export var restCountThreshold = 99;
+export var colorsOrder = ['blue40', 'purple40', 'orange40', 'gray40'];
+//# sourceMappingURL=AvatarStack.constants.js.map

package/dist/AvatarStack/AvatarStack.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.constants.js","sourceRoot":"","sources":["../../src/AvatarStack/AvatarStack.constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,eAAe,GAAG,CAAC,CAAA;AAEhC,MAAM,CAAC,IAAM,cAAc,GAAG,CAAC,CAAA;AAE/B,MAAM,CAAC,IAAM,kBAAkB,GAAG,EAAE,CAAA;AAEpC,MAAM,CAAC,IAAM,WAAW,GAAY,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAA"}

package/dist/AvatarStack/AvatarStack.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Color } from '../_styles/colors';
+import { AvatarStackItem, AvatarStackItemId, AvatarStackItemType, AvatarStackProps, AvatarStackSize, FoldedAvatarStackProps, ViewAllModalProps } from './AvatarStack.types';
+export declare function getOverflowValues<Item extends AvatarStackItem>(items: Item[]): {
+    visibleItems: Item[];
+    foldedItems: Item[];
+    restCountLabel: string | null;
+    isViewAllNeeded: boolean;
+};
+export declare function getIcon(type: AvatarStackItemType, size: 'md' | 'sm'): JSX.Element | null;
+export declare function getAvatarIcon(type: AvatarStackItemType, size: AvatarStackSize): JSX.Element | null;
+export declare function getColorOrder(avatarItems: AvatarStackItem[]): Map<AvatarStackItemId, Color>;
+export declare function AvatarStackContactItem({ id, type, imageUrl, initials, inactive, name, linkUrl, description, }: AvatarStackItem): JSX.Element;
+export declare function AvatarContent({ imageUrl, initials, type, size, }: {
+    imageUrl?: AvatarStackItem['imageUrl'];
+    initials: AvatarStackItem['initials'];
+    type: AvatarStackItem['type'];
+    size: AvatarStackSize;
+}): JSX.Element | null;
+export declare function FoldedAvatarStack<Item extends AvatarStackItem>({ items, onClickViewAll, size, restCountLabel, isViewAllNeeded, title, }: FoldedAvatarStackProps<Item>): JSX.Element;
+export declare function ViewAllModal<Item extends AvatarStackItem>({ isOpen, onClose, title, items, }: ViewAllModalProps<Item>): JSX.Element;
+export declare function defaultInitials<Item extends AvatarStackItem>(item: Item): string;
+export declare function defaultGetImageUrl<Item extends AvatarStackItem>(item: Item): string;
+export declare function getTransformedItems<Item extends AvatarStackItem>({ items, getInitials, getImageUrl, }: {
+    items: Item[];
+    getInitials: AvatarStackProps<Item>['getInitials'];
+    getImageUrl: AvatarStackProps<Item>['getImageUrl'];
+}): (Item & {
+    initials: string;
+    imageUrl: string;
+})[];
+declare const _AvatarStack: <Item extends AvatarStackItem>({ items: _items, title, size, getInitials, getImageUrl, ...props }: AvatarStackProps<Item>, ref: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
+/**
+
+ We use avatars to visually represent our users, places, and things in the app.
+ These can be in the form of rich media or representative illustrations.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-avatarstack--demo)
+
+ @see [Design Guidelines](https://design.procore.com/avatar-stack)
+ */
+export declare const AvatarStack: <Item extends AvatarStackItem>(props: AvatarStackProps<Item> & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof _AvatarStack>;
+export {};