aloha-ui-library 0.2.2 → 0.2.4

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useRef, useState, useEffect } from 'react';
-import { Search, Bell, X, AlertCircle, RefreshCw, Loader2 } from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { AlertCircle, EyeOff, Eye, Search, Bell, X, RefreshCw, Info, CheckCircle, Loader2 } from 'lucide-react';
 import { Link as Link$1 } from 'react-router-dom';
 
 function _arrayLikeToArray(r, a) {
@@ -2762,7 +2762,7 @@ var themeVars = {
   primary: 'var(--theme-primary)'
 };
 
-var _excluded$o = ["className", "variant", "size", "loading", "disabled", "color", "textColor", "borderColor", "icon", "children", "style", "borderWidth"];
+var _excluded$q = ["className", "variant", "size", "loading", "disabled", "color", "textColor", "borderColor", "icon", "children", "style", "borderWidth"];
 var buttonVariants = cva('inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
   variants: {
     variant: {
@@ -2799,7 +2799,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style = _ref.style,
     _ref$borderWidth = _ref.borderWidth,
     borderWidth = _ref$borderWidth === void 0 ? 1 : _ref$borderWidth,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   var customStyle = {};
   // Aplicar color de fondo si se especifica
   if (color) {
@@ -2858,7 +2858,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Button.displayName = 'Button';
 
-var _excluded$n = ["className", "children", "font", "weight", "color", "style"],
+var _excluded$p = ["className", "children", "font", "weight", "color", "style"],
   _excluded2$3 = ["className", "children", "font", "weight", "color", "style"],
   _excluded3$2 = ["className", "children", "font", "weight", "color", "style"],
   _excluded4$1 = ["className", "children", "font", "weight", "color", "style"],
@@ -2897,7 +2897,7 @@ var H1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     weight = _ref.weight,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   return jsx("h1", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
@@ -2918,7 +2918,7 @@ var H2 = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     props = _objectWithoutProperties(_ref2, _excluded2$3);
   return jsx("h2", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
+    className: cn('scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
     style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
   }, props), {}, {
     children: children
@@ -3052,17 +3052,37 @@ var Muted = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
 });
 Muted.displayName = 'Muted';
 
-var _excluded$m = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow"],
-  _excluded2$2 = ["className"],
+var _excluded$o = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow", "padding", "margin", "style"],
+  _excluded2$2 = ["className", "padding", "margin", "style"],
   _excluded3$1 = ["className", "font", "weight", "descriptionColor", "small", "children"],
   _excluded4 = ["color"],
-  _excluded5 = ["className"],
-  _excluded6 = ["className"];
+  _excluded5 = ["className", "padding", "margin", "style"],
+  _excluded6 = ["className", "padding", "margin", "style"];
 var sizeClasses$2 = {
   full: 'w-full',
   constrained: 'max-w-md',
   auto: 'w-auto'
 };
+var spacingValues$1 = {
+  none: '0',
+  xs: '0.25rem',
+  sm: '0.5rem',
+  md: '1rem',
+  lg: '1.5rem',
+  xl: '2rem'
+};
+var buildSpacingStyle = function buildSpacingStyle(padding, margin) {
+  var style = {};
+  if (padding !== undefined) {
+    var _spacingValues$paddin;
+    style.padding = (_spacingValues$paddin = spacingValues$1[padding]) !== null && _spacingValues$paddin !== void 0 ? _spacingValues$paddin : padding;
+  }
+  if (margin !== undefined) {
+    var _spacingValues$margin;
+    style.margin = (_spacingValues$margin = spacingValues$1[margin]) !== null && _spacingValues$margin !== void 0 ? _spacingValues$margin : margin;
+  }
+  return style;
+};
 var borderRadiusClasses = {
   none: 'rounded-none',
   sm: 'rounded-sm',
@@ -3128,20 +3148,27 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     borderColor = _ref$borderColor === void 0 ? 'default' : _ref$borderColor,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    padding = _ref.padding,
+    margin = _ref.margin,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded$o);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('text-card-foreground', sizeClasses$2[size], borderRadiusClasses[borderRadius], showBorder ? 'border' : '', showBorder ? getBorderColor(borderColor) : '', getBackgroundColor(backgroundColor), shadow ? 'shadow-sm' : '', className)
+    className: cn('text-card-foreground', sizeClasses$2[size], borderRadiusClasses[borderRadius], showBorder ? 'border' : '', showBorder ? getBorderColor(borderColor) : '', getBackgroundColor(backgroundColor), shadow ? 'shadow-sm' : '', className),
+    style: _objectSpread2(_objectSpread2({}, buildSpacingStyle(padding, margin)), style)
   }, props));
 });
 Card.displayName = 'Card';
