@koaris/bloom-ui 1.1.2 → 1.2.0

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@koaris/bloom-ui",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Bloom-ui is a public design system from the Koaris Project developed with React, Typescript, and Tailwind.",
   "source": "./src/index.ts",
   "type": "module",
   "main": "dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "NODE_ENV=production tailwindcss -i ./src/styles/tailwind.css -o ./tailwind.css -c ./tailwind.config.ts  --minify && tsup",
     "dev": "concurrently --kill-others \"tailwindcss -i ./src/styles/tailwind.css -o ./tailwind.css -c ./tailwind.config.ts  --minify --watch \" \"tsup --watch\"",
@@ -21,11 +23,16 @@
     "design-system",
     "react"
   ],
+  "files": [
+    "dist",
+    "README.md",
+    "tailwind.css"
+  ],
   "author": "guilhermesalviano",
   "homepage": "https://guilhermesalviano.github.io/bloom-ui",
   "repository": {
     "type": "git",
-    "url": "https://github.com/guilhermesalviano/bloom-ui.git"
+    "url": "git+https://github.com/guilhermesalviano/bloom-ui.git"
   },
   "license": "GPL-3.0-only",
   "devDependencies": {

package/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-    "extends": "@koaris/eslint-config"
-}

package/CHANGELOG.md

@@ -1,55 +0,0 @@
-# @koaris/bloom-ui
-
-## 1.1.2
-
-### Patch Changes
-
-- Optimized Tailwind configuration and build process to reduce bundle size.
-
-## 1.1.1
-
-### Patch Changes
-
-- fix card css
-
-## 1.1.0
-
-### Minor Changes
-
-- button and checkbox improvements
-
-## 1.0.5
-
-### Patch Changes
-
-- Create link component
-
-## 1.0.4
-
-### Patch Changes
-
-- creating form component
-
-## 1.0.3
-
-### Patch Changes
-
-- Update components and add new colors
-
-## 1.0.2
-
-### Patch Changes
-
-- fix tailwind post css
-
-## 1.0.1
-
-### Patch Changes
-
-- recreating package
-
-## 1.0.0
-
-### Major Changes
-
-- Creating bloom-ui

package/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: { config: './tailwind.config.ts' },
-    autoprefixer: {},
-  },
-}

package/src/components/Avatar/index.tsx

@@ -1,27 +0,0 @@
-import { twMerge } from 'tailwind-merge'
-import { FaUser } from 'react-icons/fa'
-
-export interface AvatarProps {
-  src?: string
-  alt?: string
-  className?: string
-}
-
-export const Avatar = ({ className, ...rest }: AvatarProps) => {
-  return (
-    <div
-      className={twMerge(
-        `
-            rounded-full w-16 h-16 overflow-hidden flex items-center
-            bg-neutral-600 justify-center`,
-        className,
-      )}
-    >
-      {rest.src ? (
-        <img className="w-full h-full object-cover rounded-full" {...rest} />
-      ) : (
-        <FaUser color="#FFFFFF" size={24} />
-      )}
-    </div>
-  )
-}

package/src/components/Box/index.tsx

@@ -1,33 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-export interface BoxProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  children: React.ReactNode
-  tag?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer'
-  variant?: 'primary' | 'secondary'
-}
-
-export const Box = ({
-  className,
-  children,
-  tag = 'div',
-  variant = 'secondary',
-}: BoxProps) => {
-  const Tag = tag as React.ElementType
-
-  return (
-    <Tag
-      className={twMerge(
-        'p-6 rounded-md bottom-1 border-2',
-        variant === 'primary' &&
-          'text-neutral-800 bg-neutral-200 border-neutral-300',
-        variant === 'secondary' &&
-          'text-neutral-200 bg-neutral-600 border-neutral-800',
-        className,
-      )}
-    >
-      {children}
-    </Tag>
-  )
-}

package/src/components/Button/index.tsx

