@aws-amplify/ui 6.0.17 → 6.2.0

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

@@ -0,0 +1,52 @@
+import type * as CSS from 'csstype';
+import { DesignToken } from '../types';
+import { WebTokens } from '../tokens';
+import { Breakpoints } from '../breakpoints';
+export type ColorTheme = 'info' | 'warning' | 'success' | 'error';
+export type Size = 'small' | 'large';
+export type Orientation = 'horizontal' | 'vertical';
+export type FieldControlModifiers = Size | 'error' | 'quiet';
+export type CSSProperties = {
+    [Key in keyof CSS.Properties]: DesignToken<CSS.Properties[Key] | (string & {})> | CSS.Properties[Key];
+};
+export type Selectors = {
+    [key in CSS.HtmlAttributes | CSS.Pseudos]?: CSSProperties;
+};
+export interface ComponentStyles extends CSSProperties, Selectors {
+    _vars?: Record<string, DesignToken | string>;
+}
+export type Modifiers<Keys extends string = string, Required extends boolean = false> = Required extends true ? {
+    _modifiers: {
+        [key in Keys]: ComponentStyles;
+    };
+} : {
+    _modifiers?: {
+        [key in Keys]?: ComponentStyles;
+    };
+};
+export type Elements<Properties extends Record<string, ComponentStyles & {
+    _modifiers?: Record<string, ComponentStyles>;
+}>, Required extends boolean = false> = Required extends true ? {
+    _element: Properties;
+} : {
+    _element?: Properties;
+};
+export interface BaseTheme extends ComponentStyles {
+    _modifiers?: Record<string, ComponentStyles>;
+    _element?: Record<string, ComponentStyles & {
+        _modifiers?: Record<string, ComponentStyles>;
+    }>;
+}
+export type ComponentTheme<ThemeType extends BaseTheme = BaseTheme, TokensType extends WebTokens = WebTokens> = ThemeType | ((tokens: TokensType) => ThemeType);
+export type ComponentThemeOverride<ThemeType> = {
+    theme: ThemeType;
+    colorMode?: 'light' | 'dark';
+    breakpoint?: keyof Breakpoints['values'];
+    mediaQuery?: string;
+    selector?: string;
+};
+export type BaseComponentTheme<ThemeType extends BaseTheme = BaseTheme, NameType extends string = string, TokensType extends WebTokens = WebTokens> = {
+    name: NameType;
+    theme: ComponentTheme<ThemeType, TokensType>;
+    overrides?: Array<ComponentThemeOverride<ComponentTheme<ThemeType, TokensType>>>;
+};

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

@@ -0,0 +1,6 @@
+import { WebTokens } from '../tokens';
+import { Animations } from '../types';
+export declare function createAnimationCSS({ animations, tokens, }: {
+    animations: Animations;
+    tokens: WebTokens;
+}): string;

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

@@ -0,0 +1,16 @@
+import { ColorValues, ScaleKey } from '../tokens/colors';
+/**
+ * Takes a set of keys and a color name and returns an object of design tokens,
+ * used for applying a primary color at the theme level to our tokens.
+ *
+ * createColorPalette({keys: ['10','20',...], value: 'red'})
+ * returns {
+ *   10: { value: '{colors.red.10.value}' },
+ *   20: { value: '{colors.red.20.value}' },
+ *   ...
+ * }
+ */
+export declare function createColorPalette<ColorType extends ColorValues<ScaleKey, 'default'> = ColorValues<ScaleKey, 'default'>>({ keys, value }: {
+    keys: string[];
+    value: string;
+}): ColorType;

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

@@ -0,0 +1,7 @@
+import { DefaultTheme, WebTheme } from '../types';
+import { ComponentsTheme } from '../components';
+/**
+ * This will take a component theme and create the appropriate CSS for it.
+ *
+ */
+export declare function createComponentCSS(themeName: string, components: Array<ComponentsTheme>, tokens: WebTheme['tokens'], breakpoints: DefaultTheme['breakpoints']): string;

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

@@ -0,0 +1,25 @@
+import { ClassNamesArgs } from '../../utils';
+import { ComponentThemeFromName } from '../components';
+import { BaseTheme } from '../components/utils';
+type ElementNames<T extends unknown> = T extends {
+    _element?: any;
+} ? keyof Required<T['_element']> : never;
+type ModifierNames<T extends unknown> = T extends {
+    _modifiers?: any;
+} ? Arrayify<keyof Required<T['_modifiers']> | {
+    [key in keyof Required<T['_modifiers']>]?: boolean | null | undefined;
+} | undefined> : never;
+type Arrayify<T> = T | T[];
+export type ClassNameArgs<T extends BaseTheme> = {
+    _element?: ElementNames<Required<T>> | {
+        [Key in ElementNames<Required<T>>]?: ModifierNames<Required<Required<Required<T>['_element']>[Key]>>;
+    };
+    _modifiers?: ModifierNames<Required<T>>;
+};
+export type ClassNameFunction<T extends BaseTheme = BaseTheme, NameType extends string = string> = (props?: ClassNameArgs<UnwrapTheme<ComponentThemeFromName<NameType, T>>>, extraClassnames?: ClassNamesArgs) => string;
+type UnwrapTheme<ThemeType extends BaseTheme = BaseTheme> = ThemeType extends (...args: any) => any ? ReturnType<ThemeType> : ThemeType;
+export declare function createComponentClasses<ThemeType extends BaseTheme, NameType extends string = string>({ name, prefix }: {
+    name: NameType;
+    prefix?: string;
+}): ClassNameFunction<ThemeType, NameType>;
+export {};

package/dist/types/theme/{createTheme.d.ts → createTheme/createTheme.d.ts}

@@ -1,4 +1,5 @@
-import { Theme, DefaultTheme, WebTheme } from './types';
+import { Theme, DefaultTheme, WebTheme } from '../types';
+import { WebTokens } from '../tokens';
 /**
  * This will be used like `const myTheme = createTheme({})`
  * `myTheme` can then be passed to a Provider or the generated CSS
@@ -6,4 +7,4 @@ import { Theme, DefaultTheme, WebTheme } from './types';
  * const myTheme = createTheme({})
  * const myOtherTheme = createTheme({}, myTheme);
  */
-export declare function createTheme(theme?: Theme | WebTheme, DefaultTheme?: DefaultTheme | WebTheme): WebTheme;
+export declare function createTheme<TokensType extends WebTokens = WebTokens>(theme?: Theme<TokensType> | WebTheme, DefaultTheme?: DefaultTheme | WebTheme): WebTheme;

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

@@ -0,0 +1,54 @@
+import { ComponentThemeFromName, ComponentsTheme } from '../components';
+import { BaseTheme, ComponentTheme, ComponentThemeOverride } from '../components/utils';
+import { WebTokens } from '../tokens';
+import { ClassNameFunction } from './createComponentClasses';
+type CreateComponentThemeProps<TokensType extends WebTokens = WebTokens, ThemeType extends BaseTheme = BaseTheme, NameType extends string = string, OverridesType extends BaseTheme = BaseTheme> = {
+    name: NameType;
+    theme?: ComponentTheme<ThemeType, TokensType>;
+    overrides?: ComponentThemeOverride<ComponentTheme<OverridesType, TokensType>>[];
+} & ComponentsTheme<TokensType>;
+/**
+ * Use this to create the theme of a component. You can use this
+ * to both completely customize built-in components and
+ * build your own components!
+ *
+ * @experimental
+ *
+ * ```ts
+ * // built-in component styling
+ * const alertTheme = defineComponentTheme({
+ *   name: 'alert',
+ *   theme: (tokens) => {
+ *     return {
+ *       padding: tokens.space.large
+ *     }
+ *   }
+ * });
+ *
+ * // custom component styling
+ * const avatarTheme = defineComponentTheme({
+ *   name: 'avatar',
+ *   theme: (tokens) => {
+ *     return {
+ *       padding: tokens.space.large
+ *     }
+ *   }
+ * })
+ *
+ * const theme = createTheme({
+ *   name: 'my-theme',
+ *   components: [alertTheme, avatarTheme]
+ * })
+ * ```
+ *
+ * @param {Object} params
+ * @param {string} params.name  - The name of the component. Use a built-in component name like button to theme buttons.
+ * @returns
+ */
+export declare function defineComponentTheme<ThemeType extends BaseTheme = BaseTheme, TokensType extends WebTokens = WebTokens, NameType extends string = string>({ name, theme, overrides, }: CreateComponentThemeProps<TokensType, ThemeType, NameType>): {
+    className: ClassNameFunction<ComponentThemeFromName<NameType, ThemeType>>;
+    theme: typeof theme;
+    name: string;
+    overrides?: typeof overrides;
+};
+export {};

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

