@aws-amplify/ui 4.1.0 → 5.1.0

package/dist/types/theme/tokens/components/fieldMessages.d.ts

@@ -1,16 +1,6 @@
-import { DesignToken, ColorValue, FontStyleValue, FontSizeValue } from '../types/designToken';
-interface FieldMessagesErrorTokens {
-    color: DesignToken<ColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-}
-interface FieldMessagesDescriptionTokens {
-    color: DesignToken<ColorValue>;
-    fontStyle: DesignToken<FontStyleValue>;
-    fontSize: DesignToken<FontSizeValue>;
-}
-export interface FieldMessagesTokens {
-    error: FieldMessagesErrorTokens;
-    description: FieldMessagesDescriptionTokens;
-}
-export declare const fieldmessages: FieldMessagesTokens;
-export {};
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type FieldMessagesTokens<Output extends OutputVariantKey> = {
+    error?: DesignTokenProperties<'color' | 'fontSize', Output>;
+    description?: DesignTokenProperties<'color' | 'fontSize' | 'fontStyle', Output>;
+};
+export declare const fieldmessages: Required<FieldMessagesTokens<'default'>>;

package/dist/types/theme/tokens/components/flex.d.ts

@@ -1,9 +1,3 @@
-import { AlignContentValue, AlignItemsValue, DesignToken, FlexWrapValue, GapValue, JustifyContentValue } from '../types/designToken';
-export interface FlexTokens {
-    gap: DesignToken<GapValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    alignItems: DesignToken<AlignItemsValue>;
-    alignContent: DesignToken<AlignContentValue>;
-    flexWrap: DesignToken<FlexWrapValue>;
-}
-export declare const flex: FlexTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type FlexTokens<Output extends OutputVariantKey> = DesignTokenProperties<'gap' | 'justifyContent' | 'alignItems' | 'alignContent' | 'flexWrap', Output>;
+export declare const flex: Required<FlexTokens<'default'>>;

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

@@ -1,17 +1,6 @@
-import { ColorValue, DesignToken, FontSizeValue, FontWeightValue, LineHeightValue } from '../types/designToken';
-interface HeadingLevelTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    fontWeight: DesignToken<FontWeightValue>;
-}
-export interface HeadingTokens {
-    color: DesignToken<ColorValue>;
-    lineHeight: DesignToken<LineHeightValue>;
-    1: HeadingLevelTokens;
-    2: HeadingLevelTokens;
-    3: HeadingLevelTokens;
-    4: HeadingLevelTokens;
-    5: HeadingLevelTokens;
-    6: HeadingLevelTokens;
-}
-export declare const heading: HeadingTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type HeadingLevelTokens<Output> = DesignTokenProperties<'fontSize' | 'fontWeight', Output>;
+declare type Level = 1 | 2 | 3 | 4 | 5 | 6;
+export declare type HeadingTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color' | 'lineHeight'> & Record<Level, HeadingLevelTokens<Output>>;
+export declare const heading: Required<HeadingTokens<'default'>>;
 export {};

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

@@ -1,9 +1,5 @@
-import { DesignToken, FontWeightValue } from '../types/designToken';
-interface HighlightMatchHighlightedTokens {
-    fontWeight: DesignToken<FontWeightValue>;
-}
-export interface HighlightMatchTokens {
-    highlighted: HighlightMatchHighlightedTokens;
-}
-export declare const highlightmatch: HighlightMatchTokens;
-export {};
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type HighlightMatchTokens<OutputType extends OutputVariantKey> = {
+    highlighted?: DesignTokenProperties<'fontWeight', OutputType>;
+};
+export declare const highlightmatch: Required<HighlightMatchTokens<'default'>>;

package/dist/types/theme/tokens/components/icon.d.ts

@@ -1,6 +1,3 @@
-import { DesignToken, LineHeightValue, SpaceValue } from '../types/designToken';
-export interface IconTokens {
-    lineHeight: DesignToken<LineHeightValue>;
-    height: DesignToken<SpaceValue>;
-}
-export declare const icon: IconTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type IconTokens<Output extends OutputVariantKey> = DesignTokenProperties<'height' | 'lineHeight', Output>;
+export declare const icon: Required<IconTokens<'default'>>;

package/dist/types/theme/tokens/components/image.d.ts

