@aws-amplify/ui 4.1.0 → 5.1.0

package/dist/types/theme/tokens/types/designToken.d.ts

@@ -1,21 +1,14 @@
+import { Properties } from 'csstype';
 /**
- * Helper function to test if something is a design token or not.
- * Used in the React component style props.
- *
- * @param arg - thing to test if it is a design token or not
- * @returns boolean
+ * a DesignToken can be either an object with a `value` key of `ValueType` or the `ValueType` itself
  */
-export declare function isDesignToken(arg: unknown): arg is WebDesignToken;
-/**
- *
- */
-export declare type DesignToken<ValueType = any> = {
+export declare type DesignToken<ValueType = unknown> = {
     value: ValueType;
-};
+} | ValueType;
 /**
  * A fully setup design token ready to be used in web platform.
  */
-export declare type WebDesignToken<ValueType = any> = {
+export declare type WebDesignToken<ValueType = unknown> = {
     /**
      * Name of the design token
      */
@@ -33,7 +26,11 @@ export declare type WebDesignToken<ValueType = any> = {
      * `var(--amplify-colors-font-primary)`
      */
     toString(): string;
-} & DesignToken<ValueType>;
+    /**
+     * Token `ValueType`
+     */
+    value: ValueType;
+};
 export declare type AnimationDurationValue = string;
 export declare type AnimationTimingFunctionValue = string;
 export declare type AlignItemsValue = string;
@@ -43,7 +40,7 @@ export declare type BorderColorValue = ColorValue;
 export declare type BorderCollapseValue = string;
 export declare type BorderRadiusValue = RadiusValue;
 export declare type BorderStyleValue = string;
-export declare type BorderWidthValue = SpaceValue;
+export declare type BorderWidthValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : SpaceValue : SpaceValue;
 export declare type BorderValue = string;
 export declare type BoxSizingValue = string;
 export declare type BoxShadowValue = ShadowValue;
@@ -54,22 +51,22 @@ export declare type DisplayValue = string;
 export declare type FlexDirectionValue = string;
 export declare type FlexValue = string;
 export declare type FlexWrapValue = string;
-export declare type FontSizeValue = string;
+export declare type FontSizeValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
 export declare type FontStyleValue = string;
 export declare type FontValue = string;
-export declare type FontWeightValue = string | number;
+export declare type FontWeightValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' : string | number : string | number;
 export declare type GapValue = string;
 export declare type JustifyContentValue = string;
 export declare type LineHeightValue = string | number;
 export declare type ObjectFitValue = string;
-export declare type OpacityValue = string;
+export declare type OpacityValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
 export declare type OutlineOffsetValue = string;
 export declare type OutlineWidthValue = string;
 export declare type OutlineColorValue = string;
 export declare type OutlineStyleValue = string;
 export declare type PositionValue = string;
 export declare type PointerEventsValue = string;
-export declare type RadiusValue = string;
+export declare type RadiusValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
 export declare type ShadowValue = {
     offsetX: string;
     offsetY: string;
@@ -80,9 +77,10 @@ export declare type ShadowValue = {
 export declare type StrokeFilledValue = string;
 export declare type StrokeEmptyValue = string;
 export declare type StrokeLinecapValue = string;
-export declare type SpaceValue = string;
+export declare type StrokeWidthValue = string;
+export declare type SpaceValue<Platform extends PlatformKey = unknown> = Platform extends 'react-native' ? string | number : string;
 export declare type TextAlignValue = string;
-export declare type TimeValue = string;
+export declare type TimeValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
 export declare type TransformValue = string;
 export declare type TransitionDurationValue = string;
 export declare type TransitionPropertyValue = string;
@@ -90,3 +88,146 @@ export declare type TransitionTimingFunctionValue = string;
 export declare type VerticalAlignValue = string;
 export declare type WhiteSpaceValue = string;
 export declare type WordBreakValue = string;
+/**
+ * Mapping of design token value types to style property keys
+ */
+interface TokenStandardProperties {
+    animationDuration: AnimationDurationValue;
+    animationTimingFunction: AnimationTimingFunctionValue;
+    alignItems: AlignItemsValue;
+    alignContent: AlignContentValue;
+    backgroundColor: BackgroundColorValue;
+    borderBlockEnd: BorderValue;
+    borderBlockEndColor: ColorValue;
+    borderBlockStart: BorderValue;
+    borderCollapse: BorderCollapseValue;
+    borderColor: BorderColorValue;
+    borderInlineEnd: BorderValue;
+    borderInlineStart: BorderValue;
+    borderRadius: BorderRadiusValue;
+    borderStyle: BorderStyleValue;
+    borderWidth: BorderWidthValue;
+    border: BorderValue;
+    bottom: SpaceValue;
+    boxSizing: BoxSizingValue;
+    boxShadow: BoxShadowValue;
+    captionSide: CaptionSideValue;
+    color: ColorValue;
+    cursor: CursorValue;
+    display: DisplayValue;
+    fill: DesignToken<ColorValue>;
+    flexDirection: FlexDirectionValue;
+    flex: FlexValue;
+    flexWrap: FlexWrapValue;
+    fontStyle: FontStyleValue;
+    font: FontValue;
+    fontSize: FontSizeValue;
+    fontWeight: FontWeightValue;
+    gap: GapValue;
+    height: SpaceValue;
+    justifyContent: JustifyContentValue;
+    left: SpaceValue;
+    lineHeight: LineHeightValue;
+    margin: SpaceValue;
+    marginLeft: SpaceValue;
+    marginRight: SpaceValue;
+    marginBlockStart: SpaceValue;
+    maxHeight: SpaceValue;
+    maxWidth: SpaceValue;
+    minHeight: SpaceValue;
+    minWidth: SpaceValue;
+    objectFit: ObjectFitValue;
+    objectPosition: PositionValue;
+    opacity: OpacityValue;
+    outlineOffset: OutlineOffsetValue;
+    outlineWidth: OutlineWidthValue;
+    outlineColor: OutlineColorValue;
+    outlineStyle: OutlineStyleValue;
+    padding: SpaceValue;
+    paddingBlock: SpaceValue;
+    paddingBlockEnd: SpaceValue;
+    paddingBlockStart: SpaceValue;
+    paddingBottom: SpaceValue;
+    paddingInline: SpaceValue;
+    paddingInlineEnd: SpaceValue;
+    paddingInlineStart: SpaceValue;
+    paddingLeft: SpaceValue;
+    paddingRight: SpaceValue;
+    paddingTop: SpaceValue;
+    pointerEvents: PointerEventsValue;
+    position: PositionValue;
+    right: SpaceValue;
+    strokeLinecap: StrokeLinecapValue;
+    strokeWidth: StrokeWidthValue;
+    textAlign: TextAlignValue;
+    top: SpaceValue;
+    transform: TransformValue;
+    transitionDuration: TransitionDurationValue;
+    transitionProperty: TransitionPropertyValue;
+    transitionTimingFunction: TransitionTimingFunctionValue;
+    verticalAlign: VerticalAlignValue;
+    whiteSpace: WhiteSpaceValue;
+    width: SpaceValue;
+    wordBreak: WordBreakValue;
+}
+/**
+ * Custom style tokens with non-css property names
+ */
+interface TokenCustomProperties {
+    borderBottomLeftRadius: RadiusValue;
+    borderBottomRightRadius: RadiusValue;
+    borderEndEndRadius: RadiusValue;
+    borderEndStartRadius: RadiusValue;
+    borderStartEndRadius: RadiusValue;
+    borderStartStartRadius: RadiusValue;
+    borderTopLeftRadius: RadiusValue;
+    borderTopRightRadius: RadiusValue;
+    duration: TimeValue;
+    endColor: ColorValue;
+    marginTop: SpaceValue;
+    paddingHorizontal: SpaceValue;
+    paddingVertical: SpaceValue;
+    shadow: ShadowValue;
+    size: SpaceValue;
+    startColor: ColorValue;
+    strokeEmpty: StrokeEmptyValue;
+    strokeFilled: StrokeFilledValue;
+    time: TimeValue;
+}
+interface TokenProperties extends TokenStandardProperties, TokenCustomProperties {
+}
+declare type TokenProperty = keyof TokenProperties;
+declare type Property = Extract<keyof Properties, TokenProperty> | keyof TokenCustomProperties;
+export declare type OutputVariantKey = 'default' | 'optional' | 'required' | unknown;
+/**
+ * Return interface with all types optional for custom theme input
+ */
+declare type OptionalDesignTokenProperties<Keys extends Property> = Partial<{
+    [Key in Keys]?: DesignToken<TokenProperties[Key]>;
+}>;
+/**
+ * Return interface with all types required for strict theme output
+ */
+declare type RequiredDesignTokenProperties<Keys extends TokenProperty> = {
+    [Key in Keys]: WebDesignToken<TokenProperties[Key]>;
+};
+/**
+ * Return interface with all types required for strict theme output
+ */
+declare type DefaultDesignTokenProperties<Keys extends TokenProperty> = Required<{
+    [Key in Keys]: DesignToken<TokenProperties[Key]>;
+}>;
+/**
+ * Utility for creating interfaces for components from supported CSS property keys
+ */
+export declare type DesignTokenProperties<Keys extends TokenProperty, Output extends OutputVariantKey = unknown> = Output extends 'required' ? RequiredDesignTokenProperties<Keys> : Output extends 'optional' ? OptionalDesignTokenProperties<Keys> : DefaultDesignTokenProperties<Keys>;
+export declare type PlatformKey = 'web' | 'react-native' | 'android' | 'ios' | unknown;
+declare type PropKey = string | number;
+declare type RequiredTokenValues<PropertyValueKey extends PropKey, PropertyValue, Platform extends PlatformKey = unknown> = Record<PropertyValueKey, Platform extends 'react-native' ? PropertyValue : WebDesignToken<PropertyValue>>;
+declare type OptionalTokenValues<PropertyValueKey extends PropKey, PropertyValue, Platform extends PlatformKey = unknown> = Partial<Record<PropertyValueKey, DesignToken<PropertyValue>>>;
+declare type DefaultTokenValues<PropertyValueKey extends PropKey, PropertyValue, Platform extends PlatformKey = unknown> = Required<Record<PropertyValueKey, DesignToken<PropertyValue>>>;
+/**
+ * Utility for creating token interfaces in `Theme`
+ */
+export declare type DesignTokenValues<PropertyValueKey extends PropKey, PropertyValue, Output extends OutputVariantKey = unknown, Platform extends PlatformKey = unknown> = Output extends 'required' ? RequiredTokenValues<PropertyValueKey, PropertyValue, Platform> : Output extends 'optional' ? OptionalTokenValues<PropertyValueKey, PropertyValue, Platform> : DefaultTokenValues<PropertyValueKey, PropertyValue, Platform>;
+export {};

package/dist/types/theme/types.d.ts

@@ -1,5 +1,5 @@
 import { PartialDeep } from 'type-fest';
-import { Tokens, WebTokens } from './tokens';
+import { DefaultTokens, Tokens, WebTokens } from './tokens';
 import { Breakpoints } from './breakpoints';
 export * from './tokens/types/designToken';
 export type { FontSizes } from './tokens/fontSizes';
@@ -87,7 +87,7 @@ export interface Theme {
      * multiple themes on a page.
      */
     name: string;
-    tokens?: PartialDeep<Tokens>;
+    tokens?: Tokens;
     breakpoints?: PartialDeep<Breakpoints>;
     /**
      * Overrides allow you to change design tokens in different contexts, like
@@ -98,19 +98,18 @@ export interface Theme {
     overrides?: Array<Override>;
 }
 /**
- * A BaseTheme has all tokens and breakpoints required
+ * A DefaultTheme has all tokens and breakpoints required
  */
-export interface BaseTheme extends Theme {
-    tokens: Tokens;
+export interface DefaultTheme extends Pick<Theme, 'name' | 'overrides'> {
+    tokens: DefaultTokens;
     breakpoints: Breakpoints;
-    overrides?: Array<Override>;
 }
 /**
  * WebTheme is a fully built theme that has cssText based
  * on the design tokens and all design tokens have added fields
  * to be used in Javascript/Typescript.
  */
-export interface WebTheme extends BaseTheme {
-    tokens: WebTokens;
+export interface WebTheme extends Pick<Theme, 'breakpoints' | 'name' | 'overrides'> {
     cssText: string;
+    tokens: WebTokens;
 }

package/dist/types/theme/utils.d.ts

@@ -1,8 +1,36 @@
-import { DesignToken } from './tokens/types/designToken';
+import { DesignToken, WebDesignToken } from './tokens/types/designToken';
 export declare const CSS_VARIABLE_PREFIX = "amplify";
-export declare function cssValue(token: DesignToken): any;
+export declare function cssValue(token: DesignToken<{
+    value: unknown;
+}>): unknown;
 interface NameTransformProps {
     path?: Array<string>;
 }
 export declare function cssNameTransform({ path }: NameTransformProps): string;
+/**
+ * Helper function to test if something is a design token or not.
+ * Used in the React component style props.
+ *
+ * @param value - thing to test if it is a design token or not
+ * @returns boolean
+ */
+export declare function isDesignToken(value: unknown): value is WebDesignToken;
+declare type SetupTokensProps = {
+    tokens: Record<string | number, any>;
+    path?: Array<string>;
+    setupToken: SetupToken;
+};
+export declare type SetupToken<ReturnType = any> = (args: {
+    token: BaseDesignToken;
+    path: Array<string>;
+}) => ReturnType;
+declare type BaseDesignToken = {
+    value: string | number;
+};
+/**
+ * Recursive function that will walk down the token object
+ * and perform the setupToken function on each token.
+ * Similar to what Style Dictionary does.
+ */
+export declare function setupTokens({ tokens, path, setupToken, }: SetupTokensProps): any;
 export {};

package/dist/types/types/authenticator/index.d.ts

@@ -1,5 +1,6 @@
 export * from './validator';
 export * from './user';
+export * from './utils';
 export * from './form';
 export * from './attributes';
 export * from './stateMachine';

package/dist/types/types/authenticator/stateMachine/authMachine.d.ts

@@ -16,4 +16,8 @@ export declare type AuthInterpreter = Interpreter<AuthContext, any, AuthEvent, a
  * Function type for `send` in `authMachine`
  */
 export declare type AuthMachineSend = AuthInterpreter['send'];
-export declare type HubHandler = (data: HubCapsule, service: AuthInterpreter) => void;
+/**
+ * Handles Amplify JS Auth hub events, by forwarding hub events as appropriate
+ * xstate events.
+ */
+export declare type AuthMachineHubHandler = (data: HubCapsule, service: AuthInterpreter) => Promise<void>;

package/dist/types/types/authenticator/stateMachine/event.d.ts

@@ -5,7 +5,7 @@ export declare type InvokeActorEventTypes = 'done.invoke.signInActor' | 'done.in
 /**
  * All known explicit events for xstate
  */
-export declare type AuthEventTypes = 'CHANGE' | 'BLUR' | 'FEDERATED_SIGN_IN' | 'RESEND' | 'RESET_PASSWORD' | 'SIGN_IN' | 'SIGN_OUT' | 'SIGN_UP' | 'SKIP' | 'SUBMIT' | 'INIT' | 'TOKEN_REFRESH' | InvokeActorEventTypes;
+export declare type AuthEventTypes = 'CHANGE' | 'BLUR' | 'FEDERATED_SIGN_IN' | 'RESEND' | 'RESET_PASSWORD' | 'AUTO_SIGN_IN' | 'AUTO_SIGN_IN_FAILURE' | 'SIGN_IN' | 'SIGN_OUT' | 'SIGN_UP' | 'SKIP' | 'SUBMIT' | 'INIT' | 'TOKEN_REFRESH' | InvokeActorEventTypes;
 /**
  * Data payload for auth events
  */

package/dist/types/types/authenticator/user.d.ts

@@ -30,6 +30,13 @@ export interface AmplifyUser extends CognitoUser {
  */
 export interface CognitoUserAmplify extends AmplifyUser {
 }
+/**
+ * Cognito user contact method types that have not been verified as valid
+ */
+export declare enum UnverifiedContactMethodType {
+    Email = "email",
+    PhoneNumber = "phone_number"
+}
 /**
  * Cognito user contact methods that have not been verified as valid
  */

package/dist/types/types/authenticator/utils.d.ts

@@ -0,0 +1 @@
+export declare const isUnverifiedContactMethodType: (value: string) => boolean;

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

@@ -67,6 +67,7 @@ export declare enum ComponentClassName {
     LoaderDeterminate = "amplify-loader--determinate",
     LoaderPercentageText = "amplify-loader__percentage-text",
     MenuContent = "amplify-menu-content",
+    MenuContentWrapper = "amplify-menu-content-wrapper",
     MenuItem = "amplify-menu-content__item",
     MenuTrigger = "amplify-menu-trigger",
     Pagination = "amplify-pagination",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "4.1.0",
+  "version": "5.1.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -8,8 +8,10 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/index.js"
     },
+    "./package.json": "./package.json",
     "./styles.css": "./dist/styles.css",
-    "./theme.css": "./dist/theme.css"
+    "./theme.css": "./dist/theme.css",
+    "./tokens.ts": "./dist/react-native/tokens.ts"
   },
   "browser": {
     "./styles.css": "./dist/styles.css",
@@ -28,11 +30,10 @@
   ],
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "yarn build:sd && yarn build:css && yarn build:js",
-    "build:css": "./scripts/generateCSS.js",
+    "build": "yarn build:css && yarn build:js",
+    "build:css": "ts-node --transpile-only ./scripts/generateCSS.ts",
     "build:js": "rollup --config",
     "build:dev:js": "tsup",
-    "build:sd": "ts-node --transpile-only sd.config.ts",
     "clean": "rimraf dist node_modules",
     "dev": "yarn build:sd && yarn build:css && yarn build:dev:js --watch",
     "dev:build": "yarn build:sd && yarn build:css && yarn build:dev:js",
@@ -40,12 +41,13 @@
     "test": "jest"
   },
   "dependencies": {
+    "csstype": "^3.1.1",
     "lodash": "4.17.21",
     "style-dictionary": "3.7.0",
     "tslib": "2.4.0"
   },
   "peerDependencies": {
-    "aws-amplify": "3.x.x || 4.x.x",
+    "aws-amplify": ">= 5.0.1",
     "xstate": "^4.33.6"
   },
   "peerDependenciesMeta": {
@@ -58,6 +60,7 @@
     "@types/jest": "^26.0.23",
     "@types/lodash": "^4.14.170",
     "@types/webpack-env": "^1.16.2",
+    "@typescript-eslint/parser": "^5.20.0",
     "autoprefixer": "^10.3.1",
     "fs-extra": "^10.0.0",
     "glob": "^7.1.7",

package/dist/esm/theme/tokens/types/designToken.js

@@ -1 +0,0 @@
-function e(e){return"object"==typeof e&&e.hasOwnProperty("value")}export{e as isDesignToken};

package/dist/types/theme/tokens/types/scales.d.ts

@@ -1,13 +0,0 @@
-import { DesignToken, ColorValue } from './designToken';
-export interface OrdinalScale<DesignTokenType = DesignToken<ColorValue>> {
-    primary: DesignTokenType;
-    secondary: DesignTokenType;
-    tertiary: DesignTokenType;
-    quaternary?: DesignTokenType;
-}
-export interface OrdinalVariation<DesignTokenType = DesignToken<ColorValue>> {
-    info: DesignTokenType;
-    warning: DesignTokenType;
-    error: DesignTokenType;
-    success: DesignTokenType;
-}