@@ -1,43 +0,0 @@
-import { DetailedHTMLProps, ButtonHTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-/**
- * Primary UI component for user interaction
- */
-export interface ButtonProps
-  extends DetailedHTMLProps<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  > {
-  size?: 'sm' | 'md'
-  variant?: 'primary' | 'secondary'
-  disabled?: boolean
-  children: string | JSX.Element
-}
-
-export const Button = ({
-  className,
-  variant = 'primary',
-  size = 'md',
-  disabled,
-  onClick,
-  ...rest
-}: ButtonProps) => {
-  return (
-    <button
-      className={twMerge(
-        'flex gap-4 items-center justify-center rounded-sm px-8 py-2 text-md font-medium hover:shadow-md hover:shadow-neutral-500 w-full max-w-[180px]',
-        variant === 'primary' &&
-          'bg-orange-500 text-neutral hover:bg-orange-700',
-        variant === 'secondary' &&
-          'bg-neutral text-orange-500 border border-orange-500 hover:text-orange-100 hover:bg-orange-500',
-        size === 'sm' && 'px-6 py-1',
-        typeof rest.children !== 'string' && 'px-4',
-        disabled === true && 'opacity-50 cursor-not-allowed',
-        className,
-      )}
-      onClick={onClick}
-      {...rest}
-    />
-  )
-}

package/src/components/Card/index.tsx

@@ -1,59 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-/**
- * Primary UI component for user interaction
- */
-export interface CardProps
-  extends DetailedHTMLProps<
-    HTMLAttributes<HTMLDivElement>, // Change the type to HTMLDivElement
-    HTMLDivElement
-  > {
-  selected?: boolean
-  disabled?: boolean
-  direction?: string
-  size?: string
-  imageSize: string
-  image?: string // Add the image property
-  onClick?: () => void
-}
-
-export const Card = ({
-  className,
-  selected = false,
-  direction,
-  size,
-  disabled,
-  imageSize,
-  onClick,
-  ...rest
-}: CardProps) => {
-  return (
-    <div
-      className={twMerge(
-        'flex items-center justify-center rounded-lg cursor-pointer bg-neutral',
-        'hover:shadow-md hover:shadow-neutral-500 border border-neutral-500 text-neutral-1000',
-        size === 'medium' && 'w-64 px-8 py-4',
-        size === 'large' && 'w-96 pr-5',
-        direction === 'col' && 'flex-col',
-        selected === true && 'border-2 border-orange-500',
-        disabled === true && 'opacity-50 cursor-not-allowed',
-        className,
-      )}
-      onClick={onClick}
-    >
-      <img src={rest.image} alt={rest.title} width={imageSize} height="auto" />
-      <aside
-        className={twMerge(
-          direction === 'col' && 'text-center',
-          'flex flex-col gap-2',
-        )}
-      >
-        <h1 className="text-xl font-bold font-default leading-tight">
-          {rest.title}
-        </h1>
-        <p className="text-justify">{rest.content}</p>
-      </aside>
-    </div>
-  )
-}

package/src/components/Checkbox/index.tsx

@@ -1,49 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes, useState } from 'react'
-import { FiCheck } from 'react-icons/fi'
-import { twMerge } from 'tailwind-merge'
-
-export interface CheckboxProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  disabled?: boolean
-  required?: boolean
-}
-
-export const Checkbox = ({ className, required, disabled }: CheckboxProps) => {
-  const [selected, setSelected] = useState(false)
-
-  const handleCheckboxChange = (value: boolean) => {
-    setSelected(!value)
-  }
-
-  return (
-    <div className="flex items-center justify-center">
-      <label
-        className={twMerge(
-          className,
-          'relative  border-2 w-5 h-5 flex items-center justify-center rounded-sm hover:border-orange-500 hover:cursor-pointer',
-          selected
-            ? 'bg-orange-500 border-orange-500'
-            : 'border-neutral-500 hover:shadow-md hover:shadow-orange-500',
-          disabled === true && 'opacity-50 cursor-not-allowed',
-        )}
-      >
-        <input
-          type="checkbox"
-          required={required}
-          checked={selected}
-          onChange={() => handleCheckboxChange(selected)}
-          disabled={disabled}
-          className={twMerge(
-            'relative z-10 hidden',
-            selected
-              ? 'bg-orange-500 border-orange-500'
-              : 'border-neutral-500 hover:shadow-md hover:shadow-orange-500',
-          )}
-        />
-        {selected && (
-          <FiCheck color="#FFFFFF" size={14} style={{ strokeWidth: 4 }} />
-        )}
-      </label>
-    </div>
-  )
-}

