@aws-amplify/ui 6.0.17 → 6.1.0

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

@@ -0,0 +1,7 @@
+import { ComponentStyles, Elements, Modifiers } from './utils';
+export type BreadcrumbsTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    list?: ComponentStyles;
+    separator?: ComponentStyles;
+    item?: ComponentStyles;
+    link?: ComponentStyles & Modifiers<'current', Required>;
+}, Required>;

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

@@ -0,0 +1,7 @@
+import type { ColorTheme, Size, Modifiers, ComponentStyles, Elements } from './utils';
+type Variations = 'primary' | 'secondary' | 'destructive' | 'warning' | 'menu' | 'link';
+export type ButtonColorThemeVariations = `${'primary' | 'link' | 'outlined'}--${ColorTheme | 'overlay'}`;
+export type ButtonTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size | ButtonColorThemeVariations | Variations | 'loading' | 'fullwidth' | 'disabled', Required> & Elements<{
+    'loader-wrapper'?: ComponentStyles;
+}, Required>;
+export {};

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

@@ -0,0 +1,2 @@
+import { ComponentStyles } from './utils';
+export type ButtonGroupTheme<Required extends boolean = false> = ComponentStyles;

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

@@ -0,0 +1,2 @@
+import { ComponentStyles, Modifiers } from './utils';
+export type CardTheme<Required extends boolean = false> = ComponentStyles & Modifiers<'elevated' | 'outlined', Required>;

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

@@ -0,0 +1,7 @@
+import { Modifiers, ComponentStyles, ColorTheme, Elements } from './utils';
+export type CheckboxTheme<Required extends boolean = false> = ComponentStyles & Modifiers<ColorTheme | 'disabled', Required> & Elements<{
+    button?: ComponentStyles & Modifiers<'focused' | 'error' | 'disabled'>;
+    icon?: ComponentStyles & Modifiers<'checked' | 'indeterminate' | 'disabled'>;
+    label?: ComponentStyles;
+    input?: ComponentStyles;
+}, Required>;

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

@@ -0,0 +1,2 @@
+import { ComponentStyles } from './utils';
+export type CheckboxFieldTheme<Required extends boolean = false> = ComponentStyles;

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

@@ -0,0 +1,4 @@
+import { ComponentStyles, Elements } from './utils';
+export type CollectionTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    [key in 'pagination' | 'search' | 'items']?: ComponentStyles;
+}, Required>;

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

@@ -0,0 +1,2 @@
+import { Modifiers, ComponentStyles, Size } from './utils';
+export type DividerTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size | 'horizontal' | 'vertical', Required>;

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

@@ -0,0 +1,2 @@
+import { Modifiers, ComponentStyles } from './utils';
+export type DropZoneTheme<Required extends boolean = false> = ComponentStyles & Modifiers<'disabled' | 'active' | 'rejected' | 'accepted', Required>;

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

@@ -0,0 +1,6 @@
+import { Modifiers, ComponentStyles, Size, Elements } from './utils';
+export type FieldTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size, Required> & Elements<{
+    description?: ComponentStyles;
+    'error-message'?: ComponentStyles;
+    'show-password'?: ComponentStyles & Modifiers<'error', Required>;
+}, Required>;

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

@@ -0,0 +1,11 @@
+import { Modifiers, ComponentStyles, Elements } from './utils';
+export type FieldGroupTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    'inner-start'?: ComponentStyles;
+    'inner-end'?: ComponentStyles;
+    'outer-start'?: ComponentStyles & Modifiers<'quiet', Required>;
+    'outer-end'?: ComponentStyles & Modifiers<'quiet', Required>;
+    'field-wrapper'?: ComponentStyles & Modifiers<'horizontal' | 'vertical', Required>;
+    control?: ComponentStyles;
+    icon?: ComponentStyles;
+    'icon-button'?: ComponentStyles;
+}, Required> & Modifiers<'horizontal' | 'vertical' | 'has-inner-end' | 'has-inner-start', Required>;

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

@@ -0,0 +1,4 @@
+import { Modifiers, ComponentStyles, Size, Elements } from './utils';
+export type FieldsetTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size | 'outlined' | 'plain', Required> & Elements<{
+    legend?: ComponentStyles & Modifiers<Size, Required>;
+}, Required>;

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

