@koaris/bloom-ui 1.2.5 → 1.2.6

package/dist/index.cjs

@@ -3034,6 +3034,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 +3196,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 +3402,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 +3495,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 +3638,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 +3861,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 +3876,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 +3889,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 +3957,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 +4012,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 +4070,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";

package/dist/index.d.cts

@@ -66,7 +66,7 @@ interface CheckboxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>
 }
 declare const Checkbox: ({ className, required, disabled }: CheckboxProps) => react_jsx_runtime.JSX.Element;
 
-type InputType = 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep' | 'email';
+type InputType = 'text' | 'password' | 'date' | 'datePicker' | 'cpf' | 'phone' | 'cnpj' | 'cep' | 'email';
 interface PasswordValidation {
     hasEightCharacters: boolean;
     hasSpecialCharacters: boolean;
@@ -105,42 +105,81 @@ interface TextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInput
 }
 declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
 
-interface TextAreaProps extends DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+type TextAreaSize = 'sm' | 'md' | 'lg';
+type TextAreaVariant = 'primary' | 'secondary' | 'outline';
+type TextAreaType = 'text' | 'markdown' | 'code' | 'json';
+interface TextAreaProps extends Omit<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'type'> {
     disabled?: boolean;
-    reference?: React.RefObject<HTMLTextAreaElement>;
     placeholder?: string;
     value?: string;
     validated?: boolean;
-    error: boolean;
+    error?: boolean;
     required?: boolean;
-    resize?: boolean;
-    type: 'text' | 'password' | 'date' | 'cpf' | 'phone' | 'cnpj' | 'cep';
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    type?: TextAreaType;
+    errorMessage?: string;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    label?: string;
+    helperText?: string;
+    maxLength?: number;
+    minRows?: number;
+    maxRows?: number;
+    size?: TextAreaSize;
+    variant?: TextAreaVariant;
+    showCount?: boolean;
+    autoGrow?: boolean;
 }
-declare const TextArea: ({ className, disabled, reference, value, error, required, placeholder, resize, onClick, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;
+declare const TextArea: react.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & react.RefAttributes<HTMLTextAreaElement>>;
 
-interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLLabelElement>, HTMLLabelElement> {
+interface TextProps extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
     children: ReactNode;
-    color?: string;
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+    colorShade?: '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
     size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-    tag?: 'p' | 'strong' | 'span' | 'label';
+    tag?: 'p' | 'span' | 'label' | 'strong' | 'em' | 'small' | 'div';
+    weight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+    tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
+    leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
+    alignment?: 'left' | 'center' | 'right' | 'justify';
+    truncate?: boolean;
+    italic?: boolean;
+    uppercase?: boolean;
+    lowercase?: boolean;
+    capitalize?: boolean;
     htmlFor?: string;
 }
-declare const Text: ({ children, color, size, tag, className, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
+declare const Text: {
+    ({ children, color, colorShade, size, tag, weight, tracking, leading, alignment, truncate, italic, uppercase, lowercase, capitalize, className, ...rest }: TextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-interface HeadingProps extends DetailedHTMLProps<HTMLAttributes<HTMLHeadElement>, HTMLHeadElement> {
+interface HeadingProps extends DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> {
     children: React.ReactNode;
-    color?: string;
+    color?: 'primary' | 'secondary' | 'accent' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+    colorShade?: '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
     size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
-    tag?: 'h1' | 'h2' | 'h3' | 'h4';
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+    tracking?: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
+    alignment?: 'left' | 'center' | 'right';
+    truncate?: boolean;
+    uppercase?: boolean;
 }
-declare const Heading: ({ children, color, size, tag, className, }: HeadingProps) => react_jsx_runtime.JSX.Element;
+declare const Heading: ({ children, color, colorShade, size, tag, weight, tracking, alignment, truncate, uppercase, className, ...rest }: HeadingProps) => react_jsx_runtime.JSX.Element;
 
+type BoxVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
+type BoxSize = 'sm' | 'md' | 'lg' | 'xl';
 interface BoxProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     children: React.ReactNode;
-    tag?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer';
-    variant?: 'primary' | 'secondary';
+    tag?: 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'nav';
+    variant?: BoxVariant;
+    size?: BoxSize;
+    elevated?: boolean;
+    hasBorder?: boolean;
+    isInteractive?: boolean;
+    fullWidth?: boolean;
 }
-declare const Box: ({ className, children, tag, variant, }: BoxProps) => react_jsx_runtime.JSX.Element;
+declare const Box: react.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 interface FormProps extends DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
     children: React.ReactNode;
@@ -251,4 +290,4 @@ declare const ToastProvider: react__default.FC<{
     children: react__default.ReactNode;
 }>;
 
-export { Avatar, type AvatarProps, Box, type BoxProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardDirection, type CardProps, type CardSize, Checkbox, type CheckboxProps, Form, type FormProps, Heading, type HeadingProps, Input, type InputProps, type InputType, Link, type LinkProps, Loading, type LoadingColor, type LoadingProps, type LoadingSize, Modal, type ModalProps, MultiStep, type MultiStepProps, type PasswordValidation, type PhoneFormat, RadioGroup, type RadioGroupProps, Skeleton, type SkeletonProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextProps, Toast, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, ToastProvider, type ToastVariant, Toggle, type ToggleProps, toastService, useToast };
+export { Avatar, type AvatarProps, Box, type BoxProps, type BoxSize, type BoxVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardDirection, type CardProps, type CardSize, Checkbox, type CheckboxProps, Form, type FormProps, Heading, type HeadingProps, Input, type InputProps, type InputType, Link, type LinkProps, Loading, type LoadingColor, type LoadingProps, type LoadingSize, Modal, type ModalProps, MultiStep, type MultiStepProps, type PasswordValidation, type PhoneFormat, RadioGroup, type RadioGroupProps, Skeleton, type SkeletonProps, Text, TextArea, type TextAreaProps, type TextAreaSize, type TextAreaType, type TextAreaVariant, TextInput, type TextInputProps, type TextProps, Toast, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, ToastProvider, type ToastVariant, Toggle, type ToggleProps, toastService, useToast };