@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/dist/primitives/Radio/styles.js

@@ -1,46 +1,59 @@
 import { StyleSheet } from 'react-native';
-const RADIO_COLOR = '#317d95';
+import { RADIO_DOT_PROPORTION } from './getRadioDimensions';
 const ROUNDED_BORDER_RADIUS = 999;
-export const styles = StyleSheet.create({
-    container: {
-        alignItems: 'center',
-    },
-    disabled: {
-        opacity: 0.6,
-    },
-    radioContainer: {
-        alignItems: 'center',
-        borderColor: RADIO_COLOR,
-        borderRadius: ROUNDED_BORDER_RADIUS,
-        borderWidth: 2,
-        justifyContent: 'center',
-    },
-    radioDot: {
-        backgroundColor: RADIO_COLOR,
-        borderRadius: ROUNDED_BORDER_RADIUS,
-    },
-    radioContainerLarge: {
-        height: 24,
-        width: 24,
-    },
-    radioContainerMedium: {
-        height: 20,
-        width: 20,
-    },
-    radioContainerSmall: {
-        height: 16,
-        width: 16,
-    },
-    radioDotLarge: {
-        height: 12,
-        width: 12,
-    },
-    radioDotMedium: {
-        height: 10,
-        width: 10,
-    },
-    radioDotSmall: {
-        height: 8,
-        width: 8,
-    },
-});
+export const getThemedStyles = (theme) => {
+    const { components, tokens: { colors, fontSizes, opacities, borderWidths }, } = theme;
+    return StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            ...components?.radio?.container,
+        },
+        disabled: {
+            opacity: opacities[60],
+            ...components?.radio?.disabled,
+        },
+        radioContainer: {
+            alignItems: 'center',
+            borderColor: colors.border.primary,
+            borderRadius: ROUNDED_BORDER_RADIUS,
+            borderWidth: borderWidths.medium,
+            justifyContent: 'center',
+            ...components?.radio?.radioContainer,
+        },
+        radioDot: {
+            backgroundColor: colors.brand.primary[80],
+            borderRadius: ROUNDED_BORDER_RADIUS,
+            ...components?.radio?.radioDot,
+        },
+        radioContainerLarge: {
+            height: fontSizes.xl,
+            width: fontSizes.xl,
+            ...components?.radio?.radioContainerLarge,
+        },
+        radioContainerMedium: {
+            height: fontSizes.large,
+            width: fontSizes.large,
+            ...components?.radio?.radioContainerMedium,
+        },
+        radioContainerSmall: {
+            height: fontSizes.medium,
+            width: fontSizes.medium,
+            ...components?.radio?.radioContainerSmall,
+        },
+        radioDotLarge: {
+            height: fontSizes.xl * RADIO_DOT_PROPORTION,
+            width: fontSizes.xl * RADIO_DOT_PROPORTION,
+            ...components?.radio?.radioDotLarge,
+        },
+        radioDotMedium: {
+            height: fontSizes.large * RADIO_DOT_PROPORTION,
+            width: fontSizes.large * RADIO_DOT_PROPORTION,
+            ...components?.radio?.radioDotMedium,
+        },
+        radioDotSmall: {
+            height: fontSizes.medium * RADIO_DOT_PROPORTION,
+            width: fontSizes.medium * RADIO_DOT_PROPORTION,
+            ...components?.radio?.radioDotSmall,
+        },
+    });
+};

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

