@koaris/bloom-ui 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -2537,12 +2537,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: [
@@ -2576,13 +2576,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)
@@ -2599,7 +2599,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] = useState("");
   const handleOptionChange = (value) => {
@@ -2613,7 +2614,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__ */ jsx3(
@@ -2745,49 +2747,12 @@ var masks = {
 };
 var masks_default = masks;
 
-// src/components/Text/index.tsx
-import { jsx as jsx5 } from "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__ */ jsx5(Tag, __spreadProps(__spreadValues({}, rest), { className: twMerge(`text-${color} ${fontSize}`, className), children }));
-};
-
 // src/components/Input/index.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input = (_a) => {
   var _b = _a, {
     className,
     disabled,
-    label,
     placeholder,
     value,
     validated,
@@ -2798,7 +2763,6 @@ var Input = (_a) => {
   } = _b, rest = __objRest(_b, [
     "className",
     "disabled",
-    "label",
     "placeholder",
     "value",
     "validated",
@@ -2831,22 +2795,10 @@ var Input = (_a) => {
     setHasEightCharacteres((value2 == null ? void 0 : value2.match(masks_default.password[2])) !== null);
   };
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    label && /* @__PURE__ */ jsx6(
-      Text,
-      {
-        htmlFor: rest.id,
-        variant: "label",
-        color: rest.color,
-        className: "leading-8",
-        children: label
-      }
-    ),
     type === "text" || type === "password" || type === "date" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx5(
         "input",
-        {
-          id: rest.id,
-          name: rest.name,
+        __spreadValues({
           type,
           required,
           className: twMerge(
@@ -2863,27 +2815,25 @@ var Input = (_a) => {
           onBlur: handleBlur,
           placeholder,
           value: inputValue
-        }
+        }, rest)
       ),
       type === "password" && (!hasEightCharacteres || !hasSpecialCharacteres || !hasNumber) && /* @__PURE__ */ jsxs4("ul", { className: "py-1", children: [
         /* @__PURE__ */ jsxs4("li", { className: "flex items-center px-2", children: [
-          hasEightCharacteres ? /* @__PURE__ */ jsx6(FiCheck3, {}) : /* @__PURE__ */ jsx6(FiX, {}),
-          /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
+          hasEightCharacteres ? /* @__PURE__ */ jsx5(FiCheck3, {}) : /* @__PURE__ */ jsx5(FiX, {}),
+          /* @__PURE__ */ jsx5("span", { className: "px-1", children: "Pelo menos 8 caracteres" })
         ] }),
         /* @__PURE__ */ jsxs4("li", { className: "flex items-center px-2", children: [
-          hasSpecialCharacteres ? /* @__PURE__ */ jsx6(FiCheck3, {}) : /* @__PURE__ */ jsx6(FiX, {}),
-          /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
+          hasSpecialCharacteres ? /* @__PURE__ */ jsx5(FiCheck3, {}) : /* @__PURE__ */ jsx5(FiX, {}),
+          /* @__PURE__ */ jsx5("span", { className: "px-1", children: "Pelo menos 1 s\xEDmbolo (@, !, $, etc)" })
         ] }),
         /* @__PURE__ */ jsxs4("li", { className: "flex items-center px-2", children: [
-          hasNumber ? /* @__PURE__ */ jsx6(FiCheck3, {}) : /* @__PURE__ */ jsx6(FiX, {}),
-          /* @__PURE__ */ jsx6("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
+          hasNumber ? /* @__PURE__ */ jsx5(FiCheck3, {}) : /* @__PURE__ */ jsx5(FiX, {}),
+          /* @__PURE__ */ jsx5("span", { className: "px-1", children: "Deve conter 1 n\xFAmero" })
         ] })
       ] })
-    ] }) : /* @__PURE__ */ jsx6(
+    ] }) : /* @__PURE__ */ jsx5(
       "input",
-      {
-        id: rest.id,
-        name: rest.name,
+      __spreadValues({
         type,
         required,
         className: twMerge(
@@ -2899,9 +2849,9 @@ var Input = (_a) => {
         onBlur: handleBlur,
         placeholder,
         value: inputValue
-      }
+      }, rest)
     ),
-    error === true && /* @__PURE__ */ jsx6("label", { htmlFor: rest.id, className: "text-red-900", children: "Campo inv\xE1lido." })
+    error === true && /* @__PURE__ */ jsx5("label", { htmlFor: rest.id, className: "text-red-900", children: "Campo inv\xE1lido." })
   ] });
 };
 
