aloha-ui-library 0.2.3 → 0.2.5

package/dist/index.js

@@ -2764,7 +2764,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: {
@@ -2801,7 +2801,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) {
@@ -2860,7 +2860,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"],
@@ -2899,7 +2899,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 jsxRuntime.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),
@@ -3054,7 +3054,7 @@ var Muted = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
 });
 Muted.displayName = 'Muted';
 
-var _excluded$m = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow", "padding", "margin", "style"],
+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"],
@@ -3153,7 +3153,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     padding = _ref.padding,
     margin = _ref.margin,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   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),
@@ -3266,7 +3266,7 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
 });
 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,
@@ -3275,7 +3275,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],
@@ -3308,7 +3308,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: {
@@ -3325,7 +3325,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 jsxRuntime.jsx("div", _objectSpread2({
     className: cn(badgeVariants({
       variant: variant
@@ -3333,7 +3333,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 jsxRuntime.jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('flex items-center gap-1.5 mt-1.5', className)
+  }, props), {}, {
+    children: [jsxRuntime.jsx(lucideReact.AlertCircle, {
+      className: "w-4 h-4",
+      style: {
+        color: colors.coral
+      }
+    }), jsxRuntime.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,
@@ -3341,7 +3367,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 = React.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 jsxRuntime.jsxs("div", {
     className: "w-full",
@@ -3359,27 +3396,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
       })]
-    }), jsxRuntime.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))]
+    }), jsxRuntime.jsxs("div", {
+      className: "relative",
+      children: [jsxRuntime.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 && jsxRuntime.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 ? jsxRuntime.jsx(lucideReact.EyeOff, {
+          size: 18
+        }) : jsxRuntime.jsx(lucideReact.Eye, {
+          size: 18
+        })
+      })]
+    }), error && typeof error === 'string' && jsxRuntime.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),
@@ -3439,7 +3496,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,
@@ -3447,7 +3504,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 jsxRuntime.jsxs("div", {
     className: "flex items-center space-x-3",
@@ -3473,11 +3530,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);
@@ -3497,7 +3554,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,
@@ -3509,7 +3566,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',
@@ -3560,7 +3617,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';
@@ -3599,7 +3656,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,
@@ -3673,7 +3730,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) {
@@ -3737,7 +3794,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) {
@@ -3778,7 +3835,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,
@@ -3791,7 +3848,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],
@@ -4030,6 +4087,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);
+  React.useEffect(function () {
+    if (duration > 0) {
+      var timer = setTimeout(onClose, duration);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [duration, onClose]);
+  var typeConfig = {
+    error: {
+      icon: jsxRuntime.jsx(lucideReact.AlertCircle, {
+        className: "w-5 h-5 text-white"
+      }),
+      bgColor: colors.coral
+    },
+    success: {
+      icon: jsxRuntime.jsx(lucideReact.CheckCircle, {
+        className: "w-5 h-5 text-white"
+      }),
+      bgColor: colors.lima
+    },
+    info: {
+      icon: jsxRuntime.jsx(lucideReact.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 jsxRuntime.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: [jsxRuntime.jsx("div", {
+      className: "flex-shrink-0",
+      children: config.icon
+    }), jsxRuntime.jsx(P, {
+      className: "text-white m-0 font-medium flex-1 text-sm",
+      children: message
+    }), jsxRuntime.jsx("button", {
+      onClick: onClose,
+      className: "flex-shrink-0 text-white opacity-70 hover:opacity-100 transition-opacity focus:outline-none",
+      children: jsxRuntime.jsx(lucideReact.X, {
+        className: "w-4 h-4"
+      })
+    })]
+  }));
+});
+Toast.displayName = 'Toast';
+
 var Loading = function Loading(_ref) {
   var message = _ref.message,
     className = _ref.className,
@@ -5411,6 +5542,7 @@ exports.ColorSwatch = ColorSwatch;
 exports.Emoji = Emoji;
 exports.Error = Error;
 exports.ErrorFullScreen = ErrorFullScreen;
+exports.FormError = FormError;
 exports.FriendListItem = FriendListItem;
 exports.FullPage = FullPage;
 exports.Grid = Grid;
@@ -5442,6 +5574,7 @@ exports.Streak = Streak;
 exports.Subtitle = Subtitle;
 exports.Switch = Switch;
 exports.TextDivider = TextDivider;
+exports.Toast = Toast;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;