-// Subcomponentes flexibles
 var CardHeader = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
+    padding = _ref2.padding,
+    margin = _ref2.margin,
+    style = _ref2.style,
     props = _objectWithoutProperties(_ref2, _excluded2$2);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('flex flex-col space-y-1.5 p-6', className)
+    className: cn('flex flex-col space-y-1.5', padding === undefined ? 'p-6' : '', className),
+    style: _objectSpread2(_objectSpread2({}, buildSpacingStyle(padding, margin)), style)
   }, props));
 });
 CardHeader.displayName = 'CardHeader';
@@ -3212,24 +3239,32 @@ var CardDescription = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
 CardDescription.displayName = 'CardDescription';
 var CardContent = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
   var className = _ref5.className,
+    padding = _ref5.padding,
+    margin = _ref5.margin,
+    style = _ref5.style,
     props = _objectWithoutProperties(_ref5, _excluded5);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('p-6 pt-0', className)
+    className: cn(padding === undefined ? 'p-6 pt-0' : '', className),
+    style: _objectSpread2(_objectSpread2({}, buildSpacingStyle(padding, margin)), style)
   }, props));
 });
 CardContent.displayName = 'CardContent';
 var CardFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
   var className = _ref6.className,
+    padding = _ref6.padding,
+    margin = _ref6.margin,
+    style = _ref6.style,
     props = _objectWithoutProperties(_ref6, _excluded6);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('flex items-center p-6 pt-0', className)
+    className: cn('flex items-center', padding === undefined ? 'p-6 pt-0' : '', className),
+    style: _objectSpread2(_objectSpread2({}, buildSpacingStyle(padding, margin)), style)
   }, props));
 });
 CardFooter.displayName = 'CardFooter';
 
-var _excluded$l = ["className", "src", "alt", "fallback", "size"];
+var _excluded$n = ["className", "src", "alt", "fallback", "size"];
 var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _alt$charAt;
   var className = _ref.className,
@@ -3238,7 +3273,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fallback = _ref.fallback,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     imageFailed = _React$useState2[0],
@@ -3271,7 +3306,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$k = ["className", "variant"];
+var _excluded$m = ["className", "variant"];
 var badgeVariants = cva('inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
   variants: {
     variant: {
@@ -3288,7 +3323,7 @@ var badgeVariants = cva('inline-flex items-center rounded-full border px-2.5 py-
 function Badge(_ref) {
   var className = _ref.className,
     variant = _ref.variant,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   return jsx("div", _objectSpread2({
     className: cn(badgeVariants({
       variant: variant
@@ -3296,7 +3331,33 @@ function Badge(_ref) {
   }, props));
 }
 
-var _excluded$j = ["className", "type", "label", "helperText", "required", "id"];
+var _excluded$l = ["className", "error"];
+var FormError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    error = _ref.error,
+    props = _objectWithoutProperties(_ref, _excluded$l);
+  if (!error) return null;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('flex items-center gap-1.5 mt-1.5', className)
+  }, props), {}, {
+    children: [jsx(AlertCircle, {
+      className: "w-4 h-4",
+      style: {
+        color: colors.coral
+      }
+    }), jsx(P, {
+      className: "text-sm m-0 font-medium",
+      style: {
+        color: colors.coral
+      },
+      children: error
+    })]
+  }));
+});
+FormError.displayName = 'FormError';
+
+var _excluded$k = ["className", "type", "label", "helperText", "required", "id", "error"];
 var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     type = _ref.type,
@@ -3304,7 +3365,18 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperText = _ref.helperText,
     required = _ref.required,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    error = _ref.error,
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showPassword = _useState2[0],
+    setShowPassword = _useState2[1];
+  var isPassword = type === 'password';
+  var inputType = isPassword ? showPassword ? 'text' : 'password' : type;
+  // Determine if type was explicitly set to text by parent but it's meant to be a password
+  // Wait, the parent might already be doing `type={showPassword ? 'text' : 'password'}`
+  // If we handle it internally, we check if `type === 'password'`. If the parent does that, our internal toggle wouldn't work when parent overrides.
+  // However, since we now handle it internally, parents won't need to control the toggle.
   var inputId = id || "input-".concat(Math.random().toString(36).substr(2, 9));
   return jsxs("div", {
     className: "w-full",
@@ -3322,27 +3394,47 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         className: "text-xs text-gray-500 m-0 mt-1 [&:not(:first-child)]:mt-1",
         children: helperText
       })]
-    }), jsx("input", _objectSpread2({
-      type: type,
-      id: inputId,
-      className: cn('flex h-10 w-full rounded-lg border-2 px-3 py-2 text-sm transition-all', 'placeholder:text-gray-500', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', className),
-      style: {
-        borderColor: colors.piedra,
-        backgroundColor: colors.koala
-      },
-      ref: ref,
-      required: required
-    }, props))]
+    }), jsxs("div", {
+      className: "relative",
+      children: [jsx("input", _objectSpread2({
+        type: inputType,
+        id: inputId,
+        className: cn('flex h-10 w-full rounded-lg border-2 px-3 py-2 text-sm transition-all', 'placeholder:text-gray-500', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', isPassword ? 'pr-10' : '',
+        // make room for the eye icon
+        error ? 'border-coral/50' : '',
+        // simple error indication on border
+        className),
+        style: {
+          borderColor: error ? colors.coral : colors.piedra,
+          backgroundColor: colors.koala
+        },
+        ref: ref,
+        required: required
+      }, props)), isPassword && jsx("button", {
+        type: "button",
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 focus:outline-none",
+        onClick: function onClick() {
+          return setShowPassword(!showPassword);
+        },
+        children: showPassword ? jsx(EyeOff, {
+          size: 18
+        }) : jsx(Eye, {
+          size: 18
+        })
+      })]
+    }), error && typeof error === 'string' && jsx(FormError, {
+      error: error
+    })]
   });
 });
 Input.displayName = 'Input';
 
