@aws-amplify/ui-react 6.2.1 → 6.3.0

package/dist/styles.layer.css

@@ -84,6 +84,35 @@
   --amplify-components-autocomplete-menu-loading-gap: var(--amplify-space-xxxs);
   --amplify-components-autocomplete-menu-space-shared-padding-block: var(--amplify-space-xs);
   --amplify-components-autocomplete-menu-space-shared-padding-inline: var(--amplify-space-small);
+  --amplify-components-avatar-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-avatar-line-height: 1;
+  --amplify-components-avatar-font-weight: var(--amplify-font-weights-semibold);
+  --amplify-components-avatar-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-avatar-text-align: center;
+  --amplify-components-avatar-width: var(--amplify-font-sizes-xxl);
+  --amplify-components-avatar-height: var(--amplify-font-sizes-xxl);
+  --amplify-components-avatar-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-avatar-border-radius: 100%;
+  --amplify-components-avatar-border-color: var(--amplify-colors-border-primary);
+  --amplify-components-avatar-border-width: var(--amplify-border-widths-medium);
+  --amplify-components-avatar-info-color: var(--amplify-colors-font-info);
+  --amplify-components-avatar-info-background-color: var(--amplify-colors-background-info);
+  --amplify-components-avatar-info-border-color: var(--amplify-colors-border-info);
+  --amplify-components-avatar-warning-color: var(--amplify-colors-font-warning);
+  --amplify-components-avatar-warning-background-color: var(--amplify-colors-background-warning);
+  --amplify-components-avatar-warning-border-color: var(--amplify-colors-border-warning);
+  --amplify-components-avatar-success-color: var(--amplify-colors-font-success);
+  --amplify-components-avatar-success-background-color: var(--amplify-colors-background-success);
+  --amplify-components-avatar-success-border-color: var(--amplify-colors-border-success);
+  --amplify-components-avatar-error-color: var(--amplify-colors-font-error);
+  --amplify-components-avatar-error-background-color: var(--amplify-colors-background-error);
+  --amplify-components-avatar-error-border-color: var(--amplify-colors-border-error);
+  --amplify-components-avatar-small-font-size: var(--amplify-font-sizes-xs);
+  --amplify-components-avatar-small-width: var(--amplify-font-sizes-xl);
+  --amplify-components-avatar-small-height: var(--amplify-font-sizes-xl);
+  --amplify-components-avatar-large-font-size: var(--amplify-font-sizes-medium);
+  --amplify-components-avatar-large-width: var(--amplify-font-sizes-xxxl);
+  --amplify-components-avatar-large-height: var(--amplify-font-sizes-xxxl);
   --amplify-components-badge-color: var(--amplify-colors-font-primary);
   --amplify-components-badge-line-height: 1;
   --amplify-components-badge-font-weight: var(--amplify-font-weights-semibold);
@@ -3422,6 +3451,118 @@ strong.amplify-text {
   gap: var(--amplify-space-medium);
 }
 
