@koaris/bloom-ui 1.0.2 → 1.0.3

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.
Files changed (7) hide show
  1. package/README.md +15 -1
  2. package/dist/index.d.mts +13 -13
  3. package/dist/index.d.ts +13 -13
  4. package/dist/index.js +149 -178
  5. package/dist/index.mjs +145 -174
  6. package/dist/tailwind.css +21 -10
  7. package/package.json +1 -1
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
@@ -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, label, placeholder, value, validated, error, required, type, onClick, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
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;
@@ -79,7 +78,6 @@ declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "r
79
78
  */
80
79
  interface TextAreaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
81
80
  disabled?: boolean;
82
- label?: string;
83
81
  placeholder?: string;
84
82
  value?: string;
85
83
  validated?: boolean;
@@ -93,30 +91,32 @@ interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>,
93
91
  children: ReactNode;
94
92
  color?: string;
95
93
  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
96
- variant?: 'p' | 'strong' | 'span' | 'label';
94
+ tag?: 'p' | 'strong' | 'span' | 'label';
97
95
  htmlFor?: string;
98
96
  }
99
- declare const Text: ({ children, color, size, variant, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
97
+ declare const Text: ({ children, color, size, tag, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
100
98
 
101
- interface HeadingProps {
99
+ interface HeadingProps extends DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> {
102
100
  children: React.ReactNode;
103
101
  color?: string;
104
102
  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
105
- variant?: 'h1' | 'h2' | 'h3' | 'h4';
103
+ tag?: 'h1' | 'h2' | 'h3' | 'h4';
106
104
  }
107
- declare const Heading: ({ children, color, size, variant, }: HeadingProps) => react_jsx_runtime.JSX.Element;
105
+ declare const Heading: ({ children, color, size, tag, className, }: HeadingProps) => react_jsx_runtime.JSX.Element;
108
106
 
109
107
  interface BoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
110
108
  children: React.ReactNode;
111
- color?: string;
109
+ tag?: 'form' | 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer';
110
+ variant?: 'primary' | 'secondary';
112
111
  }
113
- declare const Box: ({ className, children, color, }: BoxProps) => react_jsx_runtime.JSX.Element;
112
+ declare const Box: ({ className, children, tag, variant, }: BoxProps) => react_jsx_runtime.JSX.Element;
114
113
 
115
114
  interface AvatarProps {
116
115
  src?: string;
117
116
  alt?: string;
117
+ className?: string;
118
118
  }
119
- declare const Avatar: ({ ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
119
+ declare const Avatar: ({ className, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
120
120
 
121
121
  interface MultiStepProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
122
122
  size: number;
package/dist/index.d.ts CHANGED
@@ -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, label, placeholder, value, validated, error, required, type, onClick, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;
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;
@@ -79,7 +78,6 @@ declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "r
79
78
  */
80
79
  interface TextAreaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
81
80
  disabled?: boolean;
82
- label?: string;
83
81
  placeholder?: string;
84
82
  value?: string;
85
83
  validated?: boolean;
@@ -93,30 +91,32 @@ interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>,
93
91
  children: ReactNode;
94
92
  color?: string;
95
93
  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
96
- variant?: 'p' | 'strong' | 'span' | 'label';
94
+ tag?: 'p' | 'strong' | 'span' | 'label';
97
95
  htmlFor?: string;
98
96
  }
99
- declare const Text: ({ children, color, size, variant, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
97
+ declare const Text: ({ children, color, size, tag, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
100
98
 
101
- interface HeadingProps {
99
+ interface HeadingProps extends DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> {
102
100
  children: React.ReactNode;
103
101
  color?: string;
104
102
  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
105
- variant?: 'h1' | 'h2' | 'h3' | 'h4';
103
+ tag?: 'h1' | 'h2' | 'h3' | 'h4';
106
104
  }
107
- declare const Heading: ({ children, color, size, variant, }: HeadingProps) => react_jsx_runtime.JSX.Element;
105
+ declare const Heading: ({ children, color, size, tag, className, }: HeadingProps) => react_jsx_runtime.JSX.Element;
108
106
 
109
107
  interface BoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
110
108
  children: React.ReactNode;
111
- color?: string;
109
+ tag?: 'form' | 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer';
110
+ variant?: 'primary' | 'secondary';
112
111
  }
113
- declare const Box: ({ className, children, color, }: BoxProps) => react_jsx_runtime.JSX.Element;
112
+ declare const Box: ({ className, children, tag, variant, }: BoxProps) => react_jsx_runtime.JSX.Element;
114
113
 
115
114
  interface AvatarProps {
116
115
  src?: string;
117
116
  alt?: string;
117
+ className?: string;
118
118
  }
119
- declare const Avatar: ({ ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
119
+ declare const Avatar: ({ className, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
120
120
 
121
121
  interface MultiStepProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
122
122
  size: number;
package/dist/index.js CHANGED
@@ -2571,12 +2571,12 @@ var Card = (_a) => {
2571
2571
  className: twMerge(
2572
2572
  "flex items-center justify-center rounded-lg cursor-pointer bg-neutral",
2573
2573
  "hover:shadow-md hover:shadow-neutral-500 border border-neutral-500 text-neutral-1000",
2574
- className,
2575
2574
  size === "medium" && "w-64 px-8 py-4",
2576
2575
  size === "large" && "w-96 pr-5",
2577
2576
  direction === "col" && "flex-col",
2578
2577
  selected === true && "border-2 border-orange-500",
2579
- disabled === true && "opacity-50 cursor-not-allowed"
2578
+ disabled === true && "opacity-50 cursor-not-allowed",
2579
+ className
2580
2580
  ),
2581
2581
  onClick,
2582
2582
  children: [
@@ -2611,12 +2611,12 @@ var Button = (_a) => {
2611
2611
  __spreadValues({
2612
2612
  className: twMerge(
2613
2613
  "flex items-center justify-center rounded-lg px-8 py-2 text-md font-medium hover:shadow-md hover:shadow-neutral-500",
2614
- className,
2615
2614
  variant === "primary" && "bg-orange-500 text-neutral hover:bg-orange-700",
2616
2615
  variant === "secondary" && "bg-neutral text-orange-500 border border-orange-500 hover:bg-neutral-200",
2617
2616
  size === "sm" && "px-6 py-1",
2618
2617
  typeof rest.children !== "string" && "px-4",
2619
- disabled === true && "opacity-50 cursor-not-allowed"
2618
+ disabled === true && "opacity-50 cursor-not-allowed",
2619
+ className
2620
2620
  ),
2621
2621
  onClick
2622
2622
  }, rest)
@@ -2633,7 +2633,8 @@ var RadioGroup = ({
2633
2633
  { id: 1, value: "option1", label: "Op\xE7\xE3o 1" },
2634
2634
  { id: 2, value: "option2", label: "Op\xE7\xE3o 2" }
2635
2635
  ],
2636
- required = false
2636
+ required = false,
2637
+ className
2637
2638
  }) => {
2638
2639
  const [selectedOption, setSelectedOption] = (0, import_react.useState)("");
2639
2640
  const handleOptionChange = (value) => {
@@ -2647,7 +2648,8 @@ var RadioGroup = ({
2647
2648
  className: twMerge(
2648
2649
  "relative rounded-full border-2 w-5 h-5 flex items-center justify-center hover:border-orange-500 hover:cursor-pointer",
2649
2650
  selectedOption === option.value ? "bg-orange-500 border-orange-500" : "border-neutral-500 hover:shadow-md hover:shadow-orange-500",
2650
- disabled === true && "opacity-50 cursor-not-allowed"
2651
+ disabled === true && "opacity-50 cursor-not-allowed",
2652
+ className
2651
2653
  ),
2652
2654
  children: [
2653
2655
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2776,49 +2778,12 @@ var masks = {
2776
2778
  };
2777
2779
  var masks_default = masks;
2778
2780
 
2779
- // src/components/Text/index.tsx
2780
- var import_jsx_runtime5 = require("react/jsx-runtime");
2781
- var Text = (_a) => {
2782
- var _b = _a, {
2783
- children,
2784
- color = "neutral-800",
2785
- size = "md",
2786
- variant = "p",
2787
- className
2788
- } = _b, rest = __objRest(_b, [
2789
- "children",
2790
- "color",
2791
- "size",
2792
- "variant",
2793
- "className"
2794
- ]);
2795
- const fontSize = {
2796
- xxs: "text-xxs",
2797
- xs: "text-xs",
2798
- sm: "text-sm",
2799
- md: "text-md",
2800
- lg: "text-lg",
2801
- xl: "text-xl",
2802
- "2xl": "text-2xl",
2803
- "3xl": "text-3xl",
2804
- "4xl": "text-4xl",
2805
- "5xl": "text-5xl",
2806
- "6xl": "text-6xl",
2807
- "7xl": "text-7xl",
2808
- "8xl": "text-8xl",
2809
- "9xl": "text-9xl"
2810
- }[size];
2811
- const Tag = variant;
2812
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, __spreadProps(__spreadValues({}, rest), { className: twMerge(`text-${color} ${fontSize}`, className), children }));
2813
- };
2814
-
2815
2781
  // src/components/Input/index.tsx
2816
- var import_jsx_runtime6 = require("react/jsx-runtime");
2782
+ var import_jsx_runtime5 = require("react/jsx-runtime");
2817
2783
  var Input = (_a) => {
2818
2784
  var _b = _a, {
2819
2785
  className,
2820
2786
  disabled,
2821
- label,
2822
2787
  placeholder,
2823
2788
  value,
2824
2789
  validated,
@@ -2829,7 +2794,6 @@ var Input = (_a) => {
2829
2794
  } = _b, rest = __objRest(_b, [
2830
2795
  "className",
2831
2796
  "disabled",
2832
- "label",
2833
2797
  "placeholder",
2834
2798
  "value",
2835
2799
  "validated",
@@ -2861,23 +2825,11 @@ var Input = (_a) => {
2861
2825
  setHasNumber((value2 == null ? void 0 : value2.match(masks_default.password[1])) !== null);
2862
2826
  setHasEightCharacteres((value2 == null ? void 0 : value2.match(masks_default.password[2])) !== null);
2863
2827
  };
2864
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
2865
- label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2866
- Text,
2867
- {
2868
- htmlFor: rest.id,
2869
- variant: "label",
2870
- color: rest.color,
2871
- className: "leading-8",
2872
- children: label
2873
- }
2874
- ),
2875
- type === "text" || type === "password" || type === "date" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
2876
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2828
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2829
+ type === "text" || type === "password" || type === "date" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
2830
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2877
2831
  "input",
2878
- {
2879
- id: rest.id,
2880
- name: rest.name,
2832
+ __spreadValues({
2881
2833
  type,
2882
2834
  required,
2883
2835
  className: twMerge(
@@ -2894,27 +2846,25 @@ var Input = (_a) => {
2894
2846
  onBlur: handleBlur,
2895
2847
  placeholder,
2896
2848
  value: inputValue
2897
- }
2849
+ }, rest)
2898
2850
  ),
2899
- type === "password" && (!hasEightCharacteres || !hasSpecialCharacteres || !hasNumber) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("ul", { className: "py-1", children: [
2900
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center px-2", children: [
2901
- hasEightCharacteres ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiX, {}),
2902
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
2851
+ type === "password" && (!hasEightCharacteres || !hasSpecialCharacteres || !hasNumber) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { className: "py-1", children: [
2852
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "flex items-center px-2", children: [
2853
+ hasEightCharacteres ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiX, {}),
2854
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
2903
2855
  ] }),
2904
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center px-2", children: [
2905
- hasSpecialCharacteres ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiX, {}),
2906
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
2856
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "flex items-center px-2", children: [
2857
+ hasSpecialCharacteres ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiX, {}),
2858
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
2907
2859
  ] }),
2908
- /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center px-2", children: [
2909
- hasNumber ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiX, {}),
2910
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
2860
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "flex items-center px-2", children: [
2861
+ hasNumber ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiX, {}),
2862
+ /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
2911
2863
  ] })
2912
2864
  ] })
2913
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2865
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
2914
2866
  "input",
2915
- {
2916
- id: rest.id,
2917
- name: rest.name,
2867
+ __spreadValues({
2918
2868
  type,
2919
2869
  required,
2920
2870
  className: twMerge(
@@ -2930,15 +2880,15 @@ var Input = (_a) => {
2930
2880
  onBlur: handleBlur,
2931
2881
  placeholder,
2932
2882
  value: inputValue
2933
- }
2883
+ }, rest)
2934
2884
  ),
2935
- error === true && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: rest.id, className: "text-red-900", children: "Campo inv\xE1lido." })
2885
+ error === true && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: rest.id, className: "text-red-900", children: "Campo inv\xE1lido." })
2936
2886
  ] });
2937
2887
  };
2938
2888
 
2939
2889
  // src/components/TextInput/index.tsx
2940
2890
  var import_react4 = require("react");
2941
- var import_jsx_runtime7 = require("react/jsx-runtime");
2891
+ var import_jsx_runtime6 = require("react/jsx-runtime");
2942
2892
  var TextInput = (0, import_react4.forwardRef)(
2943
2893
  (_a, ref) => {
2944
2894
  var _b = _a, {
@@ -2948,6 +2898,8 @@ var TextInput = (0, import_react4.forwardRef)(
2948
2898
  prefix,
2949
2899
  placeholder,
2950
2900
  error,
2901
+ type = "text",
2902
+ variant = "primary",
2951
2903
  onClick
2952
2904
  } = _b, rest = __objRest(_b, [
2953
2905
  "className",
@@ -2956,6 +2908,8 @@ var TextInput = (0, import_react4.forwardRef)(
2956
2908
  "prefix",
2957
2909
  "placeholder",
2958
2910
  "error",
2911
+ "type",
2912
+ "variant",
2959
2913
  "onClick"
2960
2914
  ]);
2961
2915
  const [selected, setSelected] = (0, import_react4.useState)(false);
@@ -2972,63 +2926,51 @@ var TextInput = (0, import_react4.forwardRef)(
2972
2926
  (0, import_react4.useEffect)(() => {
2973
2927
  setInputValue(value);
2974
2928
  }, [value]);
2975
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
2976
- rest.label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2977
- Text,
2978
- {
2979
- htmlFor: rest.id,
2980
- variant: "label",
2981
- color: rest.color,
2982
- className: "leading-8",
2983
- children: rest.label
2984
- }
2985
- ),
2986
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
2987
- "div",
2988
- {
2989
- className: twMerge(
2990
- "bg-neutral-800 py-2 px-4 border-2 border-neutral-800 rounded-sm box-border flex items-baseline",
2991
- "hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
2992
- selected === true && "border-2 border-orange-500",
2993
- disabled === true && "opacity-50 cursor-not-allowed",
2994
- error === true && "border-2 border-red-900"
2995
- ),
2996
- children: [
2997
- !!prefix && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-neutral-500 sm:text-sm", children: prefix }),
2998
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
2999
- "input",
3000
- {
3001
- id: rest.id,
3002
- name: rest.name,
3003
- type: "text",
3004
- required: rest.required,
3005
- onClick,
3006
- onFocus: handleFocus,
3007
- onChange: handleInput,
3008
- onBlur: handleBlur,
3009
- value: inputValue,
3010
- placeholder,
3011
- disabled,
3012
- ref,
3013
- className: twMerge(
3014
- "flex items-center justify-center bg-neutral-800 rounded-sm w-full px-1 py-2 text-md",
3015
- "focus:outline-none text-neutral",
3016
- className,
3017
- disabled === true && "cursor-not-allowed"
3018
- )
3019
- }
3020
- )
3021
- ]
3022
- }
3023
- )
3024
- ] });
2929
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
2930
+ "div",
2931
+ {
2932
+ className: twMerge(
2933
+ " py-2 px-4 border-2 rounded-sm box-border flex items-baseline bg-neutral-200",
2934
+ "hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
2935
+ variant === "secondary" && "bg-neutral-800 border-neutral-800 ",
2936
+ selected === true && "border-2 border-orange-500",
2937
+ disabled === true && "opacity-50 cursor-not-allowed",
2938
+ error === true && "border-2 border-red-900"
2939
+ ),
2940
+ children: [
2941
+ !!prefix && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-neutral-500 sm:text-sm", children: prefix }),
2942
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
2943
+ "input",
2944
+ __spreadValues({
2945
+ type,
2946
+ required: rest.required,
2947
+ onClick,
2948
+ onFocus: handleFocus,
2949
+ onChange: handleInput,
2950
+ onBlur: handleBlur,
2951
+ value: inputValue,
2952
+ placeholder,
2953
+ disabled,
2954
+ ref,
2955
+ className: twMerge(
2956
+ "flex items-center justify-center bg-neutral-200 rounded-sm w-full px-1 py-2 text-md",
2957
+ "focus:outline-none text-neutral-800",
2958
+ disabled === true && "cursor-not-allowed",
2959
+ variant === "secondary" && "bg-neutral-800 text-neutral",
2960
+ className
2961
+ )
2962
+ }, rest)
2963
+ )
2964
+ ]
2965
+ }
2966
+ );
3025
2967
  }
3026
2968
  );
3027
2969
  TextInput.displayName = "TextInput";
3028
2970
 
3029
2971
  // src/components/TextArea/index.tsx
3030
2972
  var import_react5 = require("react");
3031
- var import_jsx_runtime8 = require("react/jsx-runtime");
2973
+ var import_jsx_runtime7 = require("react/jsx-runtime");
3032
2974
  var TextArea = (_a) => {
3033
2975
  var _b = _a, {
3034
2976
  className,
@@ -3061,41 +3003,63 @@ var TextArea = (_a) => {
3061
3003
  (0, import_react5.useEffect)(() => {
3062
3004
  setInputValue(value);
3063
3005
  }, [value]);
3064
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
3065
- rest.label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
3066
- Text,
3067
- {
3068
- htmlFor: rest.id,
3069
- variant: "label",
3070
- color: rest.color,
3071
- className: "leading-8",
3072
- children: rest.label
3073
- }
3074
- ),
3075
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
3076
- "textarea",
3077
- {
3078
- id: rest.id,
3079
- name: rest.name,
3080
- required,
3081
- disabled,
3082
- className: twMerge(
3083
- "rounded-sm w-full px-3 py-2 border-2 border-neutral text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
3084
- "resize-y h-32",
3085
- className,
3086
- disabled === true && "opacity-50 cursor-not-allowed",
3087
- selected === true && "border-2 border-orange-500",
3088
- error === true && "border-2 border-red-900"
3089
- ),
3090
- onClick,
3091
- onFocus: handleFocus,
3092
- onChange: handleInput,
3093
- onBlur: handleBlur,
3094
- placeholder,
3095
- value: inputValue
3096
- }
3097
- )
3098
- ] });
3006
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
3007
+ "textarea",
3008
+ __spreadValues({
3009
+ required,
3010
+ disabled,
3011
+ className: twMerge(
3012
+ "rounded-sm w-full px-3 py-2 border-2 border-neutral text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
3013
+ "resize-y h-32",
3014
+ className,
3015
+ disabled === true && "opacity-50 cursor-not-allowed",
3016
+ selected === true && "border-2 border-orange-500",
3017
+ error === true && "border-2 border-red-900"
3018
+ ),
3019
+ onClick,
3020
+ onFocus: handleFocus,
3021
+ onChange: handleInput,
3022
+ onBlur: handleBlur,
3023
+ placeholder,
3024
+ value: inputValue
3025
+ }, rest)
3026
+ );
3027
+ };
3028
+
3029
+ // src/components/Text/index.tsx
3030
+ var import_jsx_runtime8 = require("react/jsx-runtime");
3031
+ var Text = (_a) => {
3032
+ var _b = _a, {
3033
+ children,
3034
+ color = "neutral-800",
3035
+ size = "md",
3036
+ tag = "p",
3037
+ className
3038
+ } = _b, rest = __objRest(_b, [
3039
+ "children",
3040
+ "color",
3041
+ "size",
3042
+ "tag",
3043
+ "className"
3044
+ ]);
3045
+ const fontSize = {
3046
+ xxs: "text-xxs",
3047
+ xs: "text-xs",
3048
+ sm: "text-sm",
3049
+ md: "text-md",
3050
+ lg: "text-lg",
3051
+ xl: "text-xl",
3052
+ "2xl": "text-2xl",
3053
+ "3xl": "text-3xl",
3054
+ "4xl": "text-4xl",
3055
+ "5xl": "text-5xl",
3056
+ "6xl": "text-6xl",
3057
+ "7xl": "text-7xl",
3058
+ "8xl": "text-8xl",
3059
+ "9xl": "text-9xl"
3060
+ }[size];
3061
+ const Tag = tag;
3062
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tag, __spreadProps(__spreadValues({}, rest), { className: twMerge(`text-${color} ${fontSize}`, className), children }));
3099
3063
  };