@@ -0,0 +1,4 @@
+import { ComponentStyles, Modifiers } from './utils';
+type Level = '1' | '2' | '3' | '4' | '5' | '6';
+export type HeadingTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Level | 'truncated', Required>;
+export {};

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

@@ -0,0 +1,4 @@
+import { ComponentStyles, Elements } from './utils';
+export type HighlightMatchTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    highlighted?: ComponentStyles;
+}, Required>;

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

@@ -0,0 +1,92 @@
+import { WebTokens } from '../tokens';
+import { AccordionTheme } from './accordion';
+import { AlertTheme } from './alert';
+import { AutoCompleteTheme } from './autocomplete';
+import { BadgeTheme } from './badge';
+import { BreadcrumbsTheme } from './breadcrumbs';
+import { ButtonTheme } from './button';
+import { ButtonGroupTheme } from './buttonGroup';
+import { CardTheme } from './card';
+import { CheckboxTheme } from './checkbox';
+import { CheckboxFieldTheme } from './checkboxField';
+import { CollectionTheme } from './collection';
+import { DividerTheme } from './divider';
+import { DropZoneTheme } from './dropZone';
+import { FieldTheme } from './field';
+import { FieldGroupTheme } from './fieldGroup';
+import { FieldsetTheme } from './fieldset';
+import { HeadingTheme } from './heading';
+import { HighlightMatchTheme } from './highlightMatch';
+import { InputTheme } from './input';
+import { LoaderTheme } from './loader';
+import { MenuTheme } from './menu';
+import { MessageTheme } from './message';
+import { PaginationTheme } from './pagination';
+import { PlaceholderTheme } from './placeholder';
+import { RadioTheme } from './radio';
+import { RatingTheme } from './rating';
+import { ScrollViewTheme } from './scrollview';
+import { SearchFieldTheme } from './searchField';
+import { SelectTheme } from './select';
+import { SelectFieldTheme } from './selectField';
+import { SliderFieldTheme } from './sliderField';
+import { StepperFieldTheme } from './stepperField';
+import { StorageManagerTheme } from './storageManager';
+import { SwitchFieldTheme, SwitchTheme } from './switchField';
+import { TableTheme } from './table';
+import { TabsTheme } from './tabs';
+import { TextTheme } from './text';
+import { TextFieldTheme } from './textField';
+import { TextareaTheme } from './textarea';
+import { TextareaFieldTheme } from './textareaField';
+import { ToggleButtonTheme, ToggleButtonGroupTheme } from './toggleButton';
+import { ComponentTheme, BaseComponentTheme, BaseTheme } from './utils';
+export { ClassNameFunction } from '../createTheme/createComponentClasses';
+export type { ComponentTheme, BaseComponentTheme, BaseTheme };
+export type ComponentsTheme<TokensType extends WebTokens = WebTokens> = BaseComponentTheme<BaseTheme, string, TokensType> | BaseComponentTheme<AccordionTheme, 'accordion', TokensType> | BaseComponentTheme<AlertTheme, 'alert', TokensType> | BaseComponentTheme<AutoCompleteTheme, 'autocomplete', TokensType> | BaseComponentTheme<BadgeTheme, 'badge', TokensType> | BaseComponentTheme<BreadcrumbsTheme, 'breadcrumbs', TokensType> | BaseComponentTheme<ButtonTheme, 'button', TokensType> | BaseComponentTheme<ButtonGroupTheme, 'buttongroup', TokensType> | BaseComponentTheme<CardTheme, 'card', TokensType> | BaseComponentTheme<CheckboxTheme, 'checkbox', TokensType> | BaseComponentTheme<CheckboxFieldTheme, 'checkboxfield', TokensType> | BaseComponentTheme<CollectionTheme, 'collection', TokensType> | BaseComponentTheme<DividerTheme, 'divider', TokensType> | BaseComponentTheme<DropZoneTheme, 'dropzone', TokensType> | BaseComponentTheme<FieldTheme, 'field', TokensType> | BaseComponentTheme<FieldGroupTheme, 'field-group', TokensType> | BaseComponentTheme<FieldsetTheme, 'fieldset', TokensType> | BaseComponentTheme<HeadingTheme, 'heading', TokensType> | BaseComponentTheme<HighlightMatchTheme, 'highlightmatch', TokensType> | BaseComponentTheme<InputTheme, 'input', TokensType> | BaseComponentTheme<LoaderTheme, 'loader', TokensType> | BaseComponentTheme<MenuTheme, 'menu', TokensType> | BaseComponentTheme<MessageTheme, 'message', TokensType> | BaseComponentTheme<PaginationTheme, 'pagination', TokensType> | BaseComponentTheme<PlaceholderTheme, 'placeholder', TokensType> | BaseComponentTheme<RatingTheme, 'rating', TokensType> | BaseComponentTheme<RadioTheme, 'radio', TokensType> | BaseComponentTheme<ScrollViewTheme, 'scrollview', TokensType> | BaseComponentTheme<SearchFieldTheme, 'searchfield', TokensType> | BaseComponentTheme<SelectTheme, 'select', TokensType> | BaseComponentTheme<SelectFieldTheme, 'selectfield', TokensType> | BaseComponentTheme<SliderFieldTheme, 'sliderfield', TokensType> | BaseComponentTheme<StepperFieldTheme, 'stepperfield', TokensType> | BaseComponentTheme<StorageManagerTheme, 'storagemanager', TokensType> | BaseComponentTheme<SwitchTheme, 'switch', TokensType> | BaseComponentTheme<SwitchFieldTheme, 'switchfield', TokensType> | BaseComponentTheme<TabsTheme, 'tabs', TokensType> | BaseComponentTheme<TableTheme, 'table', TokensType> | BaseComponentTheme<TextTheme, 'text', TokensType> | BaseComponentTheme<TextareaTheme, 'textarea', TokensType> | BaseComponentTheme<TextareaFieldTheme, 'textareafield', TokensType> | BaseComponentTheme<TextFieldTheme, 'textfield', TokensType> | BaseComponentTheme<ToggleButtonTheme, 'togglebutton', TokensType> | BaseComponentTheme<ToggleButtonGroupTheme, 'togglebuttongroup', TokensType>;
+export type AllComponentThemes = {
+    accordion: AccordionTheme;
+    alert: AlertTheme;
+    autocomplete: AutoCompleteTheme;
+    badge: BadgeTheme;
+    breadcrumbs: BreadcrumbsTheme;
+    button: ButtonTheme;
+    buttongroup: ButtonGroupTheme;
+    card: CardTheme;
+    checkbox: CheckboxTheme;
+    checkboxfield: CheckboxFieldTheme;
+    collection: CollectionTheme;
+    divider: DividerTheme;
+    dropZone: DropZoneTheme;
+    field: FieldTheme;
+    'field-group': FieldGroupTheme;
+    fieldset: FieldsetTheme;
+    heading: HeadingTheme;
+    highlightmatch: HighlightMatchTheme;
+    input: InputTheme;
+    loader: LoaderTheme;
+    menu: MenuTheme;
+    message: MessageTheme;
+    pagination: PaginationTheme;
+    placeholder: PlaceholderTheme;
+    radio: RadioTheme;
+    rating: RatingTheme;
+    scrollview: ScrollViewTheme;
+    searchfield: SearchFieldTheme;
+    select: SelectTheme;
+    selectfield: SelectFieldTheme;
+    sliderfield: SliderFieldTheme;
+    stepperfield: StepperFieldTheme;
+    storagemanager: StorageManagerTheme;
+    switch: SwitchTheme;
+    switchfield: SwitchFieldTheme;
+    table: TableTheme;
+    tabs: TabsTheme;
+    text: TextTheme;
+    textarea: TextareaTheme;
+    textareaField: TextareaFieldTheme;
+    textField: TextFieldTheme;
+    toggleButton: ToggleButtonTheme;
+    toggleButtonGroup: ToggleButtonGroupTheme;
+};
+export type ComponentThemeFromName<T extends string, Theme extends BaseTheme = BaseTheme> = T extends keyof AllComponentThemes ? AllComponentThemes[T] : Theme;

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