+.amplify-avatar {
+  --avatar-color: var(--amplify-components-avatar-color);
+  --avatar-background-color: var(--amplify-components-avatar-background-color);
+  --avatar-filled-background-color: var(--amplify-components-avatar-color);
+  --avatar-filled-color: var(--amplify-components-avatar-background-color);
+  --avatar-border-color: var(--amplify-components-avatar-border-color);
+  --avatar-size: var(--amplify-components-avatar-width);
+  --amplify-components-icon-height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--avatar-color);
+  background-color: var(--avatar-background-color);
+  font-weight: var(--amplify-components-avatar-font-weight);
+  font-size: var(--amplify-components-avatar-font-size);
+  width: var(--amplify-components-avatar-width);
+  height: var(--amplify-components-avatar-height);
+  overflow: hidden;
+  border-radius: var(--amplify-components-avatar-border-radius);
+}
+.amplify-avatar--filled {
+  background-color: var(--avatar-filled-background-color);
+  color: var(--avatar-filled-color);
+}
+.amplify-avatar--outlined {
+  border-width: var(--amplify-components-avatar-border-width);
+  border-style: solid;
+  padding: var(--amplify-components-avatar-border-width);
+  border-color: var(--avatar-border-color);
+  background-color: transparent;
+  color: var(--avatar-color);
+}
+.amplify-avatar--small {
+  --avatar-size: var(--amplify-components-avatar-small-width);
+  width: var(--amplify-components-avatar-small-width);
+  height: var(--amplify-components-avatar-small-height);
+  font-size: var(--amplify-components-avatar-small-font-size);
+}
+.amplify-avatar--large {
+  --avatar-size: var(--amplify-components-avatar-large-width);
+  width: var(--amplify-components-avatar-large-width);
+  height: var(--amplify-components-avatar-large-height);
+  font-size: var(--amplify-components-avatar-large-font-size);
+}
+.amplify-avatar--warning {
+  --avatar-border-color: var(
+    --amplify-components-avatar-warning-border-color
+  );
+  --avatar-background-color: var(
+    --amplify-components-avatar-warning-background-color
+  );
+  --avatar-color: var(--amplify-components-avatar-warning-color);
+  --avatar-filled-background-color: var(
+    --amplify-components-avatar-warning-color
+  );
+  --avatar-filled-color: var(
+    --amplify-components-avatar-warning-background-color
+  );
+}
+.amplify-avatar--error {
+  --avatar-border-color: var(--amplify-components-avatar-error-border-color);
+  --avatar-background-color: var(
+    --amplify-components-avatar-error-background-color
+  );
+  --avatar-color: var(--amplify-components-avatar-error-color);
+  --avatar-filled-background-color: var(
+    --amplify-components-avatar-error-color
+  );
+  --avatar-filled-color: var(
+    --amplify-components-avatar-error-background-color
+  );
+}
+.amplify-avatar--info {
+  --avatar-border-color: var(--amplify-components-avatar-info-border-color);
+  --avatar-background-color: var(
+    --amplify-components-avatar-info-background-color
+  );
+  --avatar-color: var(--amplify-components-avatar-info-color);
+  --avatar-filled-background-color: var(
+    --amplify-components-avatar-info-color
+  );
+  --avatar-filled-color: var(
+    --amplify-components-avatar-info-background-color
+  );
+}
+.amplify-avatar--success {
+  --avatar-border-color: var(
+    --amplify-components-avatar-success-border-color
+  );
+  --avatar-background-color: var(
+    --amplify-components-avatar-success-background-color
+  );
+  --avatar-color: var(--amplify-components-avatar-success-color);
+  --avatar-filled-background-color: var(
+    --amplify-components-avatar-success-color
+  );
+  --avatar-filled-color: var(
+    --amplify-components-avatar-success-background-color
+  );
+}
+.amplify-avatar__icon {
+  display: flex;
+  font-size: calc(var(--avatar-size) * 0.6);
+}
+.amplify-avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+
 .amplify-breadcrumbs__list {
   display: flex;
   flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
@@ -6185,6 +6326,115 @@ html[dir=rtl] .amplify-field-group__inner-start {
   gap: var(--amplify-space-small);
 }
 
+.amplify-ai-conversation {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.amplify-ai-conversation__message {
+  --content-bg: transparent;
+  display: flex;
+  flex-direction: var(--flex-direction);
+  gap: var(--amplify-space-small);
+  padding: var(--amplify-space-small);
+}
+.amplify-ai-conversation__message__list {
+  display: flex;
+  flex-direction: column;
+}
+.amplify-ai-conversation__message__avatar {
+  flex-shrink: 0;
+}
+.amplify-ai-conversation__message__sender {
+  display: flex;
+  flex-direction: var(--flex-direction);
+  align-items: center;
+  height: var(--amplify-components-avatar-height);
+  gap: var(--amplify-space-small);
+}
+.amplify-ai-conversation__message__sender__username {
+  font-weight: bold;
+}
+.amplify-ai-conversation__message__sender__timestamp {
+  color: var(--amplify-colors-font-tertiary);
+  font-size: var(--amplify-font-sizes-small);
+}
+.amplify-ai-conversation__message__body {
+  display: flex;
+  flex-direction: column;
+  align-items: var(--body-align-items);
+  gap: var(--amplify-space-xs);
+}
+.amplify-ai-conversation__message__content {
+  background-color: var(--content-bg);
+  border-radius: var(--amplify-radii-medium);
+  padding: var(--content-padding);
+}
+.amplify-ai-conversation__message__actions {
+  display: flex;
+  flex-direction: row;
+}
+.amplify-ai-conversation__message--bubble {
+  --content-bg: var(--bg-color);
+  --content-padding: var(--amplify-space-xxs) var(--amplify-space-xs);
+  --flex-direction: row-reverse;
+  --body-align-items: flex-end;
+}
+.amplify-ai-conversation__message--user {
+  --bg-color: var(--amplify-colors-background-secondary);
+}
+.amplify-ai-conversation__message--assistant {
+  --bg-color: var(--amplify-colors-primary-10);
+  --flex-direction: row;
+  --body-align-items: flex-start;
+}
+.amplify-ai-conversation__form {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--amplify-space-small);
+}
+.amplify-ai-conversation__form__dropzone {
+  text-align: initial;
+  border: none;
+  padding: var(--amplify-space-xs);
+}
+.amplify-ai-conversation__attachment {
+  display: flex;
+  flex-direction: row;
+  padding-block: var(--amplify-space-xxxs);
+  padding-inline: var(--amplify-space-xs);
+  border-width: var(--amplify-border-widths-small);
+  border-style: solid;
+  border-color: var(--amplify-colors-border-secondary);
+  border-radius: var(--amplify-radii-small);
+  align-items: center;
+  gap: var(--amplify-space-xs);
+  font-size: var(--amplify-font-sizes-small);
+}
+.amplify-ai-conversation__attachment__list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--amplify-space-small);
+  padding-block-start: var(--amplify-space-small);
+}
+.amplify-ai-conversation__attachment__image {
+  width: 1rem;
+  height: 1rem;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.amplify-ai-conversation__attachment__size {
+  color: var(--amplify-colors-font-tertiary);
+}
+.amplify-ai-conversation__attachment__remove {
+  padding: var(--amplify-space-xxs);
+}
+.amplify-ai-conversation__prompt {
+  font-weight: normal;
+}
+
 .amplify-label-start {
   flex-direction: row;
 }

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

@@ -0,0 +1,6 @@
+import { ForwardRefPrimitive } from '../types';
+import { BaseAvatarProps } from './types';
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/avatar)
+ */
+export declare const Avatar: ForwardRefPrimitive<BaseAvatarProps, 'span'>;

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

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

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