@@ -1,8 +1,3 @@
-import { DesignToken, ObjectFitValue, PositionValue, SpaceValue } from '../types/designToken';
-export interface ImageTokens {
-    maxWidth: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-    objectFit: DesignToken<ObjectFitValue>;
-    objectPosition: DesignToken<PositionValue>;
-}
-export declare const image: ImageTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type ImageTokens<Output extends OutputVariantKey> = DesignTokenProperties<'maxWidth' | 'height' | 'objectFit' | 'objectPosition', Output>;
+export declare const image: Required<ImageTokens<'default'>>;

package/dist/types/theme/tokens/components/inAppMessaging.d.ts

@@ -0,0 +1,13 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type BannerTokens<Output> = DesignTokenProperties<'height' | 'width', Output>;
+declare type ButtonTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderRadius' | 'color', Output>;
+declare type DialogTokens<Output> = DesignTokenProperties<'height' | 'minHeight' | 'minWidth' | 'width', Output>;
+declare type HeaderTokens<Output> = DesignTokenProperties<'fontSize' | 'fontWeight', Output>;
+export declare type InAppMessagingTokens<Output extends OutputVariantKey> = {
+    banner?: BannerTokens<Output>;
+    button?: ButtonTokens<Output>;
+    dialog?: DialogTokens<Output>;
+    header?: HeaderTokens<Output>;
+};
+export declare const inappmessaging: Required<InAppMessagingTokens<'default'>>;
+export {};

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

@@ -20,6 +20,7 @@ import { HeadingTokens } from './heading';
 import { HighlightMatchTokens } from './highlightMatch';
 import { IconTokens } from './icon';
 import { ImageTokens } from './image';
+import { InAppMessagingTokens } from './inAppMessaging';
 import { LinkTokens } from './link';
 import { LoaderTokens } from './loader';
 import { MenuTokens } from './menu';
@@ -43,51 +44,61 @@ import { TextAreaFieldTokens } from './textAreaField';
 import { TextFieldTokens } from './textField';
 import { ToggleButtonTokens } from './toggleButton';
 import { ToggleButtonGroupTokens } from './toggleButtonGroup';
-export interface ComponentTokens {
-    alert: AlertTokens;
-    authenticator: AuthenticatorTokens;
-    autocomplete: AutocompleteTokens;
-    badge: BadgeTokens;
-    button: ButtonTokens;
-    card: CardTokens;
-    checkbox: CheckboxTokens;
-    checkboxfield: CheckboxFieldTokens;
-    collection: CollectionTokens;
-    copy: CopyTokens;
-    countrycodeselect: DialCodeSelectTokens;
-    divider: DividerTokens;
-    expander: ExpanderTokens;
-    field: FieldTokens;
-    fieldcontrol: FieldControlTokens;
-    fieldgroup: FieldGroupTokens;
-    fieldmessages: FieldMessagesTokens;
-    flex: FlexTokens;
-    heading: HeadingTokens;
-    icon: IconTokens;
-    highlightmatch: HighlightMatchTokens;
-    image: ImageTokens;
-    link: LinkTokens;
-    loader: LoaderTokens;
-    menu: MenuTokens;
-    pagination: PaginationTokens;
-    passwordfield: PasswordFieldTokens;
-    phonenumberfield: PhoneNumberFieldTokens;
-    placeholder: PlaceholderTokens;
-    radio: RadioTokens;
-    radiogroup: RadioGroupTokens;
-    rating: RatingTokens;
-    searchfield: SearchFieldTokens;
-    select: SelectTokens;
-    selectfield: SelectFieldTokens;
-    sliderfield: SliderFieldTokens;
-    stepperfield: StepperFieldTokens;
-    switchfield: SwitchFieldTokens;
-    table: TableTokens;
-    tabs: TabsTokens;
-    text: TextTokens;
-    textareafield: TextAreaFieldTokens;
-    textfield: TextFieldTokens;
-    togglebutton: ToggleButtonTokens;
-    togglebuttongroup: ToggleButtonGroupTokens;
-}
-export declare const components: ComponentTokens;
+import { OutputVariantKey } from '../types/designToken';
+declare type BaseComponentTokens<Output extends OutputVariantKey> = {
+    alert?: AlertTokens<Output>;
+    authenticator?: AuthenticatorTokens<Output>;
+    autocomplete?: AutocompleteTokens<Output>;
+    badge?: BadgeTokens<Output>;
+    button?: ButtonTokens<Output>;
+    card?: CardTokens<Output>;
+    checkbox?: CheckboxTokens<Output>;
+    checkboxfield?: CheckboxFieldTokens<Output>;
+    collection?: CollectionTokens<Output>;
+    copy?: CopyTokens<Output>;
+    countrycodeselect?: DialCodeSelectTokens<Output>;
+    divider?: DividerTokens<Output>;
+    expander?: ExpanderTokens<Output>;
+    field?: FieldTokens<Output>;
+    fieldcontrol?: FieldControlTokens<Output>;
+    fieldgroup?: FieldGroupTokens<Output>;
+    fieldmessages?: FieldMessagesTokens<Output>;
+    flex?: FlexTokens<Output>;
+    heading?: HeadingTokens<Output>;
+    highlightmatch?: HighlightMatchTokens<Output>;
+    icon?: IconTokens<Output>;
+    image?: ImageTokens<Output>;
+    inappmessaging?: InAppMessagingTokens<Output>;
+    link?: LinkTokens<Output>;
+    loader?: LoaderTokens<Output>;
+    menu?: MenuTokens<Output>;
+    pagination?: PaginationTokens<Output>;
+    passwordfield?: PasswordFieldTokens<Output>;
+    phonenumberfield?: PhoneNumberFieldTokens<Output>;
+    placeholder?: PlaceholderTokens<Output>;
+    radio?: RadioTokens<Output>;
+    radiogroup?: RadioGroupTokens<Output>;
+    rating?: RatingTokens<Output>;
+    searchfield?: SearchFieldTokens<Output>;
+    select?: SelectTokens<Output>;
+    selectfield?: SelectFieldTokens<Output>;
+    sliderfield?: SliderFieldTokens<Output>;
+    stepperfield?: StepperFieldTokens<Output>;
+    switchfield?: SwitchFieldTokens<Output>;
+    table?: TableTokens<Output>;
+    tabs?: TabsTokens<Output>;
+    text?: TextTokens<Output>;
+    textareafield?: TextAreaFieldTokens<Output>;
+    textfield?: TextFieldTokens<Output>;
+    togglebutton?: ToggleButtonTokens<Output>;
+    togglebuttongroup?: ToggleButtonGroupTokens<Output>;
+};
+export declare type ComponentTokens = BaseComponentTokens<'optional'>;
+export declare type DefaultComponentTokens = Required<{
+    [Key in keyof ComponentTokens]: Required<BaseComponentTokens<'default'>[Key]>;
+}>;
+export declare type WebComponentTokens = Required<{
+    [Key in keyof ComponentTokens]: Required<BaseComponentTokens<'required'>[Key]>;
+}>;
+export declare const components: DefaultComponentTokens;
+export {};

