@giv-igniteui/react 2.0.0 → 2.0.1

package/src/components/Checkbox/styles.ts

@@ -1,55 +1,55 @@
-import * as Checkbox from '@radix-ui/react-checkbox'
-import { keyframes, styled } from '../../styles'
-
-export const CheckboxContainer = styled(Checkbox.Root, {
-  all: 'unset', // Como é um botão, all unset tirará borda, background, etc
-  width: '$6',
-  height: '$6',
-  backgroundColor: '$gray900',
-  borderRadius: '$xs',
-  cursor: 'pointer',
-  overflow: 'hidden',
-  boxSizing: 'border-box',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  border: '2px solid $gray900',
-
-  '&[data-state="checked"]': {
-    backgroundColor: '$ignite300',
-  },
-
-  '&:focus': {
-    border: '2px solid $ignite300',
-  },
-})
-
-const slideIn = keyframes({
-  from: {
-    transform: 'translateY(-100%)',
-  },
-  to: {
-    transform: 'translateY(0)',
-  },
-})
-
-const slideOut = keyframes({
-  from: {
-    transform: 'translateY(0)',
-  },
-  to: {
-    transform: 'translateY(-100%)',
-  },
-})
-
-export const CheckboxIndicator = styled(Checkbox.Indicator, {
-  color: 'white',
-  width: '$4',
-  height: '$4',
-  '&[data-state="checked"]': {
-    animation: `${slideIn} 200ms ease-out`,
-  },
-  '&[data-state="unchecked"]': {
-    animation: `${slideOut} 200ms ease-out`,
-  },
-})
+import * as Checkbox from '@radix-ui/react-checkbox'
+import { keyframes, styled } from '../../styles'
+
+export const CheckboxContainer = styled(Checkbox.Root, {
+  all: 'unset', // Como é um botão, all unset tirará borda, background, etc
+  width: '$6',
+  height: '$6',
+  backgroundColor: '$gray900',
+  borderRadius: '$xs',
+  cursor: 'pointer',
+  overflow: 'hidden',
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: '2px solid $gray900',
+
+  '&[data-state="checked"]': {
+    backgroundColor: '$ignite300',
+  },
+
+  '&:focus, &[data-state="checked"]': {
+    border: '2px solid $ignite300',
+  },
+})
+
+const slideIn = keyframes({
+  from: {
+    transform: 'translateY(-100%)',
+  },
+  to: {
+    transform: 'translateY(0)',
+  },
+})
+
+const slideOut = keyframes({
+  from: {
+    transform: 'translateY(0)',
+  },
+  to: {
+    transform: 'translateY(-100%)',
+  },
+})
+
+export const CheckboxIndicator = styled(Checkbox.Indicator, {
+  color: 'white',
+  width: '$4',
+  height: '$4',
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 200ms ease-out`,
+  },
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 200ms ease-out`,
+  },
+})

package/src/components/Heading.tsx

