@koaris/bloom-ui 1.1.1 → 1.1.2

package/src/components/RadioGroup/index.tsx

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

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

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

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

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

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

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

package/tailwind.config.ts

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

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

package/tsup.config.ts

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

package/dist/index.d.mts

@@ -1,145 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode, FormHTMLAttributes } from 'react';
-
-/**
- * Primary UI component for user interaction
- */
-interface CardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, // Change the type to HTMLDivElement
-HTMLDivElement> {
-    selected?: boolean;
-    disabled?: boolean;
-    direction?: string;
-    size?: string;
-    imageSize: string;
-    image?: string;
-    onClick?: () => void;
-}
-declare const Card: ({ className, selected, direction, size, disabled, imageSize, onClick, ...rest }: CardProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * Primary UI component for user interaction
- */
-interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-    size?: 'sm' | 'md';
-    variant?: 'primary' | 'secondary';
-    disabled?: boolean;
-    children: string | JSX.Element;
-}
-declare const Button: ({ className, variant, size, disabled, onClick, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * Primary UI component for user interaction
- */
-interface LinkProps extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
-    url: string;
-    newPage: boolean;
-    disabled?: boolean;
-    children: string | JSX.Element;
-}
-declare const Link: ({ className, disabled, url, newPage, onClick, ...rest }: LinkProps) => react_jsx_runtime.JSX.Element;
-
-declare const options: {
-    id: number;
-    value: string;
-    label: string;
-}[];
-interface RadioGroupProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    disabled?: boolean;
-    options: typeof options;
-    required?: boolean;
-}
-declare const RadioGroup: ({ disabled, options, required, className, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
-
-interface CheckboxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    disabled?: boolean;
-    required?: boolean;
-}
-declare const Checkbox: ({ className, required, disabled }: CheckboxProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * Primary UI component for user interaction
- */
-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';
-}
-declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
-
-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';
-}
-declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
-
-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';
-}
-declare const TextArea: ({ className, disabled, reference, value, error, required, placeholder, resize, onClick, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;
-
-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;
-}
-declare const Text: ({ children, color, size, tag, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
-
-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';
-}
-declare const Heading: ({ children, color, size, tag, className, }: HeadingProps) => react_jsx_runtime.JSX.Element;
-
-interface BoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    children: React.ReactNode;
-    tag?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer';
-    variant?: 'primary' | 'secondary';
-}
-declare const Box: ({ className, children, tag, variant, }: BoxProps) => react_jsx_runtime.JSX.Element;
-
-interface FormProps extends DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
-    children: React.ReactNode;
-    variant?: 'primary' | 'secondary';
-    orientation?: 'row' | 'col';
-    handleSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
-}
-declare const Form: ({ className, children, variant, orientation, ...rest }: FormProps) => react_jsx_runtime.JSX.Element;
-
-interface AvatarProps {
-    src?: string;
-    alt?: string;
-    className?: string;
-}
-declare const Avatar: ({ className, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
-
-interface MultiStepProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
-    size: number;
-    currentStep?: number;
-}
-declare const MultiStep: ({ className, size, currentStep }: MultiStepProps) => react_jsx_runtime.JSX.Element;
-
-export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Form, type FormProps, Heading, type HeadingProps, Input, type InputProps, Link, type LinkProps, MultiStep, type MultiStepProps, RadioGroup, type RadioGroupProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps };