@koaris/bloom-ui 1.0.2 → 1.0.4
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/LICENSE +674 -0
- package/README.md +15 -1
- package/dist/index.d.mts +23 -18
- package/dist/index.d.ts +23 -18
- package/dist/index.js +189 -186
- package/dist/index.mjs +182 -180
- package/dist/tailwind.css +25 -10
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -10,4 +10,18 @@ Install the following package:
|
|
|
10
10
|
npm i @koaris/bloom-ui
|
|
11
11
|
```
|
|
12
12
|
## Usage
|
|
13
|
-
View docs [here](https://guilhermesalviano.github.io/bloom-ui).
|
|
13
|
+
View docs [here](https://guilhermesalviano.github.io/bloom-ui).
|
|
14
|
+
|
|
15
|
+
Import design system css in your css file:
|
|
16
|
+
```css
|
|
17
|
+
@import "@koaris/bloom-ui/dist/tailwind.css";
|
|
18
|
+
```
|
|
19
|
+
Components usage:
|
|
20
|
+
```tsx
|
|
21
|
+
import { Text } from '@koaris/bloom-ui'
|
|
22
|
+
|
|
23
|
+
<Text tag="p">Test</Text>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Contributions and bug reports
|
|
27
|
+
You can follow and make contributions in [github](https://github.com/guilhermesalviano/bloom-ui).
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode, FormHTMLAttributes } from 'react';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Primary UI component for user interaction
|
|
@@ -38,7 +38,7 @@ interface RadioGroupProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElemen
|
|
|
38
38
|
options: typeof options;
|
|
39
39
|
required?: boolean;
|
|
40
40
|
}
|
|
41
|
-
declare const RadioGroup: ({ disabled, options, required, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
|
|
41
|
+
declare const RadioGroup: ({ disabled, options, required, className, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
|
|
42
42
|
|
|
43
43
|
interface CheckboxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
44
44
|
disabled?: boolean;
|
|
@@ -51,7 +51,6 @@ declare const Checkbox: ({ className, required, disabled }: CheckboxProps) => re
|
|
|
51
51
|
*/
|
|
52
52
|
interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
53
53
|
disabled?: boolean;
|
|
54
|
-
label?: string;
|
|
55
54
|
placeholder?: string;
|
|
56
55
|
value?: string;
|
|
57
56
|
validated?: boolean;
|
|
@@ -59,14 +58,14 @@ interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElem
|
|
|
59
58
|
required?: boolean;
|
|
60
59
|
type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
|
|
61
60
|
}
|
|
62
|
-
declare const Input: ({ className, disabled,
|
|
61
|
+
declare const Input: ({ className, disabled, placeholder, value, validated, error, required, type, onClick, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
|
|
63
62
|
|
|
64
63
|
interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
65
64
|
disabled?: boolean;
|
|
66
|
-
label?: string;
|
|
67
65
|
placeholder?: string;
|
|
68
66
|
prefix?: string;
|
|
69
67
|
value?: string;
|
|
68
|
+
variant?: 'primary' | 'secondary';
|
|
70
69
|
validated?: boolean;
|
|
71
70
|
error: boolean;
|
|
72
71
|
required?: boolean;
|
|
@@ -74,12 +73,8 @@ interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInput
|
|
|
74
73
|
}
|
|
75
74
|
declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
76
75
|
|
|
77
|
-
/**
|
|
78
|
-
* Primary UI component for user interaction
|
|
79
|
-
*/
|
|
80
76
|
interface TextAreaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
|
|
81
77
|
disabled?: boolean;
|
|
82
|
-
label?: string;
|
|
83
78
|
placeholder?: string;
|
|
84
79
|
value?: string;
|
|
85
80
|
validated?: boolean;
|
|
@@ -93,30 +88,40 @@ interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>,
|
|
|
93
88
|
children: ReactNode;
|
|
94
89
|
color?: string;
|
|
95
90
|
size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
|
|
96
|
-
|
|
91
|
+
tag?: 'p' | 'strong' | 'span' | 'label';
|
|
97
92
|
htmlFor?: string;
|
|
98
93
|
}
|
|
99
|
-
declare const Text: ({ children, color, size,
|
|
94
|
+
declare const Text: ({ children, color, size, tag, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
100
95
|
|
|
101
|
-
interface HeadingProps {
|
|
96
|
+
interface HeadingProps extends DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> {
|
|
102
97
|
children: React.ReactNode;
|
|
103
98
|
color?: string;
|
|
104
99
|
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
|
|
105
|
-
|
|
100
|
+
tag?: 'h1' | 'h2' | 'h3' | 'h4';
|
|
106
101
|
}
|
|
107
|
-
declare const Heading: ({ children, color, size,
|
|
102
|
+
declare const Heading: ({ children, color, size, tag, className, }: HeadingProps) => react_jsx_runtime.JSX.Element;
|
|
108
103
|
|
|
109
104
|
interface BoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
110
105
|
children: React.ReactNode;
|
|
111
|
-
|
|
106
|
+
tag?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer';
|
|
107
|
+
variant?: 'primary' | 'secondary';
|
|
108
|
+
}
|
|
109
|
+
declare const Box: ({ className, children, tag, variant, }: BoxProps) => react_jsx_runtime.JSX.Element;
|
|
110
|
+
|
|
111
|
+
interface FormProps extends DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
|
|
112
|
+
children: React.ReactNode;
|
|
113
|
+
variant?: 'primary' | 'secondary';
|
|
114
|
+
orientation?: 'row' | 'col';
|
|
115
|
+
handleSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
112
116
|
}
|
|
113
|
-
declare const
|
|
117
|
+
declare const Form: ({ className, children, variant, orientation, ...rest }: FormProps) => react_jsx_runtime.JSX.Element;
|
|
114
118
|
|
|
115
119
|
interface AvatarProps {
|
|
116
120
|
src?: string;
|
|
117
121
|
alt?: string;
|
|
122
|
+
className?: string;
|
|
118
123
|
}
|
|
119
|
-
declare const Avatar: ({ ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
|
|
124
|
+
declare const Avatar: ({ className, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
|
|
120
125
|
|
|
121
126
|
interface MultiStepProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
122
127
|
size: number;
|
|
@@ -124,4 +129,4 @@ interface MultiStepProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
|
|
|
124
129
|
}
|
|
125
130
|
declare const MultiStep: ({ className, size, currentStep }: MultiStepProps) => react_jsx_runtime.JSX.Element;
|
|
126
131
|
|
|
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 };
|
|
132
|
+
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, MultiStep, type MultiStepProps, RadioGroup, type RadioGroupProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes, ReactNode, FormHTMLAttributes } from 'react';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Primary UI component for user interaction
|
|
@@ -38,7 +38,7 @@ interface RadioGroupProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElemen
|
|
|
38
38
|
options: typeof options;
|
|
39
39
|
required?: boolean;
|
|
40
40
|
}
|
|
41
|
-
declare const RadioGroup: ({ disabled, options, required, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
|
|
41
|
+
declare const RadioGroup: ({ disabled, options, required, className, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
|
|
42
42
|
|
|
43
43
|
interface CheckboxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
44
44
|
disabled?: boolean;
|
|
@@ -51,7 +51,6 @@ declare const Checkbox: ({ className, required, disabled }: CheckboxProps) => re
|
|
|
51
51
|
*/
|
|
52
52
|
interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
53
53
|
disabled?: boolean;
|
|
54
|
-
label?: string;
|
|
55
54
|
placeholder?: string;
|
|
56
55
|
value?: string;
|
|
57
56
|
validated?: boolean;
|
|
@@ -59,14 +58,14 @@ interface InputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElem
|
|
|
59
58
|
required?: boolean;
|
|
60
59
|
type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
|
|
61
60
|
}
|
|
62
|
-
declare const Input: ({ className, disabled,
|
|
61
|
+
declare const Input: ({ className, disabled, placeholder, value, validated, error, required, type, onClick, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
|
|
63
62
|
|
|
64
63
|
interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
65
64
|
disabled?: boolean;
|
|
66
|
-
label?: string;
|
|
67
65
|
placeholder?: string;
|
|
68
66
|
prefix?: string;
|
|
69
67
|
value?: string;
|
|
68
|
+
variant?: 'primary' | 'secondary';
|
|
70
69
|
validated?: boolean;
|
|
71
70
|
error: boolean;
|
|
72
71
|
required?: boolean;
|
|
@@ -74,12 +73,8 @@ interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInput
|
|
|
74
73
|
}
|
|
75
74
|
declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
76
75
|
|
|
77
|
-
/**
|
|
78
|
-
* Primary UI component for user interaction
|
|
79
|
-
*/
|
|
80
76
|
interface TextAreaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
|
|
81
77
|
disabled?: boolean;
|
|
82
|
-
label?: string;
|
|
83
78
|
placeholder?: string;
|
|
84
79
|
value?: string;
|
|
85
80
|
validated?: boolean;
|
|
@@ -93,30 +88,40 @@ interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>,
|
|
|
93
88
|
children: ReactNode;
|
|
94
89
|
color?: string;
|
|
95
90
|
size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
|
|
96
|
-
|
|
91
|
+
tag?: 'p' | 'strong' | 'span' | 'label';
|
|
97
92
|
htmlFor?: string;
|
|
98
93
|
}
|
|
99
|
-
declare const Text: ({ children, color, size,
|
|
94
|
+
declare const Text: ({ children, color, size, tag, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
|
|
100
95
|
|
|
101
|
-
interface HeadingProps {
|
|
96
|
+
interface HeadingProps extends DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> {
|
|
102
97
|
children: React.ReactNode;
|
|
103
98
|
color?: string;
|
|
104
99
|
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
|
|
105
|
-
|
|
100
|
+
tag?: 'h1' | 'h2' | 'h3' | 'h4';
|
|
106
101
|
}
|
|
107
|
-
declare const Heading: ({ children, color, size,
|
|
102
|
+
declare const Heading: ({ children, color, size, tag, className, }: HeadingProps) => react_jsx_runtime.JSX.Element;
|
|
108
103
|
|
|
109
104
|
interface BoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
110
105
|
children: React.ReactNode;
|
|
111
|
-
|
|
106
|
+
tag?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer';
|
|
107
|
+
variant?: 'primary' | 'secondary';
|
|
108
|
+
}
|
|
109
|
+
declare const Box: ({ className, children, tag, variant, }: BoxProps) => react_jsx_runtime.JSX.Element;
|
|
110
|
+
|
|
111
|
+
interface FormProps extends DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
|
|
112
|
+
children: React.ReactNode;
|
|
113
|
+
variant?: 'primary' | 'secondary';
|
|
114
|
+
orientation?: 'row' | 'col';
|
|
115
|
+
handleSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
112
116
|
}
|
|
113
|
-
declare const
|
|
117
|
+
declare const Form: ({ className, children, variant, orientation, ...rest }: FormProps) => react_jsx_runtime.JSX.Element;
|
|
114
118
|
|
|
115
119
|
interface AvatarProps {
|
|
116
120
|
src?: string;
|
|
117
121
|
alt?: string;
|
|
122
|
+
className?: string;
|
|
118
123
|
}
|
|
119
|
-
declare const Avatar: ({ ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
|
|
124
|
+
declare const Avatar: ({ className, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
|
|
120
125
|
|
|
121
126
|
interface MultiStepProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
122
127
|
size: number;
|
|
@@ -124,4 +129,4 @@ interface MultiStepProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement
|
|
|
124
129
|
}
|
|
125
130
|
declare const MultiStep: ({ className, size, currentStep }: MultiStepProps) => react_jsx_runtime.JSX.Element;
|
|
126
131
|
|
|
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 };
|
|
132
|
+
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, MultiStep, type MultiStepProps, RadioGroup, type RadioGroupProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps };
|