aloha-ui-library 0.2.2 → 0.2.3

package/dist/index.js

@@ -2920,7 +2920,7 @@ var H2 = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     props = _objectWithoutProperties(_ref2, _excluded2$3);
   return jsxRuntime.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
@@ -3054,17 +3054,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$m = ["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',
@@ -3130,20 +3150,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,
+    padding = _ref.padding,
+    margin = _ref.margin,
+    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded$m);
   return jsxRuntime.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 jsxRuntime.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';
@@ -3214,19 +3241,27 @@ 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 jsxRuntime.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 jsxRuntime.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';
@@ -3820,82 +3855,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'
+  // ── 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();
   };
-  var handleOverlayClick = function handleOverlayClick(e) {
-    if (e.target === e.currentTarget && closeOnOverlayClick) {
-      onClose();
-    }
-  };
-  return jsxRuntime.jsx("div", {
-    className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-    onClick: handleOverlayClick,
+  // ── render ────────────────────────────────────────────────────────────
+  return /* ── Overlay ── */jsxRuntime.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: jsxRuntime.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) && jsxRuntime.jsxs("div", {
-        className: "flex items-center justify-between border-b p-4",
-        children: [title && jsxRuntime.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 ? jsxRuntime.jsx(TitleTag, {
+          font: titleFont,
+          weight: titleWeight,
+          color: titleColor,
+          className: "leading-none m-0 p-0",
           children: title
-        }), showCloseButton && jsxRuntime.jsxs("button", {
+        }) : jsxRuntime.jsx("span", {}) /* spacer so X stays right */, showCloseButton && jsxRuntime.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: [jsxRuntime.jsx(lucideReact.X, {
-            className: "h-4 w-4"
-          }), jsxRuntime.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: jsxRuntime.jsx(lucideReact.X, {
+            className: "h-5 w-5"
+          })
         })]
       }), jsxRuntime.jsx("div", {
-        className: "p-6",
+        className: "flex-1 overflow-y-auto",
+        style: {
+          padding: padding
+        },
         children: children
       }), footer && jsxRuntime.jsx("div", {
-        className: "border-t p-4",
+        className: cn('flex-shrink-0 px-5 py-4', showFooterDivider ? 'border-t border-black/10' : ''),
         children: footer
       })]
     })
@@ -4837,7 +4923,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,
@@ -4854,6 +4940,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,
@@ -4887,7 +4974,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return jsxRuntime.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'
     }
@@ -4951,7 +5038,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             children: jsxRuntime.jsx(Icon, {
               name: item.icon,
               size: "sm",
-              color: item.active ? 'ice' : textColor
+              color: item.active ? activeIconColor !== null && activeIconColor !== void 0 ? activeIconColor : 'ice' : textColor
             })
           }), jsxRuntime.jsx("span", {
             children: item.label