package/src/components/Form/index.tsx

@@ -1,38 +0,0 @@
-import { DetailedHTMLProps, FormHTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-export interface FormProps
-  extends DetailedHTMLProps<
-    FormHTMLAttributes<HTMLFormElement>,
-    HTMLFormElement
-  > {
-  children: React.ReactNode
-  variant?: 'primary' | 'secondary'
-  orientation?: 'row' | 'col'
-  handleSubmit?: (event: React.FormEvent<HTMLFormElement>) => void
-}
-
-export const Form = ({
-  className,
-  children,
-  variant = 'secondary',
-  orientation = 'row',
-  ...rest
-}: FormProps) => {
-  return (
-    <form
-      className={twMerge(
-        'flex flex-row gap-2 p-6 rounded-md border-2',
-        variant === 'primary' &&
-          'text-neutral-800 bg-neutral-200 border-neutral-300',
-        variant === 'secondary' &&
-          'text-neutral-200 bg-neutral-600 border-neutral-800',
-        orientation === 'col' && 'flex-col',
-        className,
-      )}
-      {...rest}
-    >
-      {children}
-    </form>
-  )
-}

package/src/components/Heading/index.tsx

@@ -1,53 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-export interface HeadingProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> {
-  children: React.ReactNode
-  color?: string
-  size?:
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl'
-    | '7xl'
-    | '8xl'
-    | '9xl'
-  tag?: 'h1' | 'h2' | 'h3' | 'h4'
-}
-
-export const Heading = ({
-  children,
-  color = 'neutral-800',
-  size = 'lg',
-  tag = 'h2',
-  className,
-}: HeadingProps) => {
-  const fontSize = {
-    sm: 'text-sm',
-    md: 'text-md',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-    '3xl': 'text-3xl',
-    '4xl': 'text-4xl',
-    '5xl': 'text-5xl',
-    '6xl': 'text-6xl',
-    '7xl': 'text-7xl',
-    '8xl': 'text-8xl',
-    '9xl': 'text-9xl',
-  }[size]
-
-  const Tag = tag as React.ElementType
-
-  return (
-    <Tag className={twMerge(`text-${color} ${fontSize}`, className)}>
-      {children}
-    </Tag>
-  )
-}

package/src/components/Input/index.tsx

@@ -1,154 +0,0 @@
-import {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  useEffect,
-  useState,
-  forwardRef,
-} from 'react'
-import { twMerge } from 'tailwind-merge'
-import { FiCheck, FiX } from 'react-icons/fi'
-import masks from '../Shared/masks'
-
-/**
- * Primary UI component for user interaction
- */
-export interface InputProps
-  extends DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
-  disabled?: boolean
-  placeholder?: string
-  value?: string
-  validated?: boolean
-  error: boolean
-  required?: boolean
-  type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep'
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      disabled,
-      placeholder,
-      value,
-      validated,
-      error,
-      required,
-      type,
-      onClick,
-      ...rest
-    }: InputProps,
-    ref,
-  ) => {
-    const [selected, setSelected] = useState(false)
-    const [inputValue, setInputValue] = useState(value)
-    const [hasNumber, setHasNumber] = useState(false)
-    const [hasSpecialCharacteres, setHasSpecialCharacteres] = useState(false)
-    const [hasEightCharacteres, setHasEightCharacteres] = useState(false)
-
-    const handleFocus = () => {
-      setSelected(!selected)
-    }
-
-    const handleBlur = () => {
-      setSelected(false)
-    }
-
-    const handleInput = (event: React.FocusEvent<HTMLInputElement>) => {
-      setInputValue(event.currentTarget.value)
-      checkPassword(event.currentTarget.value as string)
-    }
-
-    useEffect(() => {
-      setInputValue(value)
-    }, [value])
-
-    const checkPassword = (value: string) => {
-      setHasSpecialCharacteres(value?.match(masks.password[0]) !== null)
-      setHasNumber(value?.match(masks.password[1]) !== null)
-      setHasEightCharacteres(value?.match(masks.password[2]) !== null)
-    }
-
-    return (
-      <>
-        {type === 'text' || type === 'password' || type === 'date' ? (
-          <>
-            <input
-              type={type}
-              required={required}
-              ref={ref}
-              className={twMerge(
-                'flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none',
-                className,
-                disabled === true && 'opacity-50 cursor-not-allowed',
-                selected === true && 'border-2 border-orange-500',
-                validated === true && 'border-2 border-green-900',
-                error === true && 'border-2 border-red-900',
-              )}
-              onClick={onClick}
-              onFocus={handleFocus}
-              onChange={handleInput}
-              onBlur={handleBlur}
-              placeholder={placeholder}
-              value={inputValue}
-              {...rest}
-            />
-            {type === 'password' &&
-              (!hasEightCharacteres ||
-                !hasSpecialCharacteres ||
-                !hasNumber) && (
-                <ul className="py-1">
-                  <li className="flex items-center px-2">
-                    {hasEightCharacteres ? <FiCheck /> : <FiX />}
-                    <span className="px-1">Pelo menos 8 caracteres</span>
-                  </li>
-                  <li className="flex items-center px-2">
-                    {hasSpecialCharacteres ? <FiCheck /> : <FiX />}
-                    <span className="px-1">
-                      Pelo menos 1 símbolo (@, !, $, etc)
-                    </span>
-                  </li>
-                  <li className="flex items-center px-2">
-                    {hasNumber ? <FiCheck /> : <FiX />}
-                    <span className="px-1">Deve conter 1 número</span>
-                  </li>
-                </ul>
-              )}
-          </>
-        ) : (
-          <input
-            type={type}
-            required={required}
-            ref={ref}
-            className={twMerge(
-              'flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none',
-              className,
-              disabled === true && 'opacity-50 cursor-not-allowed',
-              selected === true && 'border-2 border-orange-500',
-              error === true && 'border-2 border-red-900',
-            )}
-            onClick={onClick}
-            onFocus={handleFocus}
-            onChange={handleInput}
-            onBlur={handleBlur}
-            placeholder={placeholder}
-            value={inputValue}
-            {...rest}
-            /* mask={masks[type as keyof typeof masks]} */
-          />
-        )}
-        {error === true && (
-          <label htmlFor={rest.id} className="text-red-900">
-            Campo inválido.
-          </label>
-        )}
-      </>
-    )
-  },
-)
-
-Input.displayName = 'Input'
-
-export { Input }