@@ -0,0 +1,4 @@
+export { createTheme } from './createTheme';
+export { defineComponentTheme } from './defineComponentTheme';
+export { cssNameTransform, setupTokens, SetupToken, isDesignToken, } from './utils';
+export { createComponentClasses, ClassNameArgs, } from './createComponentClasses';

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

@@ -0,0 +1,92 @@
+import { WebDesignToken } from '../types';
+import { ShadowValue } from '../tokens/types/designToken';
+import { CSSProperties } from '../components/utils';
+export declare const CSS_VARIABLE_PREFIX = "amplify";
+interface NameTransformProps {
+    path?: Array<string>;
+}
+/**
+ * This will take an object like:
+ * {paddingTop:'20px',color:'{colors.font.primary}'}
+ * and turn it into a CSS string:
+ * `padding-top:20px; color: var(--colors-font-primary);`
+ */
+export declare function propsToString(props: CSSProperties): string;
+export declare function cssNameTransform({ path }: NameTransformProps): string;
+type BaseDesignToken = {
+    value: string | number;
+};
+/**
+ * Will take a design token in a theme and return its value as CSS
+ *
+ * @param token
+ * @returns
+ */
+export declare function cssValue(token: BaseDesignToken): string | number;
+/**
+ * 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;
+export declare function isShadowTokenObject(value: unknown): value is ShadowValue & object;
+/**
+ * Function that sees if a string contains a design token reference
+ * and if so will turn that into a CSS variable.
+ *
+ * @param {string} value
+ * @returns string
+ */
+export declare function referenceValue(value?: string): string;
+export type SetupToken<ReturnType = any> = (args: {
+    token: BaseDesignToken;
+    path: Array<string>;
+}) => ReturnType;
+/**
+ * This will take a design token and add some data to it for it
+ * to be used in JS/CSS. It will create its CSS var name and update
+ * the value to use a CSS var if it is a reference. It will also
+ * add a `.toString()` method to make it easier to use in JS.
+ *
+ * We should see if there is a way to share this logic with style dictionary...
+ */
+export declare const setupToken: SetupToken<WebDesignToken>;
+type SetupTokensProps = {
+    tokens?: Record<string | number, any>;
+    path?: Array<string>;
+    setupToken: SetupToken;
+};
+/**
+ * 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;
+/**
+ * Takes an plain javascript object and will make a flat array of all the leaf nodes.
+ * A leaf node in this context has a 'value' property. Potentially refactor this to
+ * be more generic.
+ * @private
+ * @param  {Object} properties - The plain object you want flattened into an array.
+ * @param  {Array} [to_ret=[]] - Properties array. This function is recursive therefore this is what gets passed along.
+ * @return {Array}
+ */
+export declare function flattenProperties(properties: object, to_ret?: object[]): object[];
+/**
+ * Performs an deep extend on the objects, from right to left.
+ * @private
+ * @param {Object[]} objects - An array of JS objects
+ * @param {Function} collision - A function to be called when a merge collision happens.
+ * @param {string[]} path - (for internal use) An array of strings which is the current path down the object when this is called recursively.
+ * @returns {Object}
+ */
+export declare function deepExtend<T>(objects?: (object | undefined)[], collision?: Function, path?: string[]): T;
+/**
+ * Checks if the value uses a value reference.
+ * @param {string} value
+ * @returns {boolean} - True, if the value uses a value reference
+ */
+export declare function usesReference(value: any): boolean;
+export {};

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

@@ -1,6 +1,5 @@
-export { createTheme } from './createTheme';
+export { createTheme, defineComponentTheme, createComponentClasses, cssNameTransform, isDesignToken, setupTokens, SetupToken, } from './createTheme';
 export { defaultTheme } from './defaultTheme';
 export { defaultDarkModeOverride, reactNativeDarkTokens, } from './defaultDarkModeOverride';
 export { reactNativeTokens, ReactNativeTokens } from './tokens';
 export * from './types';