@@ -6,7 +6,7 @@ export interface RadioProps<T> extends PressableProps {
     label?: string;
     labelPosition?: LabelPosition;
     labelStyle?: StyleProp<TextStyle>;
-    onChange?: (value?: T) => void;
+    onChange?: (value: T) => void;
     radioContainerStyle?: StyleProp<ViewStyle>;
     radioDotStyle?: StyleProp<ViewStyle>;
     size?: Size;
@@ -15,14 +15,14 @@ export interface RadioProps<T> extends PressableProps {
 }
 export declare type RadioDimensions = Pick<ViewStyle, 'height' | 'width'>;
 export interface RadioStyles {
-    container: ViewStyle;
-    disabled: ViewStyle;
-    radioContainer: ViewStyle;
-    radioContainerLarge: RadioDimensions;
-    radioContainerMedium: RadioDimensions;
-    radioContainerSmall: RadioDimensions;
-    radioDot: ViewStyle;
-    radioDotLarge: RadioDimensions;
-    radioDotMedium: RadioDimensions;
-    radioDotSmall: RadioDimensions;
+    container?: ViewStyle;
+    disabled?: ViewStyle;
+    radioContainer?: ViewStyle;
+    radioContainerLarge?: RadioDimensions;
+    radioContainerMedium?: RadioDimensions;
+    radioContainerSmall?: RadioDimensions;
+    radioDot?: ViewStyle;
+    radioDotLarge?: RadioDimensions;
+    radioDotMedium?: RadioDimensions;
+    radioDotSmall?: RadioDimensions;
 }

package/dist/primitives/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { RadioGroupProps } from './types';
+export default function RadioGroup<T>({ accessibilityRole, children, direction, disabled, initialValue, label, labelPosition, labelStyle, onChange, onValueChange, size, style, ...rest }: RadioGroupProps<T>): JSX.Element;

package/dist/primitives/RadioGroup/RadioGroup.js

@@ -0,0 +1,51 @@
+import React, { Children, cloneElement, isValidElement, useCallback, useEffect, useMemo, useState, } from 'react';
+import { View } from 'react-native';
+import { useHasValueUpdated } from '@aws-amplify/ui-react-core';
+import { useTheme } from '../../theme';
+import { Label } from '../Label';
+import { getFlexDirectionFromLabelPosition } from '../Label/utils';
+import { getThemedStyles } from './styles';
+export default function RadioGroup({ accessibilityRole = 'radiogroup', children, direction = 'vertical', disabled, initialValue, label, labelPosition = 'top', labelStyle, onChange, onValueChange, size, style, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    const [value, setValue] = useState(initialValue);
+    // track `hasValueUpdated` and `hasOnValueChangeUpdated`,
+    // only call `onValueChange` on `value` update
+    const hasValueUpdated = useHasValueUpdated(value);
+    const hasOnValueChangeUpdated = useHasValueUpdated(onValueChange);
+    useEffect(() => {
+        if (hasValueUpdated) {
+            onValueChange?.(value);
+        }
+    }, [hasOnValueChangeUpdated, hasValueUpdated, onValueChange, value]);
+    const containerStyle = useMemo(() => ({
+        flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
+    }), [labelPosition]);
+    const childContainerStyle = useMemo(() => ({ flexDirection: direction === 'horizontal' ? 'row' : 'column' }), [direction]);
+    const handleChange = useCallback((nextValue) => {
+        setValue(nextValue);
+        onChange?.(nextValue);
+    }, [onChange]);
+    return (<View {...rest} style={[themedStyle.container, containerStyle, style]}>
+      <View accessibilityRole={accessibilityRole} style={childContainerStyle}>
+        {Children.map(children, (child) => {
+            if (isValidElement(child)) {
+                const { disabled: childDisabled, onChange: childOnChange, value: childValue, size: childSize, } = child.props;
+                const isChildDisabled = typeof childDisabled === 'boolean' ? childDisabled : disabled;
+                const isChildSelected = childValue === value;
+                return cloneElement(child, {
+                    ...child.props,
+                    disabled: isChildDisabled,
+                    onChange: (nextValue) => {
+                        childOnChange?.(nextValue);
+                        handleChange(nextValue);
+                    },
+                    selected: isChildSelected,
+                    size: childSize ?? size,
+                });
+            }
+        })}
+      </View>
+      {label ? (<Label style={[themedStyle.label, labelStyle]}>{label}</Label>) : null}
+    </View>);
+}

package/dist/primitives/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup';
+export { RadioGroupProps, RadioGroupStyles } from './types';

package/dist/primitives/RadioGroup/index.js

@@ -0,0 +1 @@
+export { default as RadioGroup } from './RadioGroup';

package/dist/primitives/RadioGroup/styles.d.ts

@@ -0,0 +1,3 @@
+import { StrictTheme } from '../../theme';
+import { RadioGroupStyles } from './types';
+export declare const getThemedStyles: (theme: StrictTheme) => RadioGroupStyles;

package/dist/primitives/RadioGroup/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+export const getThemedStyles = (theme) => {
+    const { components } = theme;
+    return StyleSheet.create({
+        container: {
+            ...components?.radioGroup?.container,
+        },
+        label: {
+            /**
+             * The RadioGroup label inherits its styles from the Label primitive,
+             * and also supports customization via a Theme.
+             */
+            ...components?.radioGroup?.label,
+        },
+    });
+};

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TextStyle, ViewProps, ViewStyle } from 'react-native';
+import { RadioProps } from '../Radio';
+export declare type Direction = 'vertical' | 'horizontal';
+export interface RadioGroupProps<T> extends Pick<RadioProps<T>, 'accessibilityRole' | 'disabled' | 'label' | 'labelPosition' | 'labelStyle' | 'onChange' | 'size'>, ViewProps {
+    children: React.ReactElement<RadioProps<T>>[];
+    direction?: Direction;
+    initialValue?: T;
+    onValueChange?: (value?: T) => void;
+}
+export interface RadioGroupStyles {
+    container?: ViewStyle;
+    label?: TextStyle;
+}

package/dist/primitives/RadioGroup/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/Tabs/Tab.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TabProps } from './types';
+export default function Tab({ children, selected, style, textStyle, indicatorPosition, ...rest }: TabProps): JSX.Element;

