Add display name to primitives

packages/react/src/primitives/Alert/Alert.tsx

@@ -74,3 +74,5 @@ export const Alert: Primitive<AlertProps, typeof Flex> = ({
     )
   );
 };
+
+Alert.displayName = 'Alert';

packages/react/src/primitives/Alert/AlertIcon.tsx

@@ -25,3 +25,5 @@ export const AlertIcon: React.FC<AlertIconProps> = ({
       return null;
   }
 };
+
+AlertIcon.displayName = 'AlertIcon';

packages/react/src/primitives/Badge/Badge.tsx

@@ -21,3 +21,5 @@ export const Badge: Primitive<BadgeProps, 'span'> = ({
     {children}
   </View>
 );
+
+Badge.displayName = 'Badge';

packages/react/src/primitives/Button/Button.tsx

@@ -33,3 +33,5 @@ export const Button: Primitive<ButtonProps, 'button'> = ({
     {isLoading && loadingText ? <span>{loadingText}</span> : children}
   </View>
 );
+
+Button.displayName = 'Button';

packages/react/src/primitives/ButtonGroup/ButtonGroup.tsx

@@ -26,3 +26,5 @@ export const ButtonGroup: Primitive<ButtonGroupProps, typeof Flex> = ({
     })}
   </Flex>
 );
+
+ButtonGroup.displayName = 'ButtonGroup';

packages/react/src/primitives/Card/Card.tsx