@@ -0,0 +1,2 @@
+import { Modifiers, ComponentStyles, FieldControlModifiers } from './utils';
+export type InputTheme<Required extends boolean = false> = ComponentStyles & Modifiers<FieldControlModifiers, Required>;

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

@@ -0,0 +1,4 @@
+import { ComponentStyles, Elements, Modifiers, Size } from './utils';
+export type LoaderTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    label?: ComponentStyles;
+}, Required> & Modifiers<Size | 'linear' | 'determinate', Required>;

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

@@ -0,0 +1,4 @@
+import { ComponentStyles, Elements } from './utils';
+export type MenuTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    [key in 'wrapper' | 'trigger' | 'content' | 'content__item']?: ComponentStyles;
+}, Required>;

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

@@ -0,0 +1,4 @@
+import { Modifiers, ComponentStyles, Elements, ColorTheme } from './utils';
+export type MessageTheme<Required extends boolean = false> = ComponentStyles & Modifiers<'plain' | 'outlined' | 'filled' | ColorTheme | 'neutral', Required> & Elements<{
+    [key in 'icon' | 'heading' | 'content' | 'dismiss']?: ComponentStyles;
+}, Required>;

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

@@ -0,0 +1,4 @@
+import { ComponentStyles, Elements, Modifiers } from './utils';
+export type PaginationTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    item?: ComponentStyles & Modifiers<'ellipsis' | 'current' | 'disabled'>;
+}, Required>;

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

