@giv-igniteui/react 2.0.0

package/src/components/Checkbox/styles.ts

@@ -0,0 +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`,
+  },
+})

package/src/components/Heading.tsx

@@ -0,0 +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'

package/src/components/MultiStep/index.tsx

@@ -0,0 +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'

package/src/components/MultiStep/styles.ts

@@ -0,0 +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', {})

package/src/components/Text.tsx

@@ -0,0 +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'

package/src/components/TextArea.tsx

@@ -0,0 +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'

package/src/components/TextInput/index.tsx

@@ -0,0 +1,17 @@
+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'

package/src/components/TextInput/styles.ts

@@ -0,0 +1,43 @@
+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',
+  },
+})

package/src/index.tsx

@@ -0,0 +1,9 @@
+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'

package/src/styles/index.ts

@@ -0,0 +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,
+  },
+})

package/tsconfig.json

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