@@ -13,3 +13,5 @@ export const Card: Primitive<CardProps, 'div'> = ({
     {children}
   </View>
 );
+
+Card.displayName = 'Card';

packages/react/src/primitives/Checkbox/Checkbox.tsx

@@ -94,3 +94,5 @@ export const Checkbox: Primitive<CheckboxProps, 'input'> = ({
     </Flex>
   );
 };
+
+Checkbox.displayName = 'Checkbox';

packages/react/src/primitives/CheckboxField/CheckboxField.tsx

@@ -69,3 +69,5 @@ export const CheckboxField: Primitive<CheckboxFieldProps, 'input'> = ({
     </Flex>
   );
 };
+
+CheckboxField.displayName = 'CheckboxField';

packages/react/src/primitives/Collection/Collection.tsx

@@ -113,3 +113,5 @@ export const Collection = <Item,>({
     </Flex>
   );
 };
+
+Collection.displayName = 'Collection';

packages/react/src/primitives/Divider/Divider.tsx

@@ -18,3 +18,5 @@ export const Divider: Primitive<DividerProps, 'hr'> = ({
     {...rest}
   />
 );
+
+Divider.displayName = 'Divider';

packages/react/src/primitives/Field/FieldClearButton.tsx

@@ -12,3 +12,5 @@ export const FieldClearButton: Primitive<FieldClearButtonProps, 'button'> = (
     <IconClose size={props.size} />
   </FieldGroupIconButton>
 );
+
+FieldClearButton.displayName = 'FieldClearButton';

packages/react/src/primitives/Field/FieldDescription.tsx

@@ -14,3 +14,5 @@ export const FieldDescription: React.FC<FieldDescriptionProps> = ({
     </Text>
   ) : null;
 };
+
+FieldDescription.displayName = 'FieldDescription';

packages/react/src/primitives/Field/FieldErrorMessage.tsx

@@ -14,3 +14,5 @@ export const FieldErrorMessage: React.FC<FieldErrorMessageProps> = ({
     </Text>
   ) : null;
 };
+
+FieldErrorMessage.displayName = 'FieldErrorMessage';

packages/react/src/primitives/FieldGroup/FieldGroup.tsx

@@ -66,3 +66,5 @@ export const FieldGroup: Primitive<FieldGroupOptions, typeof Flex> = ({
     </Flex>
   );
 };
+
+FieldGroup.displayName = 'FieldGroup';

packages/react/src/primitives/FieldGroupIcon/FieldGroupIcon.tsx

@@ -21,3 +21,5 @@ export const FieldGroupIcon: Primitive<FieldGroupIconProps, 'button'> = ({
     </View>
   ) : null;
 };
+
+FieldGroupIcon.displayName = 'FieldGroupIcon';

packages/react/src/primitives/FieldGroupIcon/FieldGroupIconButton.tsx

@@ -19,3 +19,5 @@ export const FieldGroupIconButton: React.FC<FieldGroupIconButtonProps> = ({
     {children}
   </FieldGroupIcon>
 );
+
+FieldGroupIconButton.displayName = 'FieldGroupIconButton';

packages/react/src/primitives/Flex/Flex.tsx

@@ -13,3 +13,5 @@ export const Flex: Primitive<FlexProps, 'div'> = ({
     {children}
   </View>
 );
+
+Flex.displayName = 'Flex';

packages/react/src/primitives/Grid/Grid.tsx

@@ -13,3 +13,5 @@ export const Grid: Primitive<GridProps, 'div'> = ({
     {children}
   </View>
 );
+
+Grid.displayName = 'Grid';

packages/react/src/primitives/Heading/Heading.tsx

@@ -33,3 +33,5 @@ export const Heading: Primitive<HeadingProps, HeadingTag> = ({
     {children}
   </View>
 );
+
+Heading.displayName = 'Heading';

packages/react/src/primitives/Icon/Icon.tsx

@@ -29,3 +29,5 @@ export const Icon: Primitive<IconProps, 'svg'> = ({
     </View>
   );
 };
+
+Icon.displayName = 'Icon';

packages/react/src/primitives/Image/Image.tsx

@@ -11,3 +11,5 @@ export const Image: Primitive<ImageProps, 'img'> = ({ className, ...rest }) => (
     {...rest}
   />
 );
+
+Image.displayName = 'Image';

packages/react/src/primitives/Input/Input.tsx

@@ -62,3 +62,5 @@ export const Input: Primitive<InputProps, 'input'> = ({
     {...rest}
   />
 );
+
+Input.displayName = 'Input';

packages/react/src/primitives/Label/Label.tsx

@@ -22,3 +22,5 @@ export const Label: Primitive<LabelProps, 'label'> = ({
     </View>
   );
 };
+
+Label.displayName = 'Label';

packages/react/src/primitives/Link/Link.tsx

@@ -23,3 +23,5 @@ export const Link: Primitive<LinkProps, 'a'> = ({
     </View>
   );
 };
+
+Link.displayName = 'Link';

packages/react/src/primitives/Loader/Loader.tsx

@@ -74,3 +74,5 @@ export const Loader: Primitive<LoaderProps, 'svg'> = ({
     </View>
   );
 };
+
+Loader.displayName = 'Loader';

packages/react/src/primitives/Menu/Menu.tsx

@@ -53,3 +53,5 @@ export const Menu: Primitive<MenuProps, 'div'> = ({
     </DropdownMenuContent>
   </DropdownMenu>
 );
+
+Menu.displayName = 'Menu';

packages/react/src/primitives/Menu/MenuButton.tsx

@@ -50,3 +50,5 @@ export const MenuButton = React.forwardRef<
     );
   }
 );
+
+MenuButton.displayName = 'MenuButton';

packages/react/src/primitives/Menu/MenuItem.tsx

@@ -24,3 +24,5 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
     );
   }
 );
+
+MenuItem.displayName = 'MenuItem';

packages/react/src/primitives/Pagination/Pagination.tsx

@@ -37,3 +37,5 @@ export const Pagination: Primitive<PaginationProps, 'nav'> = ({
     </View>
   );
 };
+
+Pagination.displayName = 'Pagination';

packages/react/src/primitives/Pagination/PaginationItem.tsx

@@ -107,3 +107,5 @@ export const PaginationItem: React.FC<PaginationItemProps> = ({
   }
   return <View as="li" />;
 };
+
+PaginationItem.displayName = 'PaginationItem';

packages/react/src/primitives/PasswordField/PasswordField.tsx

@@ -45,3 +45,5 @@ export const PasswordField: Primitive<PasswordFieldProps, 'input'> = ({
     />
   );
 };
+
+PasswordField.displayName = 'PasswordField';

packages/react/src/primitives/PasswordField/ShowPasswordButton.tsx

@@ -32,3 +32,5 @@ export const ShowPasswordButton: React.FC<ShowPasswordButtonProps> = ({
     </Button>
   );
 };
+
+ShowPasswordButton.displayName = 'ShowPasswordButton';

packages/react/src/primitives/PhoneNumberField/CountryCodeSelect.tsx

@@ -31,3 +31,5 @@ export const CountryCodeSelect: Primitive<CountryCodeSelectProps, 'select'> = ({
     </SelectField>
   );
 };
+
+CountryCodeSelect.displayName = 'CountryCodeSelect';

packages/react/src/primitives/PhoneNumberField/PhoneNumberField.tsx

@@ -49,3 +49,5 @@ export const PhoneNumberField: Primitive<PhoneNumberFieldProps, 'input'> = ({
     />
   );
 };
+
+PhoneNumberField.displayName = 'PhoneNumberField';

packages/react/src/primitives/Placeholder/Placeholder.tsx

@@ -23,3 +23,5 @@ export const Placeholder: Primitive<PlaceholderProps, 'div'> = ({
     />
   );
 };
+
+Placeholder.displayName = 'Placeholder';

packages/react/src/primitives/Radio/Radio.tsx

@@ -81,3 +81,5 @@ export const Radio: Primitive<RadioProps, 'input'> = ({
     </Flex>
   );
 };
+
+Radio.displayName = 'Radio';

packages/react/src/primitives/RadioGroupField/RadioGroupField.tsx

@@ -86,3 +86,5 @@ export const RadioGroupField: Primitive<RadioGroupFieldProps, typeof Flex> = ({
     </Flex>
   );
 };
+
+RadioGroupField.displayName = 'RadioGroupField';

packages/react/src/primitives/Rating/Rating.tsx

@@ -68,3 +68,5 @@ export const Rating: Primitive<RatingProps, typeof Flex> = ({
     </Flex>
   );
 };
+
+Rating.displayName = 'Rating';

packages/react/src/primitives/Rating/RatingIcon.tsx

@@ -24,3 +24,5 @@ export const RatingIcon: React.FC<RatingIconProps> = ({
     </View>
   );
 };
+
+RatingIcon.displayName = 'RatingIcon';

packages/react/src/primitives/Rating/RatingMixedIcon.tsx

@@ -51,3 +51,5 @@ export const RatingMixedIcon: React.FC<RatingMixedIconProps> = ({
     </View>
   );
 };
+
+RatingMixedIcon.displayName = 'RatingMixedIcon';

packages/react/src/primitives/ScrollView/ScrollView.tsx

@@ -18,3 +18,5 @@ export const ScrollView: Primitive<ScrollViewProps, 'div'> = ({
     {children}
   </View>
 );
+
+ScrollView.displayName = 'ScrollView';

packages/react/src/primitives/SearchField/SearchField.tsx

@@ -113,3 +113,5 @@ export const SearchField: Primitive<SearchFieldProps, 'input'> = ({
     />
   );
 };
+
+SearchField.displayName = 'SearchField';

packages/react/src/primitives/SearchField/SearchFieldButton.tsx

@@ -20,3 +20,5 @@ export const SearchFieldButton: Primitive<SearchFieldButtonProps, 'button'> = (
     </FieldGroupIconButton>
   );
 };
+
+SearchFieldButton.displayName = 'SearchFieldButton';

packages/react/src/primitives/Select/Select.tsx

@@ -64,3 +64,5 @@ export const Select: Primitive<SelectProps, 'select'> = ({
     </View>
   );
 };
+
+Select.displayName = 'Select';

packages/react/src/primitives/SelectField/SelectField.tsx

@@ -86,3 +86,5 @@ export const SelectField: Primitive<SelectFieldProps, 'select'> = (props) => {
     </Flex>
   );
 };
+
+SelectField.displayName = 'SelectField';

packages/react/src/primitives/SliderField/SliderField.tsx

@@ -133,3 +133,5 @@ export const SliderField: Primitive<SliderFieldProps, typeof Root> = ({
     </Flex>
   );
 };
+
+SliderField.displayName = 'SliderField';

packages/react/src/primitives/StepperField/StepperField.tsx

@@ -129,3 +129,5 @@ export const StepperField: Primitive<StepperFieldProps, 'input'> = (props) => {
     </Flex>
   );
 };