@@ -1,27 +1,27 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
-
-export const Heading = styled('h2', {
-  fontFamily: '$default',
-  lineHeight: '$shorter',
-  margin: 0,
-  color: '$gray100',
-  variants: {
-    size: {
-      sm: { fontSize: '$xl' },
-      md: { fontSize: '$2xl' },
-      lg: { fontSize: '$4xl' },
-      '2xl': { fontSize: '$5xl' },
-      '3xl': { fontSize: '$6xl' },
-      '4xl': { fontSize: '$7xl' },
-      '5xl': { fontSize: '$8xl' },
-      '6xl': { fontSize: '$9xl' },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})
-
-export interface HeadingProps extends ComponentProps<typeof Heading> {}
-Heading.displayName = 'Heading'
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+
+export const Heading = styled('h2', {
+  fontFamily: '$default',
+  lineHeight: '$shorter',
+  margin: 0,
+  color: '$gray100',
+  variants: {
+    size: {
+      sm: { fontSize: '$xl' },
+      md: { fontSize: '$2xl' },
+      lg: { fontSize: '$4xl' },
+      '2xl': { fontSize: '$5xl' },
+      '3xl': { fontSize: '$6xl' },
+      '4xl': { fontSize: '$7xl' },
+      '5xl': { fontSize: '$8xl' },
+      '6xl': { fontSize: '$9xl' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export interface HeadingProps extends ComponentProps<typeof Heading> {}
+Heading.displayName = 'Heading'

package/src/components/MultiStep/index.tsx

@@ -1,23 +1,23 @@
-import { Label, MultistepContainer, Step, Steps } from './styles'
-
-export interface MultiStepProps {
-  size: number
-  currentStep?: number
-}
-
-export function MultiStep({ size, currentStep = 1 }: MultiStepProps) {
-  return (
-    <MultistepContainer>
-      <Label>
-        Passo {currentStep} de {size}
-      </Label>
-      <Steps css={{ '--steps-size': size }}>
-        {Array.from({ length: size }, (_, i) => i + 1).map((step) => {
-          return <Step key={step} active={currentStep >= step} />
-        })}
-      </Steps>
-    </MultistepContainer>
-  )
-}
-
-MultiStep.displayName = 'MultiStep'
+import { Label, MultistepContainer, Step, Steps } from './styles'
+
+export interface MultiStepProps {
+  size: number
+  currentStep?: number
+}
+
+export function MultiStep({ size, currentStep = 1 }: MultiStepProps) {
+  return (
+    <MultistepContainer>
+      <Label>
+        Passo {currentStep} de {size}
+      </Label>
+      <Steps css={{ '--steps-size': size }}>
+        {Array.from({ length: size }, (_, i) => i + 1).map((step) => {
+          return <Step key={step} active={currentStep >= step} />
+        })}
+      </Steps>
+    </MultistepContainer>
+  )
+}
+
+MultiStep.displayName = 'MultiStep'

package/src/components/MultiStep/styles.ts

@@ -1,33 +1,33 @@
-import { styled } from '../../styles'
-import { Text } from '../Text'
-
-export const MultistepContainer = styled('div', {})
-export const Label = styled(Text, {
-  color: '$gray200',
-
-  defaultVariants: {
-    size: 'xs',
-  },
-})
-
-export const Steps = styled('div', {
-  display: 'grid',
-  gap: '$2',
-  marginTop: '$1',
-  gridTemplateColumns: 'repeat(var(--steps-size), 1fr)',
-})
-
-export const Step = styled('div', {
-  height: '$1',
-  borderRadius: '$px',
-  backgroundColor: '$gray600',
-  variants: {
-    active: {
-      true: {
-        backgroundColor: '$gray100',
-      },
-    },
-  },
-})
-
-export const Full = styled('div', {})
+import { styled } from '../../styles'
+import { Text } from '../Text'
+
+export const MultistepContainer = styled('div', {})
+export const Label = styled(Text, {
+  color: '$gray200',
+
+  defaultVariants: {
+    size: 'xs',
+  },
+})
+
+export const Steps = styled('div', {
+  display: 'grid',
+  gap: '$2',
+  marginTop: '$1',
+  gridTemplateColumns: 'repeat(var(--steps-size), 1fr)',
+})
+
+export const Step = styled('div', {
+  height: '$1',
+  borderRadius: '$px',
+  backgroundColor: '$gray600',
+  variants: {
+    active: {
+      true: {
+        backgroundColor: '$gray100',
+      },
+    },
+  },
+})
+
+export const Full = styled('div', {})

package/src/components/Text.tsx

@@ -1,32 +1,32 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
-
-export const Text = styled('p', {
-  fontFamily: '$default',
-  lineHeight: '$base',
-  margin: 0,
-  color: '$gray100',
-  variants: {
-    size: {
-      xxs: { fontSize: '$xxs' },
-      xs: { fontSize: '$xs' },
-      sm: { fontSize: '$sm' },
-      md: { fontSize: '$md' },
-      lg: { fontSize: '$lg' },
-      xl: { fontSize: '$xl' },
-      '2xl': { fontSize: '$2xl' },
-      '4xl': { fontSize: '$4xl' },
-      '5xl': { fontSize: '$5xl' },
-      '6xl': { fontSize: '$6xl' },
-      '7xl': { fontSize: '$7xl' },
-      '8xl': { fontSize: '$8xl' },
-      '9xl': { fontSize: '$9xl' },
-    },
-  },
-  defaultVariants: {
-    size: 'md',
-  },
-})
-
-export interface TextProps extends ComponentProps<typeof Text> {}
-Text.displayName = 'Text'
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+
+export const Text = styled('p', {
+  fontFamily: '$default',
+  lineHeight: '$base',
+  margin: 0,
+  color: '$gray100',
+  variants: {
+    size: {
+      xxs: { fontSize: '$xxs' },
+      xs: { fontSize: '$xs' },
+      sm: { fontSize: '$sm' },
+      md: { fontSize: '$md' },
+      lg: { fontSize: '$lg' },
+      xl: { fontSize: '$xl' },
+      '2xl': { fontSize: '$2xl' },
+      '4xl': { fontSize: '$4xl' },
+      '5xl': { fontSize: '$5xl' },
+      '6xl': { fontSize: '$6xl' },
+      '7xl': { fontSize: '$7xl' },
+      '8xl': { fontSize: '$8xl' },
+      '9xl': { fontSize: '$9xl' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export interface TextProps extends ComponentProps<typeof Text> {}
+Text.displayName = 'Text'

package/src/components/TextArea.tsx

@@ -1,34 +1,34 @@
-import { ComponentProps } from 'react'
-import { styled } from '../styles'
-
-export const TextArea = styled('textarea', {
-  backgroundColor: '$gray900',
-  padding: '$4',
-  borderRadius: '$sm',
-  boxSizing: 'border-box',
-  border: '2px solid $gray900',
-  fontFamily: '$default',
-  fontSize: '$sm',
-  color: '$white',
-  fontWeight: '$regular',
-  resize: 'vertical',
-  minHeight: 80,
-
-  '&:focus': {
-    outline: 'none',
-    borderColor: '$ignite300',
-  },
-
-  '&:disabled': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-  },
-
-  '&:placeholder': {
-    color: '$gray400',
-  },
-})
-
-export interface TextAreaProps extends ComponentProps<typeof TextArea> {}
-
-TextArea.displayName = 'TextArea'
+import { ComponentProps } from 'react'
+import { styled } from '../styles'
+
+export const TextArea = styled('textarea', {
+  backgroundColor: '$gray900',
+  padding: '$4',
+  borderRadius: '$sm',
+  boxSizing: 'border-box',
+  border: '2px solid $gray900',
+  fontFamily: '$default',
+  fontSize: '$sm',
+  color: '$white',
+  fontWeight: '$regular',
+  resize: 'vertical',
+  minHeight: 80,
+
+  '&:focus': {
+    outline: 'none',
+    borderColor: '$ignite300',
+  },
+
+  '&:disabled': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+
+  '&:placeholder': {
+    color: '$gray400',
+  },
+})
+
+export interface TextAreaProps extends ComponentProps<typeof TextArea> {}
+
+TextArea.displayName = 'TextArea'

package/src/components/TextInput/index.tsx

@@ -1,17 +1,19 @@
-import { ComponentProps } from 'react'
-import { Input, Prefix, TextInputContainer } from './styles'
-
-export interface TextInputProps extends ComponentProps<typeof Input> {
-  prefix?: string
-}
-
-export function TextInput({ prefix, ...props }: TextInputProps) {
-  return (
-    <TextInputContainer>
-      {!!prefix && <Prefix>{prefix}</Prefix>}
-      <Input {...props} />
-    </TextInputContainer>
-  )
-}
-
-TextInput.displayName = 'TextInput'
+import { ComponentProps, ElementRef, forwardRef } from 'react'
+import { Input, Prefix, TextInputContainer } from './styles'
+
+export interface TextInputProps extends ComponentProps<typeof Input> {
+  prefix?: string
+}
+
+export const TextInput = forwardRef<ElementRef<typeof Input>, TextInputProps>(
+  ({ prefix, ...props }: TextInputProps, ref) => {
+    return (
+      <TextInputContainer>
+        {!!prefix && <Prefix>{prefix}</Prefix>}
+        <Input ref={ref} {...props} />
+      </TextInputContainer>
+    )
+  },
+)
+
+TextInput.displayName = 'TextInput'

package/src/components/TextInput/styles.ts

@@ -1,43 +1,58 @@
-import { styled } from '../../styles'
-
-export const TextInputContainer = styled('div', {
-  backgroundColor: '$gray900',
-  padding: '$4',
-  borderRadius: '$sm',
-  boxSizing: 'border-box',
-  border: '2px solid $gray900',
-  display: 'flex',
-  alignItems: 'baseline',
-
-  '&:has(input:focus)': {
-    borderColor: '$ignite300',
-  },
-  '&:has(input:disabled)': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-  },
-})
-export const Prefix = styled('span', {
-  fontFamily: '$default',
-  fontSize: '$sm',
-  color: '$gray400',
-  fontWeight: 'regular',
-})
-export const Input = styled('input', {
-  fontFamily: '$default',
-  fontSize: '$sm',
-  color: '$white',
-  fontWeight: 'regular',
-  background: 'transparent',
-  border: 0,
-  width: '100%',
-  '&:focus': {
-    outline: 0,
-  },
-  '&:disabled': {
-    cursor: 'not-allowed',
-  },
-  '&:placeholder': {
-    color: '$gray400',
-  },
-})
+import { styled } from '../../styles'
+
+export const TextInputContainer = styled('div', {
+  backgroundColor: '$gray900',
+  padding: '$4',
+  borderRadius: '$sm',
+  boxSizing: 'border-box',
+  border: '2px solid $gray900',
+  display: 'flex',
+  alignItems: 'center',
+
+  variants: {
+    size: {
+      sm: {
+        padding: '$3',
+      },
+      md: {
+        padding: '$4',
+      },
+    },
+  },
+
+  '&:has(input:focus)': {
+    borderColor: '$ignite300',
+  },
+  '&:has(input:disabled)': {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const Prefix = styled('span', {
+  fontFamily: '$default',
+  fontSize: '$sm',
+  color: '$gray400',
+  fontWeight: 'regular',
+})
+export const Input = styled('input', {
+  fontFamily: '$default',
+  fontSize: '$sm',
+  color: '$white',
+  fontWeight: 'regular',
+  background: 'transparent',
+  border: 0,
+  width: '100%',
+  '&:focus': {
+    outline: 0,
+  },
+  '&:disabled': {
+    cursor: 'not-allowed',
+  },
+  '&::placeholder': {
+    color: '$gray400',
+  },
+})

package/src/index.tsx

@@ -1,9 +1,11 @@
-export * from './components/Box'
-export * from './components/Text'
-export * from './components/Heading'
-export * from './components/Avatar'
-export * from './components/Button'
-export * from './components/TextInput'
-export * from './components/TextArea'
-export * from './components/Checkbox'
-export * from './components/MultiStep'
+export * from './components/Box'
+export * from './components/Text'
+export * from './components/Heading'
+export * from './components/Avatar'
+export * from './components/Button'
+export * from './components/TextInput'
+export * from './components/TextArea'
+export * from './components/Checkbox'
+export * from './components/MultiStep'
+
+export * from './styles'

package/src/styles/index.ts

@@ -1,36 +1,36 @@
-import {
-  colors,
-  fontSizes,
-  fontWeights,
-  fonts,
-  lineHeights,
-  radii,
-  space,
-} from '@giv-igniteui/tokens'
-import { createStitches, defaultThemeMap } from '@stitches/react'
-
-export const {
-  styled,
-  css,
-  globalCss,
-  keyframes,
-  getCssText,
-  theme,
-  createTheme,
-  config,
-} = createStitches({
-  themeMap: {
-    ...defaultThemeMap,
-    height: 'space',
-    width: 'space',
-  },
-  theme: {
-    colors,
-    fontSizes,
-    fontWeights,
-    fonts,
-    lineHeights,
-    radii, // borderRadius
-    space,
-  },
-})
+import {
+  colors,
+  fontSizes,
+  fontWeights,
+  fonts,
+  lineHeights,
+  radii,
+  space,
+} from '@giv-igniteui/tokens'
+import { createStitches, defaultThemeMap } from '@stitches/react'
+
+export const {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config,
+} = createStitches({
+  themeMap: {
+    ...defaultThemeMap,
+    height: 'space',
+    width: 'space',
+  },
+  theme: {
+    colors,
+    fontSizes,
+    fontWeights,
+    fonts,
+    lineHeights,
+    radii, // borderRadius
+    space,
+  },
+})

package/tsconfig.json

@@ -1,6 +1,6 @@
-{
-    "extends": "@giv-igniteui/ts-config/react.json",
-    "include": [
-        "src"
-    ]
+{
+    "extends": "@giv-igniteui/ts-config/react.json",
+    "include": [
+        "src"
+    ]
 }