package/dist/primitives/Tabs/Tab.js

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import { useTheme } from '../../theme';
+import { Button } from '../Button';
+import { getThemedStyles } from './styles';
+export default function Tab({ children, selected, style, textStyle, indicatorPosition, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme, indicatorPosition);
+    const selectedStyles = selected ? themedStyle.selected : null;
+    const containerStyle = useCallback(({ pressed }) => {
+        const readonlyStyle = selected ? themedStyle.readonly : null;
+        const pressedStateStyle = (typeof style === 'function' ? style({ pressed }) : style) ?? null;
+        // include `pressedStateStyle` last to override other styles
+        return [
+            themedStyle.tab,
+            readonlyStyle,
+            selectedStyles,
+            pressedStateStyle,
+        ];
+    }, [selected, selectedStyles, style, themedStyle]);
+    return (<Button {...rest} accessibilityRole="tab" style={containerStyle} textStyle={[themedStyle.tabText, textStyle, selectedStyles]}>
+      {children}
+    </Button>);
+}

package/dist/primitives/Tabs/Tabs.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TabsProps } from './types';
+export default function Tabs({ children, indicatorPosition, onChange, selectedIndex, style, ...rest }: TabsProps): JSX.Element;

package/dist/primitives/Tabs/Tabs.js

@@ -0,0 +1,25 @@
+import React, { Children, cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+export default function Tabs({ children, indicatorPosition = 'bottom', onChange, selectedIndex = 0, style, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme, indicatorPosition);
+    const handleOnChange = (nextIndex) => {
+        onChange?.(nextIndex);
+    };
+    return (<View {...rest} accessibilityRole="tablist" style={[themedStyle.tabList, style]}>
+      {Children.map(children, (child, index) => {
+            if (isValidElement(child)) {
+                return cloneElement(child, {
+                    onPress: (event) => {
+                        child.props.onPress?.(event);
+                        handleOnChange(index);
+                    },
+                    indicatorPosition,
+                    selected: index === selectedIndex,
+                });
+            }
+        })}
+    </View>);
+}

package/dist/primitives/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Tab } from './Tab';
+export { default as Tabs } from './Tabs';
+export { TabProps, TabsProps, TabsStyles } from './types';

package/dist/primitives/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default as Tab } from './Tab';
+export { default as Tabs } from './Tabs';