@@ -0,0 +1,2 @@
+import { Modifiers, ComponentStyles, Size } from './utils';
+export type PlaceholderTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size, Required>;

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

@@ -0,0 +1,6 @@
+import { ComponentStyles, Elements, Modifiers, Size } from './utils';
+export type RadioTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size | 'disabled', Required> & Elements<{
+    input?: ComponentStyles;
+    button?: ComponentStyles & Modifiers<Size>;
+    label?: ComponentStyles & Modifiers<'disabled'>;
+}, Required>;

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

@@ -0,0 +1,5 @@
+import { ComponentStyles, Elements, Modifiers, Size } from './utils';
+export type RatingTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size> & Elements<{
+    item?: ComponentStyles;
+    icon?: ComponentStyles & Modifiers<'filled' | 'empty'>;
+}, Required>;

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

@@ -0,0 +1,2 @@
+import { ComponentStyles, Modifiers, Orientation } from './utils';
+export type ScrollViewTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Orientation, Required>;

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

@@ -0,0 +1,4 @@
+import { ComponentStyles, Elements } from './utils';
+export type SearchFieldTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    search?: ComponentStyles;
+}, Required>;

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

@@ -0,0 +1,5 @@
+import { Modifiers, ComponentStyles, Elements, Size, FieldControlModifiers } from './utils';
+export type SelectTheme<Required extends boolean = false> = ComponentStyles & Modifiers<FieldControlModifiers | 'expanded', Required> & Elements<{
+    wrapper?: ComponentStyles;
+    icon?: ComponentStyles & Modifiers<Size, Required>;
+}, Required>;

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

@@ -0,0 +1,2 @@
+import { ComponentStyles } from './utils';
+export type SelectFieldTheme<Required extends boolean = false> = ComponentStyles;

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

@@ -0,0 +1,9 @@
+import { Modifiers, ComponentStyles, Elements, ColorTheme, Size } from './utils';
+export type SliderFieldTheme<Required extends boolean = false> = ComponentStyles & Modifiers<ColorTheme, Required> & Elements<{
+    label?: ComponentStyles;
+    group?: ComponentStyles;
+    root?: ComponentStyles & Modifiers<'disabled' | 'horizontal' | 'vertical' | Size, Required>;
+    track?: ComponentStyles & Modifiers<'horizontal' | 'vertical' | Size, Required>;
+    range?: ComponentStyles & Modifiers<'disabled' | 'horizontal' | 'vertical', Required>;
+    thumb?: ComponentStyles & Modifiers<'disabled' | Size, Required>;
+}, Required>;

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