-export { cssNameTransform, isDesignToken, setupTokens, SetupToken, } from './utils';

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

@@ -1,6 +1,8 @@
 import { PartialDeep } from '../types';
 import { DefaultTokens, Tokens, WebTokens } from './tokens';
 import { Breakpoints } from './breakpoints';
+import { ComponentsTheme } from './components';
+import { CSSProperties } from './components/utils';
 export * from './tokens/types/designToken';
 export type { BorderWidths } from './tokens/borderWidths';
 export type { FontSizes } from './tokens/fontSizes';
@@ -9,6 +11,7 @@ export type { LineHeights } from './tokens/lineHeights';
 export type { Radii } from './tokens/radii';
 export type { Shadows } from './tokens/shadows';
 export type { SpaceSizes } from './tokens/space';
+export { Tokens };
 /**
  * An override is a set of tokens that override others
  * in certain contexts. On Android, these are like resource
@@ -82,7 +85,7 @@ export interface ColorModeOverride extends BaseOverride {
  * They can define any tokens or breakpoints they need, but they don't need a
  * complete theme with all tokens.
  */
-export interface Theme {
+export interface Theme<TokensType extends WebTokens = WebTokens> {
     /**
      * The name of the theme. This is used to create scoped CSS to allow for
      * multiple themes on a page.
@@ -99,22 +102,36 @@ export interface Theme {
      * and a generic selector override.
      */
     overrides?: Array<Override>;
+    components?: Array<ComponentsTheme<TokensType>>;
+    animations?: Animations;
+}
+export interface Animations {
+    [key: string]: {
+        [key in 'to' | 'from' | `${string}%`]?: CSSProperties | ((tokens: WebTokens) => CSSProperties);
+    };
 }
 /**
  * A DefaultTheme has all tokens and breakpoints required
  */
-export interface DefaultTheme extends Pick<Theme, 'name' | 'overrides' | 'primaryColor' | 'secondaryColor'> {
+export interface DefaultTheme extends Pick<Theme, 'name' | 'overrides' | 'primaryColor' | 'secondaryColor' | 'components' | 'animations'> {
     tokens: DefaultTokens;
     breakpoints: Breakpoints;
 }
+interface ContainerPropsArgs {
+    colorMode?: ColorMode | 'system';
+}
 /**
  * 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 Pick<DefaultTheme, 'breakpoints' | 'name' | 'overrides'> {
+export interface WebTheme extends Pick<DefaultTheme, 'breakpoints' | 'name' | 'overrides' | 'components' | 'animations'> {
     primaryColor?: string;
     secondaryColor?: string;
     cssText: string;
+    containerProps: (containerProps?: ContainerPropsArgs) => {
+        'data-amplify-theme'?: string;
+        'data-amplify-color-mode'?: string;
+    };
     tokens: WebTokens;
 }

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

@@ -1,4 +1,4 @@
 type ClassNamesInput = string | number | boolean | undefined | null | Record<string, unknown> | ClassNamesArgs;
-type ClassNamesArgs = Array<ClassNamesInput>;
+export type ClassNamesArgs = Array<ClassNamesInput>;
 export declare const classNames: (...args: ClassNamesArgs) => string;
 export {};

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

@@ -0,0 +1,11 @@
+/**
+ * Format bytes as human-readable text.
+ *
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ *
+ * @return Formatted string.
+ */
+export declare function humanFileSize(bytes: number, si?: boolean, dp?: number): string;

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

@@ -1,3 +1,4 @@
 export { setUserAgent, SetUserAgentOptions } from './setUserAgent';
 export * from './utils';
-export { classNames } from './classNames';
+export { classNames, ClassNamesArgs } from './classNames';
+export { humanFileSize } from './humanFileSize';

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

@@ -145,3 +145,11 @@ export declare function noop(..._: any[]): void;
  * @param events string values related to group
  */
 export declare function groupLog(groupName: string, ...events: any[]): void;
+/**
+ * Splits an object into 2 objects based on a predicate
+ *
+ * @param {object} obj an object to split into two
+ * @param {function} predicate function to determin where an element should go
+ * @returns
+ */
+export declare function splitObject(obj: Record<string, unknown>, predicate: (key: string) => boolean): readonly [Record<string, unknown>, Record<string, unknown>];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "6.0.17",
+  "version": "6.2.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -46,7 +46,6 @@
   "dependencies": {
     "csstype": "^3.1.1",
     "lodash": "4.17.21",
-    "style-dictionary": "3.9.1",
     "tslib": "^2.5.2"
   },
   "peerDependencies": {
@@ -64,7 +63,8 @@
     "autoprefixer": "^10.3.1",
     "glob": "^10.3.10",
     "postcss": "^8.4.31",
-    "sass": "^1.35.2"
+    "sass": "^1.35.2",
+    "style-dictionary": "3.9.1"
   },
   "sideEffects": [
     "dist/**/*.css"

package/dist/esm/theme/utils.mjs

@@ -1,81 +0,0 @@
-import kebabCase from 'lodash/kebabCase.js';
-import usesReference from 'style-dictionary/lib/utils/references/usesReference.js';
-import '@aws-amplify/core/internals/utils';
-import '../utils/setUserAgent/constants.mjs';
-import { isObject, has, isString } from '../utils/utils.mjs';
-
-const CSS_VARIABLE_PREFIX = 'amplify';
-// Important: these properties should not be altered in
-// order to maintain the expected order of the CSS `box-shadow` property
-const SHADOW_PROPERTIES = [
-    'offsetX',
-    'offsetY',
-    'blurRadius',
-    'spreadRadius',
-    'color',
-];
-function referenceValue(value) {
-    if (!value)
-        return '';
-    if (usesReference(value)) {
-        const path = value.replace(/\{|\}/g, '').replace('.value', '').split('.');
-        return `var(--${cssNameTransform({ path })})`;
-    }
-    return value;
-}
-function cssValue(token) {
-    const { value } = token;
-    if (isString(value)) {
-        return referenceValue(value);
-    }
-    if (isShadowTokenObject(value)) {
-        return SHADOW_PROPERTIES.map((property) => {
-            return referenceValue(
-            // lookup property against `token` first for custom non-nested value, then lookup
-            // property against `value` for design token value
-            isShadowTokenObject(token) ? token[property] : value[property]);
-        }).join(' ');
-    }
-    return value;
-}
-function cssNameTransform({ path = [] }) {
-    return `${kebabCase([CSS_VARIABLE_PREFIX, ...path].join(' '))}`;
-}
-/**
- * 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
- */
-function isDesignToken(value) {
-    return isObject(value) && has(value, 'value');
-}
-function isShadowTokenObject(value) {
-    return isObject(value) && has(value, 'offsetX');
-}
-/**
- * Recursive function that will walk down the token object
- * and perform the setupToken function on each token.
- * Similar to what Style Dictionary does.
- */
-function setupTokens({ tokens, path = [], setupToken, }) {
-    if (has(tokens, 'value')) {
-        return setupToken({ token: tokens, path });
-    }
-    const output = {};
-    for (const name in tokens) {
-        if (has(tokens, name)) {
-            const value = tokens[name];
-            const nextTokens = isObject(value) ? value : { value };
-            output[name] = setupTokens({
-                tokens: nextTokens,
-                path: path.concat(name),
-                setupToken,
-            });
-        }
-    }
-    return output;
-}
-
-export { CSS_VARIABLE_PREFIX, cssNameTransform, cssValue, isDesignToken, isShadowTokenObject, setupTokens };

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

@@ -1,35 +0,0 @@
-import { ShadowValue, WebDesignToken } from './tokens/types/designToken';
-export declare const CSS_VARIABLE_PREFIX = "amplify";
-export declare function cssValue(token: BaseDesignToken): string | number;
-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;
-export declare function isShadowTokenObject(value: unknown): value is ShadowValue & object;
-type SetupTokensProps = {
-    tokens?: Record<string | number, any>;
-    path?: Array<string>;
-    setupToken: SetupToken;
-};
-export type SetupToken<ReturnType = any> = (args: {
-    token: BaseDesignToken;
-    path: Array<string>;
-}) => ReturnType;
-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 {};