package/dist/primitives/Tabs/styles.d.ts

@@ -0,0 +1,3 @@
+import { StrictTheme } from '../../theme';
+import { TabsProps, TabsStyles } from './types';
+export declare const getThemedStyles: (theme: StrictTheme, indicatorPosition?: TabsProps['indicatorPosition']) => TabsStyles;

package/dist/primitives/Tabs/styles.js

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+export const getThemedStyles = (theme, indicatorPosition) => {
+    const { components, tokens: { colors, fontSizes, fontWeights, opacities, space, borderWidths }, } = theme;
+    const selectedTabBorderStyles = {};
+    const tabBorderStyles = {};
+    if (indicatorPosition && indicatorPosition === 'top') {
+        selectedTabBorderStyles.borderTopColor = colors.brand.primary[80];
+        tabBorderStyles.borderTopWidth = borderWidths.medium;
+        tabBorderStyles.borderTopColor = colors.border.secondary;
+    }
+    else {
+        selectedTabBorderStyles.borderBottomColor = colors.brand.primary[80];
+        tabBorderStyles.borderBottomWidth = borderWidths.medium;
+        tabBorderStyles.borderBottomColor = colors.border.secondary;
+    }
+    return StyleSheet.create({
+        readonly: {
+            opacity: opacities[100],
+            ...components?.tabs?.readonly,
+        },
+        tabList: {
+            flexDirection: 'row',
+            width: '100%',
+            ...components?.tabs?.tabList,
+        },
+        tab: {
+            backgroundColor: colors.transparent,
+            borderRadius: 0,
+            flexBasis: 0,
+            flexGrow: 1,
+            paddingVertical: space.small,
+            paddingHorizontal: space.medium,
+            borderWidth: 0,
+            ...tabBorderStyles,
+            ...components?.tabs?.tab,
+        },
+        tabText: {
+            color: colors.font.secondary,
+            fontSize: fontSizes.medium,
+            fontWeight: fontWeights.bold,
+            ...components?.tabs?.tabText,
+        },
+        selected: {
+            backgroundColor: colors.background.primary,
+            color: colors.brand.primary[80],
+            ...selectedTabBorderStyles,
+            ...components?.tabs?.selected,
+        },
+    });
+};

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { TextStyle, ViewProps, ViewStyle } from 'react-native';
+import { ButtonProps } from '../Button';
+declare type IndicatorPosition = 'top' | 'bottom';
+export interface TabsProps extends ViewProps {
+    /**
+     * @description
+     * The Tabs component only accepts Tab components as children.
+     */
+    children: React.ReactElement<TabProps>[];
+    /**
+     * @description
+     * For controlled usage, use the `onChange` event to listen to when a Tab is
+     * clicked and update the `selectedIndex` accordingly. The index of the Tab
+     * clicked is passed to `onChange`.
+     */
+    onChange?: (index: number) => void;
+    /**
+     * @description
+     * The controlled index of the currently selected Tab. This should be
+     * used in tandem with `onChange` to use Tabs as a controlled component.
+     */
+    selectedIndex?: number;
+    /**
+     * @description
+     * Sets the border and indicator of the tabs to be the top or bottom.
+     */
+    indicatorPosition?: IndicatorPosition;
+}
+export interface TabProps extends ButtonProps {
+    /**
+     * @description
+     * Indicates if a Tab is currently selected
+     */
+    selected?: boolean;
+    indicatorPosition?: IndicatorPosition;
+}
+export interface TabsStyles {
+    readonly?: ViewStyle;
+    selected?: ViewStyle;
+    tabList?: ViewStyle;
+    tab?: ViewStyle;
+    tabText?: TextStyle;
+}
+export {};