@@ -0,0 +1,6 @@
+import { Modifiers, ComponentStyles, Elements, ColorTheme } from './utils';
+export type StepperFieldTheme<Required extends boolean = false> = ComponentStyles & Modifiers<ColorTheme, Required> & Elements<{
+    'button--increase'?: ComponentStyles & Modifiers<'quiet' | 'disabled', Required>;
+    'button--decrease'?: ComponentStyles & Modifiers<'quiet' | 'disabled', Required>;
+    input?: ComponentStyles;
+}, Required>;

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

@@ -0,0 +1,20 @@
+import { Modifiers, ComponentStyles, Elements, ColorTheme } from './utils';
+export type StorageManagerTheme<Required extends boolean = false> = ComponentStyles & Modifiers<ColorTheme, Required> & Elements<{
+    dropzone?: ComponentStyles & Modifiers<'active' | 'small', Required>;
+    dropzone__icon?: ComponentStyles;
+    dropzone__text?: ComponentStyles;
+    file?: ComponentStyles;
+    file__picker?: ComponentStyles;
+    file__wrapper?: ComponentStyles;
+    file__name?: ComponentStyles;
+    file__size?: ComponentStyles;
+    file__list?: ComponentStyles;
+    file__main?: ComponentStyles;
+    file__image?: ComponentStyles;
+    file__status?: ComponentStyles & Modifiers<'error' | 'success', Required>;
+    loader?: ComponentStyles;
+    previewer?: ComponentStyles;
+    previewer__text?: ComponentStyles;
+    previewer__footer?: ComponentStyles;
+    previewer__actions?: ComponentStyles;
+}, Required>;

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

@@ -0,0 +1,8 @@
+import { Modifiers, ComponentStyles, Elements, Size } from './utils';
+export type SwitchTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    wrapper?: ComponentStyles & Modifiers<'start' | 'end' | 'top' | 'bottom', Required>;
+    track?: ComponentStyles & Modifiers<'checked' | 'disabled' | 'focused' | 'error'>;
+    thumb?: ComponentStyles & Modifiers<'checked' | 'disabled'>;
+    label?: ComponentStyles;
+}, Required>;
+export type SwitchFieldTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size, Required>;

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

@@ -0,0 +1,4 @@
+import { Modifiers, ComponentStyles, Size, Elements } from './utils';
+export type TableTheme<Required extends boolean = false> = ComponentStyles & Modifiers<Size | 'bordered' | 'striped', Required> & Elements<{
+    [key in 'caption' | 'head' | 'body' | 'foot' | 'row' | 'th' | 'td']?: ComponentStyles;
+}, Required>;

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

@@ -0,0 +1,6 @@
+import { ComponentStyles, Elements, Modifiers } from './utils';
+export type TabsTheme<Required extends boolean = false> = ComponentStyles & Elements<{
+    list?: ComponentStyles & Modifiers<'equal' | 'relative' | 'top' | 'bottom'>;
+    panel?: ComponentStyles & Modifiers<'active'>;
+    item?: ComponentStyles & Modifiers<'active'>;
+}, Required>;

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

@@ -0,0 +1,3 @@
+import { Modifiers, ComponentStyles } from './utils';
+export type TextVariation = 'primary' | 'secondary' | 'tertiary' | 'error' | 'warning' | 'info' | 'success';
+export type TextTheme<Required extends boolean = false> = ComponentStyles & Modifiers<TextVariation | 'truncated', Required>;

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

@@ -0,0 +1,2 @@
+import { ComponentStyles } from './utils';
+export type TextFieldTheme = ComponentStyles;

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

@@ -0,0 +1,2 @@
+import { Modifiers, ComponentStyles, FieldControlModifiers } from './utils';
+export type TextareaTheme<Required extends boolean = false> = ComponentStyles & Modifiers<FieldControlModifiers, Required>;

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

@@ -0,0 +1,2 @@
+import { ComponentStyles } from './utils';
+export type TextareaFieldTheme = ComponentStyles;

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

@@ -0,0 +1,3 @@
+import { Modifiers, ComponentStyles } from './utils';
+export type ToggleButtonTheme<Required extends boolean = false> = ComponentStyles & Modifiers<'primary' | 'pressed' | 'link', Required>;
+export type ToggleButtonGroupTheme = ComponentStyles;

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';