@aws-amplify/ui 6.0.16 → 6.1.0

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/index.d.ts

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

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.16",
+  "version": "6.1.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 {};