package/dist/types/theme/tokens/components/link.d.ts

@@ -1,13 +1,5 @@
-import { ColorValue, DesignToken } from '../types/designToken';
-interface LinkStateTokens {
-    color: DesignToken<ColorValue>;
-}
-export interface LinkTokens {
-    active: LinkStateTokens;
-    color: DesignToken<ColorValue>;
-    focus: LinkStateTokens;
-    hover: LinkStateTokens;
-    visited: LinkStateTokens;
-}
-export declare const link: LinkTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type LinkState = 'active' | 'focus' | 'hover' | 'visited';
+export declare type LinkTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color'> & Record<LinkState, DesignTokenProperties<'color', Output>>;
+export declare const link: Required<LinkTokens<'default'>>;
 export {};

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

@@ -1,40 +1,15 @@
-import { AnimationDurationValue, ColorValue, DesignToken, FontSizeValue, SpaceValue, StrokeEmptyValue, StrokeFilledValue, StrokeLinecapValue } from '../types/designToken';
-interface LoaderSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    height: DesignToken<SpaceValue>;
-    width: DesignToken<SpaceValue>;
-}
-interface LoaderLinearSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    strokeWidth: DesignToken<SpaceValue>;
-}
-interface LoaderLinearTokens {
-    width: DesignToken<SpaceValue>;
-    minWidth: DesignToken<SpaceValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    strokeWidth: DesignToken<SpaceValue>;
-    strokeFilled: DesignToken<StrokeFilledValue>;
-    strokeEmpty: DesignToken<StrokeEmptyValue>;
-    strokeLinecap: DesignToken<StrokeLinecapValue>;
-    animationDuration: DesignToken<AnimationDurationValue>;
-    small: LoaderLinearSizeTokens;
-    large: LoaderLinearSizeTokens;
-}
-interface LoaderTextTokens {
-    fill: DesignToken<ColorValue>;
-}
-export interface LoaderTokens {
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    strokeEmpty: DesignToken<StrokeEmptyValue>;
-    strokeFilled: DesignToken<StrokeFilledValue>;
-    strokeLinecap: DesignToken<StrokeLinecapValue>;
-    animationDuration: DesignToken<AnimationDurationValue>;
-    small: LoaderSizeTokens;
-    large: LoaderSizeTokens;
-    linear: LoaderLinearTokens;
-    text: LoaderTextTokens;
-}
-export declare const loader: LoaderTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type LoaderSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'height' | 'width', Output>;
+declare type LoaderLinearSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'strokeWidth', Output>;
+declare type BaseLoaderTokens<Output> = DesignTokenProperties<'animationDuration' | 'fontSize' | 'height' | 'strokeEmpty' | 'strokeFilled' | 'strokeLinecap' | 'width', Output>;
+export declare type LoaderTokens<Output extends OutputVariantKey> = BaseLoaderTokens<Output> & {
+    small?: LoaderSizeTokens<Output>;
+    large?: LoaderSizeTokens<Output>;
+    linear?: Omit<BaseLoaderTokens<Output> & DesignTokenProperties<'minWidth' | 'strokeWidth', Output> & {
+        small?: LoaderLinearSizeTokens<Output>;
+        large?: LoaderLinearSizeTokens<Output>;
+    }, Output extends 'default' ? 'height' : never>;
+    text?: DesignTokenProperties<'fill', Output>;
+};
+export declare const loader: Required<LoaderTokens<'default'>>;
 export {};

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