package/dist/primitives/Tabs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/TextField/TextField.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TextFieldProps } from './types';
+export declare const TEXTFIELD_CONTAINER_TEST_ID = "amplify__text-field-container";
+export declare const INPUT_CONTAINER_TEST_ID = "amplify__text-field__input-container";
+export default function TextField({ accessibilityLabel, accessibilityRole, accessibilityState, accessible, autoCapitalize, disabled, endAccessory, error, errorMessage, errorMessageStyle, fieldStyle, label, labelStyle, style, ...rest }: TextFieldProps): JSX.Element;

package/dist/primitives/TextField/TextField.js

@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import { TextInput, View } from 'react-native';
+import { Label } from '../Label';
+import { useTheme } from '../../theme';
+import { getThemedStyles } from './styles';
+export const TEXTFIELD_CONTAINER_TEST_ID = 'amplify__text-field-container';
+export const INPUT_CONTAINER_TEST_ID = 'amplify__text-field__input-container';
+export default function TextField({ accessibilityLabel, accessibilityRole, accessibilityState, accessible = true, autoCapitalize = 'none', disabled, endAccessory, error, errorMessage, errorMessageStyle, fieldStyle, label, labelStyle, style, ...rest }) {
+    const theme = useTheme();
+    const themedStyle = getThemedStyles(theme);
+    const fieldContainerStyle = useMemo(() => ({
+        ...themedStyle.fieldContainer,
+        ...(disabled && themedStyle.disabled),
+    }), [disabled, themedStyle]);
+    return (<View testID={TEXTFIELD_CONTAINER_TEST_ID} style={[themedStyle.container, style]}>
+      {label ? (<Label accessibilityLabel={label} style={[themedStyle.label, labelStyle]}>
+          {label}
+        </Label>) : null}
+      <View accessible style={fieldContainerStyle} testID={INPUT_CONTAINER_TEST_ID}>
+        <TextInput {...rest} accessible={accessible} accessibilityLabel={label ? undefined : accessibilityLabel} accessibilityRole={accessibilityRole} accessibilityState={{ disabled, ...accessibilityState }} autoCapitalize={autoCapitalize} editable={!disabled} placeholderTextColor={theme.tokens.colors.font.tertiary} selectionColor={theme.tokens.colors.font.primary} style={[themedStyle.field, fieldStyle]}/>
+        {endAccessory ?? null}
+      </View>
+      {error && errorMessage ? (<Label style={errorMessageStyle}>{errorMessage}</Label>) : null}
+    </View>);
+}

package/dist/primitives/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextField } from './TextField';
+export { TextFieldProps, TextFieldStyles } from './types';

package/dist/primitives/TextField/index.js

@@ -0,0 +1 @@
+export { default as TextField } from './TextField';

package/dist/primitives/TextField/styles.d.ts

@@ -0,0 +1,3 @@
+import { StrictTheme } from '../../theme';
+import { TextFieldStyles } from './types';
+export declare const getThemedStyles: (theme: StrictTheme) => TextFieldStyles;

package/dist/primitives/TextField/styles.js

