@koaris/bloom-ui 1.1.2 → 1.2.1

package/dist/index.d.cts

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

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@koaris/bloom-ui",
-  "version": "1.1.2",
+  "version": "1.2.1",
   "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",
+  "types": "./,dist/index.d.ts",
+  "main": "./dist/index.mjs",
+  "module": "./ist/index.mjs",
   "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\"",
@@ -12,8 +14,9 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
     },
     "./tailwind.css": "./tailwind.css"
   },
@@ -21,11 +24,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>
-  )
-}