3100
3064
 
3101
3065
  // src/components/Heading/index.tsx
@@ -3104,7 +3068,8 @@ var Heading = ({
3104
3068
  children,
3105
3069
  color = "neutral-800",
3106
3070
  size = "lg",
3107
- variant = "h2"
3071
+ tag = "h2",
3072
+ className
3108
3073
  }) => {
3109
3074
  const fontSize = {
3110
3075
  sm: "text-sm",
@@ -3120,8 +3085,8 @@ var Heading = ({
3120
3085
  "8xl": "text-8xl",
3121
3086
  "9xl": "text-9xl"
3122
3087
  }[size];
3123
- const Tag = variant;
3124
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tag, { className: twMerge(`text-${color} ${fontSize}`), children });
3088
+ const Tag = tag;
3089
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tag, { className: twMerge(`text-${color} ${fontSize}`, className), children });
3125
3090
  };
3126
3091
 
3127
3092
  // src/components/Box/index.tsx
@@ -3129,13 +3094,17 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
3129
3094
  var Box = ({
3130
3095
  className,
3131
3096
  children,
3132
- color = "bg-neutral-800"
3097
+ tag = "div",
3098
+ variant = "secondary"
3133
3099
  }) => {
3100
+ const Tag = tag;
3134
3101
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
3135
- "div",
3102
+ Tag,
3136
3103
  {
3137
3104
  className: twMerge(
3138
- `p-6 rounded-md ${color} bottom-1 border-s-neutral-600`,
3105
+ "p-6 rounded-md bottom-1 border-2",
3106
+ variant === "primary" && "text-neutral-800 bg-neutral-200 border-neutral-300",
3107
+ variant === "secondary" && "text-neutral-200 bg-neutral-600 border-neutral-800",
3139
3108
  className
3140
3109
  ),
3141
3110
  children
@@ -3147,14 +3116,16 @@ var Box = ({
3147
3116
  var import_fa = require("react-icons/fa");
3148
3117
  var import_jsx_runtime11 = require("react/jsx-runtime");
3149
3118
  var Avatar = (_a) => {
3150
- var rest = __objRest(_a, []);
3119
+ var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
3151
3120
  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
3152
3121
  "div",
3153
3122
  {
3154
- className: twMerge(`
3123
+ className: twMerge(
3124
+ `
3155
3125
  rounded-full w-16 h-16 overflow-hidden flex items-center
3156
- bg-neutral-600 justify-center
3157
- `),
3126
+ bg-neutral-600 justify-center`,
3127
+ className
3128
+ ),
3158
3129
  children: rest.src ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", __spreadValues({ className: "w-full h-full object-cover rounded-full" }, rest)) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_fa.FaUser, { color: "#FFFFFF", size: 24 })
3159
3130
  }
3160
3131
  );
@@ -3164,15 +3135,15 @@ var Avatar = (_a) => {
3164
3135
  var import_jsx_runtime12 = require("react/jsx-runtime");
3165
3136
  var MultiStep = ({ className, size, currentStep }) => {
3166
3137
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full", children: [
3167
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { variant: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
3138
+ /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { tag: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
3168
3139
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `grid gap-2 grid-cols-${size} grid-flow-col mt-1`, children: Array.from(Array(size).keys()).map((_, index) => {
3169
3140
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
3170
3141
  "div",
3171
3142
  {
3172
3143
  className: twMerge(
3173
- className,
3174
3144
  "h-1 rounded-full",
3175
- currentStep && index < currentStep ? "bg-orange-500" : "bg-neutral-500"
3145
+ currentStep && index < currentStep ? "bg-orange-500" : "bg-neutral-500",
3146
+ className
3176
3147
  )
3177
3148
  },
3178
3149
  index
package/dist/index.mjs CHANGED
@@ -2537,12 +2537,12 @@ var Card = (_a) => {
2537
2537
  className: twMerge(
2538
2538
  "flex items-center justify-center rounded-lg cursor-pointer bg-neutral",
2539
2539
  "hover:shadow-md hover:shadow-neutral-500 border border-neutral-500 text-neutral-1000",
2540
- className,
2541
2540
  size === "medium" && "w-64 px-8 py-4",
2542
2541
  size === "large" && "w-96 pr-5",
2543
2542
  direction === "col" && "flex-col",
2544
2543
  selected === true && "border-2 border-orange-500",
2545
- disabled === true && "opacity-50 cursor-not-allowed"
2544
+ disabled === true && "opacity-50 cursor-not-allowed",
2545
+ className
2546
2546
  ),
2547
2547
  onClick,
2548
2548
  children: [
@@ -2577,12 +2577,12 @@ var Button = (_a) => {
2577
2577
  __spreadValues({
2578
2578
  className: twMerge(
2579
2579
  "flex items-center justify-center rounded-lg px-8 py-2 text-md font-medium hover:shadow-md hover:shadow-neutral-500",
2580
- className,
2581
2580
  variant === "primary" && "bg-orange-500 text-neutral hover:bg-orange-700",
2582
2581
  variant === "secondary" && "bg-neutral text-orange-500 border border-orange-500 hover:bg-neutral-200",
2583
2582
  size === "sm" && "px-6 py-1",
2584
2583
  typeof rest.children !== "string" && "px-4",
2585
- disabled === true && "opacity-50 cursor-not-allowed"
2584
+ disabled === true && "opacity-50 cursor-not-allowed",
2585
+ className
2586
2586
  ),
2587
2587
  onClick
2588
2588
  }, rest)
@@ -2599,7 +2599,8 @@ var RadioGroup = ({
2599
2599
  { id: 1, value: "option1", label: "Op\xE7\xE3o 1" },
2600
2600
  { id: 2, value: "option2", label: "Op\xE7\xE3o 2" }
2601
2601
  ],
2602
- required = false
2602
+ required = false,
2603
+ className
2603
2604
  }) => {
2604
2605
  const [selectedOption, setSelectedOption] = useState("");
2605
2606
  const handleOptionChange = (value) => {
@@ -2613,7 +2614,8 @@ var RadioGroup = ({
2613
2614
  className: twMerge(
2614
2615
  "relative rounded-full border-2 w-5 h-5 flex items-center justify-center hover:border-orange-500 hover:cursor-pointer",
2615
2616
  selectedOption === option.value ? "bg-orange-500 border-orange-500" : "border-neutral-500 hover:shadow-md hover:shadow-orange-500",
2616
- disabled === true && "opacity-50 cursor-not-allowed"
2617
+ disabled === true && "opacity-50 cursor-not-allowed",
2618
+ className
2617
2619
  ),
2618
2620
  children: [
2619
2621
  /* @__PURE__ */ jsx3(
@@ -2745,49 +2747,12 @@ var masks = {
2745
2747
  };
2746
2748
  var masks_default = masks;
2747
2749
 
2748
- // src/components/Text/index.tsx
2749
- import { jsx as jsx5 } from "react/jsx-runtime";
2750
- var Text = (_a) => {
2751
- var _b = _a, {
2752
- children,
2753
- color = "neutral-800",
2754
- size = "md",
2755
- variant = "p",
2756
- className
2757
- } = _b, rest = __objRest(_b, [
2758
- "children",
2759
- "color",
2760
- "size",
2761
- "variant",
2762
- "className"
2763
- ]);
2764
- const fontSize = {
2765
- xxs: "text-xxs",
2766
- xs: "text-xs",
2767
- sm: "text-sm",
2768
- md: "text-md",
2769
- lg: "text-lg",
2770
- xl: "text-xl",
2771
- "2xl": "text-2xl",
2772
- "3xl": "text-3xl",
2773
- "4xl": "text-4xl",
2774
- "5xl": "text-5xl",
2775
- "6xl": "text-6xl",
2776
- "7xl": "text-7xl",
2777
- "8xl": "text-8xl",
2778
- "9xl": "text-9xl"
2779
- }[size];
2780
- const Tag = variant;
2781
- return /* @__PURE__ */ jsx5(Tag, __spreadProps(__spreadValues({}, rest), { className: twMerge(`text-${color} ${fontSize}`, className), children }));
2782
- };
2783
-
2784
2750
  // src/components/Input/index.tsx
2785
- import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
2751
+ import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
2786
2752
  var Input = (_a) => {
2787
2753
  var _b = _a, {
2788
2754
  className,
2789
2755
  disabled,
2790
- label,
2791
2756
  placeholder,
2792
2757
  value,
2793
2758
  validated,
@@ -2798,7 +2763,6 @@ var Input = (_a) => {
2798
2763
  } = _b, rest = __objRest(_b, [
2799
2764
  "className",
2800
2765
  "disabled",
2801
- "label",
2802
2766
  "placeholder",
2803
2767
  "value",
2804
2768
  "validated",
@@ -2831,22 +2795,10 @@ var Input = (_a) => {
2831
2795
  setHasEightCharacteres((value2 == null ? void 0 : value2.match(masks_default.password[2])) !== null);
2832
2796
  };
2833
2797
  return /* @__PURE__ */ jsxs4(Fragment, { children: [
2834
- label && /* @__PURE__ */ jsx6(
2835
- Text,
2836
- {
2837
- htmlFor: rest.id,
2838
- variant: "label",
2839
- color: rest.color,
2840
- className: "leading-8",
2841
- children: label
2842
- }
2843
- ),
2844
2798
  type === "text" || type === "password" || type === "date" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
2845
- /* @__PURE__ */ jsx6(
2799
+ /* @__PURE__ */ jsx5(
2846
2800
  "input",
2847
- {
2848
- id: rest.id,
2849
- name: rest.name,
2801
+ __spreadValues({
2850
2802
  type,
2851
2803
  required,
2852
2804
  className: twMerge(
@@ -2863,27 +2815,25 @@ var Input = (_a) => {
2863
2815
  onBlur: handleBlur,
2864
2816
  placeholder,
2865
2817
  value: inputValue
2866
- }
2818
+ }, rest)
2867
2819
  ),
2868
2820
  type === "password" && (!hasEightCharacteres || !hasSpecialCharacteres || !hasNumber) && /* @__PURE__ */ jsxs4("ul", { className: "py-1", children: [
2869
2821
  /* @__PURE__ */ jsxs4("li", { className: "flex items-center px-2", children: [
2870
- hasEightCharacteres ? /* @__PURE__ */ jsx6(FiCheck3, {}) : /* @__PURE__ */ jsx6(FiX, {}),
2871
- /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
2822
+ hasEightCharacteres ? /* @__PURE__ */ jsx5(FiCheck3, {}) : /* @__PURE__ */ jsx5(FiX, {}),
2823
+ /* @__PURE__ */ jsx5("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
2872
2824
  ] }),
2873
2825
  /* @__PURE__ */ jsxs4("li", { className: "flex items-center px-2", children: [
2874
- hasSpecialCharacteres ? /* @__PURE__ */ jsx6(FiCheck3, {}) : /* @__PURE__ */ jsx6(FiX, {}),
2875
- /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
2826
+ hasSpecialCharacteres ? /* @__PURE__ */ jsx5(FiCheck3, {}) : /* @__PURE__ */ jsx5(FiX, {}),
2827
+ /* @__PURE__ */ jsx5("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
2876
2828
  ] }),
2877
2829
  /* @__PURE__ */ jsxs4("li", { className: "flex items-center px-2", children: [
2878
- hasNumber ? /* @__PURE__ */ jsx6(FiCheck3, {}) : /* @__PURE__ */ jsx6(FiX, {}),
2879
- /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
2830
+ hasNumber ? /* @__PURE__ */ jsx5(FiCheck3, {}) : /* @__PURE__ */ jsx5(FiX, {}),
2831
+ /* @__PURE__ */ jsx5("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
2880
2832
  ] })
2881
2833
  ] })
2882
- ] }) : /* @__PURE__ */ jsx6(
2834
+ ] }) : /* @__PURE__ */ jsx5(
2883
2835
  "input",
2884
- {
2885
- id: rest.id,
2886
- name: rest.name,
2836
+ __spreadValues({
2887
2837
  type,
2888
2838
  required,
2889
2839
  className: twMerge(
@@ -2899,9 +2849,9 @@ var Input = (_a) => {
2899
2849
  onBlur: handleBlur,
2900
2850
  placeholder,
2901
2851
  value: inputValue
2902
- }
2852
+ }, rest)
2903
2853
  ),
2904
- error === true && /* @__PURE__ */ jsx6("label", { htmlFor: rest.id, className: "text-red-900", children: "Campo inv\xE1lido." })
2854
+ error === true && /* @__PURE__ */ jsx5("label", { htmlFor: rest.id, className: "text-red-900", children: "Campo inv\xE1lido." })
2905
2855
  ] });
2906
2856
  };
2907
2857
 
@@ -2911,7 +2861,7 @@ import {
2911
2861
  useState as useState4,
2912
2862
  forwardRef
2913
2863
  } from "react";
2914
- import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
2864
+ import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
2915
2865
  var TextInput = forwardRef(
2916
2866
  (_a, ref) => {
2917
2867
  var _b = _a, {
@@ -2921,6 +2871,8 @@ var TextInput = forwardRef(
2921
2871
  prefix,
2922
2872
  placeholder,
2923
2873
  error,
2874
+ type = "text",
2875
+ variant = "primary",
2924
2876
  onClick
2925
2877
  } = _b, rest = __objRest(_b, [
2926
2878
  "className",
@@ -2929,6 +2881,8 @@ var TextInput = forwardRef(
2929
2881
  "prefix",
2930
2882
  "placeholder",
2931
2883
  "error",
2884
+ "type",
2885
+ "variant",
2932
2886
  "onClick"
2933
2887
  ]);
2934
2888
  const [selected, setSelected] = useState4(false);
@@ -2945,56 +2899,44 @@ var TextInput = forwardRef(
2945
2899
  useEffect2(() => {
2946
2900
  setInputValue(value);
2947
2901
  }, [value]);
2948
- return /* @__PURE__ */ jsxs5(Fragment2, { children: [
2949
- rest.label && /* @__PURE__ */ jsx7(
2950
- Text,
2951
- {
2952
- htmlFor: rest.id,
2953
- variant: "label",
2954
- color: rest.color,
2955
- className: "leading-8",
2956
- children: rest.label
2957
- }
2958
- ),
2959
- /* @__PURE__ */ jsxs5(
2960
- "div",
2961
- {
2962
- className: twMerge(
2963
- "bg-neutral-800 py-2 px-4 border-2 border-neutral-800 rounded-sm box-border flex items-baseline",
2964
- "hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
2965
- selected === true && "border-2 border-orange-500",
2966
- disabled === true && "opacity-50 cursor-not-allowed",
2967
- error === true && "border-2 border-red-900"
2968
- ),
2969
- children: [
2970
- !!prefix && /* @__PURE__ */ jsx7("span", { className: "text-neutral-500 sm:text-sm", children: prefix }),
2971
- /* @__PURE__ */ jsx7(
2972
- "input",
2973
- {
2974
- id: rest.id,
2975
- name: rest.name,
2976
- type: "text",
2977
- required: rest.required,
2978
- onClick,
2979
- onFocus: handleFocus,
2980
- onChange: handleInput,
2981
- onBlur: handleBlur,
2982
- value: inputValue,
2983
- placeholder,
2984
- disabled,
2985
- ref,
2986
- className: twMerge(
2987
- "flex items-center justify-center bg-neutral-800 rounded-sm w-full px-1 py-2 text-md",
2988
- "focus:outline-none text-neutral",
2989
- className,
2990
- disabled === true && "cursor-not-allowed"
2991
- )
2992
- }
2993
- )
2994
- ]
2995
- }
2996
- )
2997
- ] });
2902
+ return /* @__PURE__ */ jsxs5(
2903
+ "div",
2904
+ {
2905
+ className: twMerge(
2906
+ " py-2 px-4 border-2 rounded-sm box-border flex items-baseline bg-neutral-200",
2907
+ "hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
2908
+ variant === "secondary" && "bg-neutral-800 border-neutral-800 ",
2909
+ selected === true && "border-2 border-orange-500",
2910
+ disabled === true && "opacity-50 cursor-not-allowed",
2911
+ error === true && "border-2 border-red-900"
2912
+ ),
2913
+ children: [
2914
+ !!prefix && /* @__PURE__ */ jsx6("span", { className: "text-neutral-500 sm:text-sm", children: prefix }),
2915
+ /* @__PURE__ */ jsx6(
2916
+ "input",
2917
+ __spreadValues({
2918
+ type,
2919
+ required: rest.required,
2920
+ onClick,
2921
+ onFocus: handleFocus,
2922
+ onChange: handleInput,
2923
+ onBlur: handleBlur,
2924
+ value: inputValue,
2925
+ placeholder,
2926
+ disabled,
2927
+ ref,
2928
+ className: twMerge(
2929
+ "flex items-center justify-center bg-neutral-200 rounded-sm w-full px-1 py-2 text-md",
2930
+ "focus:outline-none text-neutral-800",
2931
+ disabled === true && "cursor-not-allowed",
2932
+ variant === "secondary" && "bg-neutral-800 text-neutral",
2933
+ className
2934
+ )
2935
+ }, rest)
2936
+ )
2937
+ ]
2938
+ }
2939
+ );
2998
2940
  }
2999
2941
  );
3000
2942
  TextInput.displayName = "TextInput";
@@ -3004,7 +2946,7 @@ import {
3004
2946
  useEffect as useEffect3,
3005
2947
  useState as useState5
3006
2948
  } from "react";
3007
- import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
2949
+ import { jsx as jsx7 } from "react/jsx-runtime";
3008
2950
  var TextArea = (_a) => {
3009
2951
  var _b = _a, {
3010
2952
  className,
@@ -3037,41 +2979,63 @@ var TextArea = (_a) => {
3037
2979
  useEffect3(() => {
3038
2980
  setInputValue(value);
3039
2981
  }, [value]);
3040
- return /* @__PURE__ */ jsxs6(Fragment3, { children: [
3041
- rest.label && /* @__PURE__ */ jsx8(
3042
- Text,
3043
- {
3044
- htmlFor: rest.id,
3045
- variant: "label",
3046
- color: rest.color,
3047
- className: "leading-8",
3048
- children: rest.label
3049
- }
3050
- ),
3051
- /* @__PURE__ */ jsx8(
3052
- "textarea",
3053
- {
3054
- id: rest.id,
3055
- name: rest.name,
3056
- required,
3057
- disabled,
3058
- className: twMerge(
3059
- "rounded-sm w-full px-3 py-2 border-2 border-neutral text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
3060
- "resize-y h-32",
3061
- className,
3062
- disabled === true && "opacity-50 cursor-not-allowed",
3063
- selected === true && "border-2 border-orange-500",
3064
- error === true && "border-2 border-red-900"
3065
- ),
3066
- onClick,
3067
- onFocus: handleFocus,
3068
- onChange: handleInput,
3069
- onBlur: handleBlur,
3070
- placeholder,
3071
- value: inputValue
3072
- }
3073
- )
3074
- ] });
2982
+ return /* @__PURE__ */ jsx7(
2983
+ "textarea",
2984
+ __spreadValues({
2985
+ required,
2986
+ disabled,
2987
+ className: twMerge(
2988
+ "rounded-sm w-full px-3 py-2 border-2 border-neutral text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
2989
+ "resize-y h-32",
2990
+ className,
2991
+ disabled === true && "opacity-50 cursor-not-allowed",
2992
+ selected === true && "border-2 border-orange-500",
2993
+ error === true && "border-2 border-red-900"
2994
+ ),
2995
+ onClick,
2996
+ onFocus: handleFocus,
2997
+ onChange: handleInput,
2998
+ onBlur: handleBlur,
2999
+ placeholder,
3000
+ value: inputValue
3001
+ }, rest)
3002
+ );
3003
+ };
3004
+
3005
+ // src/components/Text/index.tsx
3006
+ import { jsx as jsx8 } from "react/jsx-runtime";
3007
+ var Text = (_a) => {
3008
+ var _b = _a, {
3009
+ children,
3010
+ color = "neutral-800",
3011
+ size = "md",
3012
+ tag = "p",
3013
+ className
3014
+ } = _b, rest = __objRest(_b, [
3015
+ "children",
3016
+ "color",
3017
+ "size",
3018
+ "tag",
3019
+ "className"
3020
+ ]);
3021
+ const fontSize = {
3022
+ xxs: "text-xxs",
3023
+ xs: "text-xs",
3024
+ sm: "text-sm",
3025
+ md: "text-md",
3026
+ lg: "text-lg",
3027
+ xl: "text-xl",
3028
+ "2xl": "text-2xl",
3029
+ "3xl": "text-3xl",
3030
+ "4xl": "text-4xl",
3031
+ "5xl": "text-5xl",
3032
+ "6xl": "text-6xl",
3033
+ "7xl": "text-7xl",
3034
+ "8xl": "text-8xl",
3035
+ "9xl": "text-9xl"
3036
+ }[size];
3037
+ const Tag = tag;
3038
+ return /* @__PURE__ */ jsx8(Tag, __spreadProps(__spreadValues({}, rest), { className: twMerge(`text-${color} ${fontSize}`, className), children }));
3075
3039
  };
3076
3040
 
3077
3041
  // src/components/Heading/index.tsx
@@ -3080,7 +3044,8 @@ var Heading = ({
3080
3044
  children,
3081
3045
  color = "neutral-800",
3082
3046
  size = "lg",
3083
- variant = "h2"
3047
+ tag = "h2",
3048
+ className
3084
3049
  }) => {
3085
3050
  const fontSize = {
3086
3051
  sm: "text-sm",
@@ -3096,8 +3061,8 @@ var Heading = ({
3096
3061
  "8xl": "text-8xl",
3097
3062
  "9xl": "text-9xl"
3098
3063
  }[size];
3099
- const Tag = variant;
3100
- return /* @__PURE__ */ jsx9(Tag, { className: twMerge(`text-${color} ${fontSize}`), children });
3064
+ const Tag = tag;
3065
+ return /* @__PURE__ */ jsx9(Tag, { className: twMerge(`text-${color} ${fontSize}`, className), children });
3101
3066
  };
3102
3067
 
3103
3068
  // src/components/Box/index.tsx
@@ -3105,13 +3070,17 @@ import { jsx as jsx10 } from "react/jsx-runtime";
3105
3070
  var Box = ({
3106
3071
  className,
3107
3072
  children,
3108
- color = "bg-neutral-800"
3073
+ tag = "div",
3074
+ variant = "secondary"
3109
3075
  }) => {
3076
+ const Tag = tag;
3110
3077
  return /* @__PURE__ */ jsx10(
3111
- "div",
3078
+ Tag,
3112
3079
  {
3113
3080
  className: twMerge(
3114
- `p-6 rounded-md ${color} bottom-1 border-s-neutral-600`,
3081
+ "p-6 rounded-md bottom-1 border-2",
3082
+ variant === "primary" && "text-neutral-800 bg-neutral-200 border-neutral-300",
3083
+ variant === "secondary" && "text-neutral-200 bg-neutral-600 border-neutral-800",
3115
3084
  className
3116
3085
  ),
3117
3086
  children
@@ -3123,32 +3092,34 @@ var Box = ({
3123
3092
  import { FaUser } from "react-icons/fa";
3124
3093
  import { jsx as jsx11 } from "react/jsx-runtime";
3125
3094
  var Avatar = (_a) => {
3126
- var rest = __objRest(_a, []);
3095
+ var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
3127
3096
  return /* @__PURE__ */ jsx11(
3128
3097
  "div",
3129
3098
  {
3130
- className: twMerge(`
3099
+ className: twMerge(
3100
+ `
3131
3101
  rounded-full w-16 h-16 overflow-hidden flex items-center
3132
- bg-neutral-600 justify-center
3133
- `),
3102
+ bg-neutral-600 justify-center`,
3103
+ className
3104
+ ),
3134
3105
  children: rest.src ? /* @__PURE__ */ jsx11("img", __spreadValues({ className: "w-full h-full object-cover rounded-full" }, rest)) : /* @__PURE__ */ jsx11(FaUser, { color: "#FFFFFF", size: 24 })
3135
3106
  }
3136
3107
  );
3137
3108
  };
3138
3109
 
3139
3110
  // src/components/MultiStep/index.tsx
3140
- import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
3111
+ import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
3141
3112
  var MultiStep = ({ className, size, currentStep }) => {
3142
- return /* @__PURE__ */ jsxs7("div", { className: "w-full", children: [
3143
- /* @__PURE__ */ jsx12(Text, { variant: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
3113
+ return /* @__PURE__ */ jsxs6("div", { className: "w-full", children: [
3114
+ /* @__PURE__ */ jsx12(Text, { tag: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
3144
3115
  /* @__PURE__ */ jsx12("div", { className: `grid gap-2 grid-cols-${size} grid-flow-col mt-1`, children: Array.from(Array(size).keys()).map((_, index) => {
3145
3116
  return /* @__PURE__ */ jsx12(
3146
3117
  "div",
3147
3118
  {
3148
3119
  className: twMerge(
3149
- className,
3150
3120
  "h-1 rounded-full",
3151
- currentStep && index < currentStep ? "bg-orange-500" : "bg-neutral-500"
3121
+ currentStep && index < currentStep ? "bg-orange-500" : "bg-neutral-500",
3122
+ className
3152
3123
  )
3153
3124
  },
3154
3125
  index
package/dist/tailwind.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- ! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
2
+ ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
3
3
  */
4
4
 
5
5
  /*
@@ -690,6 +690,11 @@ video {
690
690
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
691
691
  }
692
692
 
693
+ .border-neutral-300 {
694
+ --tw-border-opacity: 1;
695
+ border-color: rgb(227 227 226 / var(--tw-border-opacity));
696
+ }
697
+
693
698
  .border-neutral-500 {
694
699
  --tw-border-opacity: 1;
695
700
  border-color: rgb(157 157 157 / var(--tw-border-opacity));
@@ -710,16 +715,16 @@ video {
710
715
  border-color: rgb(158 0 63 / var(--tw-border-opacity));
711
716
  }
712
717
 
713
- .border-s-neutral-600 {
714
- --tw-border-opacity: 1;
715
- border-inline-start-color: rgb(50 60 69 / var(--tw-border-opacity));
716
- }
717
-
718
718
  .bg-neutral {
719
719
  --tw-bg-opacity: 1;
720
720
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
721
721
  }
722
722
 
723
+ .bg-neutral-200 {
724
+ --tw-bg-opacity: 1;
725
+ background-color: rgb(246 246 246 / var(--tw-bg-opacity));
726
+ }
727
+
723
728
  .bg-neutral-500 {
724
729
  --tw-bg-opacity: 1;
725
730
  background-color: rgb(157 157 157 / var(--tw-bg-opacity));
@@ -870,10 +875,6 @@ video {
870
875
  font-weight: 500;
871
876
  }
872
877
 
873
- .leading-8 {
874
- line-height: 2rem;
875
- }
876
-
877
878
  .leading-tight {
878
879
  line-height: 1.25;
879
880
  }
@@ -888,11 +889,21 @@ video {
888
889
  color: rgb(0 0 0 / var(--tw-text-opacity));
889
890
  }
890
891
 
892
+ .text-neutral-200 {
893
+ --tw-text-opacity: 1;
894
+ color: rgb(246 246 246 / var(--tw-text-opacity));
895
+ }
896
+
891
897
  .text-neutral-500 {
892
898
  --tw-text-opacity: 1;
893
899
  color: rgb(157 157 157 / var(--tw-text-opacity));
894
900
  }
895
901
 
902
+ .text-neutral-800 {
903
+ --tw-text-opacity: 1;
904
+ color: rgb(28 33 38 / var(--tw-text-opacity));
905
+ }
906
+
896
907
  .text-orange-500 {
897
908
  --tw-text-opacity: 1;
898
909
  color: rgb(243 98 70 / var(--tw-text-opacity));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@koaris/bloom-ui",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "Bloom-ui is a public design system from the Koaris Project developed with React, Typescript, and Tailwind.",
5
5
  "source": "./src/index.ts",
6
6
  "main": "./dist/index.js",