@@ -0,0 +1,39 @@
+import { Platform, StyleSheet } from 'react-native';
+import { getLineHeight } from '../../utils';
+export const getThemedStyles = (theme) => {
+    const { components, tokens: { colors, fontSizes, opacities, space, radii, borderWidths }, } = theme;
+    return StyleSheet.create({
+        container: {
+            alignItems: 'flex-start',
+            ...components?.textField?.container,
+        },
+        disabled: {
+            opacity: opacities[60],
+            ...components?.textField?.disabled,
+        },
+        fieldContainer: {
+            alignItems: 'center',
+            borderColor: colors.border.primary,
+            borderRadius: radii.small,
+            borderWidth: borderWidths.small,
+            flexDirection: 'row',
+            paddingHorizontal: space.xs,
+            ...components?.textField?.fieldContainer,
+        },
+        field: {
+            color: colors.font.primary,
+            fontSize: fontSizes.medium,
+            flexGrow: 1,
+            paddingVertical: space.small,
+            // this is needed because of extra padding inside the input - in Android only
+            ...(Platform.OS === 'android' && { padding: 0 }),
+            ...components?.textField?.field,
+        },
+        label: {
+            color: colors.font.secondary,
+            lineHeight: getLineHeight(fontSizes.small),
+            padding: space.xxs,
+            ...components?.textField?.label,
+        },
+    });
+};

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

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { StyleProp, TextInputProps, TextStyle, ViewStyle } from 'react-native';
+import { LabelProps } from '../Label/types';
+export interface TextFieldProps extends Omit<TextInputProps, 'editable'> {
+    /**
+     * @description
+     * Styling for TextField container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * @description
+     * A Boolean attribute indicating that the user cannot interact with the control
+     */
+    disabled?: boolean;
+    /**
+     * @description
+     * Indicates whether the TextField component has an error
+     */
+    error?: boolean;
+    /**
+     * @description
+     *  When defined and `error` is true, show error message
+     */
+    errorMessage?: string;
+    /**
+     * @description
+     *  Styling for error message
+     */
+    errorMessageStyle?: StyleProp<TextStyle>;
+    /**
+     * @description
+     * Label text for field
+     */
+    label?: string;
+    /**
+     * @description
+     * Styling for the label
+     */
+    labelStyle?: LabelProps['style'];
+    /**
+     * @description
+     * Styling for the input field
+     */
+    fieldStyle?: StyleProp<TextStyle>;
+    /**
+     * @description
+     * Component(s) to show after input
+     */
+    endAccessory?: React.ReactNode;
+}
+export interface TextFieldStyles {
+    container?: ViewStyle;
+    disabled?: ViewStyle;
+    field?: TextStyle;
+    fieldContainer?: ViewStyle;
+    label?: TextStyle;
+}

package/dist/primitives/TextField/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/index.d.ts

@@ -1,8 +1,15 @@
 export * from './Button';
 export * from './Carousel';
 export * from './Checkbox';
+export * from './Divider';
+export * from './ErrorMessage';
 export * from './Heading';
 export * from './Icon';
 export * from './IconButton';
 export * from './Label';
+export * from './PasswordField';
+export * from './PhoneNumberField';
 export * from './Radio';
+export * from './RadioGroup';
+export * from './Tabs';
+export * from './TextField';

package/dist/primitives/index.js

@@ -1,8 +1,15 @@
 export * from './Button';
 export * from './Carousel';
 export * from './Checkbox';
+export * from './Divider';
+export * from './ErrorMessage';
 export * from './Heading';
 export * from './Icon';
 export * from './IconButton';
 export * from './Label';
+export * from './PasswordField';
+export * from './PhoneNumberField';
 export * from './Radio';
+export * from './RadioGroup';
+export * from './Tabs';
+export * from './TextField';

package/dist/theme/ThemeContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { StrictTheme } from './types';
+export interface ThemeContextType {
+    theme: StrictTheme;
+}
+export declare const ThemeContext: React.Context<ThemeContextType>;

package/dist/theme/ThemeContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { createTheme } from './createTheme';
+export const ThemeContext = React.createContext({
+    theme: createTheme(),
+});

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ColorMode, Theme } from './types';
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    theme?: Theme;
+    colorMode?: ColorMode;
+}
+export declare const ThemeProvider: ({ children, theme, colorMode, }: ThemeProviderProps) => JSX.Element;
+export {};

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { createTheme } from './createTheme';
+import { ThemeContext } from './ThemeContext';
+export const ThemeProvider = ({ children, theme, colorMode, }) => {
+    const value = React.useMemo(() => ({ theme: createTheme(theme, colorMode) }), [theme, colorMode]);
+    return (<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>);
+};

package/dist/theme/createTheme.d.ts

@@ -0,0 +1,8 @@
+import { Theme, StrictTheme, ColorMode } from './types';
+/**
+ * This will be used like `const myTheme = createTheme({})`
+ * `myTheme` can then be passed to a Provider
+ * const myTheme = createTheme({})
+ * const myOtherTheme = createTheme({}, myTheme);
+ */
+export declare const createTheme: (theme?: Theme, colorMode?: ColorMode) => StrictTheme;