@koaris/bloom-ui 1.2.5 → 1.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Koaris
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -28,4 +28,7 @@ import { Text } from '@koaris/bloom-ui'
 ```
 
 ## Contributions and bug reports
-You can follow and make contributions in [github](https://github.com/koaris/bloom-ui).
+You can follow and make contributions in [github](https://github.com/koaris/bloom-ui).
+
+## License
+Bloom-ui is open source under the [MIT License](LICENSE.md).

package/dist/index.cjs

@@ -2539,11 +2539,11 @@ var Card = ({
     "div",
     {
       className: twMerge(
-        "flex items-center rounded-lg bg-neutral border border-neutral-500 text-neutral-1000 transition-all duration-200",
+        "flex items-center  rounded-lg bg-orange-500 text-neutral-100 transition-all duration-200",
         direction === "col" ? "flex-col" : "flex-row",
         cardSizeClasses[size],
         hoverable && !disabled && "hover:shadow-md hover:shadow-neutral-500",
-        selected && "border-2 border-orange-500",
+        // selected && 'border-2 border-orange-500',
         disabled && "opacity-50 cursor-not-allowed",
         onClick && !disabled && "cursor-pointer",
         className
@@ -2590,14 +2590,13 @@ var Card = ({
               direction === "row" && "flex-1"
             ),
             children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-xl font-bold font-default leading-tight mb-2", children: title }),
+              title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-md text-left font-bold font-default leading-tight mb-1", children: title }),
               content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: twMerge(
-                "text-base",
-                direction === "col" ? "text-center" : "text-left"
+                "text-sm text-left"
+                // direction === 'col' ? 'text-left' : 'text-left'
               ), children: content }),
               footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: twMerge(
-                "mt-4 pt-3 border-t border-neutral-300",
-                direction === "col" ? "text-center" : "text-left"
+                "pt-2 text-sm border-t border-neutral-300 text-left"
               ), children: footer })
             ]
           }
@@ -2648,7 +2647,7 @@ var Button = (0, import_react.forwardRef)(
         ref,
         className: twMerge(
           "relative font-medium rounded-sm transition-all duration-200",
-          "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-opacity-50",
+          "focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-md focus:ring-opacity-50",
           variantClasses[variant],
           sizeClasses[size],
           fullWidth ? "w-full" : "max-w-[180px]",
@@ -3034,6 +3033,8 @@ var Input = (0, import_react4.forwardRef)(
           return "password";
         case "email":
           return "email";
+        case "datePicker":
+          return "date";
         case "date":
         case "cpf":
         case "phone":
@@ -3194,73 +3195,201 @@ TextInput.displayName = "TextInput";
 // src/components/TextArea/index.tsx
 var import_react6 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var TextArea = ({
-  className,
-  disabled,
-  reference,
-  value,
-  error,
-  required,
-  placeholder,
-  resize,
-  onClick,
-  ...rest
-}) => {
-  const [selected, setSelected] = (0, import_react6.useState)(false);
-  const [inputValue, setInputValue] = (0, import_react6.useState)(value);
-  const handleFocus = () => {
-    setSelected(!selected);
-  };
-  const handleBlur = () => {
-    setSelected(false);
-  };
-  const handleInput = (event) => {
-    setInputValue(event.currentTarget.value);
-  };
-  (0, import_react6.useEffect)(() => {
-    setInputValue(value);
-  }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "textarea",
-    {
-      required,
-      ref: reference,
-      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",
-        resize === false && "resize-none overflow-hidden"
+var TextArea = (0, import_react6.forwardRef)(
+  ({
+    className,
+    disabled,
+    placeholder,
+    value,
+    validated,
+    error,
+    required,
+    resize = "vertical",
+    type = "text",
+    onClick,
+    errorMessage,
+    onChange: externalOnChange,
+    label,
+    helperText,
+    id,
+    maxLength,
+    minRows = 3,
+    maxRows = 8,
+    size = "md",
+    variant = "primary",
+    showCount = false,
+    autoGrow = false,
+    ...rest
+  }, ref) => {
+    const [selected, setSelected] = (0, import_react6.useState)(false);
+    const [inputValue, setInputValue] = (0, import_react6.useState)(value || "");
+    const [isValid, setIsValid] = (0, import_react6.useState)(true);
+    const [rows, setRows] = (0, import_react6.useState)(minRows);
+    const sizeStyles = {
+      sm: "px-2 py-1 text-sm",
+      md: "px-3 py-2 text-base",
+      lg: "px-4 py-3 text-lg"
+    };
+    const variantStyles = {
+      primary: "border-gray-400 focus:border-orange-500",
+      secondary: "border-neutral-500 bg-neutral-100 focus:border-orange-500",
+      outline: "border-gray-300 bg-transparent focus:border-orange-500"
+    };
+    const resizeStyles = {
+      none: "resize-none",
+      vertical: "resize-y",
+      horizontal: "resize-x",
+      both: "resize"
+    };
+    const handleFocus = () => {
+      setSelected(true);
+    };
+    const handleBlur = () => {
+      setSelected(false);
+      validateInput(inputValue);
+    };
+    const validateInput = (value2) => {
+      if (required && (!value2 || value2.trim().length === 0)) {
+        setIsValid(false);
+        return false;
+      }
+      if (maxLength && value2.length > maxLength) {
+        setIsValid(false);
+        return false;
+      }
+      if (type === "json" && value2.trim().length > 0) {
+        try {
+          JSON.parse(value2);
+          setIsValid(true);
+          return true;
+        } catch (e) {
+          setIsValid(false);
+          return false;
+        }
+      }
+      setIsValid(true);
+      return true;
+    };
+    const handleInput = (event) => {
+      const newValue = event.currentTarget.value;
+      setInputValue(newValue);
+      validateInput(newValue);
+      if (autoGrow) {
+        const textareaLineHeight = 24;
+        const newRows = Math.max(
+          minRows,
+          Math.min(
+            maxRows,
+            Math.floor(event.currentTarget.scrollHeight / textareaLineHeight)
+          )
+        );
+        setRows(newRows);
+      }
+      if (externalOnChange) {
+        externalOnChange(event);
+      }
+    };
+    (0, import_react6.useEffect)(() => {
+      setInputValue(value || "");
+      if (value) {
+        validateInput(value);
+      }
+    }, [value, required, maxLength]);
+    const characterCount = inputValue?.length || 0;
+    const hasMaxLength = maxLength !== void 0 && maxLength > 0;
+    const isOverLimit = hasMaxLength && characterCount > maxLength;
+    const textareaClasses = twMerge(
+      "w-full border-2 rounded-sm focus:outline-none transition-all duration-200",
+      "hover:shadow-md hover:shadow-neutral-500",
+      sizeStyles[size],
+      variantStyles[variant],
+      resizeStyles[resize],
+      disabled && "opacity-50 cursor-not-allowed",
+      selected && "border-orange-500",
+      validated && isValid && "border-green-500",
+      (error || !isValid && inputValue !== "") && "border-red-900",
+      className
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "label",
+        {
+          htmlFor: id,
+          className: "block text-sm font-medium text-gray-700 mb-1",
+          children: [
+            label,
+            required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
       ),
-      onClick,
-      onFocus: handleFocus,
-      onChange: handleInput,
-      onBlur: handleBlur,
-      placeholder,
-      value: inputValue,
-      ...rest
-    }
-  );
-};
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "textarea",
+        {
+          ref,
+          id,
+          rows,
+          disabled,
+          required,
+          className: textareaClasses,
+          onClick,
+          onFocus: handleFocus,
+          onChange: handleInput,
+          onBlur: handleBlur,
+          placeholder,
+          value: inputValue,
+          maxLength: hasMaxLength && !showCount ? maxLength : void 0,
+          "aria-invalid": error || !isValid,
+          "aria-describedby": error || !isValid ? `${id}-error` : helperText ? `${id}-helper` : void 0,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex justify-between mt-1", children: [
+        (error || !isValid && inputValue !== "") && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: `${id}-error`, className: "text-sm text-red-900", role: "alert", children: errorMessage || "This field is invalid." }),
+        helperText && isValid && !error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { id: `${id}-helper`, className: "text-sm text-gray-500", children: helperText }),
+        showCount && hasMaxLength && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "p",
+          {
+            className: `text-sm ml-auto ${isOverLimit ? "text-red-600" : "text-gray-500"}`,
+            children: [
+              characterCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
 
 // src/components/Text/index.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var Text = ({
   children,
-  color = "neutral-800",
+  color = "neutral",
+  colorShade = "800",
   size = "md",
   tag = "p",
+  weight = "normal",
+  tracking = "normal",
+  leading = "normal",
+  alignment = "left",
+  truncate = false,
+  italic = false,
+  uppercase = false,
+  lowercase = false,
+  capitalize = false,
   className,
   ...rest
 }) => {
   const fontSize = {
-    xxs: "text-xxs",
+    xxs: "text-xs",
+    // fallback to xs since xxs isn't standard in Tailwind
     xs: "text-xs",
     sm: "text-sm",
-    md: "text-md",
+    md: "text-base",
+    // fixed from 'text-md' to 'text-base'
     lg: "text-lg",
     xl: "text-xl",
     "2xl": "text-2xl",
@@ -3272,22 +3401,88 @@ var Text = ({
     "8xl": "text-8xl",
     "9xl": "text-9xl"
   }[size];
+  const fontWeight = {
+    thin: "font-thin",
+    extralight: "font-extralight",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  }[weight];
+  const letterTracking = {
+    tighter: "tracking-tighter",
+    tight: "tracking-tight",
+    normal: "tracking-normal",
+    wide: "tracking-wide",
+    wider: "tracking-wider",
+    widest: "tracking-widest"
+  }[tracking];
+  const lineHeight = {
+    none: "leading-none",
+    tight: "leading-tight",
+    snug: "leading-snug",
+    normal: "leading-normal",
+    relaxed: "leading-relaxed",
+    loose: "leading-loose"
+  }[leading];
+  const textAlignment = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+    justify: "text-justify"
+  }[alignment];
+  const colorClass = `text-${color}-${colorShade}`;
+  const truncateClass = truncate ? "truncate" : "";
+  const italicClass = italic ? "italic" : "";
+  let transformClass = "";
+  if (uppercase) transformClass = "uppercase";
+  else if (lowercase) transformClass = "lowercase";
+  else if (capitalize) transformClass = "capitalize";
   const Tag = tag;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Tag, { ...rest, className: twMerge(`text-${color} ${fontSize}`, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Tag,
+    {
+      className: twMerge(
+        colorClass,
+        fontSize,
+        fontWeight,
+        letterTracking,
+        lineHeight,
+        textAlignment,
+        truncateClass,
+        italicClass,
+        transformClass,
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
 };
+Text.displayName = "Text";
 
 // src/components/Heading/index.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Heading = ({
   children,
-  color = "neutral-800",
+  color = "neutral",
+  colorShade = "800",
   size = "lg",
   tag = "h2",
-  className
+  weight = "bold",
+  tracking = "normal",
+  alignment = "left",
+  truncate = false,
+  uppercase = false,
+  className,
+  ...rest
 }) => {
   const fontSize = {
     sm: "text-sm",
-    md: "text-md",
+    md: "text-base",
     lg: "text-lg",
     xl: "text-xl",
     "2xl": "text-2xl",
@@ -3299,32 +3494,101 @@ var Heading = ({
     "8xl": "text-8xl",
     "9xl": "text-9xl"
   }[size];
+  const fontWeight = {
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold"
+  }[weight];
+  const letterTracking = {
+    tighter: "tracking-tighter",
+    tight: "tracking-tight",
+    normal: "tracking-normal",
+    wide: "tracking-wide",
+    wider: "tracking-wider",
+    widest: "tracking-widest"
+  }[tracking];
+  const textAlignment = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  }[alignment];
+  const colorClass = `text-${color}-${colorShade}`;
+  const truncateClass = truncate ? "truncate" : "";
+  const uppercaseClass = uppercase ? "uppercase" : "";
   const Tag = tag;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Tag, { className: twMerge(`text-${color} ${fontSize}`, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Tag,
+    {
+      className: twMerge(
+        colorClass,
+        fontSize,
+        fontWeight,
+        letterTracking,
+        textAlignment,
+        truncateClass,
+        uppercaseClass,
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
 };
 
 // src/components/Box/index.tsx
+var import_react7 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Box = ({
+var Box = (0, import_react7.forwardRef)(({
   className,
   children,
   tag = "div",
-  variant = "secondary"
-}) => {
+  variant = "secondary",
+  size = "md",
+  elevated = false,
+  hasBorder = true,
+  isInteractive = false,
+  fullWidth = false,
+  ...props
+}, ref) => {
   const Tag = tag;
+  const variantStyles = {
+    primary: "text-neutral-800 bg-neutral-200 border-neutral-300",
+    secondary: "text-neutral-200 bg-neutral-600 border-neutral-800",
+    ghost: "text-neutral-800 bg-transparent border-transparent",
+    outline: "text-neutral-800 bg-transparent border-neutral-300"
+  };
+  const sizeStyles = {
+    sm: "p-3 text-sm",
+    md: "p-6 text-base",
+    lg: "p-8 text-lg",
+    xl: "p-10 text-xl"
+  };
+  const elevationStyles = elevated ? "shadow-md hover:shadow-lg transition-shadow duration-200" : "";
+  const borderStyles = hasBorder ? "border" : "border-0";
+  const interactiveStyles = isInteractive ? "cursor-pointer hover:brightness-105 active:brightness-95 transition-all duration-200" : "";
+  const widthStyles = fullWidth ? "w-full" : "";
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Tag,
     {
+      ref,
       className: twMerge(
-        "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",
+        "rounded-md",
+        borderStyles,
+        sizeStyles[size],
+        variantStyles[variant],
+        elevationStyles,
+        interactiveStyles,
+        widthStyles,
         className
       ),
+      ...props,
       children
     }
   );
-};
+});
+Box.displayName = "Box";
 
 // src/components/Form/index.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -3373,7 +3637,7 @@ var Avatar = ({ className, ...rest }) => {
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var MultiStep = ({ className, size, currentStep }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { tag: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { tag: "label", color: "primary", size: "xs", children: `Passo ${currentStep} de ${size}` }),
     /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(
         "div",
@@ -3596,7 +3860,7 @@ var Loading = ({
 Loading.displayName = "Loading";
 
 // src/components/Modal/index.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var Modal = ({
   className,
@@ -3611,10 +3875,10 @@ var Modal = ({
   footer,
   ...rest
 }) => {
-  const modalRef = (0, import_react7.useRef)(null);
-  const portalRoot = (0, import_react7.useRef)(null);
-  const [mounted, setMounted] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  const modalRef = (0, import_react8.useRef)(null);
+  const portalRoot = (0, import_react8.useRef)(null);
+  const [mounted, setMounted] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     portalRoot.current = document.createElement("div");
     portalRoot.current.id = "bloom-ui-portal-root";
     document.body.appendChild(portalRoot.current);
@@ -3624,14 +3888,14 @@ var Modal = ({
       document.body.style.overflow = "";
     };
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
       document.body.style.overflow = "";
     }
   }, [isOpen]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (isOpen && closeOnEsc && e.key === "Escape") onClose();
     };
@@ -3692,7 +3956,7 @@ var Modal = ({
 };
 
 // src/components/Toast/index.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var ToastService = class _ToastService {
   constructor() {
@@ -3747,13 +4011,13 @@ var Toast = ({
   onDismiss,
   className
 }) => {
-  const [isRemoving, setIsRemoving] = (0, import_react8.useState)(false);
-  const timerRef = (0, import_react8.useRef)();
+  const [isRemoving, setIsRemoving] = (0, import_react9.useState)(false);
+  const timerRef = (0, import_react9.useRef)();
   const handleDismiss = () => {
     setIsRemoving(true);
     setTimeout(() => onDismiss?.(id), 300);
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (duration > 0) {
       timerRef.current = window.setTimeout(handleDismiss, duration);
     }
@@ -3805,10 +4069,10 @@ var ToastContainer = ({
   position = "top-right",
   className
 }) => {
-  const containerRef = (0, import_react8.useRef)(null);
-  const [isMounted, setIsMounted] = (0, import_react8.useState)(false);
-  const [toasts, setToasts] = (0, import_react8.useState)([]);
-  (0, import_react8.useEffect)(() => {
+  const containerRef = (0, import_react9.useRef)(null);
+  const [isMounted, setIsMounted] = (0, import_react9.useState)(false);
+  const [toasts, setToasts] = (0, import_react9.useState)([]);
+  (0, import_react9.useEffect)(() => {
     const container = document.createElement("div");
     container.id = "toast-root";
     container.className = "fixed z-50 p-4";