-var _excluded$i = ["className", "label", "id"];
+var _excluded$j = ["className", "label", "id"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -3402,7 +3494,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$h = ["className", "label", "font", "weight", "labelColor", "id"];
+var _excluded$i = ["className", "label", "font", "weight", "labelColor", "id"];
 var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
@@ -3410,7 +3502,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     weight = _ref.weight,
     labelColor = _ref.labelColor,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var switchId = id || "switch-".concat(Math.random().toString(36).substr(2, 9));
   return jsxs("div", {
     className: "flex items-center space-x-3",
@@ -3436,11 +3528,11 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Switch.displayName = 'Switch';
 
-var _excluded$g = ["className", "onSearch"];
+var _excluded$h = ["className", "onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onSearch = _ref.onSearch,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter' && onSearch) {
       onSearch(e.currentTarget.value);
@@ -3460,7 +3552,7 @@ var SearchInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 SearchInput.displayName = 'SearchInput';
 
-var _excluded$f = ["type", "title", "message", "timestamp", "avatar", "read", "onClose", "onClick", "className"];
+var _excluded$g = ["type", "title", "message", "timestamp", "avatar", "read", "onClose", "onClick", "className"];
 var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var type = _ref.type,
     title = _ref.title,
@@ -3472,7 +3564,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClose = _ref.onClose,
     onClick = _ref.onClick,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var typeColors = {
     like: 'text-red-500',
     comment: 'text-blue-500',
@@ -3523,7 +3615,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Notification.displayName = 'Notification';
 
-var _excluded$e = ["className", "text", "component", "font", "weight", "textColor", "lineColor", "lineThickness", "avatars", "avatarRingColor", "rightSlot"];
+var _excluded$f = ["className", "text", "component", "font", "weight", "textColor", "lineColor", "lineThickness", "avatars", "avatarRingColor", "rightSlot"];
 // ── Color de la línea (herencia del original) ─────────────────────
 var getLineColorClass = function getLineColorClass(color) {
   if (!color || color === 'default') return 'bg-gray-300';
@@ -3562,7 +3654,7 @@ var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     avatars = _ref.avatars,
     avatarRingColor = _ref.avatarRingColor,
     rightSlot = _ref.rightSlot,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var renderText = function renderText() {
     var commonProps = {
       font: font,
@@ -3636,7 +3728,7 @@ var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 TextDivider.displayName = 'TextDivider';
 
-var _excluded$d = ["className", "children", "color", "hoverColor", "underline", "external"],
+var _excluded$e = ["className", "children", "color", "hoverColor", "underline", "external"],
   _excluded2$1 = ["to"],
   _excluded3 = ["href", "target", "rel"];
 var getColorClass = function getColorClass(color) {
@@ -3700,7 +3792,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     underline = _ref$underline === void 0 ? 'hover' : _ref$underline,
     _ref$external = _ref.external,
     external = _ref$external === void 0 ? false : _ref$external,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var linkClasses = cn('inline-flex items-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', getColorClass(color), hoverColor ? '' : getHoverColorClass(color), getUnderlineClass(underline), className);
   // Si tiene la prop "to", usar React Router Link
   if ('to' in props && props.to) {
@@ -3741,7 +3833,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Link.displayName = 'Link';
 
-var _excluded$c = ["src", "alt", "width", "height", "objectFit", "loading", "fallbackSrc", "onError", "className"];
+var _excluded$d = ["src", "alt", "width", "height", "objectFit", "loading", "fallbackSrc", "onError", "className"];
 var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -3754,7 +3846,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fallbackSrc = _ref.fallbackSrc,
     onError = _ref.onError,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var _React$useState = React.useState(src),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     imgSrc = _React$useState2[0],
@@ -3818,82 +3910,133 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Image.displayName = 'Image';
 
+// ─── helpers ────────────────────────────────────────────────────────────────
+var spacingValues = {
+  none: '0',
+  xs: '0.25rem',
+  sm: '0.5rem',
+  md: '1rem',
+  lg: '1.5rem',
+  xl: '2rem'
+};
+var resolveSpacing = function resolveSpacing(val) {
+  var _spacingValues$val;
+  return (_spacingValues$val = spacingValues[val]) !== null && _spacingValues$val !== void 0 ? _spacingValues$val : val;
+};
+/** Width cap for non-fullscreen variants */
+var panelMaxWidth = {
+  sm: '24rem',
+  // 384px
+  md: '32rem',
+  // 512px
+  lg: '48rem',
+  // 768px
+  xl: '64rem',
+  // 1024px
+  full: '100%'
+};
+// ─── component ───────────────────────────────────────────────────────────────
 var Popup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var open = _ref.open,
     onClose = _ref.onClose,
-    title = _ref.title,
-    children = _ref.children,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'ice' : _ref$backgroundColor,
+    overlayColor = _ref.overlayColor,
+    borderRadius = _ref.borderRadius,
+    className = _ref.className,
+    title = _ref.title,
+    _ref$titleComponent = _ref.titleComponent,
+    titleComponent = _ref$titleComponent === void 0 ? 'h3' : _ref$titleComponent,
+    titleFont = _ref.titleFont,
+    _ref$titleWeight = _ref.titleWeight,
+    titleWeight = _ref$titleWeight === void 0 ? 'bold' : _ref$titleWeight,
+    _ref$titleColor = _ref.titleColor,
+    titleColor = _ref$titleColor === void 0 ? 'corteza' : _ref$titleColor,
+    _ref$showHeaderDivide = _ref.showHeaderDivider,
+    showHeaderDivider = _ref$showHeaderDivide === void 0 ? true : _ref$showHeaderDivide,
     _ref$showCloseButton = _ref.showCloseButton,
     showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
     _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
     closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
-    className = _ref.className,
-    footer = _ref.footer;
+    _ref$contentPadding = _ref.contentPadding,
+    contentPadding = _ref$contentPadding === void 0 ? 'lg' : _ref$contentPadding,
+    children = _ref.children,
+    footer = _ref.footer,
+    _ref$showFooterDivide = _ref.showFooterDivider,
+    showFooterDivider = _ref$showFooterDivide === void 0 ? true : _ref$showFooterDivide;
+  // ── side effects ──────────────────────────────────────────────────────
   React.useEffect(function () {
-    if (open) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
-    }
+    document.body.style.overflow = open ? 'hidden' : 'unset';
     return function () {
       document.body.style.overflow = 'unset';
     };
   }, [open]);
   React.useEffect(function () {
-    var handleEscape = function handleEscape(e) {
-      if (e.key === 'Escape' && open) {
-        onClose();
-      }
+    var handler = function handler(e) {
+      if (e.key === 'Escape' && open) onClose();
     };
-    document.addEventListener('keydown', handleEscape);
+    document.addEventListener('keydown', handler);
     return function () {
-      return document.removeEventListener('keydown', handleEscape);
+      return document.removeEventListener('keydown', handler);
     };
   }, [open, onClose]);
   if (!open) return null;
-  var sizeClasses = {
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    full: 'max-w-full mx-4'
-  };
-  var handleOverlayClick = function handleOverlayClick(e) {
-    if (e.target === e.currentTarget && closeOnOverlayClick) {
-      onClose();
-    }
+  // ── derived values ────────────────────────────────────────────────────
+  var isFull = size === 'full';
+  var maxW = panelMaxWidth[size];
+  var padding = resolveSpacing(contentPadding);
+  var TitleTag = titleComponent === 'h4' ? H4 : H3;
+  var handleOverlay = function handleOverlay(e) {
+    if (e.target === e.currentTarget && closeOnOverlayClick) onClose();
   };
-  return jsx("div", {
-    className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-    onClick: handleOverlayClick,
+  // ── render ────────────────────────────────────────────────────────────
+  return /* ── Overlay ── */jsx("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    style: {
+      backgroundColor: overlayColor !== null && overlayColor !== void 0 ? overlayColor : 'rgba(0,0,0,0.45)'
+    },
+    onClick: handleOverlay,
     children: jsxs("div", {
       ref: ref,
-      className: cn('relative w-full animate-in fade-in-0 zoom-in-95 rounded-lg bg-background shadow-lg', sizeClasses[size], className),
+      role: "dialog",
+      "aria-modal": "true",
+      className: cn(/* always fills the full height so the content can scroll inside */
+      'relative flex flex-col w-full overflow-hidden shadow-2xl', /* full-screen: no margin, no rounding; others: centered with padding */
+      isFull ? 'inset-0 rounded-none h-screen' : 'max-h-[90vh] mx-4 my-auto', className),
+      style: {
+        maxWidth: isFull ? '100vw' : maxW,
+        backgroundColor: colors[backgroundColor],
+        borderRadius: isFull ? 0 : borderRadius !== null && borderRadius !== void 0 ? borderRadius : '0.75rem'
+      },
       onClick: function onClick(e) {
         return e.stopPropagation();
       },
       children: [(title || showCloseButton) && jsxs("div", {
-        className: "flex items-center justify-between border-b p-4",
-        children: [title && jsx("h2", {
-          className: "text-lg font-semibold",
+        className: cn('flex-shrink-0 flex items-center justify-between px-5 py-4', showHeaderDivider ? 'border-b border-black/10' : ''),
+        children: [title ? jsx(TitleTag, {
+          font: titleFont,
+          weight: titleWeight,
+          color: titleColor,
+          className: "leading-none m-0 p-0",
           children: title
-        }), showCloseButton && jsxs("button", {
+        }) : jsx("span", {}) /* spacer so X stays right */, showCloseButton && jsx("button", {
           onClick: onClose,
-          className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-          children: [jsx(X, {
-            className: "h-4 w-4"
-          }), jsx("span", {
-            className: "sr-only",
-            children: "Close"
-          })]
+          "aria-label": "Cerrar",
+          className: cn('ml-auto rounded-lg p-1.5 transition-all', 'opacity-60 hover:opacity-100 hover:bg-black/8', 'focus:outline-none focus:ring-2 focus:ring-black/20'),
+          children: jsx(X, {
+            className: "h-5 w-5"
+          })
         })]
       }), jsx("div", {
-        className: "p-6",
+        className: "flex-1 overflow-y-auto",
+        style: {
+          padding: padding
+        },
         children: children
       }), footer && jsx("div", {
-        className: "border-t p-4",
+        className: cn('flex-shrink-0 px-5 py-4', showFooterDivider ? 'border-t border-black/10' : ''),
         children: footer
       })]
     })
@@ -3942,6 +4085,80 @@ var Error = function Error(_ref) {
   });
 };
 
+var _excluded$c = ["message", "type", "onClose", "duration", "className", "position"];
+var Toast = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var message = _ref.message,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'error' : _ref$type,
+    onClose = _ref.onClose,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 3000 : _ref$duration,
+    className = _ref.className,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'bottom-center' : _ref$position,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  useEffect(function () {
+    if (duration > 0) {
+      var timer = setTimeout(onClose, duration);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [duration, onClose]);
+  var typeConfig = {
+    error: {
+      icon: jsx(AlertCircle, {
+        className: "w-5 h-5 text-white"
+      }),
+      bgColor: colors.coral
+    },
+    success: {
+      icon: jsx(CheckCircle, {
+        className: "w-5 h-5 text-white"
+      }),
+      bgColor: colors.lima
+    },
+    info: {
+      icon: jsx(Info, {
+        className: "w-5 h-5 text-white"
+      }),
+      bgColor: colors.electrico
+    }
+  };
+  var config = typeConfig[type];
+  var positionClasses = {
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4'
+  };
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('fixed z-50 flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg min-w-[300px] animate-in fade-in slide-in-from-bottom-5', positionClasses[position], className),
+    style: {
+      backgroundColor: config.bgColor
+    },
+    role: "alert"
+  }, props), {}, {
+    children: [jsx("div", {
+      className: "flex-shrink-0",
+      children: config.icon
+    }), jsx(P, {
+      className: "text-white m-0 font-medium flex-1 text-sm",
+      children: message
+    }), jsx("button", {
+      onClick: onClose,
+      className: "flex-shrink-0 text-white opacity-70 hover:opacity-100 transition-opacity focus:outline-none",
+      children: jsx(X, {
+        className: "w-4 h-4"
+      })
+    })]
+  }));
+});
+Toast.displayName = 'Toast';
+
 var Loading = function Loading(_ref) {
   var message = _ref.message,
     className = _ref.className,
@@ -4835,7 +5052,7 @@ var PatternFill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PatternFill.displayName = 'PatternFill';
 
-var _excluded$1 = ["className", "variant", "logoVariant", "logoSize", "logoColor", "backgroundColor", "textColor", "activeColor", "navItemsBgColor", "buttonColor", "buttonTextColor", "buttonBorderColor", "currentLanguage", "onLanguageClick", "onActionClick", "customLogo", "isRegister", "buttonText", "navItems", "navigate"];
+var _excluded$1 = ["className", "variant", "logoVariant", "logoSize", "logoColor", "backgroundColor", "textColor", "activeColor", "activeIconColor", "navItemsBgColor", "buttonColor", "buttonTextColor", "buttonBorderColor", "currentLanguage", "onLanguageClick", "onActionClick", "customLogo", "isRegister", "buttonText", "navItems", "navigate"];
 var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
@@ -4852,6 +5069,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     textColor = _ref$textColor === void 0 ? 'piedra' : _ref$textColor,
     _ref$activeColor = _ref.activeColor,
     activeColor = _ref$activeColor === void 0 ? 'bosque' : _ref$activeColor,
+    activeIconColor = _ref.activeIconColor,
     _ref$navItemsBgColor = _ref.navItemsBgColor,
     navItemsBgColor = _ref$navItemsBgColor === void 0 ? 'hueso' : _ref$navItemsBgColor,
     buttonColor = _ref.buttonColor,
@@ -4885,7 +5103,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return jsxs("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('w-full px-6 py-3 flex items-center justify-between', 'border-b border-black/10', className),
+    className: cn('px-6 py-3 flex items-center justify-between', 'rounded-xl m-3', className),
     style: {
       backgroundColor: variant === 'nologin' ? colors[backgroundColor] : 'transparent'
     }
@@ -4949,7 +5167,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             children: jsx(Icon, {
               name: item.icon,
               size: "sm",
-              color: item.active ? 'ice' : textColor
+              color: item.active ? activeIconColor !== null && activeIconColor !== void 0 ? activeIconColor : 'ice' : textColor
             })
           }), jsx("span", {
             children: item.label
@@ -5306,5 +5524,5 @@ var ColorPalette = function ColorPalette(_ref2) {
   });
 };
 
-export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ColorPalette, ColorSwatch, Emoji, Error, ErrorFullScreen, FriendListItem, FullPage, Grid, GridItem, H1, H2, H3, H4, Icon, Image, Input, Lead, Link, Loading, LoadingFullScreen, Logo, Muted, Navbar, Notification, P, Pattern, PatternFill, PatternGroup, Popup, QuestionCard, SearchInput, Small, Streak, Subtitle, Switch, TextDivider, badgeVariants, buttonVariants, cn, colorEntries, colors, cssVars, getColor, getCssVar, themeVars };
+export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ColorPalette, ColorSwatch, Emoji, Error, ErrorFullScreen, FormError, FriendListItem, FullPage, Grid, GridItem, H1, H2, H3, H4, Icon, Image, Input, Lead, Link, Loading, LoadingFullScreen, Logo, Muted, Navbar, Notification, P, Pattern, PatternFill, PatternGroup, Popup, QuestionCard, SearchInput, Small, Streak, Subtitle, Switch, TextDivider, Toast, badgeVariants, buttonVariants, cn, colorEntries, colors, cssVars, getColor, getCssVar, themeVars };
 //# sourceMappingURL=index.esm.js.map