package/src/components/Link/index.tsx

@@ -1,39 +0,0 @@
-import { DetailedHTMLProps, AnchorHTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-/**
- * Primary UI component for user interaction
- */
-export interface LinkProps
-  extends DetailedHTMLProps<
-    AnchorHTMLAttributes<HTMLAnchorElement>,
-    HTMLAnchorElement
-  > {
-  url: string
-  newPage: boolean
-  disabled?: boolean
-  children: string | JSX.Element
-}
-
-export const Link = ({
-  className,
-  disabled,
-  url,
-  newPage = true,
-  onClick,
-  ...rest
-}: LinkProps) => {
-  return (
-    <a
-      className={twMerge(
-        'text-blue-800 font-bold',
-        typeof rest.children !== 'string' && 'px-4',
-        disabled === true && 'opacity-50 cursor-not-allowed',
-        className,
-      )}
-      href={url}
-      {...(newPage && { target: '_blank', rel: 'noopener noreferrer' })}
-      {...rest}
-    />
-  )
-}

package/src/components/MultiStep/index.tsx

@@ -1,35 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react'
-import { twMerge } from 'tailwind-merge'
-import { Text } from '../Text'
-
-export interface MultiStepProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  size: number
-  currentStep?: number
-}
-
-export const MultiStep = ({ className, size, currentStep }: MultiStepProps) => {
-  return (
-    <div className="w-full">
-      <Text tag="label" color="neutral-100" size="xs">
-        {`Passo ${currentStep} de ${size}`}
-      </Text>
-      <div className={`grid gap-2 grid-cols-${size} grid-flow-col mt-1`}>
-        {Array.from(Array(size).keys()).map((_, index) => {
-          return (
-            <div
-              key={index}
-              className={twMerge(
-                'h-1 rounded-full',
-                currentStep && index < currentStep
-                  ? 'bg-orange-500'
-                  : 'bg-neutral-500',
-                className,
-              )}
-            />
-          )
-        })}
-      </div>
-    </div>
-  )
-}

