@koaris/bloom-ui 1.2.4 → 1.2.6

package/dist/index.mjs

@@ -2787,7 +2787,6 @@ var phoneFormats = {
   "UK": { countryCode: "+44", format: "$1 $2 $3" },
   "DE": { countryCode: "+49", format: "$1 $2 $3" },
   "FR": { countryCode: "+33", format: "$1 $2 $3 $4" }
-  // Add more countries as needed
 };
 var Input = forwardRef2(
   ({
@@ -2991,6 +2990,8 @@ var Input = forwardRef2(
           return "password";
         case "email":
           return "email";
+        case "datePicker":
+          return "date";
         case "date":
         case "cpf":
         case "phone":
@@ -3004,15 +3005,15 @@ var Input = forwardRef2(
     const renderPhonePrefix = () => {
       if (type !== "phone") return null;
       const format = phoneFormats[countryCode] || phoneFormats["BR"];
-      return /* @__PURE__ */ jsx6("span", { className: "absolute left-2 top-2.5 text-gray-500", children: format.countryCode });
+      return /* @__PURE__ */ jsx6("span", { className: "absolute left-3 top-1.5 text-gray-500", children: format.countryCode });
     };
     const inputClasses = twMerge(
-      "flex items-center justify-center border-2 border-neutral rounded-sm w-full px-3 py-2 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none transition-all duration-200",
+      "flex items-center justify-center border-2 border-gray-400 rounded-sm w-full px-3 py-1 text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none transition-all duration-200",
       className,
       disabled && "opacity-50 cursor-not-allowed",
       selected && "border-2 border-orange-500",
       validated && isValid && "border-2 border-green-900",
-      error && "border-2 border-red-900",
+      (error || !isValid && inputValue != "") && "border-2 border-red-900",
       type === "phone" && "pl-10"
     );
     const renderPasswordValidation = () => {
@@ -3155,76 +3156,205 @@ TextInput.displayName = "TextInput";
 // src/components/TextArea/index.tsx
 import {
   useEffect as useEffect3,
-  useState as useState5
+  useState as useState5,
+  forwardRef as forwardRef4
 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var TextArea = ({
-  className,
-  disabled,
-  reference,
-  value,
-  error,
-  required,
-  placeholder,
-  resize,
-  onClick,
-  ...rest
-}) => {
-  const [selected, setSelected] = useState5(false);
-  const [inputValue, setInputValue] = useState5(value);
-  const handleFocus = () => {
-    setSelected(!selected);
-  };
-  const handleBlur = () => {
-    setSelected(false);
-  };
-  const handleInput = (event) => {
-    setInputValue(event.currentTarget.value);
-  };
-  useEffect3(() => {
-    setInputValue(value);
-  }, [value]);
-  return /* @__PURE__ */ jsx8(
-    "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"
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var TextArea = forwardRef4(
+  ({
+    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] = useState5(false);
+    const [inputValue, setInputValue] = useState5(value || "");
+    const [isValid, setIsValid] = useState5(true);
+    const [rows, setRows] = useState5(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);
+      }
+    };
+    useEffect3(() => {
+      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__ */ jsxs7("div", { className: "w-full", children: [
+      label && /* @__PURE__ */ jsxs7(
+        "label",
+        {
+          htmlFor: id,
+          className: "block text-sm font-medium text-gray-700 mb-1",
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx8("span", { className: "text-red-500 ml-1", children: "*" })
+          ]
+        }
       ),
-      onClick,
-      onFocus: handleFocus,
-      onChange: handleInput,
-      onBlur: handleBlur,
-      placeholder,
-      value: inputValue,
-      ...rest
-    }
-  );
-};
+      /* @__PURE__ */ jsx8(
+        "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__ */ jsxs7("div", { className: "flex justify-between mt-1", children: [
+        (error || !isValid && inputValue !== "") && /* @__PURE__ */ jsx8("p", { id: `${id}-error`, className: "text-sm text-red-900", role: "alert", children: errorMessage || "This field is invalid." }),
+        helperText && isValid && !error && /* @__PURE__ */ jsx8("p", { id: `${id}-helper`, className: "text-sm text-gray-500", children: helperText }),
+        showCount && hasMaxLength && /* @__PURE__ */ jsxs7(
+          "p",
+          {
+            className: `text-sm ml-auto ${isOverLimit ? "text-red-600" : "text-gray-500"}`,
+            children: [
+              characterCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
 
 // src/components/Text/index.tsx
 import { jsx as jsx9 } from "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",
@@ -3236,22 +3366,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__ */ jsx9(Tag, { ...rest, className: twMerge(`text-${color} ${fontSize}`, className), children });
+  return /* @__PURE__ */ jsx9(
+    Tag,
+    {
+      className: twMerge(
+        colorClass,
+        fontSize,
+        fontWeight,
+        letterTracking,
+        lineHeight,
+        textAlignment,
+        truncateClass,
+        italicClass,
+        transformClass,
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
 };
+Text.displayName = "Text";
 
 // src/components/Heading/index.tsx
 import { jsx as jsx10 } from "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",
@@ -3263,32 +3459,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__ */ jsx10(Tag, { className: twMerge(`text-${color} ${fontSize}`, className), children });
+  return /* @__PURE__ */ jsx10(
+    Tag,
+    {
+      className: twMerge(
+        colorClass,
+        fontSize,
+        fontWeight,
+        letterTracking,
+        textAlignment,
+        truncateClass,
+        uppercaseClass,
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
 };
 
 // src/components/Box/index.tsx
+import { forwardRef as forwardRef5 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var Box = ({
+var Box = forwardRef5(({
   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__ */ jsx11(
     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
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -3334,10 +3599,10 @@ var Avatar = ({ className, ...rest }) => {
 };
 
 // src/components/MultiStep/index.tsx
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var MultiStep = ({ className, size, currentStep }) => {
-  return /* @__PURE__ */ jsxs7("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsx14(Text, { tag: "label", color: "neutral-100", size: "xs", children: `Passo ${currentStep} de ${size}` }),
+  return /* @__PURE__ */ jsxs8("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx14(Text, { tag: "label", color: "primary", size: "xs", children: `Passo ${currentStep} de ${size}` }),
     /* @__PURE__ */ jsx14("div", { className: `grid gap-2 grid-cols-${size} grid-flow-col mt-1`, children: Array.from(Array(size).keys()).map((_, index) => {
       return /* @__PURE__ */ jsx14(
         "div",
@@ -3355,7 +3620,7 @@ var MultiStep = ({ className, size, currentStep }) => {
 };
 
 // src/components/Toggle/index.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var Toggle = ({
   className,
   disabled,
@@ -3394,7 +3659,7 @@ var Toggle = ({
       }
     }
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: twMerge("flex items-center gap-3", className),
@@ -3475,7 +3740,7 @@ var Skeleton = ({
 Skeleton.displayName = "Skeleton";
 
 // src/components/Loading/index.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var Loading = ({
   size = "md",
   color = "primary",
@@ -3503,7 +3768,7 @@ var Loading = ({
     md: "text-base",
     lg: "text-lg"
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: twMerge(
@@ -3513,7 +3778,7 @@ var Loading = ({
       ),
       role: "status",
       children: [
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           "svg",
           {
             className: twMerge(
@@ -3561,7 +3826,7 @@ Loading.displayName = "Loading";
 
 // src/components/Modal/index.tsx
 import { useEffect as useEffect4, useState as useState6, useRef } from "react";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 var Modal = ({
   className,
   isOpen,
@@ -3622,7 +3887,7 @@ var Modal = ({
       "aria-modal": "true",
       role: "dialog",
       ...rest,
-      children: /* @__PURE__ */ jsxs10(
+      children: /* @__PURE__ */ jsxs11(
         "div",
         {
           ref: modalRef,
@@ -3633,7 +3898,7 @@ var Modal = ({
             className
           ),
           children: [
-            (title || showCloseButton) && /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: [
+            (title || showCloseButton) && /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700", children: [
               title && /* @__PURE__ */ jsx18("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100", children: title }),
               showCloseButton && /* @__PURE__ */ jsx18(
                 "button",
@@ -3657,7 +3922,7 @@ var Modal = ({
 
 // src/components/Toast/index.tsx
 import { useEffect as useEffect5, useState as useState7, useRef as useRef2 } from "react";
-import { Fragment, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
 var ToastService = class _ToastService {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set();
@@ -3735,7 +4000,7 @@ var Toast = ({
     warning: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
     info: /* @__PURE__ */ jsx19("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx19("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: twMerge(
@@ -3747,7 +4012,7 @@ var Toast = ({
       role: "alert",
       children: [
         /* @__PURE__ */ jsx19("div", { className: `flex-shrink-0 mr-3 text-${variant}-500`, children: icons[variant] }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "flex-1", children: [
           title && /* @__PURE__ */ jsx19("h3", { className: "font-medium text-sm", children: title }),
           /* @__PURE__ */ jsx19("div", { className: "text-sm", children: message })
         ] }),
@@ -3814,7 +4079,7 @@ var useToast = () => {
   };
 };
 var ToastProvider = ({ position = "top-right", children }) => {
-  return /* @__PURE__ */ jsxs11(Fragment, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment, { children: [
     children,
     /* @__PURE__ */ jsx19(ToastContainer, { position })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koaris/bloom-ui",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "Bloom-ui is a public design system from the Koaris Project developed with React, Typescript, and Tailwind.",
   "source": "./src/index.ts",
   "type": "module",