@@ -1,27 +1,9 @@
-import { BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, DesignToken, FlexDirectionValue, GapValue, SpaceValue } from '../types/designToken';
-interface MenuSizeTokens {
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-}
-interface MenuItemTokens {
-    minHeight: DesignToken<SpaceValue>;
-    paddingInlineStart: DesignToken<SpaceValue>;
-    paddingInlineEnd: DesignToken<SpaceValue>;
-}
-export interface MenuTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-    flexDirection: DesignToken<FlexDirectionValue>;
-    gap: DesignToken<GapValue>;
-    maxWidth: DesignToken<SpaceValue>;
-    minWidth: DesignToken<SpaceValue>;
-    small: MenuSizeTokens;
-    large: MenuSizeTokens;
-    item: MenuItemTokens;
-}
-export declare const menu: MenuTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type MenuSizeTokens<Output> = DesignTokenProperties<'width' | 'height', Output>;
+export declare type MenuTokens<Output extends OutputVariantKey> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'boxShadow' | 'flexDirection' | 'gap' | 'maxWidth' | 'minWidth', Output> & {
+    small?: MenuSizeTokens<Output>;
+    large?: MenuSizeTokens<Output>;
+    item?: DesignTokenProperties<'minHeight' | 'paddingInlineEnd' | 'paddingInlineStart', Output>;
+};
+export declare const menu: Required<MenuTokens<'default'>>;
 export {};

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

@@ -1,48 +1,12 @@
-import { AlignItemsValue, BackgroundColorValue, BorderRadiusValue, ColorValue, DesignToken, FontSizeValue, JustifyContentValue, SpaceValue, TransitionDurationValue, TransitionPropertyValue } from '../types/designToken';
-interface PaginationCurrentTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    color: DesignToken<ColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface PaginationButtonTokens {
-    color: DesignToken<ColorValue>;
-    paddingInlineStart: DesignToken<SpaceValue>;
-    paddingInlineEnd: DesignToken<SpaceValue>;
-    transitionProperty: DesignToken<TransitionPropertyValue>;
-    transitionDuration: DesignToken<TransitionDurationValue>;
-    hover: PaginationButtonHoverTokens;
-    disabled: PaginationButtonDisabledTokens;
-}
-export interface PaginationButtonHoverTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-}
-export interface PaginationButtonDisabledTokens {
-    color: DesignToken<ColorValue>;
-}
-interface PaginationEllipsisTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    paddingInlineStart: DesignToken<SpaceValue>;
-    paddingInlineEnd: DesignToken<SpaceValue>;
-}
-interface PaginationItemContainerTokens {
-    marginLeft: DesignToken<SpaceValue>;
-    marginRight: DesignToken<SpaceValue>;
-}
-interface PaginationItemSharedTokens {
-    height: DesignToken<SpaceValue>;
-    minWidth: DesignToken<SpaceValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-}
-export interface PaginationTokens {
-    current: PaginationCurrentTokens;
-    button: PaginationButtonTokens;
-    ellipsis: PaginationEllipsisTokens;
-    itemContainer: PaginationItemContainerTokens;
-    itemShared: PaginationItemSharedTokens;
-}
-export declare const pagination: PaginationTokens;
-export {};
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type PaginationTokens<Output extends OutputVariantKey> = {
+    current?: DesignTokenProperties<'alignItems' | 'backgroundColor' | 'color' | 'fontSize' | 'justifyContent', Output>;
+    button?: DesignTokenProperties<'color' | 'paddingInlineEnd' | 'paddingInlineStart' | 'transitionDuration' | 'transitionProperty', Output> & {
+        hover?: DesignTokenProperties<'backgroundColor' | 'color', Output>;
+        disabled?: DesignTokenProperties<'color', Output>;
+    };
+    ellipsis?: DesignTokenProperties<'alignItems' | 'justifyContent' | 'paddingInlineEnd' | 'paddingInlineStart', Output>;
+    itemContainer?: DesignTokenProperties<'marginLeft' | 'marginRight', Output>;
+    itemShared?: DesignTokenProperties<'borderRadius' | 'height' | 'minWidth', Output>;
+};
+export declare const pagination: Required<PaginationTokens<'default'>>;

