@bitrise/bitkit 9.12.0-alpha-button-release.4 → 9.13.0-alpha-button-release.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "9.12.0-alpha-button-release.4",
+  "version": "9.13.0-alpha-button-release.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/Box/Box.tsx

@@ -1,12 +1,12 @@
-import React, { forwardRef } from 'react';
-import { Box as ChakraBox, BoxProps } from '@chakra-ui/react';
+import React from 'react';
+import { Box as ChakraBox, BoxProps, forwardRef } from '@chakra-ui/react';
 
 /**
  * Box is the most abstract component on top of which all other components are built. By default, it renders a div element.
  *
  * And this is our CSS-in-JS component, you can use this with style props.
  */
-const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
+const Box = forwardRef<BoxProps, 'div'>((props, ref) => {
   return <ChakraBox {...props} ref={ref} />;
 });
 

package/src/Components/Button/Button.tsx

@@ -1,9 +1,9 @@
-import React, { HTMLAttributeAnchorTarget, forwardRef } from 'react';
-import { Button as ChakraButton, ButtonProps as ChackraButtonProps } from '@chakra-ui/react';
+import React, { HTMLAttributeAnchorTarget } from 'react';
+import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef } from '@chakra-ui/react';
 import Icon from '../../Old/Icon/Icon';
 import { TypeIconName } from '../../Old/Icon/tsx';
 
-export interface ButtonProps extends ChackraButtonProps {
+export interface ButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';
   href?: string;
   isDanger?: boolean;
@@ -17,9 +17,9 @@ export interface ButtonProps extends ChackraButtonProps {
 /**
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
-const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
   const { as, isDanger, leftIconName, rightIconName, size, variant, ...rest } = props;
-  const properties: ChackraButtonProps = {
+  const properties: ChakraButtonProps = {
     as,
     size,
     variant: isDanger ? `${variant}--danger` : variant,

package/src/Components/Card/Card.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
+import { forwardRef } from '@chakra-ui/react';
 import { Radii } from '../../Foundations/Radii/Radii';
 import { Shadows } from '../../Foundations/Shadows/Shadows';
 import { Sizes } from '../../Foundations/Sizes/Sizes';
@@ -13,7 +14,7 @@ export interface CardProps extends BoxProps {
 /**
  * Basic container element with default box shadow, border radius and padding.
  */
-const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+const Card = forwardRef<CardProps, 'div'>((props, ref) => {
   return <Box {...props} ref={ref} />;
 });
 

package/src/Components/IconButton/IconButton.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
-import { IconButton as ChakraIconButton, IconButtonProps } from '@chakra-ui/react';
+import React from 'react';
+import { IconButton as ChakraIconButton, IconButtonProps, forwardRef } from '@chakra-ui/react';
 import Icon from '../../Old/Icon/Icon';
 import { TypeIconName } from '../../Old/Icon/tsx';
 
@@ -19,7 +19,7 @@ export interface Props extends IconButtonProps {
  * TODO:
  * - Change to Chakra powered Icon component
  */
-const IconButton = forwardRef<HTMLButtonElement, Props>((props, ref) => {
+const IconButton = forwardRef<Props, 'button'>((props, ref) => {
   const { iconName, isDanger, variant, ...rest } = props;
   const properties: IconButtonProps = {
     icon: <Icon name={iconName} />,

package/src/Components/Link/Link.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
-import { Link as ChakraLink, LinkProps as ChakraLinkProps } from '@chakra-ui/react';
+import React from 'react';
+import { Link as ChakraLink, LinkProps as ChakraLinkProps, forwardRef } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 export interface LinkProps extends ChakraLinkProps {
@@ -12,7 +12,7 @@ export interface LinkProps extends ChakraLinkProps {
 /**
  * Links are accessible elements used primarily for navigation.
  */
-const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+const Link = forwardRef<LinkProps, 'a'>((props, ref) => {
   const { as, isUnderlined, ...rest } = props;
   const properties: ChakraLinkProps = { as, ...rest };
   if (isUnderlined) {

package/src/Components/Text/Text.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
-import { Text as ChakraText, TextProps as ChakraTextProps } from '@chakra-ui/react';
+import React from 'react';
+import { Text as ChakraText, TextProps as ChakraTextProps, forwardRef } from '@chakra-ui/react';
 import { TextSizes } from '../../Foundations/Typography/Typography';
 
 type TextTags =
@@ -58,7 +58,7 @@ export interface TextProps extends ChakraTextProps {
 /**
  * `Text` component is the used to render text and paragraphs within an interface. It renders a `<p>` tag by default.
  */
-const Text = forwardRef<HTMLParagraphElement, TextProps>((props, ref) => {
+const Text = forwardRef<TextProps, 'p'>((props, ref) => {
   const { color, fontWeight, size, textTransform } = props;
   const properties: ChakraTextProps = { ...props };
   if (size === '1' && (!textTransform || textTransform === 'none')) {

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './old';
+export * from './types/chakra';
 
 export type { LinkProps } from './Components/Link/Link';
 export { default as Link } from './Components/Link/Link';