@aws-amplify/ui-react 4.6.3 → 5.0.0

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { FlexProps } from './flex';
-import { GridProps } from './grid';
+import { BaseFlexProps } from './flex';
+import { BaseGridProps } from './grid';
 import { BaseStyleProps } from './style';
+import { ElementType, PrimitiveProps, PrimitivePropsWithAs } from './view';
 export type CollectionType = 'list' | 'grid' | 'table';
 export interface CollectionWrapperProps extends BaseStyleProps {
     /**
@@ -62,10 +63,11 @@ export interface CollectionBaseProps<Item> {
      */
     children: (item: Item, index: number) => JSX.Element;
 }
-export type ListCollectionProps<Item> = FlexProps & CollectionBaseProps<Item>;
-export type GridCollectionProps<Item> = GridProps & CollectionBaseProps<Item>;
-export type CollectionProps<Item> = CollectionWrapperProps & (({
+export type ListCollectionProps<Item> = BaseFlexProps & CollectionBaseProps<Item>;
+export type GridCollectionProps<Item> = BaseGridProps & CollectionBaseProps<Item>;
+export type BaseCollectionProps<Item, Element extends ElementType> = PrimitivePropsWithAs<CollectionWrapperProps, Element> & (({
     type: 'list';
 } & ListCollectionProps<Item>) | ({
     type: 'grid';
 } & GridCollectionProps<Item>));
+export type CollectionProps<Item, Element extends ElementType = 'div'> = PrimitiveProps<BaseCollectionProps<Item, Element>, Element>;

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

@@ -1,5 +1,5 @@
 import { Sizes } from './base';
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 export type DividerOrientations = 'horizontal' | 'vertical';
 export type DividerSizes = Sizes;
 export interface DividerOptions {
@@ -23,5 +23,6 @@ export interface DividerOptions {
      */
     label?: string;
 }
-export interface DividerProps extends ViewProps, DividerOptions {
+export interface BaseDividerProps extends BaseViewProps, DividerOptions {
 }
+export type DividerProps<Element extends ElementType = 'hr'> = PrimitiveProps<BaseDividerProps, Element>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ViewProps } from '../types/view';
+import { ElementType, PrimitiveProps, BaseViewProps } from '../types/view';
 type ExpanderType = 'single' | 'multiple';
-export interface ExpanderProps extends ViewProps {
+export interface BaseExpanderProps extends BaseViewProps {
     /**
      * @description
      * The value of the item(s) to expand.  Use on uncontrolled component.
@@ -32,7 +32,8 @@ export interface ExpanderProps extends ViewProps {
      */
     onValueChange?: (value?: string | string[]) => void;
 }
-export interface ExpanderItemProps extends ViewProps {
+export type ExpanderProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseExpanderProps, Element>;
+export interface BaseExpanderItemProps extends BaseViewProps {
     /**
      * @description
      * The content of the heading.
@@ -44,4 +45,5 @@ export interface ExpanderItemProps extends ViewProps {
      */
     value: string;
 }
+export type ExpanderItemProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseExpanderItemProps, Element>;
 export {};

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

@@ -1,12 +1,13 @@
 /// <reference types="react" />
-import { FieldGroupIconButtonProps } from './fieldGroupIcon';
-import { InputProps } from './input';
-import { TextProps } from './text';
+import { BaseFieldGroupIconButtonProps } from './fieldGroupIcon';
+import { BaseInputProps } from './input';
+import { BaseTextProps } from './text';
 import { BaseStyleProps } from './style';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 /**
  * Shared type across all field types
  */
-export interface FieldProps {
+export interface BaseFieldProps extends BaseViewProps {
     /**
      * @description
      * Provides additional information needed to fill field
@@ -36,11 +37,15 @@ export interface FieldProps {
      */
     inputStyles?: BaseStyleProps;
 }
-export interface FieldClearButtonProps extends Partial<FieldGroupIconButtonProps> {
+export type FieldProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseFieldProps, Element>;
+export interface BaseFieldClearButtonProps extends Partial<BaseFieldGroupIconButtonProps> {
 }
-export interface FieldDescriptionProps extends TextProps, Pick<FieldProps, 'descriptiveText' | 'labelHidden'> {
+export type FieldClearButtonProps<Element extends ElementType = 'button'> = PrimitiveProps<BaseFieldClearButtonProps, Element>;
+export interface BaseFieldDescriptionProps extends BaseTextProps, Pick<BaseFieldProps, 'descriptiveText' | 'labelHidden'> {
 }
-export interface FieldErrorMessageProps extends TextProps, Pick<FieldProps, 'errorMessage'>, Pick<InputProps, 'hasError'> {
+export type FieldDescriptionProps<Element extends ElementType = 'p'> = PrimitiveProps<BaseFieldDescriptionProps, Element>;
+export interface BaseFieldErrorMessageProps extends BaseTextProps, Pick<BaseFieldProps, 'errorMessage'>, Pick<BaseInputProps, 'hasError'> {
 }
+export type FieldErrorMessageProps<Element extends ElementType = 'p'> = PrimitiveProps<BaseFieldErrorMessageProps, Element>;
 export type FieldVariations = 'quiet';
 export type LabelPositions = 'start' | 'end' | 'top' | 'bottom';

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { FlexProps } from './flex';
+import { BaseFlexProps } from './flex';
 import { FieldVariations } from './field';
+import { ElementType, PrimitiveProps } from './view';
 export type FieldGroupOrientation = 'horizontal' | 'vertical';
-export interface FieldGroupOptions extends FlexProps {
+export interface BaseFieldGroupOptions extends BaseFlexProps {
     children?: React.ReactNode;
     orientation?: FieldGroupOrientation;
     outerStartComponent?: React.ReactNode;
@@ -11,3 +12,4 @@ export interface FieldGroupOptions extends FlexProps {
     innerEndComponent?: React.ReactNode;
     variation?: FieldVariations;
 }
+export type FieldGroupOptions<Element extends ElementType = 'div'> = PrimitiveProps<BaseFieldGroupOptions, Element>;

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

@@ -1,6 +1,6 @@
-import { ViewProps } from './view';
-import { ButtonProps } from './button';
-export interface FieldGroupIconProps extends ViewProps {
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
+import { BaseButtonProps } from './button';
+export interface BaseFieldGroupIconProps extends BaseViewProps {
     /**
      * @description
      * Determines whether Icon should be visible
@@ -13,5 +13,7 @@ export interface FieldGroupIconProps extends ViewProps {
      */
     excludeFromTabOrder?: boolean;
 }
-export interface FieldGroupIconButtonProps extends FieldGroupIconProps, Pick<ButtonProps, 'onClick' | 'variation' | 'size' | 'type'> {
+export type FieldGroupIconProps<Element extends ElementType = 'button' | 'div'> = PrimitiveProps<BaseFieldGroupIconProps, Element>;
+export interface BaseFieldGroupIconButtonProps extends BaseFieldGroupIconProps, Pick<BaseButtonProps, 'onClick' | 'variation' | 'size' | 'type'> {
 }
+export type FieldGroupIconButtonProps<Element extends ElementType = 'button'> = PrimitiveProps<BaseFieldGroupIconButtonProps, Element>;

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

@@ -1,6 +1,6 @@
 import { Property } from 'csstype';
 import { CSSLayoutStyleProps, ResponsiveStyle } from './style';
-import { ViewProps } from './view';
+import { BaseViewProps, PrimitiveProps, ElementType } from './view';
 export interface FlexContainerStyleProps extends CSSLayoutStyleProps {
     /**
      * @description
@@ -19,8 +19,9 @@ export interface FlexContainerStyleProps extends CSSLayoutStyleProps {
      */
     wrap?: ResponsiveStyle<Property.FlexWrap>;
 }
-export interface FlexProps extends ViewProps, FlexContainerStyleProps {
+export interface BaseFlexProps extends BaseViewProps, FlexContainerStyleProps {
 }
+export type FlexProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseFlexProps, Element>;
 export interface FlexItemStyleProps {
     /**
      * @description

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

@@ -1,6 +1,6 @@
 import { Property } from 'csstype';
 import { ResponsiveStyle, CSSLayoutStyleProps } from './style';
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 export type GridSpanType = number | string | 'auto';
 export interface GridContainerStyleProps extends CSSLayoutStyleProps {
     /**
@@ -105,5 +105,6 @@ export interface GridItemStyleProps {
      */
     rowStart?: ResponsiveStyle<Property.GridRowStart>;
 }
-export interface GridProps extends GridContainerStyleProps, ViewProps {
+export interface BaseGridProps extends GridContainerStyleProps, BaseViewProps {
 }
+export type GridProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseGridProps, Element>;

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

@@ -1,9 +1,12 @@
-import { TextProps } from './text';
+import { BaseTextProps } from './text';
+import { ElementType, PrimitiveProps } from './view';
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export interface HeadingProps extends TextProps {
+export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface BaseHeadingProps extends BaseTextProps {
     /**
      * @description
      * Controls which semantic section heading element is rendered, <h1> through <h6>
      */
     level?: HeadingLevel;
 }
+export type HeadingProps<Element extends ElementType = HeadingTag> = PrimitiveProps<BaseHeadingProps, Element>;

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

@@ -1,5 +1,5 @@
-import { ViewProps } from './view';
-export interface HighlightMatchProps extends ViewProps {
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
+export interface BaseHighlightMatchProps extends BaseViewProps {
     /**
      * @description
      * The label you would like to have match highlighting
@@ -11,3 +11,4 @@ export interface HighlightMatchProps extends ViewProps {
      */
     query: string;
 }
+export type HighlightMatchProps<Element extends ElementType = 'span'> = PrimitiveProps<BaseHighlightMatchProps, Element>;

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

@@ -1,5 +1,5 @@
 import { Property } from 'csstype';
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 import { Sizes } from './base';
 import * as React from 'react';
 export type ViewBox = {
@@ -9,7 +9,7 @@ export type ViewBox = {
     height?: number;
 };
 export type IconSize = Sizes;
-export interface IconProps extends ViewProps {
+export interface BaseIconProps extends BaseViewProps {
     /**
      * @description
      * This defines the shape of the <path> SVG element(the 'd' attribute).
@@ -49,3 +49,4 @@ export interface IconProps extends ViewProps {
      */
     paths?: React.SVGAttributes<SVGPathElement>[];
 }
+export type IconProps<Element extends ElementType = 'svg'> = PrimitiveProps<BaseIconProps, Element>;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Property } from 'csstype';
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 import { ResponsiveStyle } from './style';
 export interface ImageStyleProps {
     /**
@@ -52,5 +52,6 @@ export interface ImageOptions extends ImageStyleProps {
      */
     onError?(error: string | React.SyntheticEvent<HTMLImageElement, Event>): void;
 }
-export interface ImageProps extends ViewProps, ImageOptions {
+export interface BaseImageProps extends BaseViewProps, ImageOptions {
 }
+export type ImageProps<Element extends ElementType = 'img'> = PrimitiveProps<BaseImageProps, Element>;

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Sizes } from './base';
 import { FieldVariations } from './field';
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 export type EnterKeyHint = 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
 export type InputSizes = Sizes;
-export interface InputProps extends ViewProps {
+export interface BaseInputProps extends BaseViewProps {
     /**
      * @description
      * Specifies permissions for browser UA to autocomplete field.
@@ -100,3 +100,4 @@ export interface InputProps extends ViewProps {
      */
     variation?: FieldVariations;
 }
+export type InputProps<Element extends ElementType = 'input'> = PrimitiveProps<BaseInputProps, Element>;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ViewProps } from './view';
-export interface LabelProps extends ViewProps {
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
+export interface BaseLabelProps extends BaseViewProps {
     /**
      * @description
      * Whether label should be visually hidden
@@ -12,3 +12,4 @@ export interface LabelProps extends ViewProps {
      */
     children: React.ReactNode;
 }
+export type LabelProps<Element extends ElementType = 'label'> = PrimitiveProps<BaseLabelProps, Element>;

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

@@ -1,26 +1,12 @@
 import * as React from 'react';
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 export interface LinkOptions {
-    /**
-     * @description
-     * Children to be rendered inside the Link component
-     */
-    children: React.ReactNode;
     /**
      * @description
      * Boolean value indicating an external link
      * sets the rel attribute to "noopener noreferrer"
      */
     isExternal?: boolean;
-    /**
-     * @deprecated
-     * The Link component's to prop will soon be deprecated.
-     * Please see the Amplify UI documentation for using the Link component with routing libraries:
-     * https://ui.docs.amplify.aws/react/components/link#routing-libraries
-     * @description
-     * A string representation of the URL path
-     */
-    to?: string;
     /**
      * @description
      * a stringifier that returns a string containing the whole URL, and allows the href to be updated.
@@ -29,5 +15,11 @@ export interface LinkOptions {
      */
     href?: string;
 }
-export interface LinkProps extends ViewProps, LinkOptions {
+export interface BaseLinkProps extends BaseViewProps, LinkOptions {
+    /**
+     * @description
+     * Children to be rendered inside the Link component
+     */
+    children: React.ReactNode;
 }
+export type LinkProps<Element extends ElementType = 'a'> = PrimitiveProps<BaseLinkProps, Element>;

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

@@ -1,10 +1,10 @@
 import { Property } from 'csstype';
-import { ViewProps } from '../types/view';
+import { ElementType, PrimitiveProps, BaseViewProps } from '../types/view';
 import { Sizes } from './base';
 import { StyleToken } from './style';
 export type LoaderSizes = Sizes;
 export type LoaderVariations = 'linear';
-export interface LoaderProps extends ViewProps {
+export interface BaseLoaderProps extends BaseViewProps {
     /**
      * @description
      * This will set the size of Loader.
@@ -41,3 +41,4 @@ export interface LoaderProps extends ViewProps {
      */
     isPercentageTextHidden?: boolean;
 }
+export type LoaderProps<Element extends ElementType = 'svg'> = PrimitiveProps<BaseLoaderProps, Element>;

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { ButtonProps } from './button';
-import { FlexProps } from './flex';
+import { BaseButtonProps } from './button';
+import { BaseFlexProps } from './flex';
 import { Sizes } from './base';
-export interface MenuProps extends FlexProps {
+import { ElementType, PrimitiveProps } from './view';
+export interface BaseMenuProps extends BaseFlexProps {
     /**
      * @description
      * Alignment of menu against trigger
@@ -41,10 +42,12 @@ export interface MenuProps extends FlexProps {
      */
     triggerClassName?: string;
 }
-export interface MenuItemProps extends ButtonProps {
+export type MenuProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseMenuProps, Element>;
+export interface BaseMenuItemProps extends BaseButtonProps {
     /**
      * @description
      * Accepts any number of MenuItem components
      */
     children?: React.ReactNode;
 }
+export type MenuItemProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseMenuItemProps, Element>;

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

@@ -1,10 +1,10 @@
 import { BaseComponentProps, AriaProps } from './base';
 import { BaseStyleProps } from './style';
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 export type PaginationItemType = 'page' | 'next' | 'previous' | 'ellipsis';
 export type PaginationCallbackType = 'onNext' | 'onPrevious' | 'onChange';
 export type PaginationLabelType = 'pageLabel' | 'currentPageLabel' | 'previousLabel' | 'nextLabel';
-interface BasePaginationProps {
+export interface BasePaginationProps extends BaseViewProps {
     /**
      * @description
      * Index of the current page. (starting from 1)
@@ -72,13 +72,12 @@ interface BasePaginationProps {
      */
     onChange?: (newPageIndex?: number, prevPageIndex?: number) => void;
 }
-export interface PaginationProps extends BasePaginationProps, ViewProps {
-}
+export type PaginationProps<Element extends ElementType = 'nav'> = PrimitiveProps<BasePaginationProps, Element>;
 export interface UsePaginationProps extends Omit<BasePaginationProps, PaginationCallbackType & PaginationLabelType> {
 }
-export interface UsePaginationResult extends Required<Omit<BasePaginationProps, PaginationLabelType>> {
+export interface UsePaginationResult extends Required<Omit<BasePaginationProps, PaginationLabelType | keyof BaseViewProps>> {
 }
-export interface PaginationItemProps extends BaseComponentProps, BaseStyleProps, AriaProps {
+export interface BasePaginationItemProps extends BaseComponentProps, BaseStyleProps, AriaProps {
     /**
      * @description
      * Available item type are 'page', 'next', 'previous' and 'ellipsis'.
@@ -112,4 +111,4 @@ export interface PaginationItemProps extends BaseComponentProps, BaseStyleProps,
      */
     onClick?: () => void;
 }
-export {};
+export type PaginationItemProps<Element extends ElementType = 'div'> = PrimitiveProps<BasePaginationItemProps, Element>;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { ButtonProps } from './button';
-import { TextFieldProps } from './textField';
-export interface PasswordFieldProps extends TextFieldProps {
+import { BaseButtonProps } from './button';
+import { BaseTextFieldProps } from './textField';
+import { ElementType, PrimitiveProps } from './view';
+export interface BasePasswordFieldProps extends BaseTextFieldProps {
     /**
      * @description
      * For password fields, will hide the "show password" button
@@ -51,8 +52,9 @@ export interface PasswordFieldProps extends TextFieldProps {
      */
     showPasswordButtonRef?: React.Ref<HTMLButtonElement>;
 }
+export type PasswordFieldProps<Element extends ElementType = 'input'> = PrimitiveProps<BasePasswordFieldProps, Element>;
 export type PasswordFieldType = 'password' | 'text';
-export interface ShowPasswordButtonProps extends ButtonProps {
+export interface BaseShowPasswordButtonProps extends BaseButtonProps {
     /**
      * @description
      * Determines whether the input is hidden or displayed. Options include 'password' or 'text'
@@ -89,3 +91,4 @@ export interface ShowPasswordButtonProps extends ButtonProps {
      */
     showPasswordButtonLabel?: string;
 }
+export type ShowPasswordButtonProps<Element extends ElementType = 'button'> = PrimitiveProps<BaseShowPasswordButtonProps, Element>;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { SelectFieldProps } from './selectField';
-import { TextFieldProps } from './textField';
-interface optionalPhoneNumberFieldProps extends TextFieldProps, CountryCodeFieldProps {
+import { BaseSelectFieldProps } from './selectField';
+import { BaseTextFieldProps } from './textField';
+import { ElementType, PrimitiveProps } from './view';
+interface optionalPhoneNumberFieldProps extends BaseTextFieldProps, CountryCodeFieldProps {
     /**
      * @description
      * Sets a hidden and accessible label for the dial code selector
@@ -91,10 +92,12 @@ interface DialCodeRequired extends optionalPhoneNumberFieldProps {
      */
     defaultDialCode: string;
 }
-export type PhoneNumberFieldProps = CountryCodeRequired | DialCodeRequired;
-export interface DialCodeSelectProps extends SelectFieldProps {
+export type BasePhoneNumberFieldProps = CountryCodeRequired | DialCodeRequired;
+export type PhoneNumberFieldProps<Element extends ElementType = 'input'> = PrimitiveProps<BasePhoneNumberFieldProps, Element>;
+export interface BaseDialCodeSelectProps extends BaseSelectFieldProps {
     defaultValue?: string;
     dialCodeList?: Array<string>;
     isReadOnly?: boolean;
 }
+export type DialCodeSelectProps<Element extends ElementType = 'select'> = PrimitiveProps<BaseDialCodeSelectProps, Element>;
 export {};

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

@@ -1,7 +1,7 @@
 import { Sizes } from './base';
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 export type PlaceholderSizes = Sizes;
-export interface PlaceholderProps extends ViewProps {
+export interface BasePlaceholderProps extends BaseViewProps {
     /**
      * @description
      * If true, the placeholder won't show, if false the placeholder will show.
@@ -15,3 +15,4 @@ export interface PlaceholderProps extends ViewProps {
      */
     size?: PlaceholderSizes;
 }
+export type PlaceholderProps<Element extends ElementType = 'div'> = PrimitiveProps<BasePlaceholderProps, Element>;

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

@@ -1,6 +1,7 @@
-import { InputProps } from './input';
+import { BaseInputProps } from './input';
 import { LabelPositions } from './field';
-export interface RadioProps extends InputProps {
+import { ElementType, PrimitiveProps } from './view';
+export interface BaseRadioProps extends BaseInputProps {
     value: string;
     /**
      * @description
@@ -9,3 +10,4 @@ export interface RadioProps extends InputProps {
      */
     labelPosition?: LabelPositions;
 }
+export type RadioProps<Element extends ElementType = 'input'> = PrimitiveProps<BaseRadioProps, Element>;

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { FlexContainerStyleProps } from './flex';
-import { FieldProps, LabelPositions } from './field';
-import { InputProps } from './input';
-export interface RadioGroupFieldProps extends FieldProps, FlexContainerStyleProps, InputProps {
+import { BaseFieldProps, LabelPositions } from './field';
+import { BaseInputProps } from './input';
+import { ElementType, PrimitiveProps } from './view';
+export interface BaseRadioGroupFieldProps extends BaseFieldProps, FlexContainerStyleProps, BaseInputProps {
     name: string;
     value?: string;
     defaultValue?: string;
@@ -18,3 +19,4 @@ export interface RadioGroupFieldProps extends FieldProps, FlexContainerStyleProp
      */
     labelPosition?: LabelPositions;
 }
+export type RadioGroupFieldProps<Element extends ElementType = 'input'> = PrimitiveProps<BaseRadioGroupFieldProps, Element>;

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { Property } from 'csstype';
-import { FlexProps } from './flex';
+import { BaseFlexProps } from './flex';
 import { Sizes } from './base';
 import { StyleToken } from './style';
+import { ElementType, PrimitiveProps } from './view';
 export type RatingSizes = Sizes;
 export interface RatingOptions {
     /**
@@ -52,5 +53,6 @@ export interface RatingOptions {
      */
     value?: number;
 }
-export interface RatingProps extends RatingOptions, FlexProps {
+export interface BaseRatingProps extends RatingOptions, BaseFlexProps {
 }
+export type RatingProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseRatingProps, Element>;

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

@@ -1,10 +1,11 @@
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 type ScrollViewOrientation = 'horizontal' | 'vertical';
-export interface ScrollViewProps extends ViewProps {
+export interface BaseScrollViewProps extends BaseViewProps {
     /**
      * @deprecated This prop has been deprecated. To get horizontal or vertical scrollbars,
      * make the width or height of the ScrollView component smaller than the content.
      */
     orientation?: ScrollViewOrientation;
 }
+export type ScrollViewProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseScrollViewProps, Element>;
 export {};

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { FieldGroupIconButtonProps } from './fieldGroupIcon';
-import { TextFieldProps } from './textField';
-export interface SearchFieldProps extends TextFieldProps {
+import { BaseTextFieldProps } from './textField';
+import { ElementType, PrimitiveProps } from './view';
+export interface BaseSearchFieldProps extends BaseTextFieldProps {
     /**
      * @description
      * Set the initial value for an uncontrolled search field
@@ -54,8 +55,10 @@ export interface SearchFieldProps extends TextFieldProps {
      */
     searchButtonRef?: React.Ref<HTMLButtonElement>;
 }
-export interface SearchFieldButtonProps extends Partial<FieldGroupIconButtonProps> {
+export type SearchFieldProps<Element extends ElementType = 'input'> = PrimitiveProps<BaseSearchFieldProps, Element>;
+export interface BaseSearchFieldButtonProps extends Partial<FieldGroupIconButtonProps> {
 }
+export type SearchFieldButtonProps<Element extends ElementType = 'button'> = PrimitiveProps<BaseSearchFieldButtonProps, Element>;
 export interface UseSearchFieldProps extends Partial<SearchFieldProps> {
     externalRef?: React.ForwardedRef<HTMLInputElement>;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { ViewProps } from './view';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 import { Sizes } from './base';
 export type SelectVariation = 'quiet';
-export interface SelectProps extends ViewProps {
+export interface BaseSelectProps extends BaseViewProps {
     /**
      * @description
      * A string providing a hint for a user agent's autocomplete feature
@@ -69,3 +69,4 @@ export interface SelectProps extends ViewProps {
      */
     onChange?: React.ChangeEventHandler<HTMLSelectElement>;
 }
+export type SelectProps<Element extends ElementType = 'select'> = PrimitiveProps<BaseSelectProps, Element>;

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

@@ -1,10 +1,12 @@
 import { FlexContainerStyleProps } from './flex';
-import { SelectProps } from './select';
-import { FieldProps } from './field';
-export interface SelectFieldProps extends FieldProps, FlexContainerStyleProps, SelectProps {
+import { BaseSelectProps } from './select';
+import { BaseFieldProps } from './field';
+import { ElementType, PrimitiveProps } from './view';
+export interface BaseSelectFieldProps extends BaseFieldProps, FlexContainerStyleProps, BaseSelectProps {
     /**
      * @description
      * List of option values for select dropdown
      */
     options?: string[];
 }
+export type SelectFieldProps<Element extends ElementType = 'select'> = PrimitiveProps<BaseSelectFieldProps, Element>;

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

@@ -1,11 +1,11 @@
 import { Property } from 'csstype';
 import React from 'react';
 import { StyleToken } from './style';
-import { TextFieldProps } from './textField';
-import { ViewProps } from './view';
+import { BaseTextFieldProps } from './textField';
+import { ElementType, PrimitiveProps, BaseViewProps } from './view';
 type SliderOrientation = 'horizontal' | 'vertical';
 type Direction = 'ltr' | 'rtl';
-export interface SliderFieldProps extends TextFieldProps, ViewProps {
+export interface BaseSliderFieldProps extends BaseTextFieldProps, BaseViewProps {
     /**
      * @description
      * Sets the minimum value for the SliderField range
@@ -79,4 +79,5 @@ export interface SliderFieldProps extends TextFieldProps, ViewProps {
      */
     dir?: Direction;
 }
+export type SliderFieldProps<Element extends ElementType = 'span'> = PrimitiveProps<BaseSliderFieldProps, Element>;
 export {};