package/dist/types/theme/tokens/components/passwordField.d.ts

@@ -1,15 +1,13 @@
-import { ColorValue, DesignToken } from '../types/designToken';
-import { StateTokens } from './button';
-interface ButtonTokens {
-    color: DesignToken<ColorValue>;
-    _active: StateTokens;
-    _disabled: StateTokens;
-    _focus: StateTokens;
-    _hover: StateTokens;
-}
-export interface PasswordFieldTokens {
-    color: DesignToken<ColorValue>;
-    button: ButtonTokens;
-}
-export declare const passwordfield: PasswordFieldTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type StateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
+declare type ButtonTokens<Output> = DesignTokenProperties<'color', Output> & {
+    _active?: StateTokens<Output>;
+    _disabled?: StateTokens<Output>;
+    _focus?: StateTokens<Output>;
+    _hover?: StateTokens<Output>;
+};
+export declare type PasswordFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color', Output> & {
+    button?: ButtonTokens<Output>;
+};
+export declare const passwordfield: Required<PasswordFieldTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/phoneNumberField.d.ts

@@ -1,12 +1,7 @@
-import { ColorValue, DesignToken, BorderColorValue, FontSizeValue } from '../types/designToken';
-export interface PhoneNumberFieldTokens {
-    color: DesignToken<ColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    _focus: {
-        borderColor: DesignToken<BorderColorValue>;
-    };
-}
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type PhoneNumberFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color' | 'borderColor' | 'fontSize', Output> & {
+    _focus?: DesignTokenProperties<'borderColor', Output>;
+};
 export declare const phonenumberfield: {
     color: {
         value: string;

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

@@ -1,15 +1,9 @@
-import { BorderRadiusValue, ColorValue, DesignToken, SpaceValue, TransitionDurationValue } from '../types/designToken';
-interface PlaceholderSizeTokens {
-    height: DesignToken<SpaceValue>;
-}
-export interface PlaceholderTokens {
-    borderRadius: DesignToken<BorderRadiusValue>;
-    transitionDuration: DesignToken<TransitionDurationValue>;
-    startColor: DesignToken<ColorValue>;
-    endColor: DesignToken<ColorValue>;
-    small: PlaceholderSizeTokens;
-    default: PlaceholderSizeTokens;
-    large: PlaceholderSizeTokens;
-}
-export declare const placeholder: PlaceholderTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type PlaceholderSizeTokens<Output> = DesignTokenProperties<'height', Output>;
+export declare type PlaceholderTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderRadius' | 'transitionDuration' | 'startColor' | 'endColor', Output> & {
+    small?: PlaceholderSizeTokens<Output>;
+    default?: PlaceholderSizeTokens<Output>;
+    large?: PlaceholderSizeTokens<Output>;
+};
+export declare const placeholder: Required<PlaceholderTokens<'default'>>;
 export {};

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

@@ -1,73 +1,22 @@
-import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, BoxSizingValue, ColorValue, CursorValue, DesignToken, GapValue, JustifyContentValue, OutlineColorValue, OutlineOffsetValue, OutlineStyleValue, OutlineWidthValue, SpaceValue, TransitionDurationValue, TransitionPropertyValue } from '../types/designToken';
-interface RadioDisabledTokens {
-    cursor: DesignToken<CursorValue>;
-}
-interface RadioButtonTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-    boxSizing: DesignToken<BoxSizingValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    transitionProperty: DesignToken<TransitionPropertyValue>;
-    transitionDuration: DesignToken<TransitionDurationValue>;
-    outlineColor: DesignToken<OutlineColorValue>;
-    outlineStyle: DesignToken<OutlineStyleValue>;
-    outlineWidth: DesignToken<OutlineWidthValue>;
-    outlineOffset: DesignToken<OutlineOffsetValue>;
-    padding: DesignToken<SpaceValue>;
-    small: RadioButtonSizeTokens;
-    large: RadioButtonSizeTokens;
-    _checked: RadioButtonCheckedTokens;
-    _focus: RadioButtonFocusTokens;
-    _error: RadioButtonErrorTokens;
-    _disabled: RadioButtonDisabledTokens;
-}
-interface RadioButtonSizeTokens {
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-}
-interface RadioButtonCheckedTokens {
-    color: DesignToken<ColorValue>;
-    _disabled: RadioButtonCheckedDisabledTokens;
-}
-interface RadioButtonCheckedDisabledTokens {
-    color: DesignToken<ColorValue>;
-}
-interface RadioButtonFocusTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-interface RadioButtonErrorTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    _focus: RadioButtonErrorFocusTokens;
-}
-interface RadioButtonErrorFocusTokens {
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-interface RadioButtonDisabledTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface RadioLabelTokens {
-    color: DesignToken<ColorValue>;
-    _disabled: RadioLabelDisabledTokens;
-}
-interface RadioLabelDisabledTokens {
-    color: DesignToken<ColorValue>;
-}
-export interface RadioTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    gap: DesignToken<GapValue>;
-    _disabled: RadioDisabledTokens;
-    button: RadioButtonTokens;
-    label: RadioLabelTokens;
-}
-export declare const radio: RadioTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type RadioButtonSizeTokens<Output> = DesignTokenProperties<'width' | 'height', Output>;
+export declare type RadioTokens<Output extends OutputVariantKey> = DesignTokenProperties<'alignItems' | 'justifyContent' | 'gap', Output> & {
+    _disabled?: DesignTokenProperties<'cursor', Output>;
+    button?: DesignTokenProperties<'alignItems' | 'justifyContent' | 'width' | 'height' | 'boxSizing' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'borderColor' | 'color' | 'backgroundColor' | 'transitionProperty' | 'transitionDuration' | 'outlineColor' | 'outlineStyle' | 'outlineWidth' | 'outlineOffset' | 'padding', Output> & {
+        small?: RadioButtonSizeTokens<Output>;
+        large?: RadioButtonSizeTokens<Output>;
+        _checked?: DesignTokenProperties<'color', Output> & {
+            _disabled?: DesignTokenProperties<'color', Output>;
+        };
+        _focus?: DesignTokenProperties<'borderColor' | 'boxShadow', Output>;
+        _error?: DesignTokenProperties<'borderColor', Output> & {
+            _focus?: DesignTokenProperties<'boxShadow', Output>;
+        };
+        _disabled?: DesignTokenProperties<'borderColor' | 'backgroundColor', Output>;
+    };
+    label?: DesignTokenProperties<'color', Output> & {
+        _disabled?: DesignTokenProperties<'color', Output>;
+    };
+};
+export declare const radio: Required<RadioTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/radioGroup.d.ts

@@ -1,18 +1,9 @@
-import { BackgroundColorValue, BorderColorValue, BorderWidthValue, ColorValue, DesignToken } from '../types/designToken';
-export interface RadioGroupTokens {
-    radio: {
-        borderWidth: DesignToken<BorderWidthValue>;
-        borderColor: DesignToken<BorderColorValue>;
-        backgroundColor: DesignToken<BackgroundColorValue>;
-        _checked: {
-            color: DesignToken<ColorValue>;
-        };
-        label: {
-            color: DesignToken<ColorValue>;
-        };
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type RadioGroupTokens<Output extends OutputVariantKey> = {
+    radio?: DesignTokenProperties<'borderWidth' | 'borderColor' | 'backgroundColor', Output> & {
+        _checked?: DesignTokenProperties<'color', Output>;
+        label?: DesignTokenProperties<'color', Output>;
     };
-    label: {
-        color: DesignToken<ColorValue>;
-    };
-}
-export declare const radiogroup: RadioGroupTokens;
+    label?: DesignTokenProperties<'color', Output>;
+};
+export declare const radiogroup: Required<RadioGroupTokens<'default'>>;