@koaris/bloom-ui 1.0.2 → 1.0.4

package/dist/index.js

@@ -54,6 +54,7 @@ __export(src_exports, {
   Button: () => Button,
   Card: () => Card,
   Checkbox: () => Checkbox,
+  Form: () => Form,
   Heading: () => Heading,
   Input: () => Input,
   MultiStep: () => MultiStep,
@@ -2571,12 +2572,12 @@ var Card = (_a) => {
       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",
-        className,
         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"
+        disabled === true && "opacity-50 cursor-not-allowed",
+        className
       ),
       onClick,
       children: [
@@ -2610,13 +2611,13 @@ var Button = (_a) => {
     "button",
     __spreadValues({
       className: twMerge(
-        "flex items-center justify-center rounded-lg px-8 py-2 text-md font-medium hover:shadow-md hover:shadow-neutral-500",
-        className,
+        "flex items-center justify-center rounded-lg px-8 py-2 text-md font-medium hover:shadow-md hover:shadow-neutral-500 w-full",
         variant === "primary" && "bg-orange-500 text-neutral hover:bg-orange-700",
         variant === "secondary" && "bg-neutral text-orange-500 border border-orange-500 hover:bg-neutral-200",
         size === "sm" && "px-6 py-1",
         typeof rest.children !== "string" && "px-4",
-        disabled === true && "opacity-50 cursor-not-allowed"
+        disabled === true && "opacity-50 cursor-not-allowed",
+        className
       ),
       onClick
     }, rest)
@@ -2633,7 +2634,8 @@ var RadioGroup = ({
     { id: 1, value: "option1", label: "Op\xE7\xE3o 1" },
     { id: 2, value: "option2", label: "Op\xE7\xE3o 2" }
   ],
-  required = false
+  required = false,
+  className
 }) => {
   const [selectedOption, setSelectedOption] = (0, import_react.useState)("");
   const handleOptionChange = (value) => {
@@ -2647,7 +2649,8 @@ var RadioGroup = ({
         className: twMerge(
           "relative rounded-full border-2 w-5 h-5 flex items-center justify-center hover:border-orange-500 hover:cursor-pointer",
           selectedOption === option.value ? "bg-orange-500 border-orange-500" : "border-neutral-500 hover:shadow-md hover:shadow-orange-500",
-          disabled === true && "opacity-50 cursor-not-allowed"
+          disabled === true && "opacity-50 cursor-not-allowed",
+          className
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -2776,49 +2779,12 @@ var masks = {
 };
 var masks_default = masks;
 
-// src/components/Text/index.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var Text = (_a) => {
-  var _b = _a, {
-    children,
-    color = "neutral-800",
-    size = "md",
-    variant = "p",
-    className
-  } = _b, rest = __objRest(_b, [
-    "children",
-    "color",
-    "size",
-    "variant",
-    "className"
-  ]);
-  const fontSize = {
-    xxs: "text-xxs",
-    xs: "text-xs",
-    sm: "text-sm",
-    md: "text-md",
-    lg: "text-lg",
-    xl: "text-xl",
-    "2xl": "text-2xl",
-    "3xl": "text-3xl",
-    "4xl": "text-4xl",
-    "5xl": "text-5xl",
-    "6xl": "text-6xl",
-    "7xl": "text-7xl",
-    "8xl": "text-8xl",
-    "9xl": "text-9xl"
-  }[size];
-  const Tag = variant;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Tag, __spreadProps(__spreadValues({}, rest), { className: twMerge(`text-${color} ${fontSize}`, className), children }));
-};
-
 // src/components/Input/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Input = (_a) => {
   var _b = _a, {
     className,
     disabled,
-    label,
     placeholder,
     value,
     validated,
@@ -2829,7 +2795,6 @@ var Input = (_a) => {
   } = _b, rest = __objRest(_b, [
     "className",
     "disabled",
-    "label",
     "placeholder",
     "value",
     "validated",
@@ -2861,23 +2826,11 @@ var Input = (_a) => {
     setHasNumber((value2 == null ? void 0 : value2.match(masks_default.password[1])) !== null);
     setHasEightCharacteres((value2 == null ? void 0 : value2.match(masks_default.password[2])) !== null);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      Text,
-      {
-        htmlFor: rest.id,
-        variant: "label",
-        color: rest.color,
-        className: "leading-8",
-        children: label
-      }
-    ),
-    type === "text" || type === "password" || type === "date" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    type === "text" || type === "password" || type === "date" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "input",
-        {
-          id: rest.id,
-          name: rest.name,
+        __spreadValues({
           type,
           required,
           className: twMerge(
@@ -2894,27 +2847,25 @@ var Input = (_a) => {
           onBlur: handleBlur,
           placeholder,
           value: inputValue
-        }
+        }, rest)
       ),
-      type === "password" && (!hasEightCharacteres || !hasSpecialCharacteres || !hasNumber) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("ul", { className: "py-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center px-2", children: [
-          hasEightCharacteres ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiX, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
+      type === "password" && (!hasEightCharacteres || !hasSpecialCharacteres || !hasNumber) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { className: "py-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "flex items-center px-2", children: [
+          hasEightCharacteres ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiX, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center px-2", children: [
-          hasSpecialCharacteres ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiX, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "flex items-center px-2", children: [
+          hasSpecialCharacteres ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiX, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center px-2", children: [
-          hasNumber ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_fi3.FiX, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "flex items-center px-2", children: [
+          hasNumber ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiCheck, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_fi3.FiX, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
         ] })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "input",
-      {
-        id: rest.id,
-        name: rest.name,
+      __spreadValues({
         type,
         required,
         className: twMerge(
@@ -2930,15 +2881,15 @@ var Input = (_a) => {
         onBlur: handleBlur,
         placeholder,
         value: inputValue
-      }
+      }, rest)
     ),
-    error === true && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { htmlFor: rest.id, className: "text-red-900", children: "Campo inv\xE1lido." })
+    error === true && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: rest.id, className: "text-red-900", children: "Campo inv\xE1lido." })
   ] });
 };
 
 // src/components/TextInput/index.tsx
 var import_react4 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var TextInput = (0, import_react4.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
@@ -2948,6 +2899,8 @@ var TextInput = (0, import_react4.forwardRef)(
       prefix,
       placeholder,
       error,
+      type = "text",
+      variant = "primary",
       onClick
     } = _b, rest = __objRest(_b, [
       "className",
@@ -2956,6 +2909,8 @@ var TextInput = (0, import_react4.forwardRef)(
       "prefix",
       "placeholder",
       "error",
+      "type",
+      "variant",
       "onClick"
     ]);
     const [selected, setSelected] = (0, import_react4.useState)(false);
@@ -2972,63 +2927,51 @@ var TextInput = (0, import_react4.forwardRef)(
     (0, import_react4.useEffect)(() => {
       setInputValue(value);
     }, [value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      rest.label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        Text,
-        {
-          htmlFor: rest.id,
-          variant: "label",
-          color: rest.color,
-          className: "leading-8",
-          children: rest.label
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-        "div",
-        {
-          className: twMerge(
-            "bg-neutral-800 py-2 px-4 border-2 border-neutral-800 rounded-sm box-border flex items-baseline",
-            "hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
-            selected === true && "border-2 border-orange-500",
-            disabled === true && "opacity-50 cursor-not-allowed",
-            error === true && "border-2 border-red-900"
-          ),
-          children: [
-            !!prefix && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-neutral-500 sm:text-sm", children: prefix }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-              "input",
-              {
-                id: rest.id,
-                name: rest.name,
-                type: "text",
-                required: rest.required,
-                onClick,
-                onFocus: handleFocus,
-                onChange: handleInput,
-                onBlur: handleBlur,
-                value: inputValue,
-                placeholder,
-                disabled,
-                ref,
-                className: twMerge(
-                  "flex items-center justify-center bg-neutral-800 rounded-sm w-full px-1 py-2 text-md",
-                  "focus:outline-none text-neutral",
-                  className,
-                  disabled === true && "cursor-not-allowed"
-                )
-              }
-            )
-          ]
-        }
-      )
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        className: twMerge(
+          " py-2 px-4 border-2 rounded-sm box-border flex items-baseline bg-neutral-200",
+          "hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
+          variant === "secondary" && "bg-neutral-800 border-neutral-800 ",
+          selected === true && "border-2 border-orange-500",
+          disabled === true && "opacity-50 cursor-not-allowed",
+          error === true && "border-2 border-red-900"
+        ),
+        children: [
+          !!prefix && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-neutral-500 sm:text-sm", children: prefix }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            __spreadValues({
+              type,
+              required: rest.required,
+              onClick,
+              onFocus: handleFocus,
+              onChange: handleInput,
+              onBlur: handleBlur,
+              value: inputValue,
+              placeholder,
+              disabled,
+              ref,
+              className: twMerge(
+                "flex items-center justify-center bg-neutral-200 rounded-sm w-full px-1 py-2 text-md",
+                "focus:outline-none text-neutral-800",
+                disabled === true && "cursor-not-allowed",
+                variant === "secondary" && "bg-neutral-800 text-neutral",
+                className
+              )
+            }, rest)
+          )
+        ]
+      }
+    );
   }
 );
 TextInput.displayName = "TextInput";
 
 // src/components/TextArea/index.tsx
 var import_react5 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var TextArea = (_a) => {
   var _b = _a, {
     className,
@@ -3061,41 +3004,63 @@ var TextArea = (_a) => {
   (0, import_react5.useEffect)(() => {
     setInputValue(value);
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    rest.label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      Text,
-      {
-        htmlFor: rest.id,
-        variant: "label",
-        color: rest.color,
-        className: "leading-8",
-        children: rest.label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "textarea",
-      {
-        id: rest.id,
-        name: rest.name,
-        required,
-        disabled,
-        className: twMerge(
-          "rounded-sm w-full px-3 py-2 border-2 border-neutral text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
-          "resize-y h-32",
-          className,
-          disabled === true && "opacity-50 cursor-not-allowed",
-          selected === true && "border-2 border-orange-500",
-          error === true && "border-2 border-red-900"
-        ),
-        onClick,
-        onFocus: handleFocus,
-        onChange: handleInput,
-        onBlur: handleBlur,
-        placeholder,
-        value: inputValue
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "textarea",
+    __spreadValues({
+      required,
+      disabled,
+      className: twMerge(
+        "rounded-sm w-full px-3 py-2 border-2 border-neutral text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
+        "resize-y h-32",
+        className,
+        disabled === true && "opacity-50 cursor-not-allowed",
+        selected === true && "border-2 border-orange-500",
+        error === true && "border-2 border-red-900"
+      ),
+      onClick,
+      onFocus: handleFocus,
+      onChange: handleInput,
+      onBlur: handleBlur,
+      placeholder,
+      value: inputValue
+    }, rest)
+  );
+};
+
+// src/components/Text/index.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Text = (_a) => {
+  var _b = _a, {
+    children,
+    color = "neutral-800",
+    size = "md",
+    tag = "p",
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "color",
+    "size",
+    "tag",
+    "className"
+  ]);
+  const fontSize = {
+    xxs: "text-xxs",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl",
+    "7xl": "text-7xl",
+    "8xl": "text-8xl",
+    "9xl": "text-9xl"
+  }[size];
+  const Tag = tag;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tag, __spreadProps(__spreadValues({}, rest), { className: twMerge(`text-${color} ${fontSize}`, className), children }));
 };
 
 // src/components/Heading/index.tsx
@@ -3104,7 +3069,8 @@ var Heading = ({
   children,
   color = "neutral-800",
   size = "lg",
-  variant = "h2"
+  tag = "h2",
+  className
 }) => {
   const fontSize = {
     sm: "text-sm",
@@ -3120,8 +3086,8 @@ var Heading = ({
     "8xl": "text-8xl",
     "9xl": "text-9xl"
   }[size];
-  const Tag = variant;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tag, { className: twMerge(`text-${color} ${fontSize}`), children });
+  const Tag = tag;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tag, { className: twMerge(`text-${color} ${fontSize}`, className), children });
 };
 
 // src/components/Box/index.tsx
@@ -3129,13 +3095,17 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var Box = ({
   className,
   children,
-  color = "bg-neutral-800"
+  tag = "div",
+  variant = "secondary"
 }) => {
+  const Tag = tag;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
+    Tag,
     {
       className: twMerge(
-        `p-6 rounded-md ${color} bottom-1 border-s-neutral-600`,
+        "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
@@ -3143,36 +3113,68 @@ var Box = ({
   );
 };
 
+// src/components/Form/index.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Form = (_a) => {
+  var _b = _a, {
+    className,
+    children,
+    variant = "secondary",
+    orientation = "row"
+  } = _b, rest = __objRest(_b, [
+    "className",
+    "children",
+    "variant",
+    "orientation"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "form",
+    __spreadProps(__spreadValues({
+      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
+    })
+  );
+};
+
 // src/components/Avatar/index.tsx
 var import_fa = require("react-icons/fa");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var Avatar = (_a) => {
-  var rest = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
-      className: twMerge(`
+      className: twMerge(
+        `
             rounded-full w-16 h-16 overflow-hidden flex items-center
-            bg-neutral-600 justify-center
-        `),
-      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 })
+            bg-neutral-600 justify-center`,
+        className
+      ),
+      children: rest.src ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", __spreadValues({ className: "w-full h-full object-cover rounded-full" }, rest)) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_fa.FaUser, { color: "#FFFFFF", size: 24 })
     }
   );
 };
 
 // src/components/MultiStep/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MultiStep = ({ className, size, currentStep }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Text, { variant: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
-    /* @__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) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { tag: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `grid gap-2 grid-cols-${size} grid-flow-col mt-1`, children: Array.from(Array(size).keys()).map((_, index) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
           className: twMerge(
-            className,
             "h-1 rounded-full",
-            currentStep && index < currentStep ? "bg-orange-500" : "bg-neutral-500"
+            currentStep && index < currentStep ? "bg-orange-500" : "bg-neutral-500",
+            className
           )
         },
         index
@@ -3187,6 +3189,7 @@ var MultiStep = ({ className, size, currentStep }) => {
   Button,
   Card,
   Checkbox,
+  Form,
   Heading,
   Input,
   MultiStep,