@@ -2911,7 +2861,7 @@ import {
   useState as useState4,
   forwardRef
 } from "react";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var TextInput = forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -2921,6 +2871,8 @@ var TextInput = forwardRef(
       prefix,
       placeholder,
       error,
+      type = "text",
+      variant = "primary",
       onClick
     } = _b, rest = __objRest(_b, [
       "className",
@@ -2929,6 +2881,8 @@ var TextInput = forwardRef(
       "prefix",
       "placeholder",
       "error",
+      "type",
+      "variant",
       "onClick"
     ]);
     const [selected, setSelected] = useState4(false);
@@ -2945,56 +2899,44 @@ var TextInput = forwardRef(
     useEffect2(() => {
       setInputValue(value);
     }, [value]);
-    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      rest.label && /* @__PURE__ */ jsx7(
-        Text,
-        {
-          htmlFor: rest.id,
-          variant: "label",
-          color: rest.color,
-          className: "leading-8",
-          children: rest.label
-        }
-      ),
-      /* @__PURE__ */ jsxs5(
-        "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__ */ jsx7("span", { className: "text-neutral-500 sm:text-sm", children: prefix }),
-            /* @__PURE__ */ jsx7(
-              "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__ */ jsxs5(
+      "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__ */ jsx6("span", { className: "text-neutral-500 sm:text-sm", children: prefix }),
+          /* @__PURE__ */ jsx6(
+            "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";
@@ -3004,7 +2946,7 @@ import {
   useEffect as useEffect3,
   useState as useState5
 } from "react";
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var TextArea = (_a) => {
   var _b = _a, {
     className,
@@ -3037,41 +2979,63 @@ var TextArea = (_a) => {
   useEffect3(() => {
     setInputValue(value);
   }, [value]);
-  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-    rest.label && /* @__PURE__ */ jsx8(
-      Text,
-      {
-        htmlFor: rest.id,
-        variant: "label",
-        color: rest.color,
-        className: "leading-8",
-        children: rest.label
-      }
-    ),
-    /* @__PURE__ */ jsx8(
-      "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__ */ jsx7(
+    "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
+import { jsx as jsx8 } from "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__ */ jsx8(Tag, __spreadProps(__spreadValues({}, rest), { className: twMerge(`text-${color} ${fontSize}`, className), children }));
 };
 
 // src/components/Heading/index.tsx
@@ -3080,7 +3044,8 @@ var Heading = ({
   children,
   color = "neutral-800",
   size = "lg",
-  variant = "h2"
+  tag = "h2",
+  className
 }) => {
   const fontSize = {
     sm: "text-sm",
@@ -3096,8 +3061,8 @@ var Heading = ({
     "8xl": "text-8xl",
     "9xl": "text-9xl"
   }[size];
-  const Tag = variant;
-  return /* @__PURE__ */ jsx9(Tag, { className: twMerge(`text-${color} ${fontSize}`), children });
+  const Tag = tag;
+  return /* @__PURE__ */ jsx9(Tag, { className: twMerge(`text-${color} ${fontSize}`, className), children });
 };
 
 // src/components/Box/index.tsx
@@ -3105,13 +3070,17 @@ import { jsx as jsx10 } from "react/jsx-runtime";
 var Box = ({
   className,
   children,
-  color = "bg-neutral-800"
+  tag = "div",
+  variant = "secondary"
 }) => {
+  const Tag = tag;
   return /* @__PURE__ */ jsx10(
-    "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
@@ -3119,36 +3088,68 @@ var Box = ({
   );
 };
 
+// src/components/Form/index.tsx
+import { jsx as jsx11 } from "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__ */ jsx11(
+    "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
 import { FaUser } from "react-icons/fa";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Avatar = (_a) => {
-  var rest = __objRest(_a, []);
-  return /* @__PURE__ */ jsx11(
+  var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx12(
     "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__ */ jsx11("img", __spreadValues({ className: "w-full h-full object-cover rounded-full" }, rest)) : /* @__PURE__ */ jsx11(FaUser, { color: "#FFFFFF", size: 24 })
+            bg-neutral-600 justify-center`,
+        className
+      ),
+      children: rest.src ? /* @__PURE__ */ jsx12("img", __spreadValues({ className: "w-full h-full object-cover rounded-full" }, rest)) : /* @__PURE__ */ jsx12(FaUser, { color: "#FFFFFF", size: 24 })
     }
   );
 };
 
 // src/components/MultiStep/index.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var MultiStep = ({ className, size, currentStep }) => {
-  return /* @__PURE__ */ jsxs7("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx12(Text, { variant: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
-    /* @__PURE__ */ jsx12("div", { className: `grid gap-2 grid-cols-${size} grid-flow-col mt-1`, children: Array.from(Array(size).keys()).map((_, index) => {
-      return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs6("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx13(Text, { tag: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
+    /* @__PURE__ */ jsx13("div", { className: `grid gap-2 grid-cols-${size} grid-flow-col mt-1`, children: Array.from(Array(size).keys()).map((_, index) => {
+      return /* @__PURE__ */ jsx13(
         "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
@@ -3162,6 +3163,7 @@ export {
   Button,
   Card,
   Checkbox,
+  Form,
   Heading,
   Input,
   MultiStep,

package/dist/tailwind.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -632,6 +632,10 @@ video {
   grid-auto-flow: column;
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -690,6 +694,11 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.border-neutral-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(227 227 226 / var(--tw-border-opacity));
+}
+
 .border-neutral-500 {
   --tw-border-opacity: 1;
   border-color: rgb(157 157 157 / var(--tw-border-opacity));
@@ -710,16 +719,16 @@ video {
   border-color: rgb(158 0 63 / var(--tw-border-opacity));
 }
 
-.border-s-neutral-600 {
-  --tw-border-opacity: 1;
-  border-inline-start-color: rgb(50 60 69 / var(--tw-border-opacity));
-}
-
 .bg-neutral {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
+}
+
 .bg-neutral-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(157 157 157 / var(--tw-bg-opacity));
@@ -870,10 +879,6 @@ video {
   font-weight: 500;
 }
 
-.leading-8 {
-  line-height: 2rem;
-}
-
 .leading-tight {
   line-height: 1.25;
 }
@@ -888,11 +893,21 @@ video {
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
+.text-neutral-200 {
+  --tw-text-opacity: 1;
+  color: rgb(246 246 246 / var(--tw-text-opacity));
+}
+
 .text-neutral-500 {
   --tw-text-opacity: 1;
   color: rgb(157 157 157 / var(--tw-text-opacity));
 }
 
+.text-neutral-800 {
+  --tw-text-opacity: 1;
+  color: rgb(28 33 38 / var(--tw-text-opacity));
+}
+
 .text-orange-500 {
   --tw-text-opacity: 1;
   color: rgb(243 98 70 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koaris/bloom-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Bloom-ui is a public design system from the Koaris Project developed with React, Typescript, and Tailwind.",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -25,7 +25,7 @@
     "type": "git",
     "url": "https://github.com/guilhermesalviano/bloom-ui.git"
   },
-  "license": "MIT",
+  "license": "GPL-3.0-only",
   "devDependencies": {
     "@koaris/eslint-config": "*",
     "@koaris/tokens": "*",