@@ -0,0 +1,36 @@
+import { Sizes } from '../types/base';
+import { ElementType, PrimitiveProps, BaseViewProps } from '../types/view';
+type AvatarVariations = 'default' | 'filled' | 'outlined';
+type AvatarColorThemes = 'info' | 'error' | 'warning' | 'success';
+type AvatarSizes = Sizes;
+export interface BaseAvatarProps extends BaseViewProps {
+    /**
+     * @description
+     * If you provide a src it will be used as the avatar image
+     */
+    src?: string;
+    /**
+     * @description
+     * The alt text for the avatar image
+     */
+    alt?: string;
+    /**
+     * @description
+     * The variation property will affect how the avatar looks, whether
+     * it is outlined, filled, or the default style.
+     */
+    variation?: AvatarVariations;
+    /**
+     * @description
+     * The colorTheme property will affect the color of the avatar. Depending
+     * on the variation the colorTheme will change background, border, and text colors
+     */
+    colorTheme?: AvatarColorThemes;
+    /**
+     * @description
+     * The size property will affect the size of the avatar.
+     */
+    size?: AvatarSizes;
+}
+export type AvatarProps<Element extends ElementType = 'span'> = PrimitiveProps<BaseAvatarProps, Element>;
+export {};

package/dist/types/primitives/Icon/context/IconsContext.d.ts