+
+StepperField.displayName = 'StepperField';

packages/react/src/primitives/SwitchField/SwitchField.tsx

@@ -91,3 +91,5 @@ export const SwitchField: Primitive<SwitchFieldProps, typeof Flex> = ({
     </Flex>
   );
 };
+
+SwitchField.displayName = 'SwitchField';

packages/react/src/primitives/Tabs/Tabs.tsx

@@ -10,6 +10,7 @@ import { Flex } from '../Flex';
 import { ComponentClassNames } from '../shared/constants';
 import classNames from 'classnames';
 import { convertStylePropsToStyleObj, prefixer } from '../shared/styleUtils';
+import { Primitive } from '../types';
 
 const isTabsType = (child: any): child is React.Component<TabItemProps> => {
   return (
@@ -19,11 +20,8 @@ const isTabsType = (child: any): child is React.Component<TabItemProps> => {
     child.props.children != null
   );
 };
-export interface Tabs {
-  (props: TabsProps): React.ReactComponentElement<any>;
-}
 
-export const Tabs: Tabs = ({
+export const Tabs: Primitive<TabsProps, typeof Flex> = ({
   alignContent,
   alignItems,
   ariaLabel,
@@ -39,7 +37,7 @@ export const Tabs: Tabs = ({
   justifyContent,
   wrap,
   ...rest
-}) => {
+}: TabsProps) => {
   const tabs = React.Children.map(children, (child) => {
     if (!isTabsType(child)) {
       console.warn(
@@ -99,3 +97,6 @@ export const Tabs: Tabs = ({
 };
 
 export const TabItem: React.FC<TabItemProps> = () => <></>;
+
+Tabs.displayName = 'Tabs';
+TabItem.displayName = 'TabItem';

packages/react/src/primitives/Text/Text.tsx

@@ -22,3 +22,5 @@ export const Text: Primitive<TextProps, 'p'> = ({
     {children}
   </View>
 );
+
+Text.displayName = 'Text';

packages/react/src/primitives/TextArea/TextArea.tsx

@@ -30,3 +30,5 @@ export const TextArea: Primitive<TextAreaProps, 'textarea'> = ({
     {...rest}
   />
 );
+
+TextArea.displayName = 'TextArea';

packages/react/src/primitives/TextField/TextField.tsx

@@ -109,3 +109,5 @@ export const TextField = <Multiline extends boolean>(
     </Flex>
   );
 };
+
+TextField.displayName = 'TextField';

packages/react/src/primitives/ToggleButton/ToggleButton.tsx

@@ -40,3 +40,5 @@ export const ToggleButton: Primitive<ToggleButtonProps, typeof Button> = ({
     </Button>
   );
 };
+
+ToggleButton.displayName = 'ToggleButton';

packages/react/src/primitives/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -43,3 +43,5 @@ export const ToggleButtonGroup: Primitive<ToggleButtonGroupProps, typeof Flex> =
       </Flex>
     );
   };
+
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';

packages/react/src/primitives/VisuallyHidden/VisuallyHidden.tsx

@@ -18,3 +18,5 @@ export const VisuallyHidden: Primitive<VisuallyHiddenProps, 'span'> = ({
     {children}
   </View>
 );
+
+VisuallyHidden.displayName = 'VisuallyHidden';