@koaris/bloom-ui 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -0
- package/dist/index.d.mts +127 -0
- package/dist/index.d.ts +127 -0
- package/dist/index.js +3197 -0
- package/dist/index.mjs +3172 -0
- package/dist/tailwind.css +958 -0
- package/package.json +44 -0
package/README.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Bloom-ui
|
|
2
|
+
Bloom-ui is a public design system from the Koaris Project developed with React, Typescript, and Tailwind.
|
|
3
|
+
|
|
4
|
+
## Motivation
|
|
5
|
+
Bloom-ui is a design system developed exclusively for the Koaris project with the aim of unifying the interfaces and simplifying the construction of new React projects.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
Install the following package:
|
|
9
|
+
```bash
|
|
10
|
+
npm i @koaris/bloom-ui
|
|
11
|
+
```
|
|
12
|
+
## Usage
|
|
13
|
+
View docs [here](https://guilhermesalviano.github.io/bloom-ui).
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Primary UI component for user interaction
|
|
7
|
+
*/
|
|
8
|
+
interface CardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, // Change the type to HTMLDivElement
|
|
9
|
+
HTMLDivElement> {
|
|
10
|
+
selected?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
direction?: string;
|
|
13
|
+
size?: string;
|
|
14
|
+
imageSize: string;
|
|
15
|
+
image?: string;
|
|
16
|
+
onClick?: () => void;
|
|
17
|
+
}
|
|
18
|
+
declare const Card: ({ className, selected, direction, size, disabled, imageSize, onClick, ...rest }: CardProps) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Primary UI component for user interaction
|
|
22
|
+
*/
|
|
23
|
+
interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
24
|
+
size?: 'sm' | 'md';
|
|
25
|
+
variant?: 'primary' | 'secondary';
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
children: string | JSX.Element;
|
|
28
|
+
}
|
|
29
|
+
declare const Button: ({ className, variant, size, disabled, onClick, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
31
|
+
declare const options: {
|
|
32
|
+
id: number;
|
|
33
|
+
value: string;
|
|
34
|
+
label: string;
|
|
35
|
+
}[];
|
|
36
|
+
interface RadioGroupProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
options: typeof options;
|
|
39
|
+
required?: boolean;
|
|
40
|
+
}
|
|
41
|
+
declare const RadioGroup: ({ disabled, options, required, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
|
|
42
|
+
|
|
43
|
+
interface CheckboxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
44
|
+
disabled?: boolean;
|
|
45
|
+
required?: boolean;
|
|
46
|
+
}
|
|
47
|
+
declare const Checkbox: ({ className, required, disabled }: CheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Primary UI component for user interaction
|
|
51
|
+
*/
|
|
52
|
+
interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
53
|
+
disabled?: boolean;
|
|
54
|
+
label?: string;
|
|
55
|
+
placeholder?: string;
|
|
56
|
+
value?: string;
|
|
57
|
+
validated?: boolean;
|
|
58
|
+
error: boolean;
|
|
59
|
+
required?: boolean;
|
|
60
|
+
type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
|
|
61
|
+
}
|
|
62
|
+
declare const Input: ({ className, disabled, label, placeholder, value, validated, error, required, type, onClick, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
|
|
63
|
+
|
|
64
|
+
interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
65
|
+
disabled?: boolean;
|
|
66
|
+
label?: string;
|
|
67
|
+
placeholder?: string;
|
|
68
|
+
prefix?: string;
|
|
69
|
+
value?: string;
|
|
70
|
+
validated?: boolean;
|
|
71
|
+
error: boolean;
|
|
72
|
+
required?: boolean;
|
|
73
|
+
type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
|
|
74
|
+
}
|
|
75
|
+
declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Primary UI component for user interaction
|
|
79
|
+
*/
|
|
80
|
+
interface TextAreaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
|
|
81
|
+
disabled?: boolean;
|
|
82
|
+
label?: string;
|
|
83
|
+
placeholder?: string;
|
|
84
|
+
value?: string;
|
|
85
|
+
validated?: boolean;
|
|
86
|
+
error: boolean;
|
|
87
|
+
required?: boolean;
|
|
88
|
+
type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
|
|
89
|
+
}
|
|
90
|
+
declare const TextArea: ({ className, disabled, value, error, required, placeholder, onClick, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;
|
|
91
|
+
|
|
92
|
+
interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
|
|
93
|
+
children: ReactNode;
|
|
94
|
+
color?: string;
|
|
95
|
+
size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
|
|
96
|
+
variant?: 'p' | 'strong' | 'span' | 'label';
|
|
97
|
+
htmlFor?: string;
|
|
98
|
+
}
|
|
99
|
+
declare const Text: ({ children, color, size, variant, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
100
|
+
|
|
101
|
+
interface HeadingProps {
|
|
102
|
+
children: React.ReactNode;
|
|
103
|
+
color?: string;
|
|
104
|
+
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
|
|
105
|
+
variant?: 'h1' | 'h2' | 'h3' | 'h4';
|
|
106
|
+
}
|
|
107
|
+
declare const Heading: ({ children, color, size, variant, }: HeadingProps) => react_jsx_runtime.JSX.Element;
|
|
108
|
+
|
|
109
|
+
interface BoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
110
|
+
children: React.ReactNode;
|
|
111
|
+
color?: string;
|
|
112
|
+
}
|
|
113
|
+
declare const Box: ({ className, children, color, }: BoxProps) => react_jsx_runtime.JSX.Element;
|
|
114
|
+
|
|
115
|
+
interface AvatarProps {
|
|
116
|
+
src?: string;
|
|
117
|
+
alt?: string;
|
|
118
|
+
}
|
|
119
|
+
declare const Avatar: ({ ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
|
|
120
|
+
|
|
121
|
+
interface MultiStepProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
122
|
+
size: number;
|
|
123
|
+
currentStep?: number;
|
|
124
|
+
}
|
|
125
|
+
declare const MultiStep: ({ className, size, currentStep }: MultiStepProps) => react_jsx_runtime.JSX.Element;
|
|
126
|
+
|
|
127
|
+
export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Heading, type HeadingProps, Input, type InputProps, MultiStep, type MultiStepProps, RadioGroup, type RadioGroupProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Primary UI component for user interaction
|
|
7
|
+
*/
|
|
8
|
+
interface CardProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, // Change the type to HTMLDivElement
|
|
9
|
+
HTMLDivElement> {
|
|
10
|
+
selected?: boolean;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
direction?: string;
|
|
13
|
+
size?: string;
|
|
14
|
+
imageSize: string;
|
|
15
|
+
image?: string;
|
|
16
|
+
onClick?: () => void;
|
|
17
|
+
}
|
|
18
|
+
declare const Card: ({ className, selected, direction, size, disabled, imageSize, onClick, ...rest }: CardProps) => react_jsx_runtime.JSX.Element;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Primary UI component for user interaction
|
|
22
|
+
*/
|
|
23
|
+
interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
|
|
24
|
+
size?: 'sm' | 'md';
|
|
25
|
+
variant?: 'primary' | 'secondary';
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
children: string | JSX.Element;
|
|
28
|
+
}
|
|
29
|
+
declare const Button: ({ className, variant, size, disabled, onClick, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
31
|
+
declare const options: {
|
|
32
|
+
id: number;
|
|
33
|
+
value: string;
|
|
34
|
+
label: string;
|
|
35
|
+
}[];
|
|
36
|
+
interface RadioGroupProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
options: typeof options;
|
|
39
|
+
required?: boolean;
|
|
40
|
+
}
|
|
41
|
+
declare const RadioGroup: ({ disabled, options, required, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
|
|
42
|
+
|
|
43
|
+
interface CheckboxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
44
|
+
disabled?: boolean;
|
|
45
|
+
required?: boolean;
|
|
46
|
+
}
|
|
47
|
+
declare const Checkbox: ({ className, required, disabled }: CheckboxProps) => react_jsx_runtime.JSX.Element;
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Primary UI component for user interaction
|
|
51
|
+
*/
|
|
52
|
+
interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
53
|
+
disabled?: boolean;
|
|
54
|
+
label?: string;
|
|
55
|
+
placeholder?: string;
|
|
56
|
+
value?: string;
|
|
57
|
+
validated?: boolean;
|
|
58
|
+
error: boolean;
|
|
59
|
+
required?: boolean;
|
|
60
|
+
type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
|
|
61
|
+
}
|
|
62
|
+
declare const Input: ({ className, disabled, label, placeholder, value, validated, error, required, type, onClick, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
|
|
63
|
+
|
|
64
|
+
interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
65
|
+
disabled?: boolean;
|
|
66
|
+
label?: string;
|
|
67
|
+
placeholder?: string;
|
|
68
|
+
prefix?: string;
|
|
69
|
+
value?: string;
|
|
70
|
+
validated?: boolean;
|
|
71
|
+
error: boolean;
|
|
72
|
+
required?: boolean;
|
|
73
|
+
type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
|
|
74
|
+
}
|
|
75
|
+
declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Primary UI component for user interaction
|
|
79
|
+
*/
|
|
80
|
+
interface TextAreaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
|
|
81
|
+
disabled?: boolean;
|
|
82
|
+
label?: string;
|
|
83
|
+
placeholder?: string;
|
|
84
|
+
value?: string;
|
|
85
|
+
validated?: boolean;
|
|
86
|
+
error: boolean;
|
|
87
|
+
required?: boolean;
|
|
88
|
+
type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
|
|
89
|
+
}
|
|
90
|
+
declare const TextArea: ({ className, disabled, value, error, required, placeholder, onClick, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;
|
|
91
|
+
|
|
92
|
+
interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
|
|
93
|
+
children: ReactNode;
|
|
94
|
+
color?: string;
|
|
95
|
+
size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
|
|
96
|
+
variant?: 'p' | 'strong' | 'span' | 'label';
|
|
97
|
+
htmlFor?: string;
|
|
98
|
+
}
|
|
99
|
+
declare const Text: ({ children, color, size, variant, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
100
|
+
|
|
101
|
+
interface HeadingProps {
|
|
102
|
+
children: React.ReactNode;
|
|
103
|
+
color?: string;
|
|
104
|
+
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
|
|
105
|
+
variant?: 'h1' | 'h2' | 'h3' | 'h4';
|
|
106
|
+
}
|
|
107
|
+
declare const Heading: ({ children, color, size, variant, }: HeadingProps) => react_jsx_runtime.JSX.Element;
|
|
108
|
+
|
|
109
|
+
interface BoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
110
|
+
children: React.ReactNode;
|
|
111
|
+
color?: string;
|
|
112
|
+
}
|
|
113
|
+
declare const Box: ({ className, children, color, }: BoxProps) => react_jsx_runtime.JSX.Element;
|
|
114
|
+
|
|
115
|
+
interface AvatarProps {
|
|
116
|
+
src?: string;
|
|
117
|
+
alt?: string;
|
|
118
|
+
}
|
|
119
|
+
declare const Avatar: ({ ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
|
|
120
|
+
|
|
121
|
+
interface MultiStepProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
122
|
+
size: number;
|
|
123
|
+
currentStep?: number;
|
|
124
|
+
}
|
|
125
|
+
declare const MultiStep: ({ className, size, currentStep }: MultiStepProps) => react_jsx_runtime.JSX.Element;
|
|
126
|
+
|
|
127
|
+
export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Heading, type HeadingProps, Input, type InputProps, MultiStep, type MultiStepProps, RadioGroup, type RadioGroupProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps };
|