package/src/components/RadioGroup/index.tsx

@@ -1,67 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes, useState } from 'react'
-import { twMerge } from 'tailwind-merge'
-import { FiCheck } from 'react-icons/fi'
-
-const options = [
-  { id: 1, value: 'option1', label: 'Opção 1' },
-  { id: 2, value: 'option2', label: 'Opção 2' },
-]
-
-export interface RadioGroupProps
-  extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-  disabled?: boolean
-  options: typeof options
-  required?: boolean
-}
-
-export const RadioGroup = ({
-  disabled,
-  options = [
-    { id: 1, value: 'option1', label: 'Opção 1' },
-    { id: 2, value: 'option2', label: 'Opção 2' },
-  ],
-  required = false,
-  className,
-}: RadioGroupProps) => {
-  const [selectedOption, setSelectedOption] = useState('')
-
-  const handleOptionChange = (value: string) => {
-    setSelectedOption(value)
-  }
-
-  return (
-    <div className="flex flex-col ">
-      {options.map((option) => (
-        <div key={option.id} className="flex py-2 items-center">
-          <label
-            htmlFor={`radio${option.id}`}
-            className={twMerge(
-              'relative rounded-full border-2 w-5 h-5 flex items-center justify-center hover:border-orange-500 hover:cursor-pointer',
-              selectedOption === option.value
-                ? 'bg-orange-500 border-orange-500'
-                : 'border-neutral-500 hover:shadow-md hover:shadow-orange-500',
-              disabled === true && 'opacity-50 cursor-not-allowed',
-              className,
-            )}
-          >
-            <input
-              type="radio"
-              id={`radio${option.id}`}
-              name="radioGroup"
-              value={option.value}
-              required={required}
-              className="hidden"
-              checked={selectedOption === option.value}
-              onChange={() => handleOptionChange(option.value)}
-              disabled={disabled}
-            />
-            {selectedOption === option.value && (
-              <FiCheck color="#FFFFFF" size={12} style={{ strokeWidth: 4 }} />
-            )}
-          </label>
-          <span className="px-2">{option.label}</span>
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/components/Shared/masks.tsx

@@ -1,60 +0,0 @@
-const masks = {
-  password: [/^(?=.*[!@#$%^&*])/, /(?=.*[0-9])/, /.{8,}$/],
-  date: [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
-  cpf: [
-    /\d/,
-    /\d/,
-    /\d/,
-    '.',
-    /\d/,
-    /\d/,
-    /\d/,
-    '.',
-    /\d/,
-    /\d/,
-    /\d/,
-    '-',
-    /\d/,
-    /\d/,
-  ],
-  cnpj: [
-    /\d/,
-    /\d/,
-    '.',
-    /\d/,
-    /\d/,
-    /\d/,
-    '.',
-    /\d/,
-    /\d/,
-    /\d/,
-    '/',
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-    '-',
-    /\d/,
-    /\d/,
-  ],
-  cep: [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/],
-  phone: [
-    '(',
-    /[1-9]/,
-    /[1-9]/,
-    ')',
-    ' ',
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-    '-',
-    /\d/,
-    /\d/,
-    /\d/,
-    /\d/,
-  ],
-}
-
-export default masks

package/src/components/Text/index.tsx

@@ -1,62 +0,0 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactNode } from 'react'
-import { twMerge } from 'tailwind-merge'
-
-export interface TextProps
-  extends DetailedHTMLProps<
-    HTMLAttributes<HTMLLabelElement>,
-    HTMLLabelElement
-  > {
-  children: ReactNode
-  color?: string
-  size?:
-    | 'xxs'
-    | 'xs'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | '4xl'
-    | '5xl'
-    | '6xl'
-    | '7xl'
-    | '8xl'
-    | '9xl'
-  tag?: 'p' | 'strong' | 'span' | 'label'
-  htmlFor?: string
-}
-
-export const Text = ({
-  children,
-  color = 'neutral-800',
-  size = 'md',
-  tag = 'p',
-  className,
-  ...rest
-}: TextProps) => {
-  const fontSize = {
-    xxs: 'text-xxs',
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-md',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-    '3xl': 'text-3xl',
-    '4xl': 'text-4xl',
-    '5xl': 'text-5xl',
-    '6xl': 'text-6xl',
-    '7xl': 'text-7xl',
-    '8xl': 'text-8xl',
-    '9xl': 'text-9xl',
-  }[size]
-
-  const Tag = tag as React.ElementType
-
-  return (
-    <Tag {...rest} className={twMerge(`text-${color} ${fontSize}`, className)}>
-      {children}
-    </Tag>
-  )
-}

package/src/components/TextArea/index.tsx

@@ -1,79 +0,0 @@
-import {
-  DetailedHTMLProps,
-  TextareaHTMLAttributes,
-  useEffect,
-  useState,
-} from 'react'
-import { twMerge } from 'tailwind-merge'
-
-export interface TextAreaProps
-  extends DetailedHTMLProps<
-    TextareaHTMLAttributes<HTMLTextAreaElement>,
-    HTMLTextAreaElement
-  > {
-  disabled?: boolean
-  reference?: React.RefObject<HTMLTextAreaElement>
-  placeholder?: string
-  value?: string
-  validated?: boolean
-  error: boolean
-  required?: boolean
-  resize?: boolean
-  type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep'
-}
-
-export const TextArea = ({
-  className,
-  disabled,
-  reference,
-  value,
-  error,
-  required,
-  placeholder,
-  resize,
-  onClick,
-  ...rest
-}: TextAreaProps) => {
-  const [selected, setSelected] = useState(false)
-  const [inputValue, setInputValue] = useState(value)
-
-  const handleFocus = () => {
-    setSelected(!selected)
-  }
-
-  const handleBlur = () => {
-    setSelected(false)
-  }
-
-  const handleInput = (event: React.FocusEvent<HTMLTextAreaElement>) => {
-    setInputValue(event.currentTarget.value)
-  }
-
-  useEffect(() => {
-    setInputValue(value)
-  }, [value])
-
-  return (
-    <textarea
-      required={required}
-      ref={reference}
-      disabled={disabled}
-      className={twMerge(
-        'rounded-sm w-full px-3 py-2 border-2 border-neutral text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none',
-        'resize-y h-32',
-        className,
-        disabled === true && 'opacity-50 cursor-not-allowed',
-        selected === true && 'border-2 border-orange-500',
-        error === true && 'border-2 border-red-900',
-        resize === false && 'resize-none overflow-hidden',
-      )}
-      onClick={onClick}
-      onFocus={handleFocus}
-      onChange={handleInput}
-      onBlur={handleBlur}
-      placeholder={placeholder}
-      value={inputValue}
-      {...rest}
-    />
-  )
-}

package/src/components/TextInput/index.tsx

@@ -1,102 +0,0 @@
-import {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  useEffect,
-  useState,
-  forwardRef,
-} from 'react'
-import { twMerge } from 'tailwind-merge'
-
-export interface TextInputProps
-  extends DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
-  disabled?: boolean
-  placeholder?: string
-  prefix?: string
-  value?: string
-  variant?: 'primary' | 'secondary'
-  validated?: boolean
-  error: boolean
-  required?: boolean
-  type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep'
-}
-
-const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
-  (
-    {
-      className,
-      disabled,
-      value,
-      prefix,
-      placeholder,
-      error,
-      type = 'text',
-      variant = 'primary',
-      onClick,
-      ...rest
-    }: TextInputProps,
-    ref,
-  ) => {
-    const [selected, setSelected] = useState(false)
-    const [inputValue, setInputValue] = useState(value)
-
-    const handleFocus = () => {
-      setSelected(!selected)
-    }
-
-    const handleBlur = () => {
-      setSelected(false)
-    }
-
-    const handleInput = (event: React.FocusEvent<HTMLInputElement>) => {
-      setInputValue(event.currentTarget.value)
-    }
-
-    useEffect(() => {
-      setInputValue(value)
-    }, [value])
-
-    return (
-      <div
-        className={twMerge(
-          ' py-2 px-4 border-2 rounded-sm box-border flex items-baseline bg-neutral-200',
-          'hover:shadow-md hover:shadow-neutral-500 focus:outline-none',
-          variant === 'secondary' && 'bg-neutral-800 border-neutral-800 ',
-          selected === true && 'border-2 border-orange-500',
-          disabled === true && 'opacity-50 cursor-not-allowed',
-          error === true && 'border-2 border-red-900',
-        )}
-      >
-        {!!prefix && (
-          <span className="text-neutral-500 sm:text-sm">{prefix}</span>
-        )}
-        <input
-          type={type}
-          required={rest.required}
-          onClick={onClick}
-          onFocus={handleFocus}
-          onChange={handleInput}
-          onBlur={handleBlur}
-          value={inputValue}
-          placeholder={placeholder}
-          disabled={disabled}
-          ref={ref}
-          className={twMerge(
-            'flex items-center justify-center bg-neutral-200 rounded-sm w-full px-1 py-2 text-md',
-            'focus:outline-none text-neutral-800',
-            disabled === true && 'cursor-not-allowed',
-            variant === 'secondary' && 'bg-neutral-800 text-neutral',
-            className,
-          )}
-          {...rest}
-        />
-      </div>
-    )
-  },
-)
-
-TextInput.displayName = 'TextInput'
-
-export { TextInput }

package/src/index.tsx

@@ -1,14 +0,0 @@
-export * from './components/Card'
-export * from './components/Button'
-export * from './components/Link'
-export * from './components/RadioGroup'
-export * from './components/Checkbox'
-export * from './components/Input'
-export * from './components/TextInput'
-export * from './components/TextArea'
-export * from './components/Text'
-export * from './components/Heading'
-export * from './components/Box'
-export * from './components/Form'
-export * from './components/Avatar'
-export * from './components/MultiStep'

package/src/styles/tailwind.css

@@ -1,7 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-html {
-    @apply font-default;
-}

package/tailwind.config.ts

@@ -1,19 +0,0 @@
-import { Config } from 'tailwindcss'
-import { colors, fontSizes, fontWeights, fonts, lineHeights, raddi, space } from '@koaris/tokens';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      colors: colors,
-      fontSize: fontSizes,
-      fontWeight: fontWeights,
-      fontFamily: fonts,
-      lineHeight: lineHeights,
-      raddi,
-      space
-    },
-  },
-  plugins: [],
-} satisfies Config

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "@koaris/ts-config/react.json",
-  "include": ["src"],
-  "splitting": true,
-  "external": ["react"],
-  "entryPoints": ["src/index.tsx"],
-}

package/tsup.config.ts

@@ -1,14 +0,0 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.tsx", "src/tailwind-preset.ts"],
-  format: ["esm"],
-  tsconfig: "./tsconfig.json",
-  outExtension({ format }) {
-    return { js: ".mjs" };
-  },
-  dts: true,
-  external: ["react"],
-
-  clean: true,
-});