@@ -5,6 +5,8 @@ type ComponentIcons<Keys extends string> = {
 export type IconsContextInterface = {
     accordion?: ComponentIcons<'more'>;
     alert?: ComponentIcons<'close' | 'info' | 'error' | 'success' | 'warning'>;
+    avatar?: ComponentIcons<'user'>;
+    aiConversation?: ComponentIcons<'attach' | 'close' | 'send' | 'remove' | 'assistant' | 'user'>;
     checkbox?: ComponentIcons<'indeterminate' | 'checked'>;
     field?: ComponentIcons<'clear'>;
     menu?: ComponentIcons<'menu'>;

package/dist/types/primitives/Icon/icons/IconAssistant.d.ts

@@ -0,0 +1,5 @@
+import { InternalIcon } from './types';
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+export declare const IconAssistant: InternalIcon;

package/dist/types/primitives/Icon/icons/IconAttach.d.ts

@@ -0,0 +1,5 @@
+import { InternalIcon } from './types';
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+export declare const IconAttach: InternalIcon;

package/dist/types/primitives/Icon/icons/IconSend.d.ts

@@ -0,0 +1,5 @@
+import { InternalIcon } from './types';
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+export declare const IconSend: InternalIcon;

package/dist/types/primitives/Icon/icons/IconUser.d.ts

@@ -0,0 +1,5 @@
+import { InternalIcon } from './types';
+/**
+ * @internal For internal Amplify UI use only. May be removed in a future release.
+ */
+export declare const IconUser: InternalIcon;

package/dist/types/primitives/Icon/icons/index.d.ts

@@ -1,4 +1,6 @@
 export * from './IconAdd';
+export * from './IconAssistant';
+export * from './IconAttach';
 export * from './IconCheckCircleOutline';
 export * from './IconCheckCircle';
 export * from './IconCheck';
@@ -14,8 +16,10 @@ export * from './IconInfo';
 export * from './IconMenu';
 export * from './IconRemove';
 export * from './IconSearch';
+export * from './IconSend';
 export * from './IconStar';
 export * from './IconUpload';
+export * from './IconUser';
 export * from './IconVisibilityOff';
 export * from './IconVisibility';
 export * from './IconWarning';

package/dist/types/primitives/TextArea/AutoresizeTextarea.d.ts

@@ -0,0 +1,3 @@
+import { ForwardRefPrimitive } from '../types/view';
+import { BaseTextAreaProps } from '../types/textArea';
+export declare const AutoresizeTextArea: ForwardRefPrimitive<BaseTextAreaProps, 'textarea'>;

package/dist/types/primitives/TextArea/index.d.ts

@@ -1 +1,2 @@
 export { TextArea } from './TextArea';
+export { AutoresizeTextArea } from './AutoresizeTextarea';

package/dist/types/primitives/TextArea/useAutoresizeTextarea.d.ts

@@ -0,0 +1 @@
+export declare const useAutoresizeTextArea: (textAreaRef: HTMLTextAreaElement | null, value?: unknown) => void;

package/dist/types/primitives/components.d.ts

@@ -1,5 +1,6 @@
 export { Alert } from './Alert';
 export { Autocomplete } from './Autocomplete';
+export { Avatar, AvatarProps } from './Avatar';
 export { Badge } from './Badge';
 export { Breadcrumbs } from './Breadcrumbs';
 export { Button } from './Button';

package/dist/types/primitives/types/scrollView.d.ts

@@ -7,6 +7,11 @@ export interface BaseScrollViewProps extends BaseViewProps {
      * make the width or height of the ScrollView component smaller than the content.
      */
     orientation?: ScrollViewOrientation;
+    /**
+     * @description
+     * Scroll to the end as the children of it change
+     */
+    autoScroll?: 'smooth' | 'instant' | 'auto';
 }
 export type ScrollViewProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseScrollViewProps, Element>;
 export {};

package/dist/types/primitives/types/textAreaField.d.ts

@@ -6,5 +6,12 @@ import { ElementType, PrimitiveProps } from './view';
 /** @deprecated For internal use only */
 export interface BaseTextAreaFieldProps extends BaseFieldProps, FlexContainerStyleProps, BaseTextAreaProps {
     inputStyles?: BaseStyleProps & TextAreaStyleProps;
+    /**
+     * @description
+     * Automatically adjusts the height of the textarea based on its content
+     * @default
+     * false
+     */
+    autoResize?: boolean;
 }
 export type TextAreaFieldProps<Element extends ElementType = 'textarea'> = PrimitiveProps<BaseTextAreaFieldProps, Element>;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.2.1";
+export declare const VERSION = "6.3.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -55,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.2.0",
-    "@aws-amplify/ui-react-core": "3.0.19",
+    "@aws-amplify/ui": "6.4.0",
+    "@aws-amplify